Merge pull request #8 from SystemEngineeringTeam/add/c-lang/beginner/setup

add: C 言語/基礎コース/環境構築

Author: wappon28dev

astro.config.mjs

@@ -14,11 +14,7 @@ export default defineConfig({
   integrations: [
     metaTags(),
     compress({
-      HTML: {
-        "html-minifier-terser": {
-          removeAttributeQuotes: false,
-        },
-      },
+      HTML: false,
       CSS: false,
     }),
     partytown({
@@ -36,6 +32,7 @@ export default defineConfig({
           lang: "ja",
         },
       },
+      tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 4 },
       logo: {
         src: "./src/assets/icons/logo/sym.svg",
       },
@@ -110,6 +107,16 @@ export default defineConfig({
       [remarkMermaid, { themes: ["dark", "neutral"] }],
       [wikiLinkPlugin, { markdownFolder: "src/content/docs" }],
     ],
+    rehypePlugins: [
+      [
+        rehypeExternalLinks,
+        {
+          target: "_blank",
+          rel: ["noopener", "noreferrer"],
+          content: { type: "text", value: " ↗" },
+        },
+      ],
+    ],
   },
   vite: {
     plugins: [

bun.lockb

@@ -0,0 +1,123 @@
+---
+import { Image } from "astro:assets";
+
+// ref: https://sysken.esa.io/posts/841
+const SYSCAT = {
+  DEFAULT:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/02/14/138598/35cad701-0542-471f-b4ce-a09678edb673.PNG",
+  /// チラッ
+  EYES:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/06/06/138598/92239f09-18e6-4f48-854c-feaaa999f59b.PNG",
+  /// わ～い！
+  RAISEDHANDS:
+    "https://img.esa.io/uploads/production/attachments/19973/2023/11/30/138598/d254a365-33e6-4ee3-8caf-4c20df402264.PNG",
+  /// キラキラ :syscat-kirakira:
+  SPARKLES:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/01/11/138598/d24414af-e785-4f6d-98cc-25685bc1f2e9.png",
+  /// ドヤッ :syscat-doyaru:
+  BRAGGING:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/03/06/138598/b74322eb-4eb6-4390-acfd-757233c1edf7.PNG",
+  /// キュン :syscat_love:
+  LOVE:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/02/06/138598/4857664f-5d49-4c5a-9f32-f2656045a5d7.PNG",
+  /// これ！
+  HERE:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/02/07/138598/c37aee0f-f8eb-47ce-81a3-2f9877769ec3.PNG",
+  /// すやすや
+  SLEEPING:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/02/14/138598/53e27e1f-9ccc-4e35-b92e-1da8c773fa38.PNG",
+  /// グッ :syscat_ok:
+  OK:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/06/06/138598/317b8911-8ad0-48ae-81d1-659e3ca90924.PNG",
+  /// うわ～ん :syscat_cry:
+  CRYING:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/06/06/138598/2c5bfd4f-8c07-41ef-8975-64a5109ef804.PNG",
+  /// う～ん？
+  CONFUSED:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/04/09/138598/8834cd16-2cfb-491d-aab9-bd273517355a.PNG",
+  /// チラチラ
+  PEEKING:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/04/09/138598/566a0b54-f603-4d42-b755-8287f17e6e2c.PNG",
+  /// えっ :syscat_human:
+  HUMAN:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/04/17/138598/add0a929-1711-4f32-b29f-14b310a0831e.PNG",
+  /// ぱ～ん！ :syscat_medetai:
+  TADA:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/05/06/138598/cf2ce79a-3dfe-4041-bcf7-08ba3d866380.PNG",
+  /// ストン
+  SITTING:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/05/09/138598/5d9cf28b-685e-43ac-a197-d294dfd249f8.PNG",
+  /// びっくり :syscat_bikkuri:
+  SURPRISED:
+    "https://img.esa.io/uploads/production/attachments/19973/2024/06/06/138598/ff9f29a8-f572-47b2-aa5b-f9df8ff86014.PNG",
+} as const;
+
+type Props = {
+  type?: keyof typeof SYSCAT;
+};
+
+const { type } = Astro.props as Props;
+
+---
+
+<div class="syscat-comment">
+  <div class="content-wrapper">
+    <div><slot /></div>
+    <div />
+  </div>
+  <Image
+    alt=""
+    inferSize
+    src={SYSCAT[type ?? "DEFAULT"]}
+  />
+</div>
+
+<style>
+
+.syscat-comment {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  container-type: inline-size;
+
+  & > .content-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+
+    & :first-child {
+      width: 100%;
+      min-height: 5rem;
+      border-radius: 0.5rem;
+      background-color: var(--sl-color-hairline);
+      padding: 1rem;
+      display: grid;
+      align-content: center;
+    }
+
+    & :last-child {
+      width: 1.25rem;
+      height: 1.25rem;
+      clip-path: polygon(100% 45%, 0 0, 0 100%);
+      background-color: var(--sl-color-hairline);
+      margin-block: 0 10px;
+      margin-inline-start: -1px;
+    }
+
+  }
+
+  & > img {
+    height: 5rem;
+    width: auto;
+    margin-top: 0 !important;
+    margin-inline-start: 0.5rem;
+
+    @container (max-width: 30rem) {
+      height: 3rem;
+    }
+  }
+}
+
+</style>

src/components/SyscatComment.astro

@@ -3,102 +3,154 @@ title: 環境構築
 description: このチャプターでは、快適に XCode/VSCode で快適な C 言語を書くための秘訣を教えます。
 ---
 
-import { Aside } from "@astrojs/starlight/components";
+import { Aside, Steps, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components'
+import SyscatComment from "@/components/SyscatComment.astro"
+export const CLI_OR_GUI_SYNC_KEY = 'c-lang/beginner::cli-or-gui';
+export const COMPILER_SYNC_KEY = 'c-lang/beginner::compiler';
+
+## 私はどの環境で開発すれば？
+
+過去の講義資料を基にしたゆる～い案内です。 確実に授業に即しているかは分からないけど、自分の PC などで試すときは参考にしてください。
+
+- EE （電気学科/電気工学専攻）  
+   <LinkCard
+      title="“VSBT 経由の MSVC” の節へ"
+      href="#vsbt-経由の-msvcclexe"
+   />
+
+- EV （電気学科/電子情報工学専攻）  
+   <LinkCard
+      title="“w64devkit 経由の MinGW” の節へ"
+      href="#w64devkit-経由の-mingw"
+   />
+- KK （情報科学科/コンピュータシステム専攻）  
+   <LinkCard
+   title="“構築: エディター環境 - XCode” の節へ"
+   href="#xcode"
+   />
+- KX （情報科学科/メディア情報専攻）  
+   <LinkCard
+   title="“構築: エディター環境 - XCode” の節へ"
+   href="#xcode"
+   />
+
+
+## 構築: コンパイラー環境
+
+### Windows 
+
+<Aside type="tip" title="用語">
+
+- VSBT（Visual Studio Build Tools）  
+   Visual C++ のコンパイラーを含む、プログラムのコンパイルをコマンドラインから行なうツールセット
+- Visual Studio Installer  
+   VSBT を構成する各種コンポーネントの インストール/アンインストール を行うツール
+- PowerShell  
+   Windows に標準でインストールされているコマンドラインツール
 
-<Aside type="caution">
+</Aside>
 
-前バージョンの Cook Zip をお使いの方へ  
-バージョンアップが必要です！ [下のセクション ↗](#前バージョンの%20Cook%20Zip%20をお使いの方へ) で確認してください。
+#### VSBT 経由の MSVC（`cl.exe`）
 
-</Aside>
+<Steps>
 
-皆さん XCode には慣れましたか？ C 言語とはお友達になれましたか？
+1. Visual Studio Installer をインストールする  
 
-VSCode で C 言語を快適に書くために..。
+   <Tabs syncKey={CLI_OR_GUI_SYNC_KEY}>
+      <TabItem label="CLI">
 
-- F5 (Fn + F5) での自動コンパイル & 実行
-- 自動補完 (IntelliSense)
-- ブレークポイントでのデバッグ
-- エラーのインライン表示
-  などなど多数の機能を簡単に使えるようにした zip を配布します。
+      <kbd>Win</kbd> → `powershell` → <kbd>Enter</kbd> で PowerShell を起動します（ショートカット: <kbd>Win</kbd> + <kbd>X</kbd> → <kbd>I</kbd>）。  
+      その後、次のコマンドを実行して Visual Studio Installer をインストールします [^vsbt-winget]:
 
-動作環境は macOS のみです. ご自由にお使いください。
-URL: https://assets.wappon28.dev/public/AIT/c-lang-base.zip
+      ```powershell
+      winget install Microsoft.VisualStudio.2022.BuildTools
+      ```
 
-<video controls width="480" alt="2024-05-23_0.03.33.mp4 (6.6 MB)" src="https://esa-storage-tokyo.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/19973/2024/06/12/163736/2e5af6a7-605d-4a78-b6d5-a369a813bdea.mp4"></video>
+      インストールの完了後、自動的に Visual Studio Installer が起動します。
+      もし起動しない場合は、スタートメニューから “Visual Studio Installer” を検索して起動してください。
 
-あと、提出物 (ZIP) を作るちょっとしたプログラムを作りました！ コンピューターリテラシーで導入したであろう HomeBrew を使ってインストールとアップデートができます. ターミナルや、VSCode 内のターミナルで
+      </TabItem>
+      <TabItem label="GUI">
+      [Build Tools for Visual Studio 2022 - Microsoft](https://visualstudio.microsoft.com/ja/downloads/#build-tools-for-visual-studio-2022) にアクセスし、“ダウンロード” ボタンをクリックします。  
+      その後、ダウンロードされた `vs_BuildTools.exe` をクリックし、Visual Studio Installer を起動します。
+      </TabItem>
+   </Tabs>
 
-```sh
-brew install wappon28dev/tap/cook-zip
-```
+2. VSBT をインストールする  
 
-をしたあと,
+   “C++ によるデスクトップ開発” にチェックを入れ、
+   - “MSVC v143 - VS 2022 C++ x64/x86 ビルド ツール（最新）”  
+      （バージョンは変動する可能性アリ）
+   - “Windows 用 C++ CMake ツール”  
 
-```sh
-cook-zip
-```
+   の 2 つにチェックを入れます。その後、“変更” をクリックします。
 
-とすると、対話式のプログラムが起動するので、それに従うと提出物が作成されます！ 次のコマンドはどこの作業ディレクトリーでも実行できます。
+   ![](./_images/202504050150.drawio.png)
 
-<video controls width="480" alt="-5971937336374499908.mp4 (4.2 MB)" src="https://esa-storage-tokyo.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/19973/2024/06/16/163736/8a2f8169-9eaf-4061-a0d7-57a258d4905c.mp4"></video>
+   インストールが完了するまで待機します。
+   ![](./_images/202504050211.png)
 
-あと、書き出された zip は一時ディレクトリに保存されているので、内容物を確認後、自身でバックアップしてくださいね。
+   <SyscatComment type="SLEEPING">PC やネットワークの速度によっては時間を要するから、お茶でも飲んでゆっくり待ってね。</SyscatComment>
 
-また、提出物のフォーマットが変更される場合も考慮して、簡単にアップデートできるように,
+3. MSVC のバージョンを特定する
 
-```sh
-brew upgrade cook-zip
-```
+   <Tabs syncKey={CLI_OR_GUI_SYNC_KEY}>
+      <TabItem label="CLI">
 
-と打つとできるようにしました. 指示があった場合にすると良いと思います！
+      PowerShell で次のコマンドを実行し、どのバージョンがインストールされているかを確認します:
 
-### 前バージョンの Cook Zip をお使いの方へ
+      ```powershell
+      ls -name "C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Tools\MSVC"
+      ```
 
-> [!NOTE]
-> tl;dr
->
-> 1. 数回前から提出物のフォーマットが変更された
-> 1. それに伴って、Cook Zip をアップデートする必要がある
-> 1. 既に存在する Cook Zip を削除し、新しいバージョンを `brew install wappon28dev/tap/cook-zip` でインストールする
+      すると、次のような出力が得られます（例）:
 
-2 回前あたりから、課題、チャレンジ問題の提出物のフォーマットが変更されました.  
-具体的には、学籍番号の `k` が大文字から小文字に変更されました。
+      ```powershell
+      14.43.34808
+      ```
 
-[第 6 回](https://cms.aitech.ac.jp/pluginfile.php/527782/mod_resource/content/3/issues06.md.html#提出するファイル構成-1) ... [第 8 回](https://cms.aitech.ac.jp/pluginfile.php/527790/mod_resource/content/3/issues08.md.html#提出するファイル構成-1) - 演習問題と課題の詳細資料 - Moodle (7 回目は課題なし)
+      これが、MSVC のバージョン番号の一例です。 これをメモしておきます。
 
-```diff
- - k2****_issues.zip
--  - 06_issue1_K20000.c
--  - 06_challenge1_K20000.c // 任意提出
- - k2****_issues.zip
-+  - 08_issue1_k20000.c
-+  - 08_challenge1_k20000.c // 任意提出
-```
+      <Aside>
+         Visual Studio Installer でインストールする際、“インストールの場所” を変更した際は、`ls` の引数のパスを変更する必要があります。
+      </Aside>
 
-それに伴い、Cook Zip のバージョンアップが必要です。
+      </TabItem>
+      <TabItem label="GUI">
 
-第 8 回でケースの変更に私が気づくことができず、Cook Zip ユーザーのほとんどが大文字のまま提出されているかと思います. 確認の術はありませんが、減点されていた場合は申し訳ないです。
+      エクスプローラーで、MSVC が含まれるフォルダー
+      ```text
+      C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Tools\MSVC
+      ```
+      に移動します。 (ショートカット: パスをコピー後、<kbd>Win</kbd> + <kbd>R</kbd> → <kbd>Ctrl</kbd> + <kbd>V</kbd> → <kbd>Enter</kbd>)
+      
+      ![](./_images/202504050344.drawio.png)
 
-(一応、追加情報を入れておくと、macOS で使われているディスクフォーマットである APFS は、ファイル名の大文字小文字を区別しない[^1] ので、もしかしたら問題になっていないかもしれません.)
+      作業フォルダー内にあるフォルダーの名前が MSVC のバージョン番号の一例です。 これをメモしておきます。
 
-第 9 回の提出にはまだ時間があるので、次の手順で Cook Zip のバージョンアップを行ってください。
+      <Aside>
+         Visual Studio Installer でインストールする際、“インストールの場所” を変更した際は、“ファイル名を指定して実行” のパスを変更する必要があります。
+      </Aside>
 
-1. 旧バージョンの Cook Zip を削除 (Finder や VSCode 上から削除 または `rm ./cook-zip`)
-1. 新バージョンの Cook Zip をインストール
+      </TabItem>
+   </Tabs>
 
-   ```sh
-   brew install wappon28dev/tap/cook-zip
-   ```
 
-1. 新しいバージョンで再度、提出物を作成  
-   次のコマンドはどこの作業ディレクトリーでも実行できます。
+4. 環境変数を設定する  
+
+   MSVC のバージョンが特定できたら、次に示すパス中の緑の箇所を特定したバージョンに置き換え、クリップボードやメモ帳などにコピーしておきます [^vsbt-path]:
+   ```text ins="{MSVC ver.}"
+   C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Tools\MSVC\{MSVC ver.}\bin\Hostx64\x64
+   ```
 
-   ```sh
-   cook-zip
+   e.g. `14.43.34808`:
+   ```text ins="14.43.34808"
+   C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Tools\MSVC\14.43.34808\bin\Hostx64\x64
    ```
 
-また今後のために、`brew upgrade cook-zip` でアップデートできるようにしてあります。
+   パスの準備ができたら、 <kbd>Win</kbd> → `env` で “環境変数を編集” を起動します。  
+   その後、ユーザー環境変数セクションの `Path` (下図の赤枠) をダブルクリックします。
+   ![](./_images/202504050355.drawio.png)
 
 [^1]: [Mac の大文字と小文字を区別するファイルシステムとの非互換性 - Steam サポート ↗](https://help.steampowered.com/ja/faqs/view/0395-A862-13F3-6E82#:~:text=%E3%80%8CJournaled%20HFS%E3%80%8D%E3%80%81%E3%80%8CAPFS,%E3%81%93%E3%81%A8%E3%82%92%E7%A4%BA%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)