TypeScriptで学ぶReact.js：基礎から最新技術まで完璧に

Chapter 01
準備する

Reactの学習を始める前に必要な環境設定を学びます。
各OSごとにVSCodeをインストールする方法を確認し
PrettierおよびExtensionをインストールして学習準備を行います。

Chapter 02
はじめに

この章では、Reactアプリケーションを最新の方式で開始する方法を扱います。Create React App（CRA）に代わるViteベースの開発環境を構成し、React開発に必要な必須設定を身につけます。

• CRAの限界とViteの利点比較

• WebpackとViteの違いとエコシステムの流れの理解

• Viteを活用した高速で直感的なReactプロジェクトセットアップ

• スニペットとユーザースニペットによるコード生産性の向上

• 初期プロジェクト構造の整理とnpm run dev実行フローの把握

また、Reactで最も重要なJSX文法の概念と特徴を紹介します。JSXがどのようにHTMLとJavaScriptを結合するのか、どのような文法的特徴があるのかを理解しながら、今後のコンポーネント学習のための基礎を固めることになります。

Chapter 03
コンポーネントの基本

Reactにおいてコンポーネントは、UIを構成する最小単位であり、核心概念です。この章では、コンポーネントとは何か、どのように動作し、どのように構成されるかを実際のコードと共に段階的に学習します。

• コンポーネントとは何か？そしてなぜ重要なのか？

• 関数型コンポーネントの作成条件と構成方式

• React.Fragmentを利用した不要なDOM除去

• 新しいコンポーネントを作成する方法とフォルダ構造設計

• ルートコンポーネントとコンポーネントツリー構造の概念理解

また、実習を通じて直接コンポーネントを生成し、適切な位置に配置しながら、コンポーネントベース設計に対する感覚を身につけることができます。
この過程を通じて、コンポーネントを見る目が変わり、その後の複雑なReact構造も自然に理解できる基盤を築くことができます。

Chapter 04
コンポーネントのデータとProps

今度はReactの核心概念の一つであるProps（プロパティ）を本格的に扱います。この章では、コンポーネント間でデータをどのように渡して活用するかを、様々な例題と実習を通して身につけることになります。

• Reactにおけるコンポーネント間の関係理解：祖先-親-子構造

• JSX内で基本型と参照型データを出力する方法

• タグ属性に値を渡す基本原理

• Propsを通じてデータを渡す様々な方式とパターン

• 分割代入を活用したpropsの分離と可読性の向上

• TypeScriptを基盤としてpropsのタイプを簡単に推論し明確に定義する方法

• スプレッド演算子（...）を活用したprops渡し方式の理解

• childrenという特別なpropを活用したコンポーネント再利用性の拡張

• [[CODE_1]]props[[/CODE_2]]と[[CODE_2]]children[[/CODE_2]]の役割の違いの比較

この章を通じて、Reactコンポーネント間のデータフローを自然に理解し、型安全性と可読性を同時に考慮したprops設計能力を身につけることができます。

Chapter 05
コンポーネントとイベント

Reactアプリケーションにおけるイベント処理は、ユーザーとのインタラクションを実装する核心です。この章では、ボタンクリックからイベント伝播まで、Reactでイベントをどのように扱うかを体系的で実用的な観点から学習します。

• JSX文法によるイベント接続方式

• イベント属性とイベントハンドラー関数の作成パターン

• ハンドラーにパラメータを渡す様々な方法と推奨方式

• ハンドラー内部でpropsを読み取るフローと実践例

• 上位コンポーネントからハンドラーをpropsで渡す構造

• イベントオブジェクト（SyntheticEvent）の構造及び活用法

• targetとcurrentTargetの違いと用途

• イベント伝播の概念：バブリングとキャプチャリングの理解

• イベントの基本動作をブロックする方法 (e.preventDefault())

最後にボタンコンポーネントを直接作成し、様々なイベントを処理する実習を通じてイベント処理パターンを自然に内在化します。

Chapter 06
コンポーネントの状態 - useState フック

Reactの状態管理は、コンポーネントがユーザーとのインタラクションに応じて反応し、変化するようにする核心機能です。この章ではuseStateとuseReducerを中心に、状態管理の概念、活用法、実戦適用まで幅広く扱います。

• 状態が必要な理由と状態値の基本概念

• useStateフックの基礎的な使い方から実戦応用まで

