群馬高専電算部公式ホームページを作りました！！！！

ということで、2024年度より作ろう作ろうとやってきてついに...ついに！新ホームページが完成しました！！（ドンドンパチパチ）
このブログは記念すべき初めのブログ...なんですか？責任重大ですね、、、少しでも責任が軽くなるようにテスト用に作った吉野家のブログは残してもらいたいところです。

話が逸れましたが、このブログでは初ブログとしてチームでホームページを作る際の苦労やコツをいつかの誰かの助けになるように残していこうと思います。

さまりー

このホームページは群馬工業高等専門学校 電算部のホームページです。製作はおもに電算部のWeb班6人で行いました。

使用したフレームワークはAstro、コンテンツの管理はmicroCMS、公開にはGitHub Pagesを使っています。

群馬高専 電算部とは

主にプログラミングなどパソコンぽちぽちを日々極めている部活です。（←これ結構分かりやすく表せているよね？？）

電算部の中には、AtCoderなどを極める競技プログラミング班、Unityでゲーム製作をするゲーム班、LinuxやWebのバックエンドなどを扱うセキュリティ班、Webのフロントエンドを扱うWeb開発班、ロゴ製作や3Dモデル製作を行うデザイン班の5つの班があります。

ウェブサイトの製作について

分担

2025年度4月からの活動ではこのような感じで分担しました。イメージとしてはページごとに分担するようになっています。

• maru さん
  • プロジェクト管理
  • microCMS周りの管理
• nanashino77 さん
  • figmaでのデザイン作成
  • magazinesページのコーディング
• ゆーてぃー さん
  • newsページのコーディング
• ZIMMAD さん
  • blogページのコーディング
• nirocon (さん)
  • topページのコーディング
  • aboutページのコーディング
• HRAK さん
  • 共通部分（ウィンドウ表示やフッター）のコーディング

製作の流れ

2025年度4月から技術や手順の見直しを行い、一気にプロジェクトが進みました。

Figma

Figma使おうとか言い出した方は誰ですか？天才ですか？

何ピクセルかまでわかる具体的な完成イメージの共有や気軽な修正を可能にできるため、Figmaを使ったのはかなり効果的だったと思います。

React

React難しい！！！（いや、勉強すればいいだけなんですがね、全員がほどほどにでも使いこなすのはちょっと...）

当初、電算部のウェブサイト製作にはReactを使おうとしていました。しかし、我々には少々難しく断念しAstroで製作することにしました。

Astro

JS、HTML、CSSを一つのファイルにまとめて完結させられるようなフレームワークです。結構分かりやすくて良かったです。クライアント側でjsをゴリゴリに動かすときはAstro単体では不便でした。(どうしてもscriptタグでベタ書きになってしまう...)

Gitの管理

Gitの管理、プロジェクトの管理はmaruさんが中心となり行いました。ページや機能ごとにブランチを作り、週に一回の集まっての活動でマージするように開発を進めていきました。

ポータブル版 VSCode

エディターの拡張機能や設定など開発環境を共通にするために、通常のVSCodeとは別に設定を構築できるポータブル版VSCodeを使用しました。VSCodeのアップデートがしにくいなどの弱点もあり、今後の開発ではVSCodeのプロファイルという機能も検討しています。

PDF JS

ほぼ公式のチュートリアルのままで導入できたらしいです。強いていうなら、ウィンドウのサイズに合わせてpdfの表示倍率を調整するのがむずかしかったそうです。

さいごに

ここまで、読んでくださりありがとうございます。何かの参考になりましたでしょうか？このブログはこんな感じでぼちぼち書いていくと思いますので、よろしくお願いします。
(Reactも頑張ります)