DESIGNMAP

独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム

記事公開日:2013年01月31日最終更新日:2015年05月11日

Webデザイナーになる準備 勉強方法 独学でWeb制作を身につける

本記事は2013年に書いた記事で内容がだいぶ古くなっております。
フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは/Webアプリケーションの歴史/フロントエンドの勉強が難しくみえる理由 - まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1


2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。

フロントエンド・エンジニアとは

フロントエンドとはWebブラウザ側(クライアント側)という意味で、バックエンド(Webサーバ側)と対になる言葉である。クライアントとサーバの概念は重要で、あとに述べるHTTPの勉強で概要を学んでおこう。フロントエンド・エンジニアとは、HTML、CSS、JavaScriptの専門家である。この3つに深く精通しているエンジニアということになる。このなかでも、特にJavaScriptの専門家のイメージがあり、中心技術になる。

私が、初めてフロントエンド・エンジニアという職種名を聞いたのが、2005年頃だった。当時は、一部の制作会社でしか定着していない職種名だった。2013年の現在、フロントエンド・エンジニアという職種は、Web業界ではいくぶん定着している。実際に、クックパッドやカヤックなどのWebサービス会社、Web制作会社で応募例をみることができる。

ステップ1 作業環境をつくる、探す

まず作業環境をつくろう。必要なものは、パソコン、テキストエディタ、Webブラウザだけである。
パソコンはさほどスペックの高いものは不要である。ただ、キーが打ちやすいキーボードを選ぼう。キーボードはHappy Hacking Keyboardをおすすめしたい。
OSはWindows、Mac、Linuxなどなんでも構わない。好みでよいが、職場と違うOSを選ぶとおもしろい。

テキストエディタはたくさん種類があるので、迷う。私は現在、制作環境はOSはMac、テキストエディタはJeditとCodaをつかっている。WebブラウザはFirefoxとGoogle Chromeをインストールしておこう。Firefoxにはアドオン(機能拡張のこと)のFirebugをインストールしておく([ツール]メニュー→[アドオン]→[アドオンを検索]で「Firebug」で検索でインストールができる)。

いざ独学で悩むのが、勉強する場所確保である。家で集中できる方なら、机、椅子、本棚を用意して書斎をつくろう。私の場合は、どうしても家では集中できない質なので、喫茶室ルノアールを多用している。私の通っているルノアールは、実習室のような仕切りのある机がある。そのお店は夕方以降は、空いているのもありがたい。長く滞在するのであれば、コワーキングスペースを借りるという選択肢もある。




style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-7951568120364502"
data-ad-slot="9653147902">




style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-7951568120364502"
data-ad-slot="9653147902">



ステップ2 フロントエンドの3つのレイヤーを知る

まず大まかにフロントエンドの世界を概観しよう。Web制作のフロントエンドの世界では3つのレイヤーにわけて段階的に実装してゆく。

1 構造
2 装飾
3 振る舞い

それぞれのレイヤーごとに技術が役割分担している。構造がHTML、装飾がCSS、振る舞いがDOMとJavaScriptである。
HTMLとCSSは、一般のプログラム言語とは性格が違っている。HTMLは文書を保管するためのフォーマットで、CSSはHTMLを装飾するためのスタイルシートである。Web制作のフロントエンドの世界では、JavaScriptが唯一のプログラム言語といってもよい。正確には、ActionScriptやクライアンドサイド側のJava、iPhoneアプリなどの開発に使うObjective-Cという選択肢もあるが、HTMLを直接操作できるのは、JavaScriptだけである。

段階的に実装を強化してゆく

構造、つまりHTMLにコンテンツをいれる。HTMLではタグと呼ばれる記号で、コンテンツに意味をつけて構造化してゆく。建物でいえば、骨組みをつくるイメージだ。HTMLはユーザーからは見えない。構造ができたら、段階的に実装を強化してゆく。CSSが閲覧できる環境では、CSSを適用させ装飾した状態でコンテンツをみてもらう。ユーザーが目に見える部分である。建物でいえば、壁紙や床だろう。JavaScriptが動く環境であれば、機能性をくわえたものを提供する。建物でいえば、エレベーターをつけたり、自動ドアをつけるイメージである。

このように段階的に実装を強化することによって、JavaScriptやCSSがオフの環境でもコンテンツにアクセスできるWebサイトになる。

DOMとは