• オブジェクトおよび配列状態を扱う際の注意点とリレンダリング動作方式

• setStateの更新方式と関数型更新

• 状態の独立性概念と状態の引き上げ（lifting state up）

• カプセル化(encapsulation)による状態管理責任の分離

• カウンターアプリを直接作りながら状態管理スキルを段階的に強化

• useReducerを利用した複雑な状態ロジックの構造化

• reducer パターンへの移行と実戦ミッション遂行

この章を終えると、シンプルな状態変更から複雑なデータフローまで安定的に管理できるReact開発者として一段と成長することになります。

Chapter 07
繰り返し&条件付きレンダリング

実際のユーザーインターフェース（UI）は状況に応じて画面が条件的に変わり、複数のデータを繰り返しレンダリングする構造で構成されています。この章では、ReactでこのようなUIをどのように実装するかを集中的に扱います。

🔹 条件付きレンダリング

• if、switch、三項演算子（? :）、論理演算子（&&）など様々な条件表現方式

• 各条件方式の使用時点と長短所の比較

• トラフィック信号機、ログイン状態、メッセージ出力など実際のシナリオベースの実習

• ネストした条件、可読性、コンポーネント分離戦略など実戦のコツを提供

🔹 繰り返しレンダリング

• 配列データを基盤としたmap()を利用したコンポーネント反復出力

• 繰り返しレンダリングにおけるkey属性の重要性と有効範囲の理解

• filter()などを活用したデータ選別と条件付きレンダリングの結合

• レシピリスト表示などの実践課題を通じて反復パターンを体得

この章を終えると、Reactで複雑な条件と繰り返しを自然に実装できるようになり、可読性の良い動的UIを設計できる実力を身につけることができます。

Chapter 08
スタイリング

この章では、Reactでコンポーネントをスタイリングする様々な技法を幅広く学習します。
シンプルなインラインスタイルからCSS-in-JS、Tailwind、画像スタイリングまで、実際のフロントエンド開発でよく遭遇するすべてのスタイリング技法を実習と共に身につけることができます。

🔹 スタイリングの基本

• インラインスタイルとグローバルCSS活用法

• CSSモジュールによるコンポーネント単位のスタイルカプセル化

• classnamesユーティルを活用した動的クラス管理

• 🧩ミッション：ボタングループUIの実装を通じて様々なスタイル方式の比較体験

🔹 CSS-in-JS — styled-components

• styled-componentsの文法と基本的な使用方法

• propsを活用した動的スタイリング

• keyframes、asなどの高度な機能とヘルパー関数およびミックスインの使用法

• グローバルスタイル管理とTips集

• 🧩ミッション：styled-componentsで信号機UIを作る

🔹 Tailwind CSS — ユーティリティファーストスタイリング

• Tailwindの核心哲学と指示語体系

• 条件付きクラス適用方法と実戦適用戦略

• 🧩ミッション：Tailwindで電卓UIを完成させる

• 🧩ボーナスミッション：Tailwindの実戦感覚を加えて高級UI挑戦！

🔹 画像・フォントスタイリング

• 画像レンダリング時の考慮事項およびCSS調整方法

• 🧩ミッション：ランプに明かりが灯るアニメーションUI実装

• Googleウェブフォントの適用方法まで一緒に整理

この章を通じて、どのようなスタイリングツールがプロジェクトに適しているかを判断できる目を養い、美しくメンテナンス可能なUIを実装できる実戦感覚を身につけることができます。

Chapter 09
電卓を作る

この章は、これまで学習した内容を基に実際に動作する計算機アプリケーションを直接実装する実習中心のプロジェクトです。コンポーネント設計、状態管理、イベント処理、型分離、UI構成まで全て直接体験することになります。

🛠 プロジェクトベース学習

• プロジェクト開始前、計算機の動作原理と構造に関する概要

• UI設計およびコンポーネント構造化

• リファクタリング過程を通じてコンポーネントの役割と責任を整理

• 🧩TypeScriptを活用して状態と演算子タイプを明確に分離

• 数字、演算子、小数点、クリアなど主要機能を直接実装

• 実戦でよく遭遇するバグ処理およびデバッグフローの学習

🧪 開発ツールの活用

• React Developer Toolsのインストールと活用法による状態変化フローの可視化

• リアルタイム状態追跡とコンポーネント構造分析能力の向上

