すべてのカテゴリ

最近はAIの進化によって、以前よりも簡単にシステムを作れる時代になりました。実際、Vibe Codingや生成AIを使えば、短時間でWebサービスや簡単なツールを作ることも可能です。しかし、実際に作り始めると、多くの人が途中で気づきます。「システムって、思っていたより複雑だな」ということに。■ システムは大きく3つで構成されている基本的に、WebシステムやSaaSは以下の3つで構成されています。1. フロントエンド（Front-end）ユーザーが実際に見る画面部分です。・Web画面・ボタン・入力フォーム・スマホ表示・画面デザインなど、いわゆる「見える部分」を担当します。2. バックエンド（Back-end）システム内部の処理を行う部分です。例えば、・ログイン認証・API処理・データ計算・外部サービス連携・権限管理など、ユーザーから見えない裏側の処理を担当します。3. データベース（Database）データを保存・管理する場所です。・ユーザー情報・予約情報・チャット履歴・顧客データなどを安全に保持します。この設計が崩れると、「あとから修正できないシステム」になりやすくなります。 昔から「分業」が前提だったもともとシステム開発の現場では、これらは分業されていました。例えば、・フロントエンドエンジニア・バックエンドエンジニア・インフラ／DB担当・UI/UXデザイナーといった形です。つまり、一人ですべてを担当する前提ではないということです。UIやDashboard設計も別の専門領域特に最近は、単純に「動けばいい」だけではなく、・見やすさ・操作しやすさ・管理のしやすさといったUI/UXも

FirebaseとSendGridを使って登録送付先を取得する方法FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合には、単にメッセージを送信するだけではなく、SendGridからいろいろな情報を取得する必要があります。 SendGridのサーバーとやり取りをするためには、SendGridのAPIキー（秘密鍵／secret key）が必要になります。従って、実装はフロントエンドが直接SendGridのサーバーとやり取りをするのではありません。バックエンド（サーバー）側のサービスを介してSendGridとやり取りをします。 この記事ではまず、SendGridに登録した送付先をバックエンドを介して取得する方法を解説しています。 バックエンドの実装 まず最初にSendGridと直接やり取りをするバックエンドの実装例です。 SendGridに登録した送付先を一括取得する部分のコードです。 バックエンドのサーバーのフレームワークにはexpressを利用しています。 事前にexpressのパッケージをnpmを利用してインストールする必要があります。expressの詳しい実装例はこちらの記事をご覧ください。 SendGridのサーバーから、登録した送付先を一括取得するAPIは「contactdb/recipients」をHTTPの「GET」のメソッドでSendGridのサーバーに送ります。 HTTPの送信にはaxiosを使っています。バックエンドのファンクション（functions）をフロントエンドと別々にWebホスティングする場合には