DOMとは、HTMLをプログラムから利用するAPIである。APIとはシステムとそれを利用するアプリケーションプログラムの境界のこと。あるシステムを操作するときに、利用者側に公開されているメソッドやプロパティなどの仕様である。

Webブラウザは読み込んだHTMLを解析してツリー上のオブジェクトに変換する。これをDOMツリーという。このDOMツリーを操作することで、動的にHTMLの一部を変化させたり、新規にコンテンツを生成したり削除ができる。たとえば、マウスがのったら、動的に2番目の画像を別な画像に差し替えることができる。このDOM操作のときに使う言語がJavaScriptである。

Ajaxとは

Ajaxという技術を使うと、HTMLを再読み込みや画面遷移せず、Webサーバーからデータをとってきて、DOM操作を行い、動的にHTMLを生成させてコンテンツを生成することができる。有名な例だとGoogleマップである。必要に応じて画面遷移させずに、必要な地図データをサーバーから読み込み、HTMLの一部を書き換えていくWebアプリケーションである。

極端な実装だと、HTMLは空で、必要に応じてコンテンツをいれてゆくこともできる。ただし、主要コンテンツでこれをやってしまうのは基本的にやらない。主要コンテンツは、最初からHTMLにいれておく。

振る舞いのレイヤーは、HTML5の登場とともに近年強化されている。従来は、Flashなどのプラグインなどが必要だった処理がHTMLとJavaScriptだけでだんだんと実現できるようになっている。ビデオやオーディオの再生やビットマップベースのアニメーション、ドラッグアンドドロップなどのファイル操作などが挙げられる。

3つのレイヤーに関連して知っておきたいのは、Webブラウザは2つのエンジンをもっていることである。HTMLとCSSを解析して表示するのがレンダリングエンジン、JavaScriptを解析、実行するのがJavaScriptエンジンである。Firefoxは、レンダリングエンジンはGecko、JavaScriptエンジンはSpiderMonkeyである。Webブラウザによってエンジンが違うため、同じCSSでも表示が違ったりすることがある。


ステップ3 HTML、CSSを書く

テキストエディタとWebブラウザを使って実際に、HTML、CSSをかいていこう。少し書いては保存して、Webブラウザで表示を確認する。この繰り返しである。大事なのは、HTMLは見た目のための言語ではない点だ。データの意味を考えて、タグをつけていこう。HTMLをCSSなしで単独でみても、論理的に意味が伝わるように書いてゆく。

実際は、WebブラウザでHTMLだけをみた場合も、Webブラウザで最初から用意しているCSSが暗黙に適用されている。デフォルトスタイルシートという。h1が太字になったり、liのあたまに黒丸がついたりがそれである。

HTMLの入門書は、『HTML/XHTML&スタイルシートレッスンブック』か『よくわかるHTML5+CSS3の教科書』がおすすめである。『よくわかるHTML5+CSS3の教科書』は初心者向けの内容で、1冊でHTML5やCSS3までカバーしている。著者の大藤幹さんは、CSSの第1人者である。一方、分かりやすさ重視で選ぶなら『HTML/XHTML&スタイルシートレッスンブック』は、丁寧な構成で、ステップバイステップで読み進めることができる。ただし、HTML5やCSS3は含んでいない。


CSS3は『CSS3 スタンダード・デザインガイド』をおすすめしたい。他の類似の本とは、内容の濃さ、網羅性で大きく引き離している。他のCSS本では解説されていない細かい箇所までのっている。CSS3の新しいところばかりでなく、地味なところや基本的なところもまとまっている。CSSの復習にも向いている本である。

ステップ4 ホームページをつくりながら、Firebugに慣れよう

テキストベースのシンプルなホームページをつくってみよう。題材は、趣味(もしくは自分が得意なジャンル)のページでよいとおもう。実際につくっていくと、CSSがうまく適用されないことがおこる。このときに、Firebugという開発支援ツールを使ってミスの原因を探していこう。JavaScriptやCSSをデバックをするときにつかう。JavaScriptのコンソールも用意されているので、JavaScriptのコードの断片を書いて、すぐに実行することも可能である。

Firebugはフロントエンド・エンジニアの最重要ツール

