--- title: "フロント初学者が行うフロント技術選定 | grasys blog" url: "https://blog.grasys.io/post/kato/react/" description: "こんにちは。Cloud Developerチーム（以下CDチーム）エンジニアの加藤です。 業務では主にバックエンドやデータ分析を行なっております。 私の所属しているCDチームでは毎期ごとにチームでテーマを設定し、 業務外でエンジニアリングに関して議論や調査を行なっております。 今期のテーマは【開発がスムーズに始められ…" --- # フロント初学者が行うフロント技術選定 - ![](/_astro/noicon.CTHOhNiB_1HMs6A.webp)[kato](/authors/kato/) - 公開日：2022年9月26日 - カテゴリー：[Tech](/categories/tech/) - タグ：[#Next.js](/tags/next-js/)[#React](/tags/react/)[#Tailwind CSS](/tags/tailwind-css/) ![フロント初学者が行うフロント技術選定](/_astro/hero.BOqK_kyC_Z2iPyQf.webp) こんにちは。Cloud Developerチーム（以下CDチーム）エンジニアの加藤です。 業務では主にバックエンドやデータ分析を行なっております。 私の所属しているCDチームでは毎期ごとにチームでテーマを設定し、 業務外でエンジニアリングに関して議論や調査を行なっております。 今期のテーマは【開発がスムーズに始められるよう、チーム内の資産としてボイラープレートを作る】という内容でした。 チームメンバーそれぞれ担当する技術を決めて取り組むのですが、私の担当はReactでした。 今回はその過程を書いてみようかと思います。 ## 弊社のフロント体制に関して 普段の業務はバックエンド(PHP)中心なのですが、業務の１割程度はフロントを触っています。 私のフロントエンド経験は１年半ほどで、前職で半年ほどAngular、現職で1年ほどReactを触っています。 いずれも一からアプリケーションを作成したことはなく、既存のアプリの機能改修・バグ修正の経験のみです。 さて、弊社にはフロントエンド部隊（専任のフロントエンドエンジニア、デザイナ）が存在しておりません。 フロント部隊がいる会社であれば、デザイナの方からデザインカンプなどをいただいて、あるいは部品まで作成いただいてから組み合わせて実装、というような流れになるかと思うのですが、そうはいきません。 また、エンジニアに関してもフロント専任のメンバがいるわけではないので技術的にあまりに難易度が高いものを選定してしまうと実装が大変です。 そこで、ボイラープレート作成にあたり、下記要件を考えました。 - デザインは既存のCSSフレームワークを活用する - 選定する技術はメンテナンスがしっかりされているものにする - 流行りの技術であること（ドキュメントが十分存在していること） ## Reactアプリケーションのスケルトンに関して ReactはTypeScriptのフレームワークですが、Reactアプリケーションが動作する環境を整えるには静的解析ツールやビルドツールなど、さまざまなツールの導入も必要になります。 もちろん、全て手作業で導入することもできるのですが大変ですし、そもそも今回の目的である習熟していないメンバーがすぐに着手できる、という目的に削ぐわないです。 Reactにはいくつかアプリケーションの雛形生成のための手段があるので、今回はそちらを使用します。 私が勉強した1年前はCreate-react-Appというコマンドで環境構築する方法を学んだのですが、現在Create-React-Appはメンテナンスモードであり、定期的な保守が難しくなる、という話を耳にしました。 現在、何かのツールに頼る形式だとcreate-next-appかviteの２択になるのではないでしょうか。 create-next-appはNext.js+Reactのボイラープレートです。 Next.jsはReactをベースに作成されたJavaScriptのフレームワークで、SSRが行える、Next.jsがサーバー機能を持っているため環境構築が容易である、といった特徴があります。 また、create-next-appコマンドは公式のクリエータによってメンテナンスが行われているため、create-react-appで懸念されるメンテナンスが公式から提供されないという点は（一旦は）解消されます。 一方、viteはビルドツールで、npm create viteコマンドを実行することで、React + viteプロジェクトを作成することができます。viteは元々ビルドツールなだけあって、本番ビルドが早い、高速なサーバーの起動といった特徴があるようです。 今回は、Googleトレンドの傾向や、各種技術サイトのタグ数の多さからcreate-next-appを採用することにしました。 ## CSSフレームワークに関して CSSフレームワークとはあらかじめてデザインしたパーツ群（ボタン、モーダル、レイアウトetc…）を提供してくれるものです。 有名なものだとbootStrap、Tailwind、Material UIでしょうか。 CSSフレームワーク選定の基準としては、使いやすさ、デザインが挙げられるかと思います。 リッチなデザインが実現できるフレームワークも気になりはしますが、 そもそも私の所属するCDチームではデータ分析や社内ツールの開発案件が多いため、 アプリケーションの用件としてデザインの優先度はそれほど高く設定していません。 メジャー度でいうと、bootstrapが飛び抜けてはいるのですが、今回はTailwindを採用することにいたしました。 TailwindはUtility-First（ユーティリティファースト）で作られている CSS フレークワークです。 bootstrapではコンポーネントが提供されていますが、TailwindではUtility classを組み合わせて作成していくことになります。 独自での組み合わせが必要になりますが、チートシートが充実しているため、それほど学習コストは高くありません。加えて、基本的なパーツはボイラープレート内で作成するので後続のメンバーには負担がないように作成していきます。 また、軽量であるためNext.JSとも相性が良さそうです。 ## 今回選定した技術まとめ ということで、ボイラープレートとしては下記を選定することになりました。 - React+Next.js(create-next-app) - Tailwind 実際はコンポーネント群、レイアウト、ドキュメントを作ってボイラープレートとしています。 各技術を触った所感としては - Next.jsのRoutingが感覚的でわかりやすい - Tailwindを導入しているので今のところファイル群が少なく構造を理解しやすい(CSSファイルができないため) - Tailwindのカスタマイズも慣れると簡単、スタイルを１ファイルで確認、調整できるので便利 今期の活動の範囲ではNext.jsのメリットであるSSRの実装まで触れなかったので時間とって触ってみたいですね・・ ## まとめ ということでフロントの技術選定に関して工程、決定内容を書かせていただきました。 初学者が選定したものなのでベストプラクティスからはずれているかもしれませんが、ドキュメントも併せて作っているのでなんとかプロジェクトの走り出しに使える程度のものはできたかな、と思っています。 普段はバックエンドばかりなので改めてフロントのことを勉強する良い機会になりました。 新しいものを勉強するのは楽しいですね。 今回導入するまでには至れなかったのですが、Storybookを使ってチーム内で使いまわせるコンポーネントカタログを資産として作るのも良さそうだなぁと思いました。 ## この記事を書いた人 [![](/_astro/noicon.CTHOhNiB_Z24aAgM.webp)](/authors/kato/) ### [kato](/authors/kato/) katoのプロフィールと執筆記事をご覧いただけます。 [プロフィールと記事一覧](/authors/kato/)