私がTypeScriptやTailwindを使わない理由

難易度を低く抑える

私はビギナー向けReact・Next.js教材を作っています。

その中で時折り、次のような質問をされることがありました。

• 「なんでTailwindやBootstrapなどのCSSフレームワークを使っていないんですか？」

• 「なぜ、ほとんどの教材でTypeScriptではなくJavaScriptを使っているんですか？」

確かにTailwind CSSは非常に人気ですし、またCSSフレームワークを使った方が完成品のアプリの見た目は良くなるでしょう。

さらに、Reactを含めて近年のフロントエンド開発現場では、JavaScriptではなくTypeScriptの利用が一般的です。

こういう状況は私も認識しています。

しかしそれでもほとんどの教材で、CSSフレームワークやTypeScriptを使っていないのは

「教材の難易度を高めたくないから」

です。

例えば「Next.jsを勉強したい」と思って私のNext.jsの教材を始めた人は、「まずはとにかくNext.jsをやりたい」と思っているはずです。

もしその教材に、Next.jsとともにTailwind CSSやTypeScriptも使われていたとします。

すると、一つの教材でそれらも学べるのは、確かにお得だといえます。

しかし同時に、ビギナーにとっての難易度も上がります。

特にCSS関係のコードというのは、CSSフレームワークの使用・不使用を問わず冗長になりがちで、コードの見通しを悪くします。

私はこれが、ビギナーがスムーズに進めるための大きな壁になると考えています。

私自身、他の人のチュートリアル教材などを見ていて、CSSなどのデザイン関係のコードを鬱陶（うっとう）しく感じることが多くありました。

スタイルやデザインといった「見た目」の部分よりも、「働き」「機能」といった部分を学びたかったからです。

私の教材では、学習者のCSS関係の負担をできるだけ軽減するため、次のような方針を取っています。

• CSSのコードはすべて一枚のファイルにまとめる

• スタイル適用のためのclassNameコードは最低限に抑える

この結果として、CSSのコードはメンテナンスしづらいものになっているのは事実です。

しかしビギナーの学習の面から見ると、余計なことを考えず、メインの核心的事項（ReactやNext.jsなど）の学習に集中できるようになっています。

さて、教材でTypeScriptを省いてあっても、実務ではほぼ必須です。

ビギナーがTypeScript × React開発を始める時につまずきやすいポイントやセットアップ、ジェネリクスやイベントの型まで、すべてをまとめたガイドがあるので、これを使ってTypeScriptの理解を深めてください▼