こんにちは。 ポレゴンフーズの寿司です。いつになく自己紹介から入らせて頂きました。
さて、今回はこのサイトを作成したにあたっての技術スタックを紹介していこう。
順序は下記を想定している
- フロント技術
- バックエンド技術
- 今後の仕様
それでは早速みていこう。
フロントエンド
まずはフロントエンドの技術から綴っていこう。大枠の使用技術を下記にまとめたので、確認して頂きたい。
ざっくりこんなところだろう。 それではそれぞれ軽く詳細を綴っていこう。主に「技術の詳細」と「選定理由」を綴っていく。
Next.js
言わずと知れたJavaScriptのUIライブラリであるReact.jsのフレームワークである。Reactと比較して手軽にハイパフォーマンスなwebを構築することが可能だ。
なぜNext.jsか？
Next.jsの提供するAPIが凄まじいからである。
SSRやらSSGやらISRやら極めてハイスペックなAPIを提供しているため、誰でも簡単に良いwebを作る事ができる。
ちなみに本サイトでは「ブログ」と「ムービー」と「デベロップ」のページは全てISRを使用し、静的なページとして高速でクライアントにページを返すことが可能になっている。
一度あなた自身の目で確認し、体感して頂きたい。
さながら
に負けず劣らずのレスポンススピードだろう。
Chakra-UI
Chakra-UIは誰でも簡単にモダンなwebデザインを実装する事ができる「UIライブラリ」である。その名の通り「NARUTO」に感化されたのか、公式のドキュメントではしばしばNARUTOのキャラクター達のイラストが観れるだろう。
似たようなライブラリでMaterial-UIが挙げられるが、今回は使用していない。
何故Chakra-UIか？
単純に見た目が好きだったのもあるが、他にも理由はある。
フロント実装における鬼門である、
ブラウザ毎のUI形成
だが、Chakra-UIは幅広いブラウザで対応が可能なのだ。Material-UIも良いのだが、一部ブラウザに対応していないコンポーネントがあったりと、少々機能不足なところがある。故に今回はChakra-UIを使用した。
ただし、Chakra-UIのiconは極端に少ないため、代用としてMaterial-UI-iconsやReact-iconsを使用すると良いだろう。
個人的には後者のReact-iconsを推奨する。何故ならカスタマイズが柔軟だからだ。
Tailwind-CSS
Tailwind-CSSは比較的最近登場したCSSフレームワークである。
端的に説明すると
CSSを書かないCSS実装
と行ったところだろう。 言われてもパッとイメージできないだろう。下記に例のコードを貼るので確認して頂きたい。
<h1 className="text-white bg-gradient-to-r from-blue-400 to-green-400 text-xl p-4 rounded-lg font-bold">
ポレゴンデベロップ
</h1>ポレゴンデベロップのグラデーション掛かった見出しのソースコードだ。みなさまお気づきだろうか？
classにCSSプロパティっぽい事が書かれているのを
そう、Tailwind-CSSはCSSファイルやCSS in JSを書かずともclassNameだけでスタイリングできてしまうのだ。
何故Tailwind-CSSか？
上記のこともあり、無駄なプロパティの発生や重複を防止してくれるため、webのパフォーマンス向上にもつながる為採用した。
更に自分でプロパティを生成したりカスタマイズすることも可能なのだ。
将来性や今後のフロント実装の際に大きく貢献してくれるであろうと期待も込めて取り入れた。
因みに本サイトでCSSファイルを用いてスタイルを実装しているのはマークダウンのみである。
最後に
バックエンド技術も綴っていきたかったが、記事が肥大化してしまうため別で記事として上げようと思う。
少しでもみなさまの参考になれば幸いである。
