# 工華祭のWebサイトについて(1)
## はじめに
こんにちは、 4Jの [@butsuli_shine](https://twitter.com/butsuli_shine)です。
群馬高専 Advent Calender の9日目の記事を書こうと思います。
遅れてすみません😭
最近疲労感がすごくて、憂鬱です🤨
テストは終わりましたが、再試がいっぱいあって辛いです。
群馬高専辛いです。
あと一年ちょっとなので踏ん張ろうと思います。
群馬高専の先輩方ほんと尊敬してます。
話がそれましたが、タイトルにもある通り、テーマは第23回工華祭のWebサイトを制作したことについてです。技術的な内容になってしまいますが、出来るだけわかりやすく書こうと思いますので読んでいただけると嬉しいです。
技術選定までかけました‼️
続きは来週に書くと思います。
一応、次回の工華祭のサイトの制作の際の参考になればと思います。
コードは [Github](https://github.com/gKokasai/23rd.kokasai.com) に上がっています。
## ✏️ アジェンダ
1. 要件定義
1. 技術選定
## 🔖 要件定義
まず、文化祭の宣伝のサイトとして、どのような情報が必要なのかを挙げました。
1. トップページ
2. アクセス
3. 企画一覧
4. 諸注意ページ
5. ステージ企画のタイムテーブル
## 🛠 技術選定
要件定義で挙げた内容を実装するのに必要な技術を調べました。
Webサイトを実装するのにおいて必要な言語は以下の通りです。
- HTML
- CSS
- JavaScript
HTML/CSSはJ科以外の学科でも授業で扱ったことがあるかと思います。
### JavaScript
JavaScript というのは HTML/CSS といったマークアップ言語 を動的に生成、変更したり、ブラウザを操作したりすることができるプログラミング言語です。
Java とは全く異なります。
元々は LiveScript という名前だったですが、当時 Java が流行っていたため、JavaScript という名前に変えたそうです。
上にあげた、3つの言語をベースとして開発していくわけですが、生の JavaScript (JavaScriptをそのまま書く) という方法だと、結構大変です。
そこで、 React というライブラリを導入しました。
今でこそ言えるのですが、この判断は間違っていたと思います。
React というライブラリは SPA(Single Page Application = 一つのページで完結するアプリ)を実装できるのですが、SEO(Search Engine Optimization=検索エンジンへの最適化)に弱いという欠点があります。宣伝用のサイトにも関わらず検索しても上位にでてこないっていうのは致命的ですよね😭
### スタイリング
CSS も生のままだと扱いづらいので、楽に書く方法を調べました。
#### コンポーネントライブラリ
コンポーネントライブラリというのはすでにデザインのスペシャリストの方などが設計して UI/UX に配慮、洗練された部品がすぐに使えるライブラリです。
例えば、 Material UI (https://mui.com) というライブラリがあるのですが、その中の [List Component](https://mui.com/components/lists/#basic-list) をすぐに使えたりします。
このデザインどこかで見たことありませんか❓
そうです‼️
Google のアプリなどで使われているデザインです。
しかし、このようなデザインされたものを使うのもいいのですが、宣伝用のサイトですので見慣れたデザインというのもつまらないです。なのでもう少し自由度のあるライブラリを使いたいと思いました。
#### Tailwind CSS
[Tailwind CSS](https://tailwindcss.com) というのは スタイリングをする際に CSS を書くのではなく、HTMLタグの class 属性に Tailwind CSS が定義したクラス名を指定することで該当のスタイルが適用されるといううものです。
生の HTML/CSS で書くと以下のようになりますが
```htmlbars=
<html>
<head>
<link rel="stylesheet" src="./style.css"></link>
</head>
<body>
<header>ヘッダー</header>
<main>メイン</main>
<footer>フッター</footer>
</body>
</html>
```
```css=
header {
background-color: blue;
}
main {
background-color: green;
}
footer {
background-color: blue;
}
```
Tailwind CSS を使うとこのように書けます。
HTML/CSS を書くより簡単ですね。
上のコンポーネントライブラリを使用する方法と比べて、デザインの自由度が高いことがわかります。
このことから、スタイリングには Tailwind CSS を採用しました。
Tailwind CSS の デメリットとしては、複雑なデザインにしようとしたときに、クラス名が長くなってしまい、コードの可読性が低下してしまうことが挙げられます。コードの可読性 <-> 実装の簡単さ がトレードオフの関係になっています。
```htmlbars=
<html>
<head>
</head>
<body>
<header class="bg-blue-200">ヘッダー</header>
<main class="bg-green-200">メイン</main>
<footer class="bg-blue-200">フッター</footer>
</body>
</html>
```
#### その他
- CSS in JS
- Styled Component
etc...
### デプロイ環境
SPA のデプロイ環境としては、静的Webサイトホスティングサービスにデプロイする方法。サーバーを借りて、Webサーバーを立てて、デプロイする方法があります。
後者は有料の場合が多いので、前者にしました。
- Netlify
- Vercel
- Github Pages
- AWS S3
- Heroku
このようなサービスがあるのですが、カスタムドメインが使える点と、従量課金ではない点、Github でコード管理していたため、1番手軽で使いやすそうな Github Pages を採用しました。
ここはそんなに迷わなかったです。
### バージョン管理
バージョン管理には、メジャーな Git/GitHub を使用しました。
[gKokasai](https://github.com/gKokasai) というOrganization のリポジトリで開発しました。
開発フローは、Git Flowを採用して適切な粒度のPRを心がけて(難しい)、masterブランチ、developブランチ、 featureブランチとブランチ分けをしました。
Git のコマンドである、 rebase, merge, fetch, pull などの知識が付きました。
実際にチーム開発をすると、Git の知識が付くのでおすすめです‼️
ホスティングサービスでは使わなかった Netlify ですが、PRを出した時にそのPRで変更したコードをデプロイして、プレビューが見れる機能があります。PRをレビューするときにローカル環境に落としてくる必要がないのでとても楽ですね
参考: [Netlify の Deploy Previews 機能を使ってプレビュー環境を自動で生成して確認する](https://blog.gaji.jp/2020/03/25/3048/)
### 使用はしていないが導入してみたかった技術
- StoryBook
コンポーネントごとのプレビュー、テストができるツール。
- Next.js
使ってみたい
## 次回に続く