あけましておめでとうございます🎍
本記事では、React × TypeScript × Vite を使ったフロントエンド開発の最初のステップについて、初心者である自分が試した手順をまとめました。
環境構築から最小の React コンポーネントの実装、useState を使ったイベント処理、
そしてVercel を使ったデプロイのステップを順を追って記載していますので、
「これから React + TypeScript を始めたい」「Vite で環境構築したい」「サクッと公開まで進めたい」という方にの参考になれば幸いです。
この記事のゴール
この記事を読み終えると、以下ができるようになります。
- React + TypeScript + Vite の開発環境を自力で構築できる
- JSX を使った最小のコンポーネントを作成できる
-
useStateやonClickを使った基本的なイベント処理が理解できる - GitHub と連携し、Vercel でデプロイし公開できる
「ローカルで動かす → コードを書く → そのまま Web に公開」という一連の流れを体感できます。
はじめに
スマホブラウザで動くアプリを作るため、
React と TypeScript の環境構築から取り組み始めました。
本記事では、実際に手を動かしながら学んだ内容を整理しています。
作ってみたコードはこちらで公開中
プロジェクトの初期化
Vite を使い、React + TypeScript の環境をサクッと用意します。
cd workdir
npm create vite@latest . -- --template react-ts
パラメータの意味
| パーツ | 役割・意味 |
|---|---|
npm create |
npm init の別名。特定のツール（この場合は Vite）を一時的にダウンロードして、プロジェクトの初期化処理を実行 |
vite@latest |
プロジェクト作成ツールとして Vite（ヴィート） の最新版を指定 |
. |
作成するプロジェクト（フォルダ）の名前、今回は現在のフォルダをそのまま使った |
-- |
これ以降のオプションは npm に対してではなく、その先の vite（作成ツール）に直接渡すという合図 |
--template |
どの技術セット（テンプレート）を使うか指定するオプション |
react-ts |
「React」 というライブラリを使い、かつ 「TypeScript」 で開発する設定を自動適用 |
対話式の設定
◇ Use rolldown-vite (Experimental)?:
実験的な機能を使うか？ → No
◇ Install with npm and start now?
すぐにライブラリをインストールして起動する？ → Yes
Noでも後から手動でnpm installすれば同じ
参考:
環境構築直後の主要構成
ファイルがいっぱい生成さるものの、とりあえず最低限だけ把握しておくことにします。
ローカル環境の起動
起動後、以下の URL でアプリにアクセスできます。
Local: http://localhost:5173/
最小構成の App.tsx を作る
Hello World だけに絞って、まずは JSX の感覚をつかみます。
import './App.css'
function App() {
return (
<div>
<h1>hello, World!</h1>
<h2>hello...</h2>
<h3>hello......</h3>
<h4>hello.........</h4>
</div>
)
}
export default App
returnしているのはHTMLっぽく見えるものの、Reactの基本であるJSXというらしい。
useState とイベント処理
次はステート管理とイベント処理へ。
-
useState()を分割代入で利用-
useState()の返り値は[現在値, 更新関数]となっており、
以下の例ではisActiveがゲッターsetActiveがセッターとなるようなイメージ
const [isActive, setActive] = useState<boolean>(true); -
-
onClickをアロー関数で定義-
ボタンを押した際に
setActive関数を呼びたい場合、❌NG
これだと「クリック時」ではなく描画時に即実行されてしまう<button onClick={setActive(!isActive)}> 計算モードを切り替える </button>⭕️OK
こう書くことで、ボタンのクリック時に実行される<button onClick={() => setActive(!isActive)}> 計算モードを切り替える </button>この
onClick={() => setActive(!isActive)}は アロー関数（無名関数） を渡している書き方。-
() => setActive(!isActive)
ここ全体が「無名関数」-
()
引数がないことを表す -
setActive(!isActive)
ボタンがクリックされたときに実行したい処理
-
onClick プロパティには "関数そのもの" を渡す必要があるため、
名前のないアロー関数をそのまま代入している。結果として、
ボタンが押された瞬間に、アロー関数が実行され、setActive(!isActive)が動く
という流れになる。 -
-
難しいけれど、React らしい書き方に慣れていく段階です。
ローカルネットワーク内のスマホ端末で動作確認
npm run dev
ではなく
npm run dev --host
とすることで、スマホ端末でも動作確認ができるようになる！
アプリを公開するには（Vercel / GitHub Pages）
学習したアプリを誰でもアクセスできるように公開する方法は主に 2 つ：
- Vercel：React との相性がよく、自動デプロイが便利
- GitHub Pages：GitHub リポジトリと連動して公開できる
| 項目 | Vercel (推奨) | GitHub Pages |
|---|---|---|
| デプロイの難易度 | 非常に簡単 (自動認識) | 少し設定が必要 (Actions等) |
| サブディレクトリ対応 | 得意 (プロジェクト単位) | 少し癖がある (パスが壊れやすい) |
| プレビュー機能 | 強力 (ブランチ毎にURL発行) | 基本的に1つ (mainのみ) |
| 処理速度 | 高速 (エッジネットワーク) | 標準的 |
| SSR / API連携 | 得意 (Serverless Functions) | 不可 (静的ファイルのみ) |
今回は Vercel を使用してみることにした。
Vercel にデプロイする手順
-
https://vercel.comへアクセス
-
GitHub ログイン
-
リポジトリアクセスを許可
-
対象リポジトリを選択
-
スマホアプリで認証（必要に応じて）
-
importボタンが出てくる
-
プロジェクトの設定
-
Framework Preset で
Viteを選択 - アプリがリポジトリ直下ではなく子フォルダの中なのでRoot Directoryも変更
- 必要があればProject Nameも変更(アプリURLの一部になる)
-
Framework Preset で
-
Deployを押すとビルドが始まる
-
Web上に公開される！！
-
Dashboard から細かい設定の変更も可能
まとめ
本記事では、React × TypeScript × Vite の環境構築から、最小のアプリ作成、公開までを最短ルートで体験しました。
- Vite で高速に環境構築
- JSX でビューを記述
-
useStateで状態管理 - Vercel で簡単デプロイ
「まず動くものが作れる」状態までの流れを押さえることで、次に進むべき学習ステップ（ルーティング、スタイリング、コンポーネント設計など）が見えやすくなります。
おわりに
React × TypeScript の学習は最初のハードルこそ高く見えましたが、Viteが初期設定をまとめてやってくれるのでスタートダッシュが非常に楽になりました。
今後は「あの楽器」を目指して、手触りのよいアプリ開発に向けて学習を進めていきます。