バックエンド実装の方針　～　「express」で実装！

Silicon Valley Super Ware

2020年7月8日


バックエンド実装の方針　～　「express」で実装！

今日は、どのような方針でバックエンドのサービスを作るかという話です。
ブラウザで動作しているフロントエンドはコードをサーバからブラウザにダウンロードして ブラウザで実行しています。一方で、バックエンドのコードはWebページ（サイト）の ホスティングをしているサーバーで実行されます。

WordPressはバックエンドサービスにPHPを使っています。

今回のSendGridを使ったメッセージ配信のサービスも当然PHPで作ることもできます。 SendGridもサンプルを提供していますので、こちらに興味がある方は検索してみてください。
この連載では、バックエンドとフロントエンドで共通の言語「JavaScript」で対応するために、 Node.jsを利用してバックエンドサービスを実装していきます。

Node.jsの簡単な紹介！

サーバーサイドの実装としてよく利用されるので、サーバーサイドの開発の為の言語のように見えますが、 プログラミング言語そのものはJavaScriptです。
もともとのアイディアは、ブラウザーで動作しているプログラムを普通にＰＣで実行できるようにしたものが Node.jsというわけです。ブラウザーで利用していた実行エンジンを取り出して、ブラウザ以外で実行できる ようにしたものです。サーバーサイドのバックエンドサービスで使われる事が多いですが、npmなど、 PCで動作するアプリの開発も可能な言語です。

サーバー側でNode.jsが実行可能ならば利用できます！

実は、Node.jsを実行できるサーバー環境はWordPressのPHPが主流のホスティングサービスでは 利用できないサービスも多くあります。 今回は、このブログで積極的に利用している「Firebase」のホスティングサービスを利用して Node.jsによるバックエンドの実装を勧めるというのが基本方針です。
Firebaseで提供しているサービスの一つに「Cloud Function」という機能がありますが、 これを利用してNode.jsのバックエンドサービスを作成します。

Cloud Functionの利用には、FirebaseのCLIの開発環境（npm を使ったWeb開発環境）で、 Cloud Functionを初期化する必要があります。

まずは、Firebaseの公式ドキュメントを 参考にして設定をします。

Firebase側の準備

4月からのテーマでFirebaseを利用してきていますので、基本的な設定は同じようにできます。
  • Firebaseプロジェクトの作成
  • Node.jsとFirebase CLIの設定（firebase-toolsのインストール）
ブラウザーでSendGridの管理ページにログインして行います
  • API Keyの取得 -- Setting -> API Keysから取得します
  • 送付先の登録 -- Marketing -> Contacts から「Add Contacts」
  • 送信者の登録 -- Marketing -> Senders から「Create New Sender」
  • Firebase SDKのCloud Functionsを初期化
Firebaseの初期化は、一度にCloud Functionsも含めてた初期化も可能ですし、 既に利用しているプロジェクトがある場合、Cloud Functionsを追加で初期化する事もできます。

Firebaseの設定ができたら、必要なモジュールを追加すれば準備完了です

今回利用するモジュールは「express」というモジュールで、バックエンドのサービスを 作成する場合非常によく利用されているモジュールです。

Express

Expressを利用しないでJavaScriptだけでも勿論バックエンドサービスを実装できます。 しかし、使った方がシンプルに実装できるので今回は迷わずに利用します。
「npm」がインストールされていれば、「> npm install express --save」で簡単にインストールできます。 詳細はWebページにドキュメントや役に立つリンクがあります。

あとは、便利なミドルウエア（body-parser）などを入れると実装が簡単になります。

今日は、必要なモジュールの準備などができればＯＫです。
実際に「SendGrid」のAPIを実装する前に、次回は簡単にブラウザのフロントエンドとの やり取りをするシンプルなサービスを作って概念を理解するようにする予定です。

APIの定義

今回定義するAPIはメッセージを送信するAPIだけです。（完全なサービスにする場合は他のAPIが必要になります）
基本のバックエンドサービスのURLにAPIを追記したURLにアクセスするとバックエンドのサービスが 動くようにします。 「Cloud Functions」ではこのサービスを「function(関数)」と読んでいて、 そのURLが指定された場合、バックエンドのサービスを起動する仕組みになっています。
今回のAPIは例えば「http://xxx.yyy.zzz/api/send」のようにURLを指定して メッセージの情報を添付して送れば、バックエンドサービスがメッセージの情報を SendGridに転送するというサービスです。
シリコンバレースーパーウエアでは、バックエンドを含めた本格的なWebサービスを短期間で 作れるようになる講座を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかを提供します。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。


Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。 ...
続きを読む

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea...
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text...
続きを読む