Next.js + TypeScript + TailwindCSS + storybook + jest のテンプレートを作った話 前編
自己紹介
こんにちは、2022 年の秋から駆け出し web エンジニアの柿です。
現在は都内の SES 企業で働いております。
自分の担当領域は基本的にフロントエンドですが、バックエンドの開発を行うこともあります。
最初にプログラミングに興味を持ち始めたのは緊急事態宣言がきっかけでした。
遊び感覚で始めた Progate が楽しくて、いつの間にか仕事にしたいと思い始めて今に至ります。
拙い文章ではありますが頑張って書いていこうと思うので、お読みいただけると幸いです!
はじめに
突然ですが皆さん、プログラミングしていますか？
色んなものを作るとき、まずはじめにやること。
それは、、、
開発環境構築
です。
(そうじゃなくてもそうです、と言ってください。笑)
こちら、私が書いた記事なんですが vite を使った開発環境の構築のお話です。興味のある方は読んでみてください！
少し前まで個人でやるときは React を使っていて、この記事のように vite を使って開発環境を毎回毎回構築していました。
そして最近、NextJS を使い始めまして、create next-appで毎回毎回開発環境を構築していました。
毎回毎回ターミナルに直打ちするわけですね。
あれ、これって入れてたっけ？？とか思うわけですよ。
2 回目ぐらいから感じました。
柿「これめんどい!!!!!!」
と。
vite の時みたいに手順をまとめてカタカタコマンドするのもいいかなって思ったんですけど、いっそのこと使い回せるテンプレートのリポジトリさえ用意しておけば、
「これ使ってたっけ？」
ってしなくて済むなって思ったんです。
善は急げ、作業に取り掛かりました
〜3 分後〜
完成したものがこちらです
随時アップデートをしていく予定なので、こちらのテンプレートを使用していただいて、新しいリポジトリを作って頂いて大丈夫です！
使用されている技術について
ここではこのテンプレートでなにが使用されているのかについて書いていこうと思います。
Next.js
Next.js は React というライブラリのフレームワークです。
React とは、Facebook が開発した UI を構築するためのライブラリですね。Vue とよく比較される有名なやつです。
React はフレームワークではなくライブラリという事実を最近知り、恥ずかしながら少し驚いた経験があります笑
Next.js は React がベースになっているので、React と同じような使い方ができます
「じゃあなにが違うんだ？」
って思いましたか？
大きく 2 つあります。
1 つ目は、
サーバー機能の有無
です。
Next.js はサーバー機能を有していますが、React をサーバー機能がありません。
この辺は別途記事にしようと思いますが、ざっくり言うと、
- Next.js は単体で Web アプリを動作させる事ができる
- React は別途サーバーが必要
といった具合になります。
サーバーを用意するとなると、サーバー用のモジュールが必要だったり、ディレクトリ構成をしっかり考えないと、、って感じになったりでちょっと面倒だったりします。
2 つ目は
ルーティング
です。
これも詳しくは別途記事にする予定ですが、ざっくり言うと、
- React は別途ライブラリが必要
- Next.js は pages ディレクトリにファイルを配置するだけで自動設定
といった具合になります。
Next.js のルーティングの自動設定、これがとんでもなく楽です。
例えば pages ディレクトリに blog.tsx(jsx)というファイルを作成した場合、/blog/という URL にアクセスすれば、blog.tsx(jsx)の内容が表示されます。
個人的にはこれが控えめに言って神機能でした。
ちなみに
ここまで散々 Next.js を持ち上げてきましたが、React にしかないメリットもあります。
それは
他のフレームワークに組み込むことができる
というメリットです。
Rails や Django といったバックエンドのフレームワークに組み込むことができるので、リプレイスするような形ですでに構築されたアプリケーションに導入するとなると、Next.js より React のほうが手間がかからなかったりします。
これから新しく作ってみる
そんなときはぜひ Next.js を使う選択肢を増やされるといいのではないかと思います！！
私が作成したテンプレートでは Next.js v13 を使用しています。
ベータ版の機能である app ディレクトリは不採用です。
TypeScript
なんか JavaScript と似た名前じゃないですか？
それもそのはず、TypeScript は JavaScript を拡張したプログラミング言語なんです。上位互換みたいな感じですね。
あの Microsoft が開発しているんですよ〜
JavaScript との違いってなんだ？と思ったそこのあなた！
ここで簡単に説明をしましょう。
TypeScript は JavaScript に型を付けることができる言語です。
え？意味がよくわからないって？
自分も最初はそんな感じでしたね笑
型って言うのは、stringやnumberといった型のことです。
JavaScript って動的型付け言語って言われているんです。
実行時に初めてデータ型が決まるような仕組みになっています。
例えば、
const increment = num => {
return num + 1;
};
といったコードがあったとします
numという変数にはどんな型が入っていてほしいですか？
大体の人は number 型と答えるんじゃないかと思います。
そうじゃないと足し算できないですからね!
こういったことがそれなりの規模になってきたとき、うっかりnum変数に"1"みたいなstring型の値が入ってきてしまったとき、JavaScript だとどうなると思いますか？
JavaScript の型付けのタイミングを思い出してください
実行時に初めてデータ型が決まるような仕組みになっているんでしたね？
なので、このコードを実行してみるまで、numに
string型の値が入っているか、
number型の値が入っているか
どっちなのかはわかりません。
これのせいで、エラーやバグに気付くことができない場合があるんです。
代わって TypeScript は静的型付け言語と言われています。
静的型付け言語とは、コードを実行する前にデータ型が決まっている言語のことです。
上記のコードを TypeScript で書くと、
const increment = (num: number) => {
return num + 1;
};
となります。
numにはnumber型の値が入るんだよ！！
って示してあげることができるんです。
ここで、
let num = '1';
としようとすると、エラーが出ます。
Type '"1"' is not assignable to type 'number'.
みたいな感じです
number しか受け付けんよ。
みたいなことを言ってくれるんです。
let num = 1;
とすればエラーは出ません。number 型の値が入っているので。
これが TypeScript のメリットです。
コード実行前にこういった型エラーを発見してくれて VSCode とかに表示されるので、潜在的なバグを減らすことができるんです。
いやー、めっちゃ便利ですよね。
ただ奥が深すぎますので、最初のうちは浅めに触ってみるのがいいと思います。
詳しくはこちらを御覧ください
めちゃくちゃ勉強になります。
私が作成したテンプレートでは TypeScript v5 を使用しています。
最近のやつです。
React のファイルは.tsxで作成することができます。
ですが、今回私が作成したテンプレートでは、
.jsxとして TypeScript を使用しないで、JavaScript で書くこともできるのでご安心ください。
Tailwind CSS
Tailwind CSS は CSS フレームワークです。
最近結構キテますよね。
というか個人的には CSS にもフレームワークあんのか、と思いましたね、、笑
TailwindCSS は、CSS をユーティリティクラスベースで書くことができるフレームワークです。
例えば、
<div class="bg-white p-4 rounded-lg shadow-lg">
<p class="text-gray-800">Hello World</p>
</div>
といった感じで書くことができます。
これは、
<div
style="background-color: white; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);"
>
<p style="color: #333;">Hello World</p>
</div>
と同じ意味になります。
TailwindCSS はユーティリティーファーストと言われていて、非常にカスタマイズ性に優れています。
ちなみにユーティリティファーストは、
CSS は使わずに Tailwind CSS が提供しているクラスのみを使用してスタイリングする考え方のこと
です。
メリットとしては、
- 通常の CSS よりも記述量が少ない
- 柔軟なカスタマイズが可能
- レスポンシブ対応や、ダークモード対応が用意
といった感じですかね。まぁいっぱいあるんですが、詳しいことはお調べいただければと思います。
デメリットとしては、
- コードの可読性が低くなる
- 書き方を覚える必要がある
といったことがあげられます。
ちなみに こんなチートシートもあるので、使うと多少楽になります。
私が作成したテンプレートでは TailwindCSS v3 を使用しています。
また、TailwindCSS のライブラリである daisyUI も使用しています。
daisyUI
daisyUI は TailwindCSS のユーティリティクラスを拡張してくれるライブラリです。
例えば、
<button class="btn btn-primary">Button</button>
と書くと、
<button
class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700"
>
Button
</button>
という感じで、ボタンのスタイルが適用されます。
ボタン専用の class が存在する感じです！
詳しくは先程のリンクの公式ドキュメントを御覧ください！
結構色んな専用クラスが用意されています！
日本語に翻訳されているので、読みやすいドキュメントだとは思います。
ちなみに、スタイルが適用されるだけなので、JS は各自で実装という形になります。
axios
axios は HTTP 通信を行うためのライブラリです。
API を叩くときに使用することになるので、とりあえず入れておきました。
詳しい使い方は公式ドキュメントに記載されていますので、そちらでご確認ください！
簡単に使用例をご紹介すると、
import axios from 'axios';
const getAllPokemon = async () => {
const res = await axios.get('https://pokeapi.co/api/v2/pokemon/');
console.log(res.data);
};
という感じで使うことができます。
resには API から返ってきたデータが格納されています。
Recoil
Recoil は React で状態管理を行うためのライブラリです。
Recoil は Facebook(現 Meta)によって提唱された状態管理ライブラリですね。
特徴としては、
Atom(データの保存場所)
Selector(Atom をもとにデータの派生状態を取得する関数)
というように呼ばれる単位を使用して状態を管理しています。
また、HooksAPI で使われることを前提に作られていますね。
ちなみにメジャーバージョンは v0 なので、あくまで実験的な立ち位置にあることはご認識ください。
Recoil が気になる人はこちらの記事をお読みいただければと思います。
Prettier
知らない人のほうが少ないのではないでしょうか？
みんな大好きコードフォーマッターですね。
便利なので入れてあります。
ESLint
これも知らない人のほうが少ないのではないでしょうか？
prettier 使っていなくても、ESLint は使ってます。なんてパターンもありますね。
ESLint は JavaScript コードの品質を保つためのツールです。
prettier と併用することで、コードの品質を保ちつつ、コードフォーマットもしてくれます。
しかし、plugin を入れないとルールの競合が出てしまうので、導入の際は一工夫必要です。
storybook
storybook は UI コンポーネントの開発を支援するツールです。
UI コンポーネント単体で開発することができるんです。
こちらの公式チュートリアルを御覧ください。
なんと日本語化されているので読みやすいです。
ちなみに私が作ったテンプレートには storybook v7 を導入しています。
Jest
Jest は JavaScript のテストフレームワークです。
TypeScript にも対応しているのでご安心ください！
Node.js や React,Vue にももちろん対応しています。JS なんで。
つまり、基本的には JavaScript か TypeScript で書かれたコードであれば基本的にはテストできると思って頂いて大丈夫かと思います。
雰囲気を掴むためにこちらをご覧頂くのがいいのではないかと思っています！
ちなみにこのテンプレートには react-testing-library も導入しています。
Husky
Husky は Git のフックを使用して、コマンドを実行するためのツールです。
例えば、コミット前にテストを実行するなどのことができます。
なので、コミット前に自動でテストを実行してもらって、それが OK ならコミットされますが、NG ならコミットされないということができます。
これが意外と面倒だけど便利な機能なので、ちゃんとしたものをコミットすることができます！
hygen
あんまり知っている人は多くないかもしれません。
これは、CLI での対話型コード生成ライブラリです。
例えば、コンポーネントを作成するとき、
└── Example/
├── index.tsx
├── index.stories.tsx
└── index.test.tsx
という感じでコンポーネントファイルの他にテスト用と storybook 用のファイルを作りたかったとするじゃないですか？
いちいちファイル作成してコード書いて、、ってするの面倒ですよね。
その面倒を解消してくれるのが hygen です。
予めテンプレートを決めておいて、それを元にコードを生成してくれます。
自分のテンプレートでは、
yarn gen
とするだけで対話がスタートして、コンポーネントの種類と名前を入力すると、上記のようなファイルが生成されます。
今の段階では Atomic Design を想定して作成しているので、
atoms molecules organisms templatesというコンポーネントの種類を選択できます。
Volta
Volta は Node.js のバージョン管理ツールです。
こちら私が書いた記事になります。
導入方法や使い方、機能などはこちらで説明していますのでご確認いただければなと思います。
まとめ
以上がこのテンプレートの概要です。
少しは学びになるようなことがありましたでしょうか？
最後に表を載せておきます。
| ツール名 | 説明 |
|---|---|
| Next.js v13 | React フレームワークで、app ディレクトリは不採用 |
| TypeScript v5 | JavaScript の上位互換言語 |
| TailwindCSS v3 | CSS フレームワーク。daisyUI というフレームワークを使用 |
| axios | API を叩くためのライブラリ |
| Recoil | React 状態管理ライブラリ |
| Prettier | コードフォーマッター |
| ESLint | コード書き方をチェックするツール |
| storybook v7 | コンポーネント単位での UI デザインを確認できるツール |
| Jest | JavaScript のテストフレームワーク |
| Husky | コミットやプッシュ時に任意のコマンドを自動実行できるツール |
| hygen | コンポーネントジェネレーター |
| Volta | Node のバージョン管理ツール |
ぜひ皆さん、使っていただいてフィードバック等をいただけると幸いです。
次回、
Next.js + TypeScript + TailwindCSS + storybook + jest のテンプレートを作った話 後編
では、実際に最初から作っていこうと思います！
ちょっと自分も作ってみたい！
ここがうまくできないから参考にしたい！
とりあえず見る。
興味ないけど。
などなど、理由は何でもいいのでご覧いただければなと思います。
後編
Discussion