しゃけぼーい

[しゃけぼーい @shakeboy_studio]

📝 学び・工夫

CloudFlareD1とNext.jsとBetterAuthの組み合わせが板についてきた！

中々難しかったけど一個ずつ理解していけば割と自力で実装可能な域まで来てる！気がする！笑

📦 GitHub: https://t.co/6DeBQMxKRU
🌐 デモ: https://t.co/uWZqdn0iJ6
次は「投票アプリ」に挑戦します

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 27/100】
URL短縮アプリ完成 🔗

✅ 認証チェック
✅ 短縮ID生成（nanoid）
✅ データベース保存（Drizzle + D1）
✅ 重複回避
✅ ユーザー紐付け

#Nextjs #TypeScript #個人開発

[しゃけぼーい @shakeboy_studio]

APpp...

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 26/100】
なんとかブックマーク管理アプリ完成📕
（完成してたけど）

supabaseのDBの無料枠が2つまでなのでCloudFlareのD1を使用し、デプロイもCloudFlareに変更！

これが地獄の始まりでした！笑
DBのバインディング問題、githubログインができない、デプロイが通らないetc

[しゃけぼーい @shakeboy_studio]

今回詰まったことよって
✅公式ドキュメントも多少読めた
✅今後Vercel以外にデプロイもできた
✅他のDBも使えた

めちゃくちゃいい壁になりました！！
chromeだと警告が出ます⚠️笑

📦 GitHub: https://t.co/1kSfDdjJfx
🌐 デモ: https://t.co/MGXcPhrJzn
次は「URL短縮サービス」に挑戦します！

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 26/100】
なんとかブックマーク管理アプリ完成📕
（完成してたけど）

supabaseのDBの無料枠が2つまでなのでCloudFlareのD1を使用し、デプロイもCloudFlareに変更！

これが地獄の始まりでした！笑
DBのバインディング問題、githubログインができない、デプロイが通らないetc

[しゃけぼーい @shakeboy_studio]

まさにこれ

自分が感じたというかやってみて思ったから
100個Webアプリ作るチャレンジやり始めた

知識なくてもぼんやり形にはなるけど
全然サービスとして機能しないし、させたくないモノが出来上がるだけだった

たまたま良いモノが出来ても再現性ないし内容が分からないって楽しくないんだよな〜

[入江 慎吾 @iritec_jp]

バイブコーディングでリリースまでたどりつかない人が結構いるみたい。

現状、完全にプログラムを理解しないままだとLPとかはいいけど、それ以上のシステムになると絶対に基礎理解はやらないと危険だし、完成させるのが難しい。

ここはすでにエンジニアやってる人は突破してるので倍速になってる。逆に言えばプログラムを全部理解しなくても基礎とどんな構成で動いているのか全体を理解してしまえばリリースまでいける。

以前よりつくるハードルがさがってチャンスが広がってることは間違いないです。急がば回れ🏃‍♂️

[しゃけぼーい @shakeboy_studio]

📝 学び

デプロイでエラー出まくり！
公式docに沿ったコードを書かないとAIは古い情報とか間違った修正案出してくるから
やっぱり知識は最低限必要なのを再確認できたとさ

📦 GitHub: https://t.co/fPCasbiSCj
🌐 デモ: https://t.co/6QgoXiWSzg

次は「ブックマーク管理アプリ」いくぞ！

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 25/100】
認証付きブログ完成🗒️

✅ NextAuth.jsの認証機能
✅ Supabase/PostgreSQLとの連携
✅ DBからポストの取得

フルスタック（？）と言えるかどうかは怪しいけど、なんか凄い開発の一歩目を踏み出した感👍

#Nextjs #TypeScript #個人開発

[しゃけぼーい @shakeboy_studio]

📝 学び

エラー処理でerrの型がunknownになるがそのままだとデプロイできなかったのでanyで無理やりデプロイしたけどちゃんとした解決策が不明

zodのスキーマは慣れてきた！！

