フロントエンドエンジニアになるために学習するべきこと

Webはオープンなプラットフォームであり、日々技術の進化が続いています。一昔前はアプリでしかできなかったことが、Webで実現できるようになっています。

そういった状況の中で、フロントエンドエンジニアの需要は年々増加しており、これからエンジニアになりたいと思っている方にも薦められるキャリアの一つです。

それでは、フロントエンドエンジニアになるにはどのようなことを学べばよいのでしょうか？

本記事では、フロントエンドエンジニアが習得しておくべき技術要素について俯瞰的にざっくりと解説をしていきます。

HTML

Webシステムは基本的にHTMLで構造を定義し、CSSで見た目を整え、JavaScriptでその動作を記述します。

いきなり3つの言語を覚えるのか、と尻込みをしてしまうかもしれませんが、HTML自体はプログラミング言語ではなくマークアップ言語であり、繰り返しや条件分岐といったものは存在せず学習コストは低めです。

CSS

CSSはWebシステムの見た目を整えるためにボタンの大きさやフォントの大きさ、幅などを記述するスタイルシート言語です。

現場によってはデザイナーがCSSの記述までやってくれますが、基本的にはフロントエンドエンジニアの役割です。

CSSもプログラミング言語ではないので繰り返しや条件分岐はなく、HTMLの要素に対して見た目を書き下す形で記述します。HTMLほどではないですが学習コストは低めです。

JavaScript

プログラミング言語は数多くありますが、フロントエンド開発をする場合、唯一の選択肢となります。

やや言語仕様に癖があり、また活発に仕様追加・変更が行われている言語なので、基礎を理解しただけで満足せず、継続的に最新情報をウォッチしていくことが必要になります。

フロントエンドのフレームワーク

ほとんどの現場では純粋なJavaScriptだけでシステムを構築することはあまりなく、少なからずオープンソースのライブラリ・フレームワークを使用することになります。

JavaScriptは非常にオープンソースライブラリが多く、広く使われているものでも

• jQuery
• React
• Vue
• AngularJS

といった選択肢があります。

「これらのライブラリのどれかを用いてWebのユーザーインタフェースの動きをコーディングすることができる」ことが、フロントエンドエンジニアになるための第一歩になります。

最初からすべてのライブラリの使い方を覚えておく必要はないので、どれか一つに集中して学習して使えるようにしておきましょう。

jQueryはこのうち最も歴史があるライブラリで、React,Vue,AngularJSに比べると習得コストが低く、実際に使用されている実績も豊富です。

最近ではjQueryよりもReact,Vueを扱えるフロントエンドエンジニアの市場価値が高まってきている傾向にあるので、やや習得のハードルは高くなりますがチャレンジする価値は十分にあります。

ajax通信のやり方

一昔前は今ほどWebページがインタラクティブに動かなかったので、同期的な通信のやり方だけ覚えておけば良い時代がありました。

しかし、今流行のSPA(シングルページアプリケーション)のような構成では、サーバー側からデータを取ってくる通信の殆どを非同期通信で行うことになります。

SPAほどではなくても、ajaxが使われるべきケースというのはここ数年で飛躍的に増加しました。

例えば、Facebookの「いいね！」ボタンですが、同期通信だといいねボタンを押すとブラウザ全部が再描画されてしまいます。非同期通信だからこそ、気軽に「いいね」を押せてそれが反映されるわけです。

ユーザーの体験を最大化するためにも、ajaxでの非同期通信技術は必ずマスターしておく必要があります。

チーム開発の進め方

プロのエンジニアとして働く場合、「一人で働く」よりも「チームで働く」ことのほうが多くなります。自分がコードを書ければ良い、というのでは職業エンジニアとしては不十分です。

チームで開発を行う場合、以下のようなことについて理解しておくことが必要となります。

• コードレビューのやり方
• チーム内での仕様策定などのコミュニケーション手法・顧客折衝
• 開発手法（ウォーターフォール、アジャイルなど）の理解
• 品質管理・バグ管理・報告フロー

これらのやり方は各現場によって異なることが多いので、適宜コミュニケーションを取りながら進めることが必要となります。

バージョン管理ツールgitの使い方

仕事としてプログラミングを行う場合、必ずといっていいほどソースコードのバージョン管理を行うことになります。

バージョン管理を学習することによって、ファイルを以前の状態まで戻したり、プロジェクト丸ごとを以前の状態に戻したり、過去の変更履歴を見直したり、問題が起こっているかもしれないものを誰が最後に修正したか、誰がいつ問題点を混入させたかを確認したりといった様々なことができるようになります。

バージョン管理ツールとしては、「git」「subversion」などがありますが、gitのシェアが圧倒的ですので、gitをまずは理解しましょう。

加えて、「Git Flow」と呼ばれるgitを用いたチーム開発フローについて学習しておくことが推奨されます。「万が一バグを発生させてしまった場合に、あとから追いかけやすいようにしておく」のもスキルの一つです。