Web Development Essentials試験対策その2：フロントエンドとバックエンド

この記事では、Linux Professional Instituteの認定資格に最近追加されたものについてシリーズで紹介しています。Web Development Essentialsです。前編では、Web開発者になるためのスキルを紹介しました。今回は、図1に示すWebエクスペリエンスの各パーツに必要な技術について見ていきましょう。
図1：Webサイトを構成するソフトウェア要素。
ユーザーエクスペリエンス（フロントエンド）
私たちが日常的に使っている魅力的なWebアプリケーションは、ブラウザに機能が追加されることで徐々に実現されていきました。HTMLの拡張とともに、CSSやJavaScriptという新しい言語が追加され、あらゆる効果やレイアウトに対応できるようになったのです。
CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。この「カスケーディング」という言葉が重要で、あるルールが他のルールより優先されることを表しています。HTMLのレベル（実体、ID）ごとにどのように効果を適用するか、どのルールが他のルールを上書きするかを知っておく必要があります。また、位置決めも必要です。例えば、順序付きリストの中の箇条書きを、順序なしリストの中の箇条書きとは異なるものに見せることができます。CSSはHTMLと密接に連携しています。
JavaScriptは、ブラウザ上で動的な効果を実現するために発明されました。ページ上でマウスを動かすとダイアログが表示されたり、単語をクリックすると段落に展開されたりするのは、JavaScriptを呼び出しているためです。JavaScriptは、今日のコンピュータ界で最も広く普及し、最も重要な言語の一つです（他の言語のファンからは、しばしば嘲笑されますが）。
JavaScriptを使うには、ウェブのドキュメント・オブジェクト・モデル（DOM）を学ぶ必要がある。これは複雑ですが、練習すれば理解できるようになります。Web Development Essentialsに合格するためには、Webページ内のさまざまな要素の見た目を変えるなどのエフェクトを行う方法を学びます。
ブラウザのデバッガの使い方を知っておくとよいでしょう。各ブラウザにはデバッガがあり、JavaScriptが実行される様子や、その際に発生するエラーなどを確認することができます。
また、コマンドラインツール「npm」をインストールし、JavaScriptのライブラリの取得方法を学んでおく必要があります。
CSSは、JavaScriptと密接に連携しています。例えば、クリックすると段落が表示される「詳細」ボタンがあるとします。クリック後に段落を貼り付けるために、JavaScriptを単独で使うこともできます。しかし、ウェブページがブラウザに送信されるときに段落を含めておき、CSSで段落を「非表示」にする方が、おそらくより効率的でエレガントな方法です。JavaScriptはCSSと連動して、クリック後に非表示を解除することができます。
ここまでくれば、パソコンでの簡単な練習にとどまらず、実際に体験することができるはずです。数十ページ、数多くの要素を持つサイトに取り組むことができれば、この記事で取り上げた技術の威力を実感し、それぞれの技術の最適な使い方を理解することができるでしょう。このような環境で働くには、NPOや友人のホームページの制作やメンテナンスをボランティアで請け負うのがよいでしょう。
サーバーサイドプログラミング
HTML、CSS、JavaScriptはブラウザの中で動作するため「フロントエンド」と呼ばれ、Webサーバーやデータベースは「バックエンド」と呼ばれます。フルスタックプログラマーになるには、バックエンドにも同様に精通する必要があります。サーバー上で動作するプログラムを書いたり、データベースとの間でデータの読み書きをしたりすることになります。
幸いなことに、Node.jsというJavaScriptのフレームワークのおかげで、バックエンドでJavaScriptを使ってプログラムを書くことができるようになりました。Node.jsの上に他の多くのフレームワークが構築されており、Web Development Essentialsでは、人気の高いExpressフレームワークを学習する必要があります。
本番環境では、独自の管理ニーズを持つ高度なウェブサーバーを採用しています。Expressの便利な点は、さらにソフトウェアをインストールして設定することなく、デスクトップまたはラップトップでサーバーを実行できることです。これがWeb Development Essentialsの試験準備と受験の方法です。
HTTP で Express サーバーと通信する HTML フォームをいくつか作成する必要があります。いくつかの単語よりも複雑なデータを送信して返すには、JavaScript のサブセットである JSON を使いこなす必要があります。
クライアントからサーバーにリクエストが来ると、サーバーはそのリクエストを処理するために Node.js プログラムを呼び出します。リクエストに含まれる引数（ユーザーデータ）を解凍し、引数に悪意のある内容が含まれていないことを確認し、結果をHTMLとして返す必要があります。
Expressでは、一貫性のあるHTMLベースのページを簡単に作成するためのテンプレートが提供されています。Web Development Essentialsでは、Expressのテンプレートにある程度慣れていることを前提としています。
次回は、図1の最後の部分であるデータベースについて説明します。