N高のキャンフェスのサイトを作った話



この記事は [N 高等学校 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/n-highschool)の 7 日目の記事です。初めてアドベントカレンダーに投稿しますがよろしくお願います。

昨日は[@hinatao3o](https://qiita.com/hinatao3o)さんの[高校・インターン2年生の2020年振り返り
](https://qiita.com/hinatao3o/items/4e54d9a4fb56240b6212)でした。 ~~(インターン行ったことないから行ってみたいけど時間がない)~~

さて今から書いていくのは、今年のキャンパスフェスティバルがオンラインでやることになったのでそのために webサイトを作ったのでそれについて振り返ります。

## どんなサイトを作ったの?

自分の通ってるキャンパスのキャンフェスのサイトを作りました。

ソースコード→https://github.com/Mochichi2003/Campus-festival

![screenSchott](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375045/f0ff33cf-932a-8ec7-0436-e4826d82bb2b.png)

上の画像みたいな感じです

# 作るのに使ったもの


- フレームワーク[Next.js](https://nextjs.org/)
- CSS フレームワーク[tailwindcss](https://tailwindcss.com/)
- [React](https://ja.reactjs.org/)
- [TypeScrpt](https://www.typescriptlang.org/)
  ..etc

## なんで Next.js で作ったの?

今回のキャンフェスは例のウイルスのせいでオンラインで開催されることになったので N 高の通学コースごとにサイトを作って開催することになったのでサイトを作りました。Next.js を採用したのは、Next.js はもともと他に候補のあった goolge site や wix に比べて圧倒的に軽く自分でほぼ全てをカスタマイズできるこれを選びました。[Gatsbyjs](https://www.gatsbyjs.com/)も採用しようかと考えましたが自分が Next.js の仕組みのほうが好きなのと。Gatsbyjs をほとんど使ったことがなかったので採用しませんでした。

# サイトを作るのに意識したところ

- サイトを軽くして読み込み速度を早くする

他の殆どキャンパスは多分 wix とか google site とかを使って作るだろうと重くなると思ったので Next.js の特徴である[Fast Refresh](https://nextjs.org/docs/basic-features/fast-refresh)を最大限利用して読み込みが早いサイトを作ろうと思いました。

試しに Lighthouse で測ってみましたがかなりいいスコアを出しています。多分全てのキャンパスで一番早いはず

![lighthouse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375045/03647143-641b-4ab1-e00d-396ffca49fc5.png)

## このスピードを出すためにやったこと

### 1. Next/image で画像を圧縮

ちょうどこのサイトを作ってる途中に Next.js ver.10 がリリースされ [Next/image](https://nextjs.org/docs/api-reference/next/image) で画像を圧縮できるようになったのでほぼすべての画像でこれを使って圧縮しています。圧縮の仕組み化使い方については[こちら](https://zenn.dev/catnose99/articles/883f7dbbe21632a5254e) のサイトを見て下さい。

### 2. サイトのデプロイに Vercel を使う

このサイトのデプロイには[Vercel.com](https://vercel.com/)を使いました。Next.js を作ってるのも Vercel なので一番相性がいいだろうと思ってここを選びました。サイトの更新も Github とのリポジトリと連携すれば、Github のコードを更新するだけでやってくれるのでとても楽です。

### 3.スタイリングに使ってる Tailwindcss で purge を指定

# 生徒の展示スペース

下の画像のように生徒やプロ N でやったことを展示しています。


![post_liset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375045/c12befd4-38bc-36fa-1c6e-5cc0d7887cb1.png)

まずは [hackmd.io](https://hackmd.io/) でそれぞれの生徒に投稿する内容を書いてもらい、それを markdown 形式でダウンロードして、[Next js の公式チュートリアル](https://nextjs.org/learn/basics/data-fetching/blog-data)を参考しに、posts/ にそれぞれの生徒に Markdown で書いてもったものを HTML に変換して表示しています。

生徒の作品物の展示のスタイリングには 0 から作ってる時間はないので Github の markdown ファイルのスタイルと同じものを[ここから](https://github.com/sindresorhus/github-markdown-css)取得して使用しています。(ちなみにこのブログも同じものを使ってスタイリングしています。)

# デザイン

サイトのデザインには[tailwindcss](https://tailwindcss.com)を使っています。最初プロジェクトこのプロジェクトを作ったときは[React Bootstrap](https://react-bootstrap.github.io)を使っていたのですが途中で tailwindcss のほうが便利でカスタマイズ性、メンテナンス性も良さそうなのでそちらに移行しました。

下のは Tailwind css を使った一例ですがクラス名がそのまま CSS スタイルに当てることができるので CSS ファイルをどこに置くかとか、クラス名をどうするのとかを考える必要がなくなるのでとても便利です。

```html
<div class="px-6 pt-4 pb-6 ">
  <div class="font-bold text-3xl mb-2">
    <h2>タイトル</h2>
  </div>
  <p class="text-grey-darker text-base">ホゲホゲ</p>
</div>
```

以上のこと使いシンプルで見やすく美しいサイトを作ることを意識してサイトをデザインしました。

# 反省

キャンフェスを作るのに時間が結構かかってしまったので最初からちゃんと計画を立てて行けばもっと短い時間でもっといいものができたと思いました。

# 最後に

Next.js はいいぞ