Webアプリ開発の舞台裏をお届け
ふだんコードを書かない私が、Webアプリっぽいものを作ってみたら…思ったより楽しかった！ HTMLとCSSをちょっと触るだけで、まるでプロのブログみたいな見た目に。MechaTora風のブログレイアウトも真似してみたら、思った以上に「それっぽく」なってちょっと感動。 いまやノーコード・ローコードの時代。非エンジニアだって、やりたいことは意外とカタチにできるんだなと実感。最初の一歩さえ踏み出せば、世界がひらける。
Xアカウント → @xORMRha7Ck16551
最近、話題のClaudeのコード支援機能（ClaudeCode）を試してみた。非エンジニアの私でも、自然文で「こんなの作りたい」と伝えるだけで、実行可能なHTMLやJSがスッと出てくる。
特に驚いたのは、スタイルまで提案してくれること。たとえば「柔らかい雰囲気にして」「iPhoneで見やすくして」みたいな曖昧な要望にも、それっぽいコードで返してくれる。
しかも、単にコードを書く手伝いというより、「一緒に創る感覚」が強い。思わず「これって、もはやバイブスでコーディングじゃん」と感じた。命名するなら "バイブコーディング"。
「なんとなくこうしたい」を尊重してくれる相棒。エディタいらず、エラー地獄なし、検索地獄も回避。これはもう、非エンジニアにとって革命だ。
Xアカウント → @xORMRha7Ck16551
WSL（Windows Subsystem for Linux）環境にClaudeCodeを構築し、本格的にWebサービス開発に挑戦してみた。レシピ提案アプリ、地震情報モニター、暗記カードアプリなど、複数のサービスを短期間で形にできた。
特に印象的だったのは、WSLとClaudeCodeの組み合わせの快適さ。Windowsの使い慣れた環境を保ちながら、Linux系のツールチェーンが使えるのは革新的だ。ファイル管理もシームレスで、開発効率が格段に向上した。
ただし、思わぬ落とし穴が料金面。最初は20ドル課金で十分だと思っていたが、複数サービスを並行開発していると、あっという間にリミットに到達。特にコード生成とデバッグのやり取りを繰り返すと、使用量が予想以上に増える。
結果として100ドル課金がちらつく状況に。本格的な開発には、それなりの投資が必要だと実感した。とはいえ、この投資で得られる開発速度と品質を考えると、十分にペイする価値がある。
Webサービスを作るうえで避けられないのが「認証」と「データベース管理」。
正直、ここが一番つまづきやすい。そんな中、見つけたのが BoltNew（←仮称プロトタイプ）。これは認証周りを爆速で構築できる新ツール。LINE風のUXでサインインが作れる上に、デザインも整ってる。
さらに、SUPABASEを併用すると、DB設計もGUIで完結。SQLが苦手でも、テーブル作成からレコード挿入、認可設定まで一気通貫。Firebaseの代替にもなる柔軟さがある。
この2つの組み合わせだけで、「ログインして、ユーザーごとのデータを表示するWebアプリ」が形になる。しかも、学習コストは控えめ。
ゼロから全部作らなくても、アイデア次第でWebサービスは作れる。非エンジニアだからこそ、こうしたツールを武器にすべきだと感じた。
料理レシピ提案アプリ「CookSuggest」の最大の特徴は、1000種類以上のレシピデータベース。この膨大なデータをどう集めて、どう構造化したかをお話しします。
まず直面したのが「レシピの標準化」問題。醤油大さじ1杯は15ml、でも「少々」「適量」をどう数値化する？材料名も「玉ねぎ」「タマネギ」「玉葱」の表記揺れをどう統一する？
結果的に、独自の材料マスターテーブルを作成し、シソーラス辞書で表記揺れを吸収。調味料は3段階（少・中・多）に分類して検索精度を向上させました。
PWA化では、オフライン検索機能が最大のチャレンジでした。1000レシピをローカルストレージに効率保存し、検索アルゴリズムも最適化。結果、3秒以内で最適レシピを5つ提案できるシステムが完成しました。
地震情報をリアルタイム表示する「地震モニター」アプリ。気象庁のAPIを活用した更新システムの裏側を技術解説します。
最大の技術課題は「リアルタイム性とサーバー負荷のバランス」でした。地震発生時は瞬間的にアクセスが集中するため、通常のポーリング方式では限界があります。
解決策として採用したのが「プログレッシブ更新システム」。平時は30秒間隔、地震発生時は自動で5秒間隔に切り替わり、沈静化後は段階的に元の間隔に戻します。
また、PWA機能を活用した通知システムも実装。ユーザーが設定した震度以上の地震発生時に、ブラウザプッシュ通知で即座にお知らせします。バックグラウンドでも動作するため、常時監視が可能です。
結果として、地震発生から平均15秒以内での情報表示を実現。防災意識向上に貢献できるアプリに仕上がりました。
記憶の科学に基づいた「科学的暗記アプリ」では、エビングハウスの忘却曲線理論を実装。どのように学習効率を最大化したかを解説します。
核心は「SuperMemo SM-2アルゴリズム」の応用です。ユーザーの回答品質（完璧・良好・困難・失敗）に基づいて、次回復習のタイミングを動的計算。個人の記憶特性に最適化されます。
実装で工夫したのは「学習継続のモチベーション設計」。進捗を可視化するプログレスバー、連続学習日数の記録、難易度別の達成バッジシステムを導入しました。
結果、従来の一律復習サイクルと比較して、記憶定着率が約40%向上。特に長期記憶への定着効果が顕著に改善されました。
現在、1000人以上のユーザーに愛用されており、医学部受験生や資格試験学習者から高い評価をいただいています。
毎朝4時に自動更新される「社会保険ニュース」。厚生労働省、年金機構、Yahoo!ニュースから情報を収集し、AIで要約・分類する完全自動化システムの開発プロセスを公開します。
システム構成は3層構造：①ニュース収集層（Web Scraping）、②AI処理層（要約・カテゴリ分類）、③Web生成層（HTML出力・デプロイ）。全て自動実行されます。
技術的ハイライトは「コンテンツ重複排除アルゴリズム」。異なるソースから同じニュースが収集された場合、自動で統合し、最も詳細な情報を保持します。
AI要約では、専門用語解説付きサマリーを生成。「厚生年金」「雇用保険」などの制度変更を、一般の方にも分かりやすく説明します。
現在、スマホ版（Render.com）とPC版（GitHub Pages）の2バージョンを運用。用途に応じた最適なUXを提供しています。
新しいアプリのリリース情報や技術記事の更新をお知らせします。
※現在、メール配信機能を準備中です