フロントエンド開発の勉強

フロントエンドエンジニアの勉強を始めます。
今回は勉強を始めるにあたって、その動機とこれからどのように勉強を進めていくか、どうやって情報を集めていくかをまとめておきます。

フロントエンドを始めるきっかけ

Web技術に将来性を感じたからです。
HTML5によりかなり高機能なWebアプリケーションが製造可能になり、これまでデスクトップで行っていた事がWebでできるようになっています。 また、Webはスマートデバイスの登場により姿を消すどころか、より存在感を増しているように感じます。
もちろん変化の早い業界ですので先は分かりませんが、長く使えそうなスキルです。

もう一つは汎用性です。
Webアプリはもとより、AndroidアプリやiPhoneアプリもHTML5を利用してつくることができます。ひとつの技術でマルチデバイス対応できるというのは魅力的ですね。

フロントエンドの勉強計画

基本を学びつつ、実際に手を動かして実践力もつけます。

【基礎学習】

実際に資格を取るかどうかは別にして「HTML5プロフェッショナル認定試験」の勉強をします。
試験の出題範囲に沿って知識を深めることによって、必要となる基礎知識を体系的に勉強することができます。
http://html5exam.jp/

上記のサイトは出題範囲が書いてあるだけで勉強するのは別のサイトを使用します。
基本的には出題範囲にある要素を検索して勉強しますが、javascriptについては「JavaScript初級者から中級者になろう」が結構参考になります。
http://uhyohyo.net/javascript/index.html

【開発】

効率的に開発するにはフレームワークの利用は欠かせません。
MVW(Model View Whateverの略)と言われるフレームワークを利用しますが、AngularJSを選択することにしました。HTML5関連のサイトやGoogleの検索結果をみても広く使われているようです。
次に紹介する「Monaca」でも利用されています。
AngularJS
https://angularjs.org/

スマートデバイス向けHTML5ハイブリッドアプリの開発環境としてはMonacaを使用します。
開発環境がクラウド上に用意されており、ビルドもクラウド上で行うことができます。実機での動作確認もデバッグアプリを自分のスマホにインストールすることで簡単に実行できます。複雑な環境構築が不要で簡単に始めることができました。
Monaca
https://ja.monaca.io/

他人のソースコードを多数読むことで、本などには書かれないコーディングのルールやテクニックを習得します。 githubで「AngularJS」や「frontend」など検索してstarの多いソースコードを読み込みます。他にも「Web games」も面白そうです。
GitHub
https://github.com/

フロントエンドの勉強の今後

当面はフロントエンドの開発の勉強に専念しますが、先々では次のような技術の勉強も視野に入れています。

Yeoman
Webアプリ開発をするための環境一式を用意してくれるツールです。フロントエンド開発に欠かせないツールが最初から用意された状態のテンプレートを取得することができます。
Yeoman自体を使うことで開発の効率化に大きく貢献できますし、Yeomanで取得した環境を紐解くことで、フロントエンド開発に必要なbowerやGrunt、自動テストなどの周辺技術の勉強にもなりそうです。

MEAN
最近LAMPに代わる開発・実行環境として最近注目されている技術にMEANというものがあります。
MongoDB、Express、AngularJS、nodeJSの頭文字を取った用語でその最大の特徴はバックエンドからフロントエンドまで一貫してJavascriptで開発ができるというものです。