目次


初めての Node.js Webサイトを構築する、第 2 回

Comments

この記事は、ソフトウェアのインストール不要の Node.js 開発をステップバイステップで紹介する、全 3 回からなる連載記事の第 2 回です。

第 1 回で使用した「Hello World」に手を加えたアプリケーションは、出発点として最適でした。このアプリケーションから始めて、IBM DevOps Services と IBM Bluemix を使用して Node.js サーバーを立ち上げた後、サーバーに対するリクエストをカウントする、単純なサーバー・サイドの JavaScript をコーディングしました。この第 2 回では、フォーマット設定した HTML ページをサイトに追加した後、サーバーからのデータをホーム・ページとなる HTML ページに渡して、表示されるようにします。

Web フロントエンドを Node.js に追加する場合に最もよく使われる手法は、Express Web アプリケーション・フレームワークを利用する方法です。Express では、Jade、Handlebars、EJS などの選択肢の中から、Web ページのフォーマットを設定する方法を選ぶことができます。この記事では、私が快適に作業できるように、昔ながらの単純な HTML を使用している EJS を選択することにします。

すべての Express セットアップは、app.js ファイルに含まれています。

私は、出発点としてうってつけの Express EJS サンプルを見つけて、そのサンプルを必要最小限にまで簡素化しました。その後、そのサンプルを、データを渡して静的 Web ページに対応するようなものへと拡張しました。皆さんは、このバージョンを出発点に、Node.js アプリケーションからのデータを HTML ページに表示する方法や、静的 HTML コンテンツを提供する方法を学んでください。第 3 回では、Redis データベースを使用して、Web サイトのデータを永続化する方法を説明します。

アプリケーションの変更後のフローは、以下に示すとおりです。

現在のアプリケーションのフロー図
現在のアプリケーションのフロー図

必要となるもの

アプリを実行するコードを入手する

ステップ 1: HTML アプリケーションのコピーを作成してデプロイする

  1. DevOps Services にログインします。
  2. この記事の、ここより少し前にある「コードを入手する」ボタンをクリックします。
  3. DevOps Services で「FORK PROJECT (プロジェクトのフォーク)」ボタンをクリックし、自分用のコードのコピーを作成します。プロジェクトの名前には、固有の名前を入力して、「CREATE (作成)」ボタンをクリックします。

    これで、Express のディレクトリー構造とファイルがセットアップできました。すべての Express セットアップは、app.js ファイルに含まれています。

    var app = express();
    app.set('port', process.env.PORT || 3000);
    app.set('view engine', 'ejs');
    
    app.use(morgan('dev'));
    app.use(express.static(path.join(__dirname, 'public')));

    package.json ファイルも、Express と EJS の依存関係を追加して更新されています。

    "dependencies": {
        "express": "*",
        "ejs": "*",
        "morgan": "*"
      }
    }
    「EDIT CODE (コードの編集)」ボタンをクリックして、このアプリケーションでの作業を開始します。
  4. 「Live Edit (ライブ編集)」を有効にして「OK」をクリックし、アプリケーションを再デプロイします。「Live Edit (ライブ編集)」を有効にする画面のスクリーンショット
    「Live Edit (ライブ編集)」を有効にする画面のスクリーンショット
  5. 実行バーにある URL リンクをクリックし、フォーマット設定された HTML ページを新しいブラウザー・タブで開きます。
  6. ページを最新の表示に更新し、更新のたびにカウンターがインクリメントされることを確認します。

ステップ 2: HTML index ページに変更を加えて再デプロイする

これから、HTML index ページに若干の変更を加えます。

  1. DevOps Services IDE に戻り、views フォルダーを開いて、HTML を編集するために index.ejs をクリックします。
  2. <title> タグと <h1> タグに含まれているテキストを編集して、Ruth を自分の名前に置き換えます。
  3. 「Live Edit (ライブ編集)」の再始動用ボタンを使用してアプリケーションを再起動し、実行バーの URL リンクをクリックしてアプリケーションを開きます。変更した内容が表示されていることを確認してください。

    アプリケーションをデプロイした後、手作業によるデプロイメントの情報に示されたリンクをクリックして、アプリケーションを表示します。変更した内容が表示されていることを確認してください。

    「Live Edit (ライブ編集)」の再始動用ボタンが示されている画面のスクリーンショット
    「Live Edit (ライブ編集)」の再始動用ボタンが示されている画面のスクリーンショット

