DESIGNMAP

まったくのゼロからフロントエンドエンジニアを目指すための独学方法 vol.1 - フロントエンドエンジニアとは/Webアプリケーションの歴史/フロントエンドの勉強が難しくみえる理由

記事公開日:2016年09月15日

frontend-engineer-2016

本記事は2013年1月に書いた「独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム」の改訂版である。今回は、まったくの初心者の方がゼロからJavaScriptライブラリの「React.js」までを独学する方法をまとめていきたい。

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

Webエンジニアは大きく3つの職種に分類できる。フロントエンドエンジニア、バックエンドエンジニア、インフラエンジニアである。

フロンエンドとはWebブラウザもしくはアプリを意味する。Webブラウザだとフロンエンド技術とはHTML・CSS・JavaScriptをさす。HTMLはページの骨組み、CSSは装飾とレイアウト、JavaScriptは振る舞いというようにレイヤーが分かれている。HTMLとCSSはW3Cが仕様を決めて、JavaScriptはECMAが仕様を決めている。

フロントエンドエンジニアはJavaScriptの実装が中心になる。フロントエンドエンジニアはバックエンドエンジニアとデザイナーの間にたっているポジションで橋渡し的な役割も求められる。

フロントエンドは激流である。技術のライフサイクルが早い。おそらくWeb系の職種で最も勉強コストが高い職種だろう。どんどん変化していくので、もっともWebらしい職種といえるし、Webが好きな人、遊び=Webな人に向いている職種である。

Webアプリケーションの歴史

簡単にWebアプリケーションの歴史をふりかえってみよう。

Webデザイナーのトイ言語という扱い

Webアプリケーションというと、処理の中心はサーバー側の言語だった。Perl、Java、PHP、Python、Rubyあたりの言語でサーバーサイドのコードを書いた。サーバー側の言語がデータベースサーバーと連携して、新しいHTMLをつくりページ全体をWebブラウザに戻していた。Webブラウザ側はただHTMLを表示するだけだった。

JavaScriptはほんの味付け程度の存在で、JavaScriptはWebデザイナーのトイ言語という扱いだった。当時フロントエンドエンジニアという専門職はまだなかった。当時のWebデザイナーの多くはFlashのActionScriptに夢中だった。インタラクティブなUIはFlashで実装することが多かった。JavaScriptの比重はデザイナー、エンジニアとも低かった。

Ajaxで流れが大きく変わった

この流れを大きく変えたのが2005年に発見されたAjaxである。Ajaxはページ全体を更新するのではなく、HTMLの一部だけを非同期に書き換える作法である。非同期というのはユーザーの操作を妨げないでコードを実行できるという意味である。

同期、非同期については「JavaScript、DOM、jQuery - まったくのゼロから、独学でWebデザイナーになるためのロードマップ 【Vol. 5】」を参照。

AjaxはJavaScriptがユーザーの操作に応じて、サーバー側に必要なデータだけを要求する。サーバー側は必要なデータだけをWebブラウザのJavaScriptへ渡す。JavaScriptはそのデータからHTMLを動的に生成する

このAjaxという手法はGoogle MapやGmailなどのWebアプリケーションで有名になった。Google Mapの場合、タイル状に分割された地図を必要に応じて、ページ全体をリロードせずに読み込んでゆく。今では当たり前だが当時は衝撃的だった。AjaxはWebアプリケーションにデスクトップアプリケーションのような使い勝手をもたらした。

jQueryの登場

2006年に登場したjQueryはこのAjaxとDOM操作に特化したライブラリである。

DOMとはWebブラウザに読み込まれたHTMLのオブジェクトである。DOM操作とはHTMLの一部を書き換えることをさす。ライブラリとは関数を集めたものである。

DOM操作のコードを書くのは複雑でつらかったのを、jQueryは短いコードで実装できるので楽にしてくれる。動きのあるUIを構築するのが以前より楽に実装できるようになった。このライブラリはWebデザイナーでも使いやすく一気に普及した。いまや定番のUIはほとんどプラグインが用意されていて、プログラムができなくても気軽に設置することができる。ただプログラムを書こうとしないWebデザイナーが増えてしまった。

複雑化、大規模化するJavaScript開発に対応した技術の登場