📦 GitHub: https://t.co/OUuJHY26Gr
🌐 デモ: https://t.co/BX96TKDPYE

次は「ユーザー認証付きブログ」いくぞ！

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 24/100】
API Routesを使った問い合わせフォーム完成✉️

✅ API Routeでのリクエスト受信
✅ useFormを使った効率的なフォーム管理
✅ クライアントとサーバーの両方でのデータ検証

地味やけど実用的！！
内容はサーバーのログに残るよー！

#Nextjs #TypeScript #個人開発

[しゃけぼーい @shakeboy_studio]

@appricot176909 ありがとうございます！！
見られてると思うと更にやる気出ます！！笑

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 23/100】
映画情報検索サイト完成🍿

✅ APIロジックのカプセル化
✅ クエリを受け取ってSSRでページ生成
✅ 詳細ページは動的ルーティング

映画情報をAPIから引っ張ってきて表示するサイトができた！
めちゃくちゃいいやん最高やん

#Nextjs #TypeScript #個人開発

[しゃけぼーい @shakeboy_studio]

@masaya_aichi 最初に自力で作れる限界のWebアプリで文字数をカウントするだけのWebアプリを作成

そのアプリをgeminiに見てもらって段階的に成長できて学習にも繋がるアプリアイデアを100個出してもらいました！

Obsidianでgemini CLIと連携させてそこから個別でチュートリアルを作成してもらうようにしてます！

[しゃけぼーい @shakeboy_studio]

@masaya_aichi ありがとうございます！！
100本やりきったらどのくらい成長できるのかも実験できるので結構楽しいですよ👍笑

しかも発信すれば成長の可視化と証拠にもなるし、継続率も上がると思うのでオススメです！！！笑

[Work≠Build @wnb_community]

Xでもコミュニティ作りました 🥳 #WnB
https://t.co/VCS2jdPaAG

[しゃけぼーい @shakeboy_studio]

次はAPI Routesで作る！お問い合わせフォームやる

[しゃけぼーい @shakeboy_studio]

📝 学び

next/imageで外部画像を使う際はnext.config.tsの設定が必要だった

あとApp Routerでの検索クエリのparamsの型をPromiseで定義しないとエラーになる

📦 GitHub: https://t.co/bzldANPOkX
🌐 デモ: https://t.co/HU6HE4FF4l

次は「」いくぞ！

[しゃけぼーい @shakeboy_studio]

📝 学び

Blog部分は前のコードをほぼそのまま使用
使ってるのはmapとかぐらいであとはNext.jsの機能かな！
動的ルーティングだけまだ慣れてないから反復する！！

📦 GitHub: https://t.co/gV3ipPu3bi
🌐 デモ: https://t.co/54WwuinnLL

次は「映画情報検索サイト」いくぞ！

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 22/100】
Next.js製の簡易ポートフォリオサイト完成！

✅ App Routerの挙動
✅ SSGで高速表示
✅ 動的にメタデータを生成

見た目はしょぼいけどマジでぽさが出てきた！！
APIとかデザインをちょこっといじればそれなりのサイトになるね〜

#Nextjs #TypeScript #個人開発

[しゃけぼーい @shakeboy_studio]

📝 学び

ポストを取得してメタ情報と記事本文を切り離すロジックが基本の応用って感じで良かった👍

あとはデプロイ時のPromiseが原因でエラーが出たくらいかな
おもろくなってきた！！

📦 GitHub: https://t.co/hpwEzlBxNS
🌐 デモ: https://t.co/JF6TEYqQn8

次は「ポートフォリオアプリ」いくぞ！

[しゃけぼーい @shakeboy_studio]

【#Web開発100本ノック 21/100】
Next.js製のブログ完成！

✅ 動的ルーティングの考え方
✅ マークダウンの中身を読み込んでメタデータと本文を分離して取得
✅ LinkタグでSPAっぽい挙動

なんとNext.jsに入ったぞ！！
Reactもそんなに理解してないのに！

#Nextjs #TypeScript #個人開発