Web開発の勉強をしていると、「何を作ればスキルが伸びるの？」「ポートフォリオに載せられる実用的なアプリを作りたい」と悩むことが多いものです。 そこで今回は、他ではあまり見ないのに実務では即役立つ “ミニアプリ” を4つ紹介します。どれも JavaScript・Next.js・Web API の理解が深まる内容で、学習...

Firestore・Storage・Auth の悩みを一気に解決します Firebase を使った開発は便利ですが、実際に運用レベルで使おうとすると、意外と 細かい落とし穴・理解しづらい部分 が多く存在します。 今回は、特に検索需要が高く問い合わせも多い 「ニッチだけど大事なFirebase実装」 をまとめて解説します...

Webアプリを開発していると、画像をそのままアップロードすると重くて扱いづらいという問題に必ず直面します。画像が重いと… ページ読み込みが遅くなる スマホで表示が固まる サーバーの容量や転送量が増える Firebase Storage の料金が膨らむ こうした問題を解決するのが、画像圧縮（compression）・リサ...

Web開発の学習では、「とりあえず動くものを作ってみる」ことが大きな自信につながります。今回は、HTML・CSS・JavaScript を1ファイルにまとめた“コピペするだけで動く”簡単アプリをご紹介します。 テーマは 「あなたの悩みに答えるミニ相談チャット」。AIっぽい応答をランダムに返す仕組みなので、JavaScr...

今日のゴール **SWR（Stale-While-Revalidate）**で「速い＋新しい」を両立 入力はデバウンス、スクロールはスロットルでスムーズに Promise.allで並列fetch 状態メッセージをaria-liveで読み上げ対応すべてバニラJS + ESM（ES Modules）で実装します。外部ライブ...

1) fetch のエラーハンドリング＆リトライ 要点は3つ： HTTPエラーは res.ok を見る（200–299 以外は例外扱い） ネットワーク/タイムアウト/5xx をリトライ（4xxは通常リトライしない） タイムアウト＋指数バックオフ＋ジッターで“優しく再試行” サンプルでは api.js に fetchWi...

今日のゴール 関数を小さく分ける設計感覚をつかむ map / filter / reduce の「雰囲気＋使いどころ」を体感 fetch でAPIからJSONを取り、画面に表示 1日目のカウンターを発展させて、ToDoアプリを完成（localStorage保存） 1. 関数は「小さく」「役割ひとつ」 まずは“その関数、...

今日のゴール ブラウザで Hello, JavaScript! が出る ボタンをクリックして数字が増える（DOM操作） つまずいたら自分で原因を見つけられる（DevTools/console） 0. 環境準備（5分） ブラウザ：Chrome（Edge/Safari でもOK。この記事はChrome基準） エディタ：VS...

この記事で作るもの 月ごとのカレンダー（前月・次月・今月ボタン） 日付クリックでモーダルが開き、その日の予定を追加・削除 予定はブラウザのローカルストレージに保存（自動で永続化） 予定のエクスポート/インポート（JSON） 使い方（超シンプル） 下のコードをそのまま1つのHTMLファイルとして保存（例：easy-cal...

はじめに JavaScriptは「クリックしたら動く」だけではありません。マウスやキーボードのイベントを使えば、自分で操作できるインタラクティブな作品が簡単に作れます。今回は、初心者でも楽しみながら作れる5つのアプリ例を紹介します。 1. 画像の拡大・縮小ビューア マウスホイールで画像を拡大縮小できます。 <im...