Subscrippy開発日誌Vol.00：アプリ開発環境の構築
いよいよ、この時が来た。
サブスク管理アプリ『Subscrippy』の開発開始の狼煙が上がったのである。
期待と不安が入り混じる中、私は『開発環境』の構築作業を着々と始めるのだ。
Vite + React + TypeScript：地盤の環境構築
ここでは、まずVite + React + TypeScriptの環境を作っていく。
私がWeb系をベースにしたアプリを作る際によく選ぶ技術スタック。
「npm create vite@latest」コマンドを使って、一気に環境を作り上げることができる。
とても便利な世の中になったものだ。
# プロジェクト作成
npm create vite@latest subscrippy -- --template react-ts
# 現場へ移動
cd subscrippy
# 依存関係のインストール
npm installここまでを実行して、動作テストをしてみる。
React + TypeScriptで構成されたシンプルなカウントアプリが作られている。
「npm run dev」コマンドを実行し、「localhost:5173」にアクセスする。
# 下記コマンドを実行してlocalhost:5173にアクセス
npm run devそして、以下のような画面が表示されればOKだ。
TailwindCSS：美意識という名の鎧
続いて、見た目の環境を整えていく。
CSSを別ファイルに書いて行ったり来たりするのは、思考の断絶を生む。
コンポーネントと同じ場所に、スタイルという「意図」を直接書き込みたい。
だからTailwindCSSを選ぶ。
これは単なるCSSフレームワークではなく、マークアップに「意味」を持たせるための言語だ。
なお、v4系からはインストールの手順が変わっているようである。
公式のガイドに沿って、環境を構築していく。
まずは、TailwindCSS環境をインストールする。
npm install tailwindcss @tailwindcss/vite続いて、「vite.config.ts」でtailwindcssのプラグインを指定する。
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});そして、「src/index.css」の冒頭に「@import “tailwindcss";」を追記する。
以上でセットアップは完了である。
@import "tailwindcss";Capacitor：WebとNativeの架け橋
ここからが本番である。
今回作るのはWebアプリではない。
スマホアプリとして、ユーザーの懐に飛び込ませるのだ。
そのためのWebとNativeの架け橋となるのが『Capacitor』。
# 架け橋の建設
npm install @capacitor/core
npm install -D @capacitor/cli
# 初期化
npx cap init Subscrippy com.suzushinlab.subscrippy
# iOSとAndroidのプラットフォームを追加
npm install @capacitor/android @capacitor/ios
npx cap add android
npx cap add iosこの瞬間、Webアプリをスマホアプリとして形を変えることができるようになる。
androidとiosフォルダが生成できていれば、問題なく作業は進められている。
よし、ここまでは順調である。
SQLite：記憶の宮殿
そして、最後に。
アプリの心臓部となるデータの保存機能として、SQLiteを採用することとした。
localStrageは手軽ではあるが、永続の記憶手段としては心もとないためだ。
私が求めているのは堅牢な『金庫』である。
ここでは、CapacitorコミュニティがメンテナンスをしているSQLiteプラグインを導入する。
# 金庫の設置
npm install @capacitor-community/sqlite簡単な動作チェック
ここまで導入が終わったので、簡単な動作チェックをしてみることにした。
「src/App.tsx」を書き換え、TailwindCSSが正しく適用されるかどうかを見てみる。
import "./App.css";
function App() {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-xl shadow-2xl text-center max-w-sm w-full mx-4 border border-gray-200">
<h1 className="text-3xl font-extrabold text-indigo-600 mb-4 tracking-tight">
Subscrippy
</h1>
<p className="text-gray-600 mb-8 font-medium">
環境構築完了。
<br />
ここから伝説が始まる。
</p>
<button
className="bg-indigo-600 hover:bg-indigo-700 text-black-900 font-bold py-3 px-8 rounded-full transition duration-300 shadow-lg transform active:scale-95 ring-4 ring-indigo-200"
onClick={() => alert("システム正常稼働中")}>
Launch Project
</button>
</div>
</div>
);
}
export default App;
実際の画面は以下のようになる。
いよいよ、Subscrippy開発の長い旅路が始まったのである。
まとめ：整地は完了した。だが、ここからがスタートである！
ここまでで、画面にはシンプルなカードが表示されているだけである。
だがこれは、正しく基本的な開発環境が整ったことを意味するのだ。
いよいよ、これからSubscrippyの開発に取り組むこととなる。
今後の開発の旅路は順風満帆とは行かないだろう。
おそらく、予期せぬトラブルやエラー地獄に悩まされることとなる。
だが、それも良い経験になるに違いない。
AIのサポートを受けつつ、少しずつコードというレンガを自分で一つずつ積み上げていく。
その過程を楽しんでいきたいと思う。
果てしない道のりかもしれないが、「自分の足で進んでいる」という体験は何者にも代えがたい。
