このシリーズは、短期間でWebエンジニアとして最低限必要な技術を学ぶことを目的としています。
前回までに、フロントエンド(クライアントサイド)の技術について、一通りの紹介を終えました。HTMLとCSSで画面を構成し、JavaScriptで様々な動作を実現する構造になっていることが分かり、Webの世界でほとんどの事ができるようになったと感じているかもしれません。
今回は、これまで学んできたクライアントサイドの技術であるHTML/CSS/JavaScriptを使って出来る事と、出来ない事について確認し、サーバー技術の学習に入るための準備と心構えをしていきたいと思いますので、是非参考にしてみてください。
HTML/JavaScriptで出来る事
HTML/CSS/JavaScriptといったクライアントサイドの技術は、利用者が閲覧する画面を構成する、重要なWeb技術の中核です。
HTMLによって、Webページ全体の構成と共に、中に表示する文字・画像、そしてページ間をつなぎ合わせるリンクなどが形作られます。Webの世界で表現されるWebページ・Webサイトと呼ばれる様々な画面やサービスの中心には、このHTMLという言語で作成された文書データがあり、Web分野の中心技術であることは間違いありません。
CSSはデザインを定義する仕様で、ページ内だけでなくページ間で共通したデザインを管理するために利用されます。CSSを利用することで、細かなデザインを指定することができ、よりリッチなWebサイトを作成でき、管理コストも軽減されます。
JavaScriptは、HTMLの上で動作するスクリプト言語で、イベント処理やHTML要素(DoM)についての様々な処理を行うことができ、開発効率を高めるためにライブラリが広く利用されています。このシリーズではjQueryについて少し使い方を紹介してきました。
表示されるWebページの中身・動作については、これらの技術でほとんどの事を実現することができ、特化したエンジニアはフロントエンドエンジニアと呼ばれることがあります。
次項からは、こういった技術だけでは実現できないことについて、確認していきます。
HTMLの配布にはWebサーバーが必要
HTML/CSS/JavaScriptについて学び、様々な物を作り出す技術を習得しても、インターネットなどを経由して一般のブラウザから閲覧できるようにするには、Webサーバーが必要になります。Webサーバーがないと、せっかく作ったものを自分の環境でしか見ることができず、一部のJavaScriptはWebサーバーに配置しないと正しく動作しないでしょう。
Webサーバーという名前は聞いたことがあっても、実際にどういったことをしてくれているものなのか、具体的には分からない人もいるかもしれません。サーバーとネットワークはよく耳にする名称ですが、利用者側が意識することは少なく、エンジニア以外はあまり縁がないものではありますが、現在のインターネットを中心とした情報世界では、とても重要なITインフラです。
ここでは、HTMLの配布について確認していきます。
HTTP(80) / HTTPS(443)について
HTMLはHyperText Markup Languageの頭文字ですが、インターネットなどのネットワークを経由してHTMLを伝送するプロトコル(手続き)は決まっています。多くの人がChromeなどのブラウザにURLとして入力しているhttp://やhttps://という部分は、そのプロトコルの指定です。
HTTP/HTTPSは、HyperText Transfer Protocolの頭文字を取ったもので、その名前の通りHyperTextを伝送するためのプロトコルです。HTTPSは、HTTPをSecureにしたもので、暗号化通信によりデータの安全性を高めたものです。HyperTextというのは、HyperText Markup Language(HTML)で書かれた文書データです。
インターネットで用いられるTCP/IPネットワークでは、通信先をアドレスとポートによって特定するため、HTTPやHTTPSでも使用するポート(の標準)が決められています。HTTPは80番、HTTPSは443番のポートを使用します。こういった決められたポートをネットワーク分野ではwell-known ports(0 – 1023番)として特別扱いし、新しく作ったサービスなどで勝手に使用しない取り決めとなっています。
Webエンジニアとして、最低限この2つのプロトコルとポート番号は知っておかなければ、製作したソフトウェアやサービスを利用者に届けることができないことになりますので、しっかり確認しておきましょう。
Webサーバーの役割
Webサイトを閲覧する利用者が、ブラウザなどのWebクライアントから要求を行うと、その要求はTCP/IPネットワークの80番か443番に乗って伝送され、Webサーバーに到達します。(例外はあります)
Webサーバーの役割は、要求されたWebページ(コンテンツ)を返却することです。
Webページ(コンテンツ)は一般的にはHTMLですが、実際にはHTML以外に画像や汎用のデータなども含まれ、サーバーは返却するデータがどういった形式なのか(Content-Type)を返答データに明記します。これによって、ブラウザ上に画像が表示されたり、Zip形式のファイルをダウンロードするといった機能が提供されています。
返却するデータは、あらかじめサーバー内に保管されている静的なデータ(HTML/CSS/JavaScript)だけでなく、プログラムやデータベースなどから動的に生成されることもありますが、利用者は静的・動的を意識することなく、返却データの形式と受け取ったデータに準じて単純に表示されます。
HTML/JavaScriptで出来ない事
HTMLやJavaScriptをインターネット経由で配布するためにWebサーバーが必要なことから、Webエンジニアには、Webサーバーを構築する知識・技術力が求められます。どんなWebエンジニアを目指す場合でも、最低限「何もないところからWebサーバーを構築することが出来る」くらいの知識は持っておきましょう。
Webサーバー上にHTML/JavaScriptなどを配置することで、利用者に制作したWebサイトを届けることが出来るようになりますが、ここでは「それでも実現が出来ない事」について確認していってみましょう。
HTTP / HTTPS通信は単一ページの送受信仕様
HTTP / HTTPS通信は、クライアントがデータの要求を行い、サーバーがその要求に対して応答を返却するところまでを規定した通信仕様です。この事からも分かるように、基本的に通信は全て単発で、前後につながりはありません。つながりを持たせるためのセッションという考え方や類似した工夫はありますが、通信仕様として単発である事は揺らぎません。
つまり、HTML/JavaScriptは、「単一ページ」内での動作を実現することは得意ですが、「複数ページ」に渡った処理することが苦手です。
データ保持に用いられるデータベース
Webと相性の良い技術分野でデータベースが良く話に挙がりますが、HTTP / HTTPSの通信仕様の弱点である状態維持に関する問題を解消するのに、データベースは非常に相性がよいです。
- ページAでの操作内容をWebサーバーに通信で受け渡し
- Webサーバーで状態をデータベースに保存
- ページBに遷移後にWebサーバーから状態を受け取り
上記のような流れで、ページAとBの間でデータを共有する様な処理は、現在のWebシステムの常套手段となっています。
HTML/JavaScriptで、1.や3.の処理は頑張って実装することは可能ですが、残念ながら2.はサーバー側のプログラムが必要になり、HTML/JavaScriptの技術だけでは実現ができません。
JavaScriptの動作はページ読み込み後から
JavaScriptはプログラムのような動作をする言語ではありますが、ブラウザなどにHTMLが読み込まれて初めて動作するスクリプト言語です。HTML上に存在しない要素を動的に生成したりといった、HTML上での動作の実現は可能ですが、そこを超えるような処理をすることはできません。
例えば「そもそも読み込むJavaScriptを変更する」といったようなページ生成に関する処理は、読み込まれて初めて動作し始めるJavaScriptでは実装する方法がありません。どうしてもJavaScriptで実装する必要がある場合、疑似的な方法を模索して実装することになるでしょう。
JavaScriptを含めて「HTMLページ全体の生成を制御」する場合、サーバー側のプログラムによる処理が必要になります。サーバー側で処理することで、利用者からの要求に応じて動的にページを生成し、ブラウザに表示されるページ自体が変化するような処理を行うことが出来ます。
クライアントとサーバー分野の特徴を比較
現場での役割分担で、他の技術者がサーバーを準備してくれるといったこともあれば、自分がサーバーを準備して、フロントの画面はデザイナや他の人が担当するといった場合もあるでしょう。Webエンジニアとしては、どちらの対応もできるようになっておく方が、仕事の幅も広がり、将来のキャリアにとっても有益でしょう。
クライアントとサーバーの技術やエンジニア(職種・業務)には、概ね以下のような特徴や傾向があります。自分に合った道を考える際の参考にしてみてください。
| クライアント(フロント) | サーバー |
|---|---|
| (技術) 技術の変動が早い マルチメディアで派手 Web以外への応用が難しい (業務) デザイン・マーケティングとの連携多い デザイン資料を運ぶことがある 女性も多い | (技術) 比較的安定した技術 文字やコマンドが多く地味 Web以外との共通技術が多い (業務) 他のエンジニアとの連携が多い 重い機械を運ぶことがある (年配の)男性が多い |
クライアント技術・業務の特徴
クライアント側はデザインと関連していることも多く、男性だけでなく女性も多く活躍している分野です。流行に影響を受けやすく、技術や連携サービスの変動が激しい世界で、新しいものが好きな人には向いている業界ですが、エンジニアとして他の分野へのキャリアアップなどが難しくなるという側面もあります。サーバー機器などの重い荷物や汚れたケーブルなどを運ぶ機会は少なく、会議で使う紙のデザイン資料など印刷物との関りは比較的多いでしょう。
サービスの運営や集客と直結している部分でもあり、収益性などを含めた多角的な知識を得る機会が多いです。そのため、エンジニアではなくコンサルタントやアナリストのような、エンジニア職とは違ったキャリアへの道が拓けることも少なくありません。
サーバー技術・業務の特徴
Webサービスでは、フロントもサーバーもどちらも重要で欠かせないものではありますが、サーバーはサービス全体の心臓部であり屋台骨で、設計から構築まで高度な技術が要求されるため、特に経験豊富なエンジニアが担当していることが多いです。最近はクラウドの活用も進められていて少なくなりましたが、時に重たいサーバー機器などの運搬することもあります。ネットワークの配線などで埃の多い環境で作業を行うこともあるでしょう。
サーバーはネットワークを介して他のサービスやソフトウェアと連携することが多いため、必然的に他のエンジニアと技術的な調整をする機会が多くなります。サーバー技術者でありながら、他の分野の技術者との交流を通じて幅広い技術的な知識を得やすく、多方面に関して知識・経験が豊富なエンジニアへと成長しやすい特徴があり、システムエンジニアやプロジェクトマネージャーなど、各分野の人を束ねる職種へと進む人も多いです。
サーバー技術についても確認しておこう
Webエンジニアにとって、サーバー技術は「自分の成果を広めるためのインフラ」であり、生命線でもあります。将来クライアントサイドのエンジニアを目指す場合でも、最低限サーバーサイドがどういった技術で出来ているのかは理解しておきましょう。
大きなプロジェクトでは、クライアントもサーバーも複数人で業務にあたることが多いため、Webエンジニアはどこを担当することになるかはSEやPM・上司の判断によって決まることになります。自分の得意分野があれば、優先的にその仕事を割り振られることもあるかもしれません。協力して一つのWebサービスを構築していく過程では、すべての技術知識を求められることは少ないでしょう。
一方で、すべての技術分野に通じていれば、小さなプロジェクトを一人の力で完結することができます。アイデアさえあれば、独立して自分の会社を起業することも夢ではありません。また、広い分野への対応力は、人から頼られることも多く、人脈も増えてやりがいもある仕事になるでしょう。
Webエンジニアの派手な部分だけでなく、是非業界を支えるインフラ分野・サーバー技術にも興味を持って触れていってみてください。