Firebugは多機能である。今回使うのはCSSのデバックである。HTMLをFirefoxで開いて、検証したい箇所を右クリックして、[Firebugで要素を調査]をクリックする。HTMLタブが自動で選択され、左側にDOMツリー(HTMLをWebブラウザが読み込んで解析したもので、要素がツリー状になっている)が開き、右側に選択したそのクリックしたタグに適用されているCSSが表示されている。自分が書いたCSSが表示されない場合は、HTMLの属性名かCSSの記述が間違っている。レイアウトが崩れている場合は、最初に、DOMツリーの入れ子構造を確認しよう。divタグの閉じ忘れが、一つでもあると入れ子構造が大きく崩れてしまう。

このような形で、ホームページをつくりながら、Firebugに慣れていってほしい。フロントエンド・エンジニアにとって、最初にマスターすべきツールはFirebugである。Firebug以外にも、Google Chrome、Safari3以降、Opera9.5以降、IE8以降でも類似の開発支援ツールが用意されているので、こちらをつかってもよいだろう。




style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-7951568120364502"
data-ad-slot="9653147902">




style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-7951568120364502"
data-ad-slot="9653147902">



ステップ5 FTPを使ってホームページを公開してみよう

ホームページが完成したら、実際にレンタルサーバを借りてみよう。レンタルサーバは、共用サーバで構わない。

FTPソフトを用意しよう。SFTPに対応しているソフトを選ぶ。Windowsであれば、FFFTPがおすすめである。私は、Mac環境だとFetchというソフトを使っている。サーバ会社のサポートページを見ながら、FTPソフトの設定をして、SFTPの設定をおこなう。実際に、サーバにファイル転送をおこない、公開しよう。

ステップ6 HTTPの概要を知ろう

FTPがでたところで、HTTPの入門知識をおさえてほしい。どんどん変わっていくようにみえるWeb技術の中で、HTTPは驚くほど変わっていない。これからも変わらないだろう。HTTPはクライアントとサーバ間でデータを取得するときのシンプルな決めごとである。

同期通信

HTTPは、Webブラウザ(クライアント、ユーザーエージェント)はWebサーバにリクエストメッセージ(ヘッダー情報とボディ情報で構成されている)をおくって、Webサーバはレスポンスメッセージ(同じく、ヘッダー情報とボディ情報で構成されている)を返す。レスポンスのボディ情報にHTMLがはいっている。Webブラウザは、リクエストメッセージを送ったあと、サーバからのレスポンスメッセージを待つ。Webサーバが混んでいる場合は、Webブラウザはじっと待つことになる。これを同期通信という。逆に、待たないで別な処理ができることを非同期通信という。同期、非同期今後もたびたび登場する言葉である。

リソース一つにつき、このメッセージのやりとりを行う。2つ画像を欲しい場合は、2回このやり取りをおこなう。CSSファイルが3ファイルリンクしている場合は、CSSファイルだけで3往復の通信が行われる。通常は、最初にHTMLをリクエストして、HTMLが返答されたあと、それに付随する画像やCSSファイルなどが、リクエストで要求される。数十回もの通信がおこなわれて、初めて1ページのホームページが表示される。のちのちフロントエンドの高速化を勉強するときに、この知識がいきてくる。

ステートレス性

ここで注意したいのは、Webサーバ側は、1回目のリクエストと2回目のリクエストの送り主が同じクライアントだということに気がつかない。Webブラウザは、必要なリクエストメッセージを毎回、同じ内容でも送らねばならない。これをステートレス性という。さきほどのステップででてきたFTPはステート性である。FTPは、一度ログインすると、ログアウトするまでサーバ側は、同じ人がログインしていることを把握している。

メソッド、ステータスコード

Webサーバにリクエストメッセージをおくるときに、サーバへの要求として9つのメソッドが規定されている。普段、ホームページをみるときに使われているのは、getメソッドである。Webサーバがレスポンスメッセージを返すときはステータスコードという3桁の整数をメッセージのヘッダー情報にいれて返す。サーバ側でエラーがおきている場合は、5xxいう
整数を返す。getとpostはHTMLのフォームやAjaxを学ぶときにつかう。メソッドやステータスコードの知識は、AjaxやPHPなどのサーバ側で動く言語やApacheの設定を学ぶときに必須になる知識である。

HTTPは今後の勉強の基礎になる

ざっと、HTTPを簡単に紹介したが、入門書でよいので、この段階で概要を知っておくとWeb技術の基礎がかたまるし、今後の勉強の基礎になるところである。『Webを支える技術 -HTTP、URI、HTML、そしてREST』は、Webの歴史も学べて、大きな文脈の中でHTMLの位置がわかる。HTTPも90ページくらいでコンパクトにまとまっている。