この章を終えると、単純な機能実装を超えてコンポーネント分離、状態設計、デバッグ、型管理まで一度に経験することになり、「自分で直接作った機能が動作する喜び」を通してReactに対する自信を持つようになります。

Chapter 10
フォームの扱い

この章では、Reactでフォームをどのように扱うかについての実践的な悩みを込めました。単純な入力処理を超えて、React 19の新機能（ref転送）、カスタムフックによるフォームロジックの再利用、バリデーションまで総網羅します。

🔹 制御コンポーネント

• input[[/CODE_2]]、[[CODE_2]]checkbox[[/CODE_3]]、[[CODE_3]]radio[[/CODE_4]]、[[CODE_4]]textareaなど制御コンポーネント全般の実習

• 状態と連結された入力処理フローとリレンダリングの理解

• 🧩ミッション: 様々な制御入力を組み合わせたフォームUI実装

🔹 非制御コンポーネント

• refによる入力値アクセスとDOMベースの制御方式

• 制御/非制御方式の長短所比較及び統合戦略

• 🧩ミッション：非制御方式で複数入力の一括処理を行う

🔹 React 19 高度なフォーム制御

• refをpropsとして渡す新しいパターン (React 19)

• 複雑な入力処理をカスタムフックに分離して再利用性を高める

• カスタムフック応用：内部状態の抽象化、カスタムバリデーション連携

🔹 バリデーション (Validation)

• 必須値、長さ、フォーマットなどの基本バリデーション実装パターン

• カスタムバリデーション関数の作成とフック統合

• 🧩ミッション：ログインフォーム完成
  → 入力制御 + バリデーション + 状態処理まで 総合的なフォーム実習

この章を終えると、単純な入力処理から一歩進んで、
複雑なフォームフローを構成し、きれいにメンテナンス可能な構造で管理する能力を得ることになります。
実務レベルの入力制御経験と最新のReact技術まで一緒に習得できる決定的な機会です。

Chapter 11
ToDoアプリ

この章では、これまで学んだReactの核心概念をもとに、実際に動作するTodo管理アプリケーションを実装します。
コンポーネント分離、状態管理、イベント処理、リストレンダリング、編集・削除など実戦React開発フローを最初から最後まで体験できる章です。

🛠 実践実装内容

• プロジェクトセッティングから始めて基本構造を作る

• 入力フォームを通したタスク登録機能の実装

• リストレンダリングでToDoリストを表示する

• チェックボックスによるタスク完了表示および削除機能の追加

• 🧩タスク編集機能の実装を通じて状態更新とUI制御ロジックを習得

✅ 実習を通じて得られるもの

• 単純なAPI理解を超えて、複数のコンポーネント間の役割分離とデータフローを設計

• 状態を中心に動作するReactアプリの構造と流れを最初から最後まで自ら実装

• ミッションに近い完成形プロジェクトで小規模なCRUDアプリを直接作ってみた経験

このチャプターを終えると、Reactの様々な機能を組み合わせて一つのアプリを設計し完成させる自信に満ちた初プロジェクト体験を得ることができます。

Chapter 12
サイドエフェクトとコンポーネント最適化技法

この章では、Reactコンポーネントが単純に「レンダリング」するだけでなく、非同期処理、ブラウザイベント、外部API処理などのサイドエフェクト管理と不要なレンダリングを減らす最適化戦略まで一緒に扱います。

🔹 サイドエフェクト管理（useEffect、useIdなど）

• useIdフックを活用したアクセシビリティ向上および固有識別子生成

• 🧩ToDoアプリにuseIdを適用して実務アクセシビリティ感覚を習得

• useEffectの動作タイミング、依存配列の原理など理論 + 実習

• 🧩TodoアプリにuseEffectを適用して外部データ、状態変化への反応処理を実装useEffect

🔹 コンポーネント最適化（React.memo、useCallback、useMemo）

• React.memoによる不要な再レンダリングの防止

• メモ化がいつ解除されるか、そしてその理由の分析

• [[CODE_1]]useCallback[[/CODE_2]]と[[CODE_2]]useMemo[[/CODE_2]]の違いと適用時点

• 🧩ToDoアプリにReact.memoとuseCallbackを適用して最適化を体感

🔹 高度なレンダリング戦略（lazy、suspense、error-boundary）

