フロントエンドと言う茫洋とした世界で迷わない為に

The Crew 2のエアレースのいくつかのコースで世界ランク50位以内が見えてきました、おはこんばんにちは、Masaです。

さて今回はフロントエンドと言う、あまりにも守備範囲が広すぎる世界について、どのように方向性を定めれば良いかを書いていこうと思います。
かつてはHTML + CSS + jQuery、それにAjaxをやっておけば良かったような世界だったのですが、今ではあまりにも覚える事が多い！何から手を付けていけばいいんだ！と言う方々に少しでも指針になると嬉しいです。

ちなみに今回の”フロントエンド”の意味は”Webフロントエンド”です。
なんかたまに他業種でフロントエンドとかつく職種もありますが、それとは異なりますのでご注意を！あと基本的に個人的見解です！

それではいきましょうっ！

 

そもそもフロントエンドデベロッパーって？

そもそもフロントエンドデベロッパーってなんでしょう？ HTMLとかCSSを書いてウェブサイトを作る人？ なんかJavascriptをガリガリ書いてる人？
なんかフレームワークとか使ってイケてるモダンなサイトを作ってそう？それともWebサイトじゃなくてアプリとかやってそう？
まぁ色々なイメージがありますが、まず同じ様な作業をするけどいくつか呼称があるのでそれについてまとめていきましょう。

コーダー

まずはコーダーさんから。かつて日本にいた時の自分の職業です。
この職業は基本的にPSDなどのデザインからHTML/CSSを用いてwebsiteとして見える形にする職業です。jQueryを基本にJSもちょろっと触ります。Wordpressも多少？ でもJSフレームワークを使ったり、Wordpressのプラグインやコアな開発はしません。

以前Twitterでもお伝えしましたが、残念な事に「HTML + CSS + jQueryが出来るようになった！これで自分もフロントエンドデベロッパーだ！」とはなりません。まだコーダーレベルです。しかし突き詰めるとHTMLとCSSのプロフェッショナルがこの人達とも言えますし、フロントエンドデベロッパーもここがスタートです。さらに悲報ですが、カナダではこのレベルの仕事は就活中まったく見かけませんでした。

最近はgulpなどを使ってHTMLはPug、CSSはSassで開発する事が多いかな？

マークアップエンジニア

個人的に未だによく分からない呼称。コーダーと一緒か、コーダーをHTML/CSSだけ出来る人間、多少JSが出来るとこちら、みたいな感じ？
もしかしたらBootstrapなどcssフレームワークを扱えるとか？ でもそれもコーダー・・・。

ぶっちゃけこの呼称は北米にはありません。
でも個人的にはコーダーより名前の響きがかっこよくて好きですｗ

フロントエンドデベロッパー（エンジニア）

さて本題のフロントエンドデベロッパーですが、前述通り守備範囲が広すぎて凄まじい事になります。ここではざっくりとあげてみましょう。

  • コーダーのスキルをベースに更にJavascriptに精通し扱う事が出来る。＝アプリ作れる。
  • JSフレームワークを扱える、知見を持つ。SPA作れる。
  • 素のJSではなくTypescriptなどAltJSを扱える。
  • WordPressを一通りカスタマイズ出来る。phpも軽く触れる。
  • なんならwp以外のCMSの知識も求められる。
  • Ajax、RESTなど非同期通信も扱う事が可能。
  • webpackやgulpなどビルドツールやタスクランナーを使いこなせる。
  • その為にNodeのパッケージシステムを理解して扱うことが出来る。
  • cssやjavascriptでアニメーションなどインタラクティブな事が出来る。
  • WebGLで3D表現を実装できる。

 

ざっと思いついたのだけですが…
「えっ！？これ全部覚えないとダメ？やる事多すぎね！？これ全部やるなんて時間足りなくね！？」ってなりますよね。実際に自分はなりましたｗ
とは言え、フロントエンドデベロッパーにも携わる仕事や方向性を決める事により、学ぶ技術の範囲を狭める事は可能です。

次はそこを見ていきましょう。

 

の前に、フロントエンドデベロッパーのコアスキル