ステップ 3: サーバー・サイドのコンテンツを HTML ページに渡す

いよいよ、Express EJS のマジックの一端を学ぶときが来ました。Node.js アプリケーションのデータを HTML ページに表示するには、以下の構文を使用して、データを Web ページに渡す必要があります。

res.render('index', {userCount: userCount})

index は、最初に表示される HTML ページの名前です。{} の中に、この HTML ページに渡す変数の名前とそれぞれの値を含めます。

アプリケーションに以下の変更を加えます。

  1. DevOps Services IDE に戻り、app.js を選択します。userbytwo という新しい変数を追加して、以下のように初期化します。
    var userbytwo = 0;
  2. userbytwo をインクリメントします。
    userbytwo = userbytwo + 2;
  3. render コマンドを更新して、HTML ページに渡して表示する変数として userbytwo を追加します。
    res.render('index', {userCount: userCount, userbytwo: userbytwo});

    以上の変更を加えると、app.js コード・ブロックは以下のようになります。
    var userCount = 0;
    var userbytwo = 0; /* added var definition for userbytwo here */
    
    app.get('/', function(req, res){
      userCount = userCount + 1;
      /* add statement to increment userbytwo by two here */
      userbytwo = userbytwo + 2;
      res.render('index', {userCount: userCount, userbytwo: userbytwo});
     /* updated this line */
    });

ステップ 4: 変数を HTML ページに表示する

当然のことながら HTML ページには、渡された変数を取得して表示するための特殊な構文も必要になります。

  1. views フォルダーに戻り、index.ejs を選択します。
  2. userCount を表示する <p> 行をコピーして、既存の行の直下に貼り付けます。新しい行で、userCountuserbytwo に変更し、両方の変数が表示されるようにします。
    <p>The user count in my nodejs application is: <%= userCount %></p>
    <p>The user by two count in my nodejs application is: <%= userbytwo %></p>
  3. 「Live Edit (ライブ編集)」の再始動用ボタンを使用してアプリケーションを再起動し、実行バーの URL リンクをクリックしてアプリケーションを開きます。変更した内容が表示されていることを確認してください。

ステップ 5: リンクされた HTML ページを追加する

次は、いくつかのリンクを Web サイトの index ページに追加します。ページを追加して、そのページへのリンクを張るのは難しいことではありませんが、ページを見つけられるように、ディレクトリー構造が正しくセットアップされていることを確実にする必要があります。

app.js における Express のセットアップでは、app.use(express.static(path.join(__dirname, 'public'))); ステートメントがアプリケーションに対し、HTML コンテンツを public ディレクトリーで探すように指示します。最初は、public フォルダーには 2 つの HTML ページが images サブフォルダーおよび stylesheets サブフォルダーとともに格納されています。

  1. views フォルダーを開いて、indexwithlinks.ejs を選択し、ライン 9 からライン 15 をコピーします。
  2. index.ejs を開き、今コピーした内容をライン 12 の後に貼り付けて保存します。見るとわかるように、コピーした行は、sports.html と aboutme.html にリンクします。
  3. public ディレクトリーを開いて、aboutme.html と sports.html を見つけます。
  4. aboutme.html と sports.html に任意の変更を加えてください。皆さんがお持ちの写真を images ディレクトリーにアップロードして、その写真にリンクすることもできます。
  5. 「Live Edit (ライブ編集)」の再始動用ボタンを使用してアプリケーションを再起動し、実行バーの URL リンクをクリックしてアプリケーションを開きます。変更した内容が表示されていることを確認してください。

第 2 回のまとめ

この全 3 回からなる連載記事の第 2 回では、複数のページからなる Web サイトを作成し、Node.js アプリケーションの動的なサーバー・サイド・データが表示されるようにしました。第 1 回と同じく、このサンプルは、一貫して Web ブラウザーのみを使用して DevOps Services と Bluemix にアクセスして作成したので、インストールは一切必要ありませんでした。

これで、第 3 回に進んで、データベースにデータを保管する準備ができました。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Cloud computing
ArticleID=982119
ArticleTitle=初めての Node.js Webサイトを構築する、第 2 回
publish-date=05072015