Ajax以降、JavaScriptの存在が大きくなってくる。AltJSと呼ばれるCoffeeScript(2009年)やTypeScript(2012年)が登場する。未来のJavaScriptを先取りした機能をもつ言語である。肝心なJavaScript自体は仕様の策定が進まなく、機能が貧弱なままであった。

AngularJS(2009年)、Backbone.js(2010年)のような大規模開発に対応したJavaScriptフレームワークが登場するようになる。フレームワークとは設計や処理の枠組みを提供してくれるツ−ルである。

この2009年あたりがフロントエンドエンジニアがWeb業界に広がり始める時期である。一部の早い会社は2005年あたりからフロントエンドエンジニアという職種をいれていた。

Node.jsの登場

2009年にサーバーサイドJavaScriptであるNode.jsが登場する。本来のJavaScriptでWebサーバーをつくる動きは盛んにはならなかったが、Node.jsはファイル操作ができるので、開発ツールがどんどん登場する。Babel、Gulp、Babel、Browserifyなど、いまのフロンドエンドを代表するツールはこのNode.jsでつくられたものだ。

Babelの登場

BabelというNode.js製の変換ツールが登場する。最先端のJavaScriptを古いJavaScriptのコードに変換するツールである。

Babelを使うことでフロントエンドエンジニアはWebブラウザの対応を待たずに、新しいJavaScriptの文法を使うことができる。

ようやくようやくECMAScript6が登場

これらの動きに答える形で2015年にようやくECMAScript6が登場し、多くの機能が正式に追加された。政治的な問題があってECMASCriptの進化が遅れていた。ECMAScriptとはJavaScriptの仕様を定めている標準言語である。Ecma Internationalという組織が仕様を定めている。

ECMAScript6は大きくJavaScriptを大幅に強化している。変数のブロックスコープ、Arrow Functions、Destructuring、class構文、Symbols、Iterators、Generators、Promises、Maps、Sets、モジュールなどである。ようやくJavaScriptが本格的な言語になったという印象だ。

いままでのJavaScriptは機能が少ないなりに開発者が工夫して、Iteratorsやモジュールもどきのコードを書いていた。

VirtualDomの登場

さらに進化して、JavaScriptでページの状態を管理して、変更前と変更後のJavaScriptのオブジェクトの差分を計算して、最終的に最小限のHTMLだけをかえる技術が登場してきた。VirtualDomである。

Webアプリケーションの処理の中心がバックエンドからフロントエンド側に移ってきた

ざっと駆け足で書いたが、ざっくりいうと歴史とともにWebアプリケーションの処理の中心がバックエンドからフロントエンド側に移ってきたといえる。

なぜフロントエンドの勉強は難しくみえるのか

たとえばJavaScriptのライブラリである「React.js」が気になるなと思い勉強をしようとする。入門書を読んでみる。

コードを読んでいくとHTMLに似ている「JSX」という別な技術が登場する。JSXはReactの中で使うのは任意だが、便利なので事実上使うことになる。このJSXはそのままではWebブラウザでは動作しなく、JavaScriptに変換する必要がある。その変換で「Babel」が登場する。

さらにコードを読んでいくと過去のJavaScriptでは見慣れない記法がでてくる。「ECMAScript6」で追加された文法である。ECMAScript6でJavaScriptは大きな進化を遂げている。

さらにファイル構成をみると、依存するJSファイルをひとつのファイルに束ねている。どうやら「Browserify」を使うようだ。

というようにReact.jsを勉強したとたん、同時に複数の技術が登場する。技術同士が依存しあうため難しく感じてしまう。技術記事や本もいろいろな技術がわかっていることを暗黙の前提に書かれていることが多い。

もうひとつフロンドエンドの勉強を難しくさせている原因が技術のライフサイクルの早さである。情報収集をしても古いコードと新しいコードが混ざり合うので混乱しやすい。いまだとECMAScript5で書かれたコードもあれば、ECMAScript6で書かれたコードがネット状には混在している。

一言で言うとフロンドエンドは混沌としている。

ではいったいどこから勉強していけばよいのだろうか。 

ということで次回から具体的な独学方法をまとめていきたい。Vol2に続きます。

まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム 目次

↑このページの上に戻る