学ぶ技術の範囲を狭める事は可能ですが、もちろんコアとなるスキルもあります。
HTML, CSS, Javascript ( No jQuery)の三種の神器はもちろん、現代のフロントエンド開発ではNode.js上に構築される開発環境を使うのが当たり前となっている為、パッケージマネージャのnpm(yarn)、それにwebpackの知識は必須になります。webpackを用いて自身で開発環境を構築出来るようにしておきましょう。(Gulpはコーダーレベルでは依然人気があると思いますが、フロントエンドではほぼwebpackに仕事を奪われた感があり廃れ気味かと思います。）

Javascriptも2015年にリリースされたES2015、それ以降毎年バージョンアップされているのでその情報を追い、学ぶ事も必要となります。最近では実際の記述はES2015以降で行い、Babelというトランスパイラを使いどのブラウザでも扱えるES5の形に変える手法が取られます。(Typescriptの場合はBabelを介さず直接変換する場合もあります。）そのためトランスパイラの知識も必要になるでしょう。

では改めてフロントエンドデベロッパーの方向性を見ていきましょう！

 

アプリ系（サービス系）フロントエンド

まずは一番分かりやすそうなアプリ系です。
これはそのままWebアプリのフロントエンドを担当する仕事となります。
Webアプリと言う性質上、自社サービスの開発がメインとなりそう。

最近のアプリはSingle Page Application (SPA)が主流となりつつあり、React、Vue、AngularなどのJSフレームワークの習得は必須です。JSフレームワークは初心者の方にはVueの敷居が比較的低い、それに日本ではコミュニティが活発、書籍も多く出ている等おすすめです。カナダの就職事情で言うとVueはまだあまり強くなく、やはりReactかなと思います。実際のプロジェクトでも採用される事も多く、日本でも就職に有利に働くかもしれません。Angularはバンクーバーでは勢いがあまりありませんが、トロントなど東海岸ではまだまだ募集が多く、比較的勢力を保っていそうです。

また最近のWebアプリが置かれている状況からスマホなどのモバイル周りの知識も多少必要とされるかもしれません。React Nativeが扱えるとかなりポイントがプラスになります。バックエンド（サーバーサイド）とのデータのやり取りも必要な事からAjax、RESTの知識も必要となります。最近勢いを増しつつあるGraphQLを習得しておくとプラスになるかもしれません。中にはバックエンドまで一通りやってしまう”フルスタックエンジニア”なんて人もいます。

ポートフォリオのデザイン性は制作系程重要視されませんが（と思うｗ）、簡単な物でも良いのでアプリ等を作ってGithubにアップロードする事は怠らないようにしましょう。

ちなみに自分のカナダでの就職もアプリ系となります。

 

Web制作系（エージェンシー系）フロントエンド

こちらはフレームワーク等を使ってJSをバリバリ書いていくアプリ系とは違い、一般の方が一番イメージするフロントエンドの仕事の形になるんじゃないかなーと思います。制作系の会社でサイト制作に携わるのが基本です。
最近のサイト制作はwordpress上に構築するのが基本となっている部分もあり、wpの知識は必須となります。またwpのプラグインの扱いにも長けている必要があります。Sageや_sなどのスターターテーマを使えるとプラスかも？ 北米ではSageが主流らしい…
もちろんjsフレームワークを扱えると尚良いかと。
最近はフレームワークをベースとした静的サイトジェネレーターが存在するので、もしかしたら今後その辺の採用が増えるかもしれません。勉強しておくと良いかも。

フロントエンドとは別にwpを自在に扱い、プラグインを自作し、必要であればphp、SQLを書く、wpを突き詰めた職業、Wordpress Developerなる職業もカナダでは散見します。

最近のwebsiteではアニメーションが使われる事が多く、cssやjsを用いたアニメーションの実装する知識、svgアニメーション等の知識も必要となります。
また基本的に制作会社はデザインにも力を入れている為、多少なりのデザインへの知見が求められます。
カナダではフロントエンドデベロッパーの他に、”UI Developer”や”UX Developer”などの呼称も見られます。
UI/UXについての知識も合わせて持っておくとプラスになるかもしれません。

この方向性を目指す人は、見た目も動作もイケてるポートフォリオを作る事が重要になります！
ポートフォリオを作る際にはデザインにも力を入れましょう。AwwwardsやCSS Awardをチェックし、最新のデザインを見ることで目を肥やしましょう。
デザイナーと協力してwordpressのテーマを配布するのも良いかもしれません。

自分は最初はこの方向で進めてましたが、スキルセットが完全にアプリ寄りだったので方向転換しました。

 

インタラクティブデベロッパー

最後はちょっと番外編、おまけ的ではあるんですがインタラクティブデベロッパー。
これはもうその名の通りインタラクティブなサイトを作る人になるかと思います。
実は自分もあんまり良くわかってないｗ 基本WebGLの知識は必須になりそうです。
フロントエンドのスキルをベースに、アニメーションやゲーム、3D表現に特化した人とでも言いましょうか。
ちなみにWebGLのスキルは需要に対して現状人材が非常に乏しく、習得すればかなり重宝される人材となります。
ただ、3Dを扱う技術を習得するのは中々骨の折れる事なので、それ相応の覚悟はしてください。
Unityや3D制作ソフトを扱える必要もあるかもしれません。

ポートフォリオはWebGLで作る事が必須です。その他幾つか作品を作る必要もあるでしょう。
WebGLは最近では制作系の人が習得を目指している事が多いです。今後ますます盛り上がっていくのではないかと。

実はやりたい分野ｗ でもどこから手を付けていいか分からない…

 

まとめ

方向性を分けるとは言え大まかには２つにしかなりませんが、全体をまんべんなく学習するよりは多少的が絞れたのではないでしょうか？ それでも学ぶことは多いですが… とりあえずは必要となるコアスキルを習得する事を目指しましょう。その後にフレームワークやwordpress等のcmsを触ってみて自分に合ってるのかどうかを判断すれば良いかと思います。自分の場合はどうしてもwordpressが楽しいと思えず、勉強していても中々燃えることがなかった、フレームワークを触っているのが凄く楽しかったのでアプリ系にシフトしました。学習中にこの様にフレキシブルに対応する事も重要です。まずは今の自分に何が必要なのかをしっかりと見極め、コツコツ勉強していきましょう。自分もまだまだこの大海原を彷徨っています。一緒に頑張りましょう！でわでわっ！