はじめに
未経験の技術を用いて ToDo アプリを開発し、基礎的な知識と実装力の習得を目指します。
バックエンドもフロントエンドもTypeScriptで実装し、APIインターフェースにはGraphQLを使用します。
可能な限り詳細な手順を記載していますが、自身の理解に基づいて整理した内容のため、参考程度に見ていただけますと幸いです。
なお、記事内で示しているバージョンは執筆時点(2025年6月現在)のものであるため、ご注意ください。
環境・使用する技術
◼️バックエンド
- TypeScript
- Node.js
- Express
- Apollo Server
- PostgreSQL
- Prisma
◼️フロントエンド
- TypeScript
- Vue.js
- Nuxt.js
- Apollo Client
- Vuetify
◼️その他環境
- OS：macOS Sequoia
- ブラウザ：Google Chrome
- コンテナ：Docker
- エディタ：Visual Studio Code
プロジェクトセットアップ
プロジェクトルート（TypeScript-ToDo）フォルダ、backendフォルダ、frontendフォルダを作成
TypeScript-ToDo/
├── backend/
├── frontend/
⭐️フロントエンドのセットアップ
frontend/に移動
% cd frontend
Nuxtの新規プロジェクトを作成
% npx nuxi init .
「次のパッケージをインストールする必要があるよ：nuxi@3.25.1」と聞かれるので「y」を選択
Need to install the following packages:
nuxi@3.25.1
Ok to proceed? (y)
「ディレクトリがすでに存在するが、どのように処理する？」と聞かれるので
「Override its contents」（内容を上書きする）を選択
ℹ Welcome to Nuxt!
ℹ Creating a new project in /TypeScript-ToDo/frontend.
❯ The directory /TypeScript-ToDo/frontend already exists. What would you like to do?
● Override its contents
○ Select different directory
○ Abort
「どのパッケージマネージャーを使う？」と聞かれるので「npm」を選択
❯ Which package manager would you like to use?
● npm (current)
○ pnpm
○ yarn
○ bun
○ deno
諸々のインストールが終わった後に「Gitリポジトリを初期化する？」と聞かれるので「yes」を選択
✔ Installation completed.
❯ Initialize git repository?
● Yes / ○ No
「公式モジュールの中で、インストールしたいものはある？」と聞かれるが、
今回はシンプルなToDoアプリのため一旦何も選択せず次へ進む
必要になったら後から入れることも可能
❯ Would you like to install any of the official modules?
◻ @nuxt/content – The file-based CMS with support for Markdown, YAML, JSON
◻ @nuxt/eslint – Project-aware, easy-to-use, extensible and future-proof ESLint integration
◻ @nuxt/fonts – Add custom web fonts with performance in mind
・
・
・
「Nuxtプロジェクトがv3テンプレートで作成されたよ。次の手順はnpm run dev で開発サーバーを起動してね」と言われたのでNuxtプロジェクトの雛形の作成が完了
✨ Nuxt project has been created with the v3 template. Next steps:
› Start development server with npm run dev
frontend/の中身を見て、フロントエンドの雛形が作られていることを確認
% tree -L 1
.
├── README.md // プロジェクトの説明（目的、起動方法など）が書かれたファイル
├── app.vue // Nuxtアプリのレイアウトの土台となるVueコンポーネントファイル
├── node_modules/ // npm installでインストールされた依存ライブラリが入るフォルダ
├── nuxt.config.ts // Nuxtアプリの設定ファイル
├── package-lock.json // 実際にインストールされたパッケージのバージョン固定情報ファイル
├── package.json // Nuxtアプリの設定ファイル兼依存リストファイル
├── public // 静的ファイル（画像、faviconなど）を置くフォルダ
├── server // サーバーサイドの機能を置くフォルダ
└── tsconfig.json // TypeScriptの設定ファイル
GraphQLを使うために必要な依存関係（@apollo/clientとgraphql）をインストール
% npm install @apollo/client graphql
🚀フロントエンドのセットアップが完了！！！
#1のおわりに
フロントエンドのセットアップ お疲れさまでした。
次回からは バックエンドのセットアップ に入っていきます。
〜バックエンドもフロントエンドもTypeScriptで実装する際のメリット〜
バックエンドもフロントエンドもTypeScriptで実装することには、多くのメリットがあります。
TypeScriptで統一することで得られるメリットを3つに絞って紹介します。
◼️型安全な開発によるバグの予防
TypeScriptは、型情報を利用した早期のバグ検出が可能であり、特に下記のようなケースで有効です。
・文字列と数値の取り違え
・optionalなプロパティの存在チェック漏れ
・APIパラメータの誤り（例：user_id vs userId）
JavaScriptでは実行時にしか検出できないこれらの不具合を、TypeScriptではコンパイル時に検出できるため、テストでは気付きにくい仕様ズレも未然に防ぐことができます。
◼️学習コストが下がる
TypeScriptで統一することで下記のように学習コストを抑えられます。
・新しく習得する言語が JS/TS だけで済む
・開発ツールやエディタ操作（補完・ジャンプ）が全て同じように働く
・フロントエンドの経験しかなくても JS/TS の知識があればバックエンドに移行しやすい
◼️モノレポや共通パッケージとの親和性
TypeScriptを使うことで、モノレポ（monorepo）や共通ライブラリの導入がしやすくなります。
・共通の型定義やユーティリティを packages/shared に配置
・tsconfig.json のパスエイリアスで型を双方向に使い回し
・Lint, Format, Test の統一（ESLint + Prettier + Jest or Vitest）
開発・ビルド・デプロイの仕組みまで統一できるため、大規模プロジェクトでもスケーラブルかつ一貫性のある運用が可能になります。
Discussion