• コンポーネントを遅延ローディングするlazy()とSuspenseの基本概念

• ローディング待機中のUI構成とユーザーエクスペリエンス向上戦略

• エラー発生時にアプリが崩れないよう保護するErrorBoundary処理方式

この章を終えると、複雑なコンポーネント構造の中でもパフォーマンスと保守性を考慮した設計を直接実装することができ、
実際のサービスで求められるレベルのReactアプリ運営感覚を身につけることができます。

Chapter 13
Context API

コンポーネント間の深いデータ受け渡しをスッキリと処理したいなら？Context APIがその答えです。
この章では、グローバル状態管理の基礎としてContext APIの核心概念と使用法を学習し、実戦プロジェクトに適用しながら構造化されたアプリ開発能力を身につけます。

🔹 グローバル状態の必要性とContext API基本

• props drilling問題を解決するためのグローバル状態の必要性

• [[CODE_1]]createContext[[/CODE_2]]、[[CODE_2]]useContext[[/CODE_2]]を活用した基本的なグローバル状態設計

• 不要なレンダリング問題と構造改善方法（memo、context分離）

• reducerと組み合わせて複雑なグローバル状態も効率的に管理

• ✅複数のContextを組み合わせて使用するパターンの実習を含む

🧩 実践：UserProfile状態管理プロジェクト

• 初期UserProfileコード分析 → コンテキストオブジェクトで状態分離

• 🧩文字サイズ、テーマ、通知設定、言語設定(i18n.ts)などのユーザー環境設定をグローバル状態で管理

• useLayoutEffectを活用してレンダー順序およびレイアウト応答性を制御

• ✅Context API + カスタムフック設計による拡張性の高いグローバル状態構造の学習

🧩 ミッション: Todo アプリに Context API を適用

• 既存のTodoアプリにグローバル状態導入 → コンポーネント間状態共有構造改善

• 複数のコンポーネントが同じ状態を活用できるように構成し、実戦設計能力強化

この章を通じて、単純なコンポーネント単位の状態から脱却し、
アプリ全体を見渡すグローバル状態のフローと管理戦略を実際に実装できるようになります。

Chapter 14
Redux ToolKit

Context APIでグローバル状態の概念を理解したなら、今度はRedux Toolkit（RTK）でより拡張可能でメンテナンスしやすいグローバル状態管理構造を体験してみます。
この章では、複雑な状態を体系的に管理できるよう、Redux Toolkitの核心機能を実習中心で学習します。

🔹 Redux Toolkit 理論 + 構造構築

• Redux Toolkitの登場背景と既存のReduxとの違い

• ストア作成とcreateSliceによるスライス構造化

• 状態変更フロー、アクションディスパッチ、リレンダリングフローの理解

• ✅Redux DevTools連携による状態デバッグ

• パラメータ渡し、thunkを活用した非同期処理ロジックまで拡張

• ✅スライスを複数に分離し、マージして管理する高級構造実習

🧩 実践：UserProfile状態管理 with Redux

• UserProfileの状態をReduxベースで再構成

• 🧩文字サイズ、通知設定、テーマ状態などをスライス単位で構造化

• Context APIと比較してより強力な構造的制御力と保守性の比較体験

🧩 ミッション: ToDoアプリにReduxを適用

• 既存のTodoアプリをRedux Toolkit基盤に転換

• ✅Todo状態、追加/削除/修正ロジックをスライス単位で実装

• 実戦でのコンポーネント-ストア分離戦略とコード管理経験強化

この章を終えると、単純な状態管理から一歩進んで
「スライス単位の構造化されたグローバル状態管理」を直接実装できるレベルに到達します。
実務でRedux Toolkitをどのように使うか気になっていた方にも強くおすすめする実践章です。

Chapter 15
Zustand

複雑な設定なしで素早くグローバル状態を作りたいなら？
このチャプターでは軽量で直感的なグローバル状態管理ライブラリであるZustandを学習します。
Reduxより軽量でContextより強力な構造で、実務でも徐々に注目を集めている状態管理の代替手段です。

🔹 Zustandの基礎から実践まで

• Zustandの概念と哲学：「最小限のボイラープレートを持つグローバルストア」

• 基本的な使用方法と状態定義方式

• 状態にパラメータを渡し、派生状態を簡単に作成できる構造

