[{"data":1,"prerenderedAt":736},["ShallowReactive",2],{"content-query-hTnA2XudQd":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tags":11,"rowTypeId":17,"sitemap":18,"body":19,"_type":730,"_id":731,"_source":732,"_file":733,"_stem":734,"_extension":735},"/articles/tech/development/portal-with-claude-code","development",false,"","AIで個人開発の価値は死んだのか？","Claude Codeを活用して家計管理PWAを約1週間で開発した体験をもとに、AIで爆速開発できる時代における個人開発の価値や、エンジニアとして力を入れるべきポイントについて考えます。","2026-03-19",[12,13,14,15,16],"Claude Code","AI","個人開発","Portal","キャリア",1,{"loc":4,"lastmod":10,"priority":17},{"type":20,"children":21,"toc":701},"root",[22,30,36,45,51,58,63,69,74,79,172,177,182,254,283,289,294,299,304,404,409,415,420,426,431,436,442,447,452,462,468,473,478,483,489,494,499,504,509,514,519,524,529,534,540,545,553,572,580,615,634,639,644,649,661,673,678],{"type":23,"tag":24,"props":25,"children":27},"element","h2",{"id":26},"はじめに",[28],{"type":29,"value":26},"text",{"type":23,"tag":31,"props":32,"children":33},"p",{},[34],{"type":29,"value":35},"以前、AIで資産管理アプリをClaude Codeで爆速開発し、個人開発のハードルが劇的に下がっていると強く感じました。\nハードルが下がるということは、「多少知識があれば誰でもできる」ということではないでしょうか。そうであれば、単純に個人開発しているだけでは技術的にもキャリア的にも効果的ではないのでは？と考えるようになりました。\nそこで、この開発経験から、今後個人開発へどのように向き合うかの考察をこの記事では紹介します。\nこれから就活を迎える学生や、ポートフォリオを作ろうとしている駆け出しエンジニアに向けて、一つの視点を提供できれば幸いです。",{"type":23,"tag":37,"props":38,"children":39},"summary-box",{},[40],{"type":23,"tag":31,"props":41,"children":42},{},[43],{"type":29,"value":44},"Claude Codeで家計管理PWAを1週間で開発した体験をもとに、AIによる爆速開発時代の個人開発の価値と、エンジニアとして注力すべきポイントについて考えました。結果、エンジニアに求められる本質的なスキルは変わっていないと考えました。",{"type":23,"tag":24,"props":46,"children":48},{"id":47},"完成したアプリportal",[49],{"type":29,"value":50},"完成したアプリ「Portal」",{"type":23,"tag":52,"props":53,"children":55},"h3",{"id":54},"そもそもなぜ作ろうと思ったのか",[56],{"type":29,"value":57},"そもそもなぜ作ろうと思ったのか？",{"type":23,"tag":31,"props":59,"children":60},{},[61],{"type":29,"value":62},"市販のアプリでは、私のように複数のプリペイドや決済サービスを利用している場合に対応しきれないからです。\nそこで、Claude Codeを利用した半自動開発をしてみたいと思っていたのでやってみようということになりました。",{"type":23,"tag":52,"props":64,"children":66},{"id":65},"方針できる限りサボる極端なくらいにサボる",[67],{"type":29,"value":68},"方針：できる限りサボる。極端なくらいにサボる",{"type":23,"tag":31,"props":70,"children":71},{},[72],{"type":29,"value":73},"基本的にこの方針で進めました。現状、どの程度までは自動で進めて、どの程度からは人間が介入しないといけないかのバランスを掴むためです。",{"type":23,"tag":52,"props":75,"children":77},{"id":76},"技術スタック",[78],{"type":29,"value":76},{"type":23,"tag":80,"props":81,"children":82},"table",{},[83,102],{"type":23,"tag":84,"props":85,"children":86},"thead",{},[87],{"type":23,"tag":88,"props":89,"children":90},"tr",{},[91,97],{"type":23,"tag":92,"props":93,"children":94},"th",{},[95],{"type":29,"value":96},"レイヤー",{"type":23,"tag":92,"props":98,"children":99},{},[100],{"type":29,"value":101},"技術",{"type":23,"tag":103,"props":104,"children":105},"tbody",{},[106,120,133,146,159],{"type":23,"tag":88,"props":107,"children":108},{},[109,115],{"type":23,"tag":110,"props":111,"children":112},"td",{},[113],{"type":29,"value":114},"フレームワーク",{"type":23,"tag":110,"props":116,"children":117},{},[118],{"type":29,"value":119},"Nuxt 4（Vue 3）",{"type":23,"tag":88,"props":121,"children":122},{},[123,128],{"type":23,"tag":110,"props":124,"children":125},{},[126],{"type":29,"value":127},"言語",{"type":23,"tag":110,"props":129,"children":130},{},[131],{"type":29,"value":132},"TypeScript",{"type":23,"tag":88,"props":134,"children":135},{},[136,141],{"type":23,"tag":110,"props":137,"children":138},{},[139],{"type":29,"value":140},"スタイリング",{"type":23,"tag":110,"props":142,"children":143},{},[144],{"type":29,"value":145},"Tailwind CSS + Headless UI",{"type":23,"tag":88,"props":147,"children":148},{},[149,154],{"type":23,"tag":110,"props":150,"children":151},{},[152],{"type":29,"value":153},"バックエンド",{"type":23,"tag":110,"props":155,"children":156},{},[157],{"type":29,"value":158},"Firebase（Auth + Firestore）",{"type":23,"tag":88,"props":160,"children":161},{},[162,167],{"type":23,"tag":110,"props":163,"children":164},{},[165],{"type":29,"value":166},"ホスティング",{"type":23,"tag":110,"props":168,"children":169},{},[170],{"type":29,"value":171},"Firebase Hosting",{"type":23,"tag":31,"props":173,"children":174},{},[175],{"type":29,"value":176},"上記構成となっています。今回は認証基盤、データ基盤を簡単に構築したかったため、Firebaseを利用しています。こうすればクロスプラットフォームな実装が容易ですし、特定のGoogleアカウントでログインしなければ利用できないようにするような実装が簡単にできます。",{"type":23,"tag":52,"props":178,"children":180},{"id":179},"主な機能",[181],{"type":29,"value":179},{"type":23,"tag":183,"props":184,"children":185},"ol",{},[186,202,215,228,241],{"type":23,"tag":187,"props":188,"children":189},"li",{},[190,196,200],{"type":23,"tag":191,"props":192,"children":193},"strong",{},[194],{"type":29,"value":195},"ダッシュボード",{"type":23,"tag":197,"props":198,"children":199},"br",{},[],{"type":29,"value":201},"\n純資産推移・予算消化率・カテゴリ別支出・資産負債の内訳・貯蓄率を一画面に集約",{"type":23,"tag":187,"props":203,"children":204},{},[205,210,213],{"type":23,"tag":191,"props":206,"children":207},{},[208],{"type":29,"value":209},"CSV一括インポート",{"type":23,"tag":197,"props":211,"children":212},{},[],{"type":29,"value":214},"\n銀行・クレジットカード・電子マネー・証券口座・店舗プリペイドなど6種類のCSVをドラッグ&ドロップでインポート。エンコーディング検出・フォーマット自動判定・カテゴリ推論・重複排除まで自動",{"type":23,"tag":187,"props":216,"children":217},{},[218,223,226],{"type":23,"tag":191,"props":219,"children":220},{},[221],{"type":29,"value":222},"予算管理",{"type":23,"tag":197,"props":224,"children":225},{},[],{"type":29,"value":227},"\nカテゴリごとの月次予算設定と消化状況の可視化",{"type":23,"tag":187,"props":229,"children":230},{},[231,236,239],{"type":23,"tag":191,"props":232,"children":233},{},[234],{"type":29,"value":235},"AIレポート",{"type":23,"tag":197,"props":237,"children":238},{},[],{"type":29,"value":240},"\nBS・PL・予算乖離・前月比較・投資成績を含むMarkdownをワンクリック生成。Claude や ChatGPT にそのまま貼り付けて分析できる",{"type":23,"tag":187,"props":242,"children":243},{},[244,249,252],{"type":23,"tag":191,"props":245,"children":246},{},[247],{"type":29,"value":248},"月次締め",{"type":23,"tag":197,"props":250,"children":251},{},[],{"type":29,"value":253},"\n資産・負債・純資産のスナップショットを保存し、過去データを凍結",{"type":23,"tag":31,"props":255,"children":256},{},[257,259,262,268,271,273,278,281],{"type":29,"value":258},"一部機能のデモ画像を紹介します。",{"type":23,"tag":197,"props":260,"children":261},{},[],{"type":23,"tag":263,"props":264,"children":267},"img",{"alt":265,"src":266},"budget.png","/images/articles/tech/development/budget.png",[],{"type":23,"tag":197,"props":269,"children":270},{},[],{"type":29,"value":272},"\n⬆️ 予算画面\n",{"type":23,"tag":263,"props":274,"children":277},{"alt":275,"src":276},"ai-report.png","/images/articles/tech/development/ai-report.png",[],{"type":23,"tag":197,"props":279,"children":280},{},[],{"type":29,"value":282},"\n⬆️ AIレポート画面",{"type":23,"tag":24,"props":284,"children":286},{"id":285},"claude-codeで開発を進める利点",[287],{"type":29,"value":288},"Claude Codeで開発を進める利点",{"type":23,"tag":31,"props":290,"children":291},{},[292],{"type":29,"value":293},"これだけの多機能なアプリを、今回はほぼAIエージェントに実装を任せて作り上げました。ここからは、その具体的な開発プロセスと利点について触れます。",{"type":23,"tag":52,"props":295,"children":297},{"id":296},"開発スピード",[298],{"type":29,"value":296},{"type":23,"tag":31,"props":300,"children":301},{},[302],{"type":29,"value":303},"土日＋平日の空き時間で、以下の規模のアプリを実装できました。",{"type":23,"tag":80,"props":305,"children":306},{},[307,323],{"type":23,"tag":84,"props":308,"children":309},{},[310],{"type":23,"tag":88,"props":311,"children":312},{},[313,318],{"type":23,"tag":92,"props":314,"children":315},{},[316],{"type":29,"value":317},"成果物",{"type":23,"tag":92,"props":319,"children":320},{},[321],{"type":29,"value":322},"数量",{"type":23,"tag":103,"props":324,"children":325},{},[326,339,352,365,378,391],{"type":23,"tag":88,"props":327,"children":328},{},[329,334],{"type":23,"tag":110,"props":330,"children":331},{},[332],{"type":29,"value":333},"Composable（ビジネスロジック）",{"type":23,"tag":110,"props":335,"children":336},{},[337],{"type":29,"value":338},"24個",{"type":23,"tag":88,"props":340,"children":341},{},[342,347],{"type":23,"tag":110,"props":343,"children":344},{},[345],{"type":29,"value":346},"ページ",{"type":23,"tag":110,"props":348,"children":349},{},[350],{"type":29,"value":351},"10画面",{"type":23,"tag":88,"props":353,"children":354},{},[355,360],{"type":23,"tag":110,"props":356,"children":357},{},[358],{"type":29,"value":359},"コンポーネント",{"type":23,"tag":110,"props":361,"children":362},{},[363],{"type":29,"value":364},"28個",{"type":23,"tag":88,"props":366,"children":367},{},[368,373],{"type":23,"tag":110,"props":369,"children":370},{},[371],{"type":29,"value":372},"明細CSVパーサー",{"type":23,"tag":110,"props":374,"children":375},{},[376],{"type":29,"value":377},"6種類",{"type":23,"tag":88,"props":379,"children":380},{},[381,386],{"type":23,"tag":110,"props":382,"children":383},{},[384],{"type":29,"value":385},"Firestoreコレクション",{"type":23,"tag":110,"props":387,"children":388},{},[389],{"type":29,"value":390},"11個",{"type":23,"tag":88,"props":392,"children":393},{},[394,399],{"type":23,"tag":110,"props":395,"children":396},{},[397],{"type":29,"value":398},"型定義",{"type":23,"tag":110,"props":400,"children":401},{},[402],{"type":29,"value":403},"14KB相当",{"type":23,"tag":52,"props":405,"children":407},{"id":406},"特に活きた場面",[408],{"type":29,"value":406},{"type":23,"tag":410,"props":411,"children":413},"h4",{"id":412},"定型コードの量産",[414],{"type":29,"value":412},{"type":23,"tag":31,"props":416,"children":417},{},[418],{"type":29,"value":419},"CSVパーサーは1つ目を丁寧に作った後、「同じパターンで〇〇版を作って」と依頼するだけで次々と生成できました。型定義・エラーハンドリング・カテゴリ推論の呼び出しまで一貫しています。",{"type":23,"tag":410,"props":421,"children":423},{"id":422},"物量で押してくるタイプの面倒な作業をaiに押し付ける",[424],{"type":29,"value":425},"物量で押してくるタイプの面倒な作業をAIに押し付ける",{"type":23,"tag":31,"props":427,"children":428},{},[429],{"type":29,"value":430},"全角カタカナの正規表現、ApexChartsの膨大なオプション設定など、手作業では時間がかかる部分をAIに任せられました。特に明細の自動分類では正規表現で逐次マッチングしている仕組みにしているため、役立ちました。",{"type":23,"tag":24,"props":432,"children":434},{"id":433},"効果的だった工夫",[435],{"type":29,"value":433},{"type":23,"tag":52,"props":437,"children":439},{"id":438},"claudemdの整備",[440],{"type":29,"value":441},"CLAUDE.mdの整備",{"type":23,"tag":31,"props":443,"children":444},{},[445],{"type":29,"value":446},"コーディング規約・アーキテクチャ方針・Firestoreのルールを定義しておくと、生成されるコードのスタイルが統一されます。最初のCLAUDE.mdの品質が全体を左右します。",{"type":23,"tag":52,"props":448,"children":450},{"id":449},"デザインをあらかじめ作っておく",[451],{"type":29,"value":449},{"type":23,"tag":31,"props":453,"children":454},{},[455,457],{"type":29,"value":456},"この開発ではあらかじめGoogle StitchでUIの基本となるデザインを作成しました。そして、これをHTMLとしてリポジトリに配置し、AIエージェントを利用してNuxtへ移植するような順序で実装しました。こうすることで、デザインの方向性をエージェントが理解できるようになり、一貫したデザインで開発サイクルを回すことができました。\n",{"type":23,"tag":263,"props":458,"children":461},{"alt":459,"src":460},"Google_Stitch","/images/articles/tech/development/google-stitch.png",[],{"type":23,"tag":52,"props":463,"children":465},{"id":464},"geminiと壁打ちして仕様書を作成する",[466],{"type":29,"value":467},"Geminiと壁打ちして仕様書を作成する",{"type":23,"tag":31,"props":469,"children":470},{},[471],{"type":29,"value":472},"要件は人間にしかわかりませんし、単純に「資産管理アプリを作って」というだけの指示では使えるものは作れなかったと思います。そこで、今回の開発ではGeminiと壁打ちをし、完成した仕様書をリポジトリに配置しました。この仕様通りにAIは実装するだけなので、こちらの想定通りのアプリが開発できました。",{"type":23,"tag":24,"props":474,"children":476},{"id":475},"人間がリードすべきところ",[477],{"type":29,"value":475},{"type":23,"tag":31,"props":479,"children":480},{},[481],{"type":29,"value":482},"AIエージェントを活用した開発を進めていくうちに人間が進めるべき箇所が見えてきました。",{"type":23,"tag":52,"props":484,"children":486},{"id":485},"要件定義ux関連",[487],{"type":29,"value":488},"要件定義・UX関連",{"type":23,"tag":31,"props":490,"children":491},{},[492],{"type":29,"value":493},"先述した通り、要件は人間にしかわからないですし、壁打ちをしてから初めてわかる「隠れていた要件」が出てくることもあります。このような場合に対応するには人間が必要です。",{"type":23,"tag":52,"props":495,"children":497},{"id":496},"設計",[498],{"type":29,"value":496},{"type":23,"tag":31,"props":500,"children":501},{},[502],{"type":29,"value":503},"今回爆速で開発する上で、設計工程は重要なところ以外はかなり雑に進めました。しかし雑に進めたためか、機能を追加し続けると徐々に既存の不適切な設計箇所のコードが複雑化する現象が起こりました。そのため、設計は人間が関わり、定期的に見直すようにすることが必要だと感じています。",{"type":23,"tag":31,"props":505,"children":506},{},[507],{"type":29,"value":508},"特に、今回の開発以上に大規模なプロダクトになった場合、AIエージェントは全体のコンテキストを把握しながら開発することが困難になるため、この問題はより顕在化すると思われます。実際、この規模の開発でも「デグレ」が発生することがありました。",{"type":23,"tag":31,"props":510,"children":511},{},[512],{"type":29,"value":513},"また、AIエージェントに指示をすると「動くもの」は簡単に作ってくれます。しかし、データ効率や時間効率を意識した実装になっていないことがしばしばあります。したがって、パフォーマンスを試験する仕組みを人間が整える必要があると考えられます。",{"type":23,"tag":52,"props":515,"children":517},{"id":516},"知識の運用",[518],{"type":29,"value":516},{"type":23,"tag":31,"props":520,"children":521},{},[522],{"type":29,"value":523},"AIエージェントで実装を進めると開発が高速で進みます。この結果、一瞬でコードが肥大化し、どこに何があるかを把握しきれなくなります。さらに、ドキュメントなどを書いていた場合は情報が一瞬で古くなります。これを解決するためにナレッジをどのように管理するかという仕組みを考える必要があります。",{"type":23,"tag":52,"props":525,"children":527},{"id":526},"セキュリティ",[528],{"type":29,"value":526},{"type":23,"tag":31,"props":530,"children":531},{},[532],{"type":29,"value":533},"こればかりは目視で確認しないと安心できないです。何らかの拍子でシークレットがリポジトリにコミットされたり、プロダクションコードに脆弱性のあるコードが混入した場合、非常に大きな問題となるからです。",{"type":23,"tag":24,"props":535,"children":537},{"id":536},"エンジニアとして手を抜く部分力を入れる部分",[538],{"type":29,"value":539},"エンジニアとして手を抜く部分・力を入れる部分",{"type":23,"tag":31,"props":541,"children":542},{},[543],{"type":29,"value":544},"これまでClaude Codeを活用する利点と人間が必要な箇所をまとめました。これを総括すれば、自ずとエンジニアが何に力を入れ、何に手を抜くかが見えてきます。",{"type":23,"tag":31,"props":546,"children":547},{},[548],{"type":23,"tag":191,"props":549,"children":550},{},[551],{"type":29,"value":552},"手を抜く場面",{"type":23,"tag":554,"props":555,"children":556},"ul",{},[557,562,567],{"type":23,"tag":187,"props":558,"children":559},{},[560],{"type":29,"value":561},"物量はあるが単純な実装",{"type":23,"tag":187,"props":563,"children":564},{},[565],{"type":29,"value":566},"文章の作成",{"type":23,"tag":187,"props":568,"children":569},{},[570],{"type":29,"value":571},"UIの実装（CSSなど）",{"type":23,"tag":31,"props":573,"children":574},{},[575],{"type":23,"tag":191,"props":576,"children":577},{},[578],{"type":29,"value":579},"力を入れる部分",{"type":23,"tag":554,"props":581,"children":582},{},[583,588,592,605,610],{"type":23,"tag":187,"props":584,"children":585},{},[586],{"type":29,"value":587},"要件分析・要件定義",{"type":23,"tag":187,"props":589,"children":590},{},[591],{"type":29,"value":496},{"type":23,"tag":187,"props":593,"children":594},{},[595,597],{"type":29,"value":596},"デザイン・UXの判断\n",{"type":23,"tag":554,"props":598,"children":599},{},[600],{"type":23,"tag":187,"props":601,"children":602},{},[603],{"type":29,"value":604},"アイコンの作成などブランディングの要素も含む",{"type":23,"tag":187,"props":606,"children":607},{},[608],{"type":29,"value":609},"運用の仕組みづくり",{"type":23,"tag":187,"props":611,"children":612},{},[613],{"type":29,"value":614},"セキュリティ運用",{"type":23,"tag":31,"props":616,"children":617},{},[618,620,625,627,632],{"type":29,"value":619},"こう見ると、AIエージェントが出てきたから発生した問題というよりは、「",{"type":23,"tag":191,"props":621,"children":622},{},[623],{"type":29,"value":624},"AIエージェントによって実装が効率化された結果、問題に向き合う機会が増えた",{"type":29,"value":626},"」というのが私の考えです。つまり、エンジニアが力を入れないといけない部分というのは",{"type":23,"tag":191,"props":628,"children":629},{},[630],{"type":29,"value":631},"AIエージェントが出てくる前と変わらない",{"type":29,"value":633},"と考えています。",{"type":23,"tag":24,"props":635,"children":637},{"id":636},"個人開発の結果だけでは評価されない時代へ",[638],{"type":29,"value":636},{"type":23,"tag":31,"props":640,"children":641},{},[642],{"type":29,"value":643},"しかし、求められるスキルは変わらなくても、周囲からの見え方は変わりました。",{"type":23,"tag":31,"props":645,"children":646},{},[647],{"type":29,"value":648},"特に学生や未経験のエンジニアにとって、以前であれば個人開発のポートフォリオが一定の実力を示す材料だったと思います。しかし、これまで説明した通り、ただ実装するだけであれば誰でもできるようになりました。この結果、ただ個人開発で物を作ったというだけでは評価されない時代になったと思います。",{"type":23,"tag":31,"props":650,"children":651},{},[652,654,659],{"type":29,"value":653},"そのため、今後はただ物を作るだけでなく、「なぜこの方法を使うか」、「この設計にする意図とその副作用は何か」など開発プロセスに現れる",{"type":23,"tag":191,"props":655,"children":656},{},[657],{"type":29,"value":658},"技術の本質的な部分",{"type":29,"value":660},"に向き合うことを意識し、説明できる力がより求められるようになると考えています。実際、過去に学んだソフトウェア設計の理論や、オーバーエンジニアリングで複雑化し拡張が困難になった経験も非常に活きています。したがって、AIに頼めばなんでもやってくれるからといって、それは使いこなせているとは言えないのです。",{"type":23,"tag":31,"props":662,"children":663},{},[664,666,671],{"type":29,"value":665},"もしこれを",{"type":23,"tag":191,"props":667,"children":668},{},[669],{"type":29,"value":670},"実力と勘違いしてしまうと腐ってしまう",{"type":29,"value":672},"のではないかと危機感を覚えたので、自戒も込めて以上の内容を考えました。",{"type":23,"tag":24,"props":674,"children":676},{"id":675},"まとめ",[677],{"type":29,"value":675},{"type":23,"tag":554,"props":679,"children":680},{},[681,686,691,696],{"type":23,"tag":187,"props":682,"children":683},{},[684],{"type":29,"value":685},"AIエージェントを利用すると、簡単に「実装」を効率化できる",{"type":23,"tag":187,"props":687,"children":688},{},[689],{"type":29,"value":690},"しかし、依然として要件定義、設計、運用などは人間が関与しないと低品質なプロダクトになってしまう",{"type":23,"tag":187,"props":692,"children":693},{},[694],{"type":29,"value":695},"これらの問題はAIが原因というわけではなく、AIエージェントによって実装が効率化された結果向き合う機会が増えただけ",{"type":23,"tag":187,"props":697,"children":698},{},[699],{"type":29,"value":700},"今後はより一層、技術の本質をどのくらい理解しているかが求められる",{"title":7,"searchDepth":702,"depth":702,"links":703},2,[704,705,712,716,721,727,728,729],{"id":26,"depth":702,"text":26},{"id":47,"depth":702,"text":50,"children":706},[707,709,710,711],{"id":54,"depth":708,"text":57},3,{"id":65,"depth":708,"text":68},{"id":76,"depth":708,"text":76},{"id":179,"depth":708,"text":179},{"id":285,"depth":702,"text":288,"children":713},[714,715],{"id":296,"depth":708,"text":296},{"id":406,"depth":708,"text":406},{"id":433,"depth":702,"text":433,"children":717},[718,719,720],{"id":438,"depth":708,"text":441},{"id":449,"depth":708,"text":449},{"id":464,"depth":708,"text":467},{"id":475,"depth":702,"text":475,"children":722},[723,724,725,726],{"id":485,"depth":708,"text":488},{"id":496,"depth":708,"text":496},{"id":516,"depth":708,"text":516},{"id":526,"depth":708,"text":526},{"id":536,"depth":702,"text":539},{"id":636,"depth":702,"text":636},{"id":675,"depth":702,"text":675},"markdown","content:articles:tech:development:portal-with-claude-code.md","content","articles/tech/development/portal-with-claude-code.md","articles/tech/development/portal-with-claude-code","md",1776356306700]