所属ゼミのホームページを作ったときの話

はじめに

Reactで所属しているゼミのホームページを作りました。現在トップページのみ完成しており他のページへのリンクがない状態ですが、今後も少しずつ作り込んでいきたい思っています。

また、既存のサイトを参考にしながら作りました。特に、明治大学武田ゼミさんのホームページはナビゲーションバーや全体のレイアウトを整える際に参考とさせていただきました。

この記事を通して、ホームページを自分で作ってみたい方や就職活動でポートフォリオ何を作ろうか迷っている方の参考になれば嬉しいです。

目次

1. 概要
   - GitHubリポジトリ
   - 使用技術
   - 機能一覧

2. このプロダクトを作ろうと思ったきっかけ？

3. なぜその技術構成？

4. 工夫したところ
   - レスポンシブデザイン
   - シンプルなUI

5. 苦労したところ
   - デプロイに時間がかかった
   - スマホで見たときの挙動

6. 参考記事

7. まとめ

1. 概要

GitHubリポジトリ：

ポートフォリオURL：

使用技術

• React
• Next.js
• Node.js
• Vercel
• Typescript
• Bootstrap
• Chakra UI
• Swiper

機能一覧

活動内容：

年間スケジュールやゼミの概要について知ることができます。

過去の活動：

ゼミの過去の活動について見ることができます

ゼミ生紹介：

ゼミに所属している3回生のプロフィールを見ることができます

問い合わせフォーム：

問い合わせフォームからゼミに対し問い合わせができます。

Q＆A：

ゼミの説明会やインスタグラムのDMでいただいた質問を見ることができます。

選考：

ゼミの選考についての情報を知ることができます。

このプロダクトを作ろうと思ったきっかけ？

ゼミに応募しようか迷っている学生や、自分の大学を志望している高校生に向けて、自分たちの活動を知ってほしいという目的で制作しました。

自分の所属する学部では2回生の7月ごろからゼミの説明会が行われ、8,9月頃に選考が行われるのですが、いくつかのゼミで説明会の日程が被っていたり、説明会に参加してもゼミの概要しかわからなかったりすることが多く、ゼミに応募しようか迷っている学生にとって情報が少ないことが課題でした。

そこで、過去の活動やゼミ生のプロフィールを見られるようにホームページを制作しようと考えました。現在、ゼミのホームページがあるところは自分たちのゼミ以外になく、差別化もできました。さらに、インスタグラムで発信する場合と比較して、サイトを経由してゼミ生と直接コンタクトを取ったり、就職活動や履修の不安を相談するなど、プラットフォームとしての機能を持たせることも可能になるというメリットがあります。

今後は学生のニーズに応じてサイトを拡張するか別のアプリケーションを作るかという形で、学生の課題解決に繋げていきたいです。

なぜその技術構成？

この技術構成を選んだ理由は3つあります。

• コンポーネントの再利用性と拡張性
• 便利なツールやライブラリ
• 他の技術との比較

1. コンポーネントの再利用性と拡張性

もともと静的なHTML、CSS、JavaScriptを使ってトップページを完成させていましたが、サイトの機能拡張が進むにつれ、各ページのルーティングや要素の再利用が容易になる仕組みが必要となりました。Reactを選んだのは、コンポーネントベースの設計により、UI要素を再利用でき、ページの追加や変更がスムーズに行えるためです。例えば、新しいページを作成する際には、pagesディレクトリに新しいファイルを追加するだけでよく、既存のコンポーネントを再利用することで開発時間が大幅に短縮されました。この結果、ページ追加にかかる時間を減らすことができ、効率的に拡張できる体制を整えることができました。

2. 便利なツールやライブラリ

開発効率を高めるために、v0とChakra UIを活用しました。v0については、グリッドレイアウトを実装する際に使用し、UI全体の構造を簡潔かつ柔軟に設計しました。また、Chakra ****UIについては、ボタンやカードコンポーネントを作成する際に活用し、直感的な操作でシンプルかつ美しいUIを構築できました。これらのライブラリを利用することで、UIデザインや機能の追加を効率的に行うことができ、開発スピードが大幅に向上しました。