• ✅persist機能でローカルストレージなど永続化ストレージ

• ✅subscribeWithSelectorを利用したリレンダリング最適化

• ✅immerを使って不変性管理を直感的に

• ✅devtools連携でデバッグまで簡単に処理

🧩 実践：UserProfile状態の実装

• UserProfile状態をZustandベースで再実装

• Redux/Contextと比較した時のコード量、直感性、拡張性の違いを体験

🧩 ミッション：Todo アプリ Zustand リファクタリング

• 既存のTodoアプリをZustand基盤に転換

• ✅コンポーネントがグローバル状態を使用する様々な方法を直接実装

• 状態変更 → UIレンダー → 保存/復旧フローを最小コードで実装する経験を提供

この章を終えると、3つの状態管理ツール（Context API、Redux Toolkit、Zustand）をすべて体験した実力者として
状況に適したグローバル状態ツールを判断し選択できる実務基準と感覚を得ることができます。

Chapter 16
データ通信

今度はReactアプリを「生きているアプリ」にする時間です。
この章では実際のサーバーとの通信方法を学習し、これをPostBrowserミニプロジェクトに直接接続してみながらReactアプリの実戦通信構造を完成させていきます。

🔹 データフェッチングの基礎

• HTTP通信の基本概念と構造

• json-serverでローカルAPIサーバー構成 → 🛠実習ベースのAPI環境構築

• Thunder ClientによるAPIテスト自動化

• 📝db.jsonファイル構成ノート提供により実習ベースで完備

🔹 fetchを活用したCRUD実習

• 基本リクエスト（GET、POST、PUT、DELETE）構造を身につける

• ✅ ローディング状態、エラーハンドリング、リクエストキャンセル（AbortController）など実戦要素まで反映

• 🧩実戦中心のCRUD作業をfetchですべて実装し、React連動フローを理解

🔹 axiosを活用した高度なパッチング

• axiosの基本的な使い方からCRUD全体の流れまとめ

• ✅axios.create()による共通インスタンス構成

• ✅インターセプター、エラーハンドリング、レスポンス構造統合など実務戦略の紹介

🧩 実戦プロジェクト：PostBrowserアプリ

• 基本コード提供 → Reactアプリにデータ連動適用

• 投稿レンダリング → ページング実装 → 検索機能追加まで順次完成

• ✅ 実習を通じて状態管理、パッチング処理、UI更新処理をすべて総合的に体験

この章を終えると、単純なコンポーネントを超えてAPIと通信する実戦型Reactアプリケーションを直接設計し実装できる能力を身につけることができます。
その後TanStack Queryや高度な状態管理に拡張できる確実な基盤を築くパートです。

Chapter 17
データ通信の深化

この章ではReact 19で導入されたフォーム/非同期関連APIを中心に、
データ通信をユーザーエクスペリエンスの観点からどのように最適化できるかを機能別実習 + TMDB実戦プロジェクトを通して学びます。

🔹 React 19のフォーム処理と非同期フロー

• useTransitionを利用したスムーズなUI状態遷移処理

• 🧩Transition適用前後の比較実習を通じた体感型学習

• useActionState、form action、useFormStatusを通じた
  → フォーム処理の新しい方式とサーバーアクションフローの学習

🔹 最新UX機能の活用

• useOptimisticで楽観的UI実装

• ✅ 非同期作業前にレスポンスなしでもUIを先に反映する最新UX設計

• use()によるPromise基盤データ直接処理およびSuspense連携

• ErrorBoundaryとSuspenseの組み合わせでエラー + ローディング対応戦略を構築

🧩 実践：TMDB映画アプリ開発

• 映画リスト レンダリング → ページング → 無限スクロール実装まで展開

• 🧩Suspense + use() + ErrorBoundary の組み合わせで実戦完成度の高い映画アプリを構築

• ✅会員登録フローまで統合したサーバーとの通信全体サイクル体験

この章を終えると、単純なfetchやaxiosレベルを超えて
React 19時代のデータUXをリードする機能を実戦アプリに自然に組み込めるレベルに到達します。
ユーザー中心のUI応答性とリアルタイム性のあるアプリ実装を望む方に強くおすすめするパートです。

Chapter 18
React Router v7

Reactアプリケーションにおいて、ルーターはページ構造、データフロー、ユーザーの移動体験を担う核心です。
この章ではReact Router v7の最新APIを基盤としてSPA構造を設計し、
ルーティング + データローディング + エラーハンドリングまで完全な遷移フローを構築してみます。

