【②技術選定】Vite+React+TypeScript+GitHubPagesで爆速サイト公開

はじめに

業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい...ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに

...と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな...そこまでに公開できたらいいな」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。

折角なので、制作の過程も含めて記事化してみました。

ということで、本記事は下記連載の第2弾となります。
他記事も併せてご覧ください。
【①アイデア選定】
【②技術選定】←イマココ
【③設計(ロジック)】
【④設計(デザイン)】
【⑤環境構築】
【⑥進捗管理】

ちなみに、公開サイトはこちら↓
https://yutamanaka.github.io/FragranceFinder/

リポジトリはこちら↓
https://github.com/YutaManaka/FragranceFinder

本記事では、技術選定の経緯についてまとめました

対象者

この記事は下記のような人を対象にしています。

• 駆け出しエンジニア
• プログラミング初学者
• 技術選定のやり方がわからない人

結論

技術選定においても「目的と優先順位」を最初に決めましょう。

目的と優先順位

アイデア選定同様、技術選定の際にも目的と優先順位付けは大事なので先にやりましょう。

1. ReactとTypeScriptの技術力UP
2. 無料でサービス公開
3. CSSの修行もちょっとしたい(レスポンシブとか)
4. あとは適当

とかく、今回はReactとTypeScriptの勉強をしたいので、そこはMUST。
他は特に目新しいものを求めず、慣れ親しんだもので良い、と判断しました。

なぜフロントエンド？

現在私は業務では「フロント：JavaScript+Vue.js / バックエンド：PHP+Laravel」を使用しています。
上記スキルセットで2年半経ち、人に教えられるレベルになってきました。
技術者としてスキルアップするにあたり、フロントorバックエンド領域で未経験の言語orフレームワークに挑戦しようと決意。

元々、論理的思考が得意・好きということもあり、バックエンド領域には自信があります。
しかし、フロント領域に対しては苦手意識があり、克服するためにも今回はフロント領域にチャレンジすることにしました。

なぜReactとTypeScript？

普段からIT系企業の求人を見たり、どのサービスがどんな技術を使用しているのか調べるのが趣味です。
そこで色々リサーチしてみると、興味のある企業・サービスでは下記のスキルセットが多かったです。

バックエンド領域：Java, Python, Go
フロント領域：TypeScript, React

バックエンド領域は候補が多く、絞り込みが困難。
また、現状のPHP+Laravelでもう少しスキルアップしたい気持ちもありました。

それに対してフロントエンドは候補が1本に絞れました。
特にTypeScriptはJavaScriptと共存/漸進的導入が可能らしいので、現在のプロジェクトにも活用できそうな気がする...。
ということで今回はTypeScriptとReactに絞ってWEBアプリ作成することにしました。

言語・フレームワーク

ここは必須なので、下記をチョイス。

• JavaScript
• typescript@5.2.2
• react@18.2.0

ライブラリ

基本的には、業務で使用経験があるものをそのまま使っています。
開発効率を上げるためにほぼ必須、と考えています。

• gh-pages@6.0.0 (後述のGitHub Pagesの公開のため導入)
• husky@8.0.3
• lint-staged@15.0.2
• eslint@8.53.0
• prettier@3.0.3

開発ツール

• vite@4.5.0(環境構築がめちゃ楽と聞いて。)
• GitHub Pages(無料のホスティングサービスとして)
• GitHub

その他ツール

• ClickUp(進捗管理やアイデア出しに活用)
• Notion(ロジック設計やその他ドキュメント管理に活用)
• diagrams.net(旧draw.io。デザイン設計に活用)

おわりに

個人開発の技術選定についてまとめました。