3. 他の技術との比較

Reactを選んだ理由は、他の技術スタックとの比較を行った結果でもあります。Vue.jsやAngularといった他のフレームワークもありましたが、Reactはコンポーネントベースの柔軟な設計と、豊富なエコシステムがあり、特に情報リソースが多い点で効率よく開発ができるという点で採用しました。また、ReactはNext.jsやNode.jsと非常に相性が良く、SSR（サーバーサイドレンダリング）やCSR（クライアントサイドレンダリング）を柔軟に使い分けることができるため、プロジェクトのスケーラビリティとパフォーマンスの最適化が可能でした。

将来の改善点と拡張性

今後、プロジェクトをさらに発展させるためには、サーバーサイドレンダリング（SSR）やクライアントサイドレンダリング（CSR）のハイブリッドアプローチを取り入れ、SEO対策や初期ロード時間の改善も図りたいと考えています。

工夫したところ

工夫したところは以下の2点です。

• 学生がスマホで見ることを想定したレスポンシブデザイン
• ReactとJavaScriptライブラリを利用したシンプルなUI

1. 学生がスマホで見ることを想定したレスポンシブデザイン

学生がスマートフォンでサイトを閲覧することを想定し、レスポンシブデザインを工夫しました。特に、ナビゲーションバーをハンバーガーメニューに切り替え、スマホでも快適に使えるようにしました。また、Swiperを用いたスライダーは、スマホでは1枚ずつ表示されるように自動調整し、視覚的な情報がスムーズに伝わるよう配慮しています。さらに、レスポンシブ設計が難しい他のReactコンポーネントの使用を避け、デバイスごとに統一感のあるデザインを保つよう工夫しました。

2. ReactコンポーネントとJavaScriptライブラリを活用したシンプルなUI

ReactコンポーネントとJavaScriptライブラリを活用し、シンプルで直感的なUIを実現しました。具体的には、v0を使ってグリッドレイアウトを効率的に設計し、変更にも柔軟に対応できる構造を構築しました。また、JavaScriptライブラリについてはSwiperでスライダー機能を実装し、デフォルトで表示画像を1枚にしています。これにより、シンプルで機能的なデザインを目指しました。

苦労したところ

苦労した点は主に以下の2つです。

• デプロイに時間がかかった
• スマホで見たときの挙動

1. デプロイに時間がかかった

Vercelにデプロイする際、Prettierの厳しいフォーマット基準により、ローカルで正常に動作していたコードでも修正が必要になることが多く、作業が複雑化しました。さらに、ローカル環境とデプロイ環境での挙動に違いがあり、特にナビゲーションバーの開閉やコンポーネントの配置が期待通りに動作しないことがありました。この問題に対しては、何度もデプロイを繰り返しながら修正を行う必要があり、手間がかかりました。

2.スマホで見たときの挙動

学生向けにレスポンシブデザインを導入しているため、スマートフォンでの動作確認が重要でした。特に、スマホでナビゲーションバーを開いた際の表示崩れや、画面サイズに応じたコンポーネントの配置が意図した通りにならないという問題が発生しました。これを解決するため、メディアクエリを使ったレイアウトの調整や、コンポーネントのサイズを慎重に調整し、スマホでも統一されたデザインと動作を実現しました。

参考記事

以下が制作時に参考にしたサイトです。

既存のホームページ

明治大学武田ゼミナール：

ラララたかひら：

早稲田大学ディズニー研究会：

Crich：

Apple公式サイト：

緑会合唱団：

東京大学E.S.S

Reactについて

Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。：

React 基本機能とHooksのおさらい：

React公式ドキュメント：

JavaScript - ES2015(ES6) 記法 - React で使いそうなもの

【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript：

TypeScriptについて

TypeScriptの型入門：

Chakra UI

Chakra UI公式ドキュメント：