Zenn
🐡

アプリ開発で使用したツール・ライブラリ解説

に公開
エンジニア
転職
web開発
tech

はじめに

ここでは、習慣トラッカーアプリの開発環境構築で導入したツールについて、それぞれの役割・なぜ必要か・それがないとどうなるか・どんなことができるかを自身の為に整理しています。

またこれからアプリ開発を実践する人や、ChatGPTやWEB検索で出てきた内容を言われるがままに何となくコピペしてる人にとって、役割や目的を理解するのにご参考にもなれば幸いです。

1. Homebrew

  • 役割：macOS用のパッケージマネージャー
  • なぜ必要か：Node.js や PostgreSQL などのCLIツールを簡単に管理するため
  • ないとどうなるか：各ツールのインストールや管理が煩雑になる
  • できること：CLIで brew install <ツール名> で開発ツールを導入

2. Node.js

  • 役割：JavaScript/TypeScript 実行環境
  • なぜ必要か：Next.js や Prisma を実行するために必須
  • ないとどうなるか：npmコマンドや開発サーバーが動かない
  • できること：JS/TSアプリの実行、npm/yarnでパッケージ管理

3. create-next-app

  • 役割：Next.js プロジェクト初期化CLI
  • なぜ必要か：ファイル構成や依存パッケージを一括で準備できる
  • ないとどうなるか：手動でNext.js環境を構築する必要があり非効率
  • できること：npx create-next-app でプロジェクト作成

4. TypeScript

  • 役割：型安全なJavaScript
  • なぜ必要か：コードの保守性と安全性を高めるため
  • ないとどうなるか：型エラーが実行時まで検出されない
  • できること：エディタ補完・型検査・静的解析

5. Tailwind CSS

  • 役割：ユーティリティファーストなCSSフレームワーク
  • なぜ必要か：デザインを効率よく、整った状態で行うため
  • ないとどうなるか：手動でCSS設計・管理が必要になる
  • できること：classNameだけでスタイリング可能

6. App Router（Next.js 13+）

  • 役割：Next.js の新しいルーティングシステム
  • なぜ必要か：柔軟なページ構成・レイアウト管理を可能にする
  • ないとどうなるか：従来のpages/構成に限定される
  • できること：app/ ディレクトリによるページ・レイアウト・データ取得の統合管理

7. Prisma

  • 役割：型安全なORM（Object Relational Mapper）
  • なぜ必要か：SQLを書かずに型付きでDBを操作できる
  • ないとどうなるか：SQL手書きや型との不整合リスクが増える
  • できること：prisma.user.findMany() のように安全にデータ操作

8. PostgreSQL

  • 役割：高機能なリレーショナルデータベース
  • なぜ必要か：データを永続的に保存・管理するため
  • ないとどうなるか：アプリで入力してもデータが保存されない
  • できること：ユーザー、習慣、ログなどの複雑な構造のデータ管理

9. Supabase

  • 役割：FirebaseライクなBaaS（認証・DB・ストレージ）
  • なぜ必要か：簡単に認証やユーザーデータの保護を実現するため
  • ないとどうなるか：ユーザー管理・セキュリティをすべて自前実装する必要あり
  • できること：OTP認証、セッション管理、Row Level Securityなど

10. @supabase/supabase-js

  • 役割：Supabaseと接続するためのJavaScript SDK
  • なぜ必要か：Supabase API（認証やDB）をフロントやAPIから扱うため
  • ないとどうなるか：fetchなどでAPIを手動で叩く必要がある
  • できること：supabase.auth.signInWithOtp() や supabase.from().select() などが簡単に使える

Discussion