🔹 ルーティングの基礎と構造化

• 基本インストールとルーター設定

• ネストルート、インデックスルート、レイアウトルート構成

• ✅ルートプレフィックス、動的/オプショナルセグメント、スプラットなど実務型経路パターン学習

• NavLink、Linkを活用したUI中心の移動制御

🔹 フォーム & ナビゲーション動作

• コンポーネントでReact Router基盤フォーム処理の理解

• navigate()関数を活用したプログラミング方式の移動処理

• ✅従来のform送信方式とルーター基盤アプローチの違いを体験

🔹 データフェッチング + ローディング + エラーハンドリング

• loader属性によるルート単位データフェッチングフロー設計

• loaderで発生する非同期リクエスト → ローディング処理 → エラーハンドリング

• ✅loader + suspense、loader + errorElementなど実戦構造の実装

この章を終えると、Reactアプリのページ設計からデータフロー、ユーザーエクスペリエンスまで
全般的なSPA構造を自ら設計し運営できるフロントエンド設計力を得ることができます。

Chapter 19
最終プロジェクト - SULOG

これまで学習したコンポーネント設計、状態管理、データ通信、ユーザーエクスペリエンス最適化、認証処理、デプロイまで
すべての内容を集約したReact基盤フルスタックプロジェクトの完成段階です。
このチャプターでは実際のサービスのように動作するブログ型Webアプリケーションを直接実装し、デプロイまで体験します。

🛠 バックエンド + 認証実装

• MongoDB設定とバックエンドAPI連携

• ✅カカオログイン実装: アプリケーション登録からOAuthフロー全体構成まで

• ✅独自の会員登録/ログイン実装: フォーム構成 + サーバー連携 + 状態管理

• トークン認証、エラー処理、認証フロー デバッグ実習

🧩 投稿機能全体の実装

• 投稿登録 → 画像添付プリセット連動

• ✅ 修正、削除、詳細表示機能まで、すべてのCRUD処理フローを実現

• コメント作成、削除、レンダリングロジック → 状態連動及びリレンダリング処理

• ✅バックエンドの修正内容は講義ノートと一緒に提供

🔁 ページネーション + リスト最適化

• メインの投稿リストをページ単位で読み込み

• ✅ ページネーションコンポーネントを直接設計して実戦感覚を強化

• 無限スクロールではない定型化されたページング処理戦略の理解

🎯 UI改善 + エラー補完 + 実際のデプロイ

• ユーザーフローに合わせたUI/UX改善と不備点の補完

• ✅ フロントエンド＆バックエンドそれぞれVercelを通じた実際のデプロイ実習

• 実サービス基準でドメイン構成、画像最適化、最終点検まで

このファイナルチャプターを完了すると、単純な練習を超えて
「自らユーザー認証ベースのWebサービスを構築し運営できる開発者」になります。
講義を通じて学んだすべてを完成された一つのサービスに統合してみて実力を検証しましょう！

様々な実習

チャプター別レベルに合わせて構成された最適化された実習

デザインが適用されていない実習は除いて、デザインが適用されたもののみご紹介します！

信号機(chapter 08)

ランプ(chapter 08)

計算機（chapter 09）

ログイン(chapter 10)

タスク管理アプリ(chapter 11)

ユーザー設定(chapter 13)

Post Browser（第16章）

TMDB(第17章)

ファイナル(chapter 19) - 容量問題でGIF不可..😭

デザインが適用されていない例題まで含めると数十個以上

このような密度の高いすべての例題が皆さんの段階的な学習を

完璧にお手伝いすると自信を持っています。

ちょっと待って！

講義にも自分に合う'相性'があるってご存知ですか？

誰からも認められる大作ゲームが私には面白くない場合があるように、
講義もすべての人に同じように合うわけではありません。

どんなに評判の良い講義でも自分に合わない場合もあり、
逆に誰かには平凡な講義が自分には最高の講義になることもありますよね。

そのため、私のすべての講義は最低10%以上無料で公開されています。
直接聞いてみて、私とスタイルの「相性」が合うか確認してみてください！

もし私と相性が良ければ、
フロントエンド開発者への最短ルートをご案内いたします。
信じてついてきてください！🚀