追記:2015年5月11日
HTTP、動的サイト、WordPressのブログ - まったくのゼロから、独学でWebデザイナーになるためのロードマップ 【Vol. 4】』にもHTTPの概要をまとめてあります。

ステップ7 JavaScriptでDOM操作をしてみよう

いよいよJavaScriptである。DOM APIというのがありJavaScriptをつかってDOMツリーの操作ができる。『DOM Scripting 標準ガイドブック』『ノンプログラマのためのJavaScriptはじめの一歩』のいずれかである。『DOM Scripting 標準ガイドブック』はすでに絶版で、図書館で入手することになる。

これらの本は、ライブラリを使わず、生のJavaScriptでDOM APIにアクセスする本になっている。『ノンプログラマのためのJavaScriptはじめの一歩』は、90行のスライドショーのサンプルをまるまる一冊をつかって解説するというユニークな試みの本である。

『DOM Scripting 標準ガイドブック』は翻訳本である。原書は第2版がでている。第1版とほぼ内容は変わらないが、HTML5の章を追加されている。英語に慣れることも兼ねて挑戦したい人は、原書第2版の『DOM Scripting』をおすすめしたい。理論部分の英語は読むのに苦労するが、コード部分はほとんど英語がなくやさしい英文である。

実際、DOM操作を書いてゆくと、条件分岐やループを多用するので難しいと感じるとおもう。実際の仕事で、生のDOM APIを使うことはあまりなく、jQueryのようなライブラリをつかってDOM操作をおこなうことがほとんどである。

FirebugでJavaScriptのデバック

プログラムが動かないときは、Firebugの[コンソール]を有効にして、エラーがでていないかをチェックしよう。プログラムの要所要所で「console.log(変数);」をいれて、変数の値を出力して確認するとよいだろう。if文の内側や関数の戻り値を取得している箇所で、console.logで変数を出力してゆくと、原因の箇所を探しやすい。

関連ある過去記事:「ノンプログラマーのための、プログラミング学習、9つのアドバイス

もし入門書で挫折した場合

ここで紹介した3冊の本は、ノンプログラマー向けにかかれている。そのため、変数や条件分岐などの解説がある。ただそれでも、内容が難しいと感じる人もいるかもしれない。この場合は、回り道にはなるが、結城浩さんの『新版Perl言語プログラミングレッスン入門編』を読んでおくと、今後のプログラミングの習得がスムーズである。時間があれば、同じ結城さんの『Java言語プログラミングレッスン上・下』も読んでおくとよい。JavaとJavaScriptは仕様が対照的である。JavaScriptの本でも、Javaと比較されて説明されることが多いので、Javaの知識があると、今後のJavaScriptの勉強もスムーズである。他の言語を学ぶ際も、スタンダードな存在であるJavaと比較されて語られることが多い。


ステップ8 スライドショー付きイメージギャラリーをつくってみよう

アウトプットをしよう。おすすめの題材は、スライドショー付きイメージギャラリーの作成である。まず、写真が一定時間ごとに切り替わるサンプルをつくる。写真の下にはサムネールがでるようにしてみよう。つぎに、サムネールを押すと、切り替わるようにつくる。さらに余裕があれば、写真のアニメーションやサムネールを自動生成させる機能もつけてみよう。

何をつくったらよいかが分からないとき

今回は、イメージギャラリーを提案したが、自分で何かを独学するときに困るのが、つくる題材である。先ほど紹介した『ノンプログラマのためのJavaScriptはじめの一歩』の著者の外村 和仁さんは、この本の中で、車輪の再発明を勉強用にすすめている。仕事では車輪の再発明をしてはいけないが、勉強用の題材には向いている。スムーズスクロール、ロールオーバー、トップページ向けのビジュアルのスライダーなどを自分で作ってみるとよい。

ステップ9 jQueryを学ぶ

以前「WebデザイナーのためのJavaScript、jQueryの勉強法」で書いたときは、最初にjQueryをもってきたが、今回はようやくの登場である。jQueryはJavaScriptのライブラリで、DOMツリーの操作、イベント処理、アニメーション、Ajaxが格段に少ない行数で開発できる。ステップ9でつくったサンプルをjQueryで再実装してみよう。

