4０代からのプログラミング挑戦記録 – Next.jsでSNS管理ツールを作ってみた話

こんにちは！自衛官をしながらプログラミング学習に取り組んでいるゆうちです。今回は、学習の一環として「SNS運用管理ツール」をNext.jsで作ってみた体験談をお話しします。

完全初心者の転職希望の方に、リアルな開発体験をお伝えできればと思います。

作ったもの：SNS運用管理ツール

今回チャレンジしたのは、複数のSNSプラットフォーム（Twitter、Instagram、Facebook）の投稿を一元管理できるツールです。

主な機能

• 投稿の作成・編集・削除
• 投稿の予約機能
• エンゲージメント分析（いいね数、コメント数など）
• プラットフォーム別のパフォーマンス比較

正直、最初は「こんなの作れるのかな…」と不安でしたが、一歩ずつ進めることで形になっていきました。

技術選択：なぜNext.jsを選んだのか

学習中の身として、技術選択は本当に悩みました。

候補に挙がった技術

• React（基礎は学習済み）
• Vue.js（シンプルと聞いていた）
• Next.js（Reactの発展版？）

Next.jsを選んだ理由

1. 転職市場での需要が高い – 求人情報を見ていると、Next.jsの案件が増えている
2. Reactの延長で学べる – すでに学習していたReactの知識を活かせる
3. フルスタック開発ができる – フロントエンドもバックエンドも一つで完結
4. Vercelでのデプロイが簡単 – 作ったものを実際に公開できる

初心者には少しハードルが高いかもしれませんが、「どうせ学ぶなら実際の現場で使われている技術を」という気持ちで選択しました。

実際の開発で使った技術スタック

フレームワーク: Next.js 15 (App Router)
言語: TypeScript
スタイリング: Tailwind CSS
データベース: Supabase (PostgreSQL)
デプロイ: Vercel
バージョン管理: Git + GitHub

正直、全部が新しい技術でした。TypeScriptなんて名前すら最近知ったくらいです（笑）

ハマったポイント1：データベース選択の迷走

最初はローカルで動かすためにSQLiteを使っていました。開発中は問題なく動いていたのですが…

問題発生

Vercelにデプロイしようとしたら、ビルドがタイムアウト。調べてみると、SQLiteがVercelの環境では動かないことが判明。

bash

> next build
Creating an optimized production build ...
（2分後タイムアウト）

解決策

Supabase（PostgreSQL）に完全移行することに。最初からクラウドデータベースを使えば良かった…という後悔もありましたが、おかげでSQLとNoSQLの違いや、ローカル環境と本番環境の差について学べました。

ハマったポイント2：環境変数の管理

開発環境では動くのに、デプロイしたら動かない。これも初心者あるあるだと思います。

問題

Error: supabase url is required

原因

環境変数（NEXT_PUBLIC_SUPABASE_URL）がVercel側で設定されていなかった。

学んだこと

• 環境変数の概念
• ローカル（.env.local）と本番（Vercel設定）の違い
• セキュリティの重要性（APIキーは公開しちゃダメ！）

ハマったポイント3：ReactのuseEffect地獄

データを取得する部分で、無限ループにハマりました。

javascript

// ダメなパターン
useEffect(() => {
  fetchData();
}, [data]); // dataが更新されるたびに実行される→無限ループ

// 修正後
useEffect(() => {
  fetchData();
}, []); // 初回のみ実行

こういう基礎的なミスで何時間も悩んだりして…でも、こうやって痛い目に遭うことで理解が深まるんですよね。

苦労した部分と学び

1. TypeScriptの型定義

typescript

// こんな感じで型を定義する必要が
interface Post {
  id: string;
  platform: 'twitter' | 'instagram' | 'facebook';
  content: string;
  scheduled_time?: string;
  // ...
}

最初は「なんで型なんて書かなきゃいけないの？」と思いましたが、開発が進むにつれて「あ、これってバグを防いでくれるんだ」と実感。

2. API設計

フロントエンドとバックエンドの連携。どんなデータをやり取りするのか、エラーハンドリングはどうするのか。設計の重要性を痛感しました。

3. UI/UXの難しさ

機能は作れても、使いやすいデザインにするのは別の技術。Tailwind CSSを使いましたが、センスの無さを実感…（苦笑）

実際に動くものができた達成感

紆余曲折ありましたが、最終的に以下が実現できました：

• ✅ 投稿の作成・編集・削除
• ✅ リアルタイムでのデータ更新
• ✅ レスポンシブデザイン
• ✅ Vercelでの本番公開

「自分でも作れるんだ！」という自信につながりました。

4０代から始める学習で感じたこと

良かった点

• 集中力：若い頃より集中して取り組める
• 問題解決力：社会人経験が活かされる
• 目的意識：転職という明確な目標がある

苦労した点

• 記憶力：覚えるのに時間がかかる
• 体力：長時間のコーディングはきつい
• 情報収集：どの情報が正しいか判断が難しい

工夫したこと

• 毎日少しずつ：1日2-3時間でも継続
• 手を動かす：理論より実践重視
• 記録をつける：学んだことをメモに残す

転職希望者へのアドバイス

1. 完璧を求めすぎない

「まずは動くものを作る」が大切。リファクタリングは後からできます。

2. 実際に公開してみる

作ったものをVercelやNetlifyで公開すると、ポートフォリオにもなります。

3. エラーを恐れない

エラーは学習の機会。Google検索とStack Overflowが友達です。

次のステップ

このプロジェクトを通じて、以下を学習予定です：

• テスト：Jest、Cypressでの自動テスト
• パフォーマンス最適化：ページ速度の改善
• セキュリティ：認証・認可の実装
• インフラ：AWSやDockerの学習

まとめ

4０代からのプログラミング学習は確かに大変ですが、不可能ではありません。今回のSNS管理ツール開発を通じて、「自分でもアプリケーションが作れる」という自信を得ることができました。

転職を目指している同世代の方、一緒に頑張りましょう！

今回のプロジェクトで学んだ技術

• Next.js (App Router)
• TypeScript
• Supabase
• Tailwind CSS
• Vercel deployment
• Git/GitHub

最後まで読んでいただき、ありがとうございました。同じように学習されている方、何か質問があればコメントでお聞かせください。一緒に学んでいきましょう⭐

40代からの挑戦はまだまだ続きます。次回は認証機能の実装にチャレンジする予定です！

ゆうち

AI駆動開発プログラマー

４０代防大卒自衛官です。「人生を自分でコントロールできるようにする」ことがビジョン。独学でプログラミングを勉強し、自衛隊を退職して起業を目指す。初心者から起業するまでのリアルな日常を発信します。