今日は、未経験者、つまりこれからフロントエンドエンジニアになりたいという人向けに、必要になってくるスキルを、現役フロントエンドエンジニアの僕が解説します。
フロントエンドエンジニアと言っても、働き方によって、必要なスキルが若干変わって来ますので、フリーランスで働く場合と、会社に所属して働く場合に分けて解説していきます。ネット上で、似たような記事を多く見かけますが、その技術は、いらなくない？、どう考えてもそんなに多くのスキルは習得できないだろ、というような印象を受けます。ですので、今日は僕の意見を述べていきます。
Contents
そもそも巷で言われているフロントエンドエンジニアに必要なスキルが多すぎる
ウェブのフロントエンド周りは、最高に盛りあっがていて、求人数もいくらでもあると別の記事でも言いました。その通りです。しかし、言い換えれば、新しい技術もどんどん生まれているということです。古くなり、あまり現場では使われていない技術、どんどん採用されている新しい技術と、世の中にはたくさんの技術があるわけです。
フロントエンドエンジニアに必要なスキルは？というような記事では、古くなって、実際勉強する必要のないものまで必須ですよ、みたいな記事を見かけます。これらは、フロントエンドエンジニアではないライターさんが書いた記事なのかもしれません。
もちろん、古い技術も含め、多くの技術を知っている方がよいに決まっていますが、それは未経験者には非効率だよという話です。あれもこれも身につけないといけないという焦りがストレスとなり、どの技術も中途半端になり、途中で挫折してしまう光景が目に浮かびます。僕の経験を踏まえても、未経験者の方は、最初に学ぶ技術をちゃんと選定し、それをある程度身につけて、その技術を使用して最初の仕事をするというプランが最も現実的で、効率的だと思います。
働き方に関わらず必要なフロントエンドエンジニアの必須スキル
下記の三つは、フロントエンドエンジニアになるための必須のスキルです。
- HTML
- CSS
- Javascript
フロントエンドエンジニアは、マークアップエンジニアではありませんので、 Javascriptが必須となります。HTMLやCSSだけだと、デザイナーでも書ける人がたくさんいるので、彼らと差別化できません。
正直、HTMLとCSSだけできるマークアップエンジニアの仕事はどんどん減っているのが現実です。昔は、HTMLはhtmlファイルに、CSSは、cssファイルにそれぞれ書くのが普通でした。ですので、Javascriptに触れることなく、仕事が出来ていたわけです。
しかし、最近のフロントエンドで最も有名なReactを採用すれば、HTMLそのものを書くことがなくなります。ちょっと専門的になりますが、マークアップも、スタイリング部分も全て.jsファイル、つまりJavaScriptで書きます。ページ毎ではなくて、コンポーネント（部品、例えばボタンとか）毎にファイルを分けていくイメージです。それでも、HTML、CSSの知識というのは役に立ちますが、JavaScriptができないと、マークアップエンジニアの仕事さえ出来ないという状況になってきたということです。
いずれ、マークアップエンジニアという言葉は死語になるのではと思っています。
最新の人気フレームワークのReactもいいですが、その前に、この三つの必須言語を一通り学びましょう。
jQueryはスキップしてOK
これからプログラミングを学ぶ方は、jQueryを学ぶ必要はありません。
実際の現場では、まだjQueryを使っているとこもありますが、これからはどんどんReactなどのモダンなフレームワークを使用する会社が増えるのは間違いありません。
念の為断っておくと、jQueryがダメな技術というわけではありません。ただ古くなってしまった技術というだけです。今は大人気のReactにも、いずれ古くなった技術と言われる日が来るように。
jQueryが有名だった頃には、JavaScriptでできなかったことをjQueryが提供してくれました。しかし、今はJavaScript自体が進化し、昔できなかったことも今はJavaScriptのみで実現可能になりました。
会社で働くフロントエンドエンジニアに必要なスキル
フロントエンドエンジニアのコアスキルであるHTML、CSS、Javascriptの他に、実際に企業で働く場合には、必要になってくるスキルがあります。
それぞれ解説していきます。
Git(バージョン管理システム)&Github(Gitを利用したWebサービス)の基礎
表現は難しいですが、ちゃんとした開発環境であれば何かしらのバージョン管理システムを使っているはずです。ですので、全てのエンジニアにとって、このスキルは必須となります。使っていない会社で、働くのはオススメしません。
バージョン管理とは、その名の通りですが、この新しい機能はバージョン２.５でリリースしました。すると、変なバグが発生したので、２.４に戻しますというような操作を簡単にできるものです。
フロントエンドフレームワーク（React, Vue, Angularなど）
実際の開発環境では、ピュアなJavascriptを書いて開発を進めることはありません。それは、時間がかかるからです。開発を早く、便利に行うために、フレームワークというものがあり、それを採用して開発します。
今、最も有名なフロントエンドフレームワークがReactです。未経験者にも、Javascriptを一通り学んだ後に勉強することを進めています。
Reactを採用している有名な会社は、Airbnb、Netflix、AbemaTV、 Rakuten、IBMなど、腐る程あります。
フリーランスで働くフロントエンドエンジニアに必要なスキル
フリーランスで働く場合には、多様な働き方が可能となりますので、このスキルが必要だと言い切るのは、正直不可能です。
働き方の例を紹介していきます。
比較的大き目のプロジェクトにジョインして、チームのメンバーの一人として働くと、上記で述べた、会社で働くエンジニアに近いスキルが必要になるでしょう。契約社員のような働き方です。
一方で、皆さんが想像しやすいであろう、フリーランスとして企業のシンプルなWebサイトやブログの構築などを請け負う場合などは、必要なスキルが結構変わってきます。このような案件には、往往にして下記の特徴が見られます。
- クライアントがあとで、サイトのコンテンツを自由に更新できるようにする必要がある
- 一人で開発するケースが多い。
これら2点のポイントを、解決してくれてるのがWordpressなどのCMSの存在です。例えば、Wordpressを使えば、会社のホームページ、ブログなどは、簡単に構築できて、コンテンツを更新するための環境も整備されています。エンジニアでない人でも、ブログを構築して運用することができるわけです。
これらを最新の技術で作ることも可能です。例えば、フロントエンドにはReactを採用して、コンテンツの更新機能を提供するためにCMSのContentfulというツールを連携させるなど。しかし、これをすると結構な時間がかかります。つまり、割に合わないわけです。
ですので、フリーランスで働く場合には、仕事の内容によってはコードをあまり書かないフリーランスエンジニア？になってしまう場合があります。というか、WordPressでブログ、シンプルな企業サイトを構築して、簡単なCSS、PHPのコードを書いてカスタマイズしているエンジニア？を、フロントエンドエンジニアとよんで良いのか疑問です。
ですので、最初に自分の目指すとこを明確にした方が良いです。コードを書くスキルを伸ばしたいのであれば、キャリアの最初のうちは、会社に所属して先輩エンジニアからスキルを学べる環境を獲得する方を、僕はオススメします。
未経験のうちに身につける必要のないスキル
繰り返しになりますが、未経験の人がフロントエンドエンジニアを目指す際には、下記のスキルは必須ではありません。
フロントエンドエンジニアとして最初の仕事の経験を得たのちに、自分の興味や必要性に応じて学べばよいスキルとなります。
UI/UXなどのデザイナーよりのスキル
これらはコードを書くのではなくて、コードを書く前の段階に、 Webページなどのデザインをするスキルです。これを専門にしているのが、UI/UXデザイナー、Webデザイナーという人たちです。
より正確に言えば、UI/UXデザイナー、Webデザイナーという人たちの業務範囲は異なり、UI/UXデザイナー⊃Webデザイナーとなります。
現在の私の職場にはデザイナーがいますが、比較的小さな変更であれば、デザイナーを介さずに、直接フロントエンドエンジニアである私に、ココこんな感じに変更して！ というような仕事のふられ方をします。会社にもよりますが、実際には、デザイナーを介さない仕事が半分ぐらいあります。ですので、フロントエンドエンジニアがデザインのスキルを身につけると、役に立つというわけです。
しかし、デザインのスキルは、未経験者のフロントエンドエンジニアにとってマストではありません。
サーバーサイド、バックエンドの知識
すごく簡単に言えば、ユーザーから目に見えない部分での処理を書くための知識です。この領域を専門にしている人が、バックエンドエンジニアです。
フロントエンドエンジニアが、バックエンドも学べば、フルスタックエンジニアになってしまいます。つまり、フロントエンドエンジニアを目指す未経験者にとって、必須ではありません。
とはいえ、何か自分一人でアプリケーションを作りたいとなると、バックエンドも触ることになるので、挑戦してみることはいいことです。
最初は未経験者向けのMr.AndrewのThe Complete React Developer Course などのチュートリアルに沿って、Reactなどのフロントエンドをメインに学習するついでに、バックエンドはこんなものかと知るのがスムーズだと思います。
WordPress, ContentfulなどのCMSの知識
CMSとは、コンテンツ・マネジメント・システムの略です。結論から述べると、このCMS周りは、フロントエンドエンジニアを目指す未経験者は、無視していただいて結構です。
会社には、メインのWebアプリケーションは、社内のエンジニアがコードを書き開発して、会社のホームページや、会社のブログなどシンプルなものはWordpressなどのCMSで開発し、マーケティングの人などが担当しているというケースがあります。たまに、フロントエンドエンジニアがカスタマイズする必要がありますが、多くの場合、簡単です。
何より、これらのスキルは事前に独学して習得するスキルではありません。必要に応じて、その場で学んでいけばいいものです。
まとめ
皆さんも感じているようにフロントエンドエンジニアに関連するスキルは、山のようにあります。これを揶揄して、フロントエンド地獄と言われています。笑
しかし、未経験者は、それらすべてを学習する必要はなく、これから需要が高まるであろう技術を絞って学習していけばいいわけです。
フロントエンド地獄にはまらないで、楽しいコーディングライフを！