『WEB+DB PRESS(2010年12月)』の碁郷 協さんの「jQuery実践入門」の記事がコンパクトにまとまっていながら、実務の勘所をおさえた記事になっている(『JavaScript徹底攻略』に再掲載)。メッソドチェイン用のデバッグ、URLごとのコードの切り替え、FireQueryをつかったデバッグ、QUnitを使ったユニットテストなど実践的なまとめである。

本でじっくりjQueryの基礎を学ぶなら『コアjQuery+プラグイン/jQuery UI 開発実践技法』だろう。入門書ではなく、けっして読みやすい本ではないが、プラグイン開発まで狙っている人にはおすすめしたい。

ステップ10 JavaScriptのコア部分を学ぶ

とくに理解しておきたいところはプロトタイプ継承、クロージャ、call/apply、this参照である。中でも重要なのはクロージャである。『パーフェクトJavaScript』と『JavaScriptパターン』の2冊をおすすめしたい。

『パーフェクトJavaScript』は解説が、普通の本とは違う味わいがある。定数やオブジェクトの説明もユニークである。クロージャは、この本でようやく理解できた。言語仕様だけでなく、JavaScript独特のイディオム、DOM、Ajax、HTML5、WebAPI、サーバサイドJavaScriptまで広くカバーしていている。『JavaScriptパターン』はプロトタイプ継承の図解の解説がダントツにわかりやすい。

どちらの本も実際にコンソールにコードを書きながら読んでいくことをおすすめしたい。プロトタイプ継承とクロージャは実際にコードを書いて実行してみないとなかなか理解がしにくい箇所である。


その他、おすすめのJavaScriptの基礎本(追記:2015年5月11日)


『開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質』


オブジェクトの説明がじっくり解説されている。オライリーの本の中でも内容がやさしく、読みやすい。

『JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング』

jQueryの創始者、 John Resigの本。必読書。基本トピックから応用トピックまで。筆者は、翻訳が待てずに原書で挑戦した本だ。最後の3章は上級者向け。


ステップ11 jQueryの本体コードを写経、ステップ実行しよう

力試しに、jQueryのバージョン1.0のコードをダウンロードして、1,800行のコードを写経してみよう。読めない箇所もたくさんあるとはおもうが、一度書いて、動作テストをしてみよう。なお、記事執筆時点でのjQueryの最新バージョンは、1.9.0で、約9,500行である。

ステップ実行でコードの流れを追う

またステップ実行をやってみよう。ステップ9でつくったjQueryのサンプルのプログラムの先頭に「debugger;」といれおく、Firebugの[スクリプト]を有効にしておき、Firefoxで実行するとdebugger;の箇所で、プログラムが一時停止される。右側にその時点のプロパティの値が表示される。あとは、[ステップイン]のボタンを押してゆくと、一行一行プログラムが実行される。jQueryの本体の中の動きを追うことができる。これをステップ実行という。ステップ実行は他の人がつくったプログラムコードを読み解くときに使う。

最後に

以上で、フロントエンド・エンジニアを目指す人向けの独学用の基礎カリキュラムは終わりである。現場に入る前に、事前に備えておきたいことを念頭において基礎用のカリキュラムをつくった。フロントエンドだけに絞っても守備範囲は広い。Webアプリケーションの基礎という観点で基礎部分をピックアップしたが、iPhone開発やAndroid開発もフロントエンドである。

正規表現、SQL、HTML5のAPI部分、テスト駆動開発、Backbone.jsのようなMVCフレームワーク、Node.jsのようなサーバサイドJavaScriptも状況によって必要になるかもしれない。これらを前もって勉強して備えることは、現実的に難しい。まずは、作りたいものを決めて、それを実現するのに必要な技術を、そのつど必要な範囲や深さで習得してゆくのがおすすめだ。jQueryもすべてのメソッドを知らなくてもアプリケーションはつくれる。

本は基礎本には投資をしよう。逆に、入門書は一度読めば十分なので図書館を利用して節約しよう。あとは、必要に応じてネットで検索してゆくとよい。JavaScriptは「Mozilla Developer Network」、jQueryは「jQuery API Documentation」を辞書代わりに使うのがおすすめである。

CSSやJavaScriptはドキュメントを読むだけでなく、実際に小さいサンプルをつくって検証してゆくのをおすすめする。ブログを開設して、検証用のサンプルを公開したり、実装にはまったときは技術メモをブログで書くと後で自分や他の開発者の役に立つ。

↑このページの上に戻る