こんにちは、エンジニアの山下です。この記事は、
初心者がフロントエンドエンジニアになるためには、どんなことを学習したらいいのかな？
でも、未経験だし、スクールとかにお金をかけるのはちょっと…まずは独学で無料で勉強を始めたいな。
という疑問・ご要望をお持ちのあなたのために書きました。この記事を読めば、
- フロントエンドエンジニアってそもそもどんな仕事？
- フロントエンドエンジニアになるために必要なスキルと無料学習法
といったことがわかります！できるだけ簡単に解説していきますので、ぜひお読みください。
- フロントエンドエンジニアへの独学は目的の明確化から始めよう
- 必要なスキルの習得には無料学習サイトの活用がおすすめ
- スケジュール管理やメモアプリを活用すれば効率よく学習が進められる
なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。
受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。
本記事の解説内容に関する補足事項
本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。
また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。
記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。
フロントエンドエンジニアとは？
まずはフロントエンドエンジニアという仕事がどんなものなのか、学習し始めてから「想像してたのと違うな…」ということがないように、業務内容と年収をご紹介しておこうと思います。
フロントエンドエンジニアの業務内容
フロントエンドエンジニアは、Webサイトの見た目のデザイン等を制作・カスタマイズ・修正を行う仕事です。
このWebサイトの見た目のデザインのことを「フロントエンド」と呼ぶため、この名前で呼ばれています。
HTML、CSS、JavaScriptやjQueryなどの言語を駆使して、Webデザイナーが作ったデザインが正しく反映されるようにWebサイトを設計・構築していきます。
そのためWeb制作に基礎的な言語であるHTML、CSS、JavaScript等の習得はもちろん、企業によっては、デザインに用いるPhotoshopやIllustratorなどのソフトが使えることを条件に求人しているところもありますので、制作だけでなくWebのデザインにも関心を持っておくと重宝されます。
フロントエンドエンジニアの平均年収
続いてはフロントエンドエンジニア」の年収ですが、Find Job！調べによる平均年収は456万円と高い水準で、しかも全体の半分近くは年収500万円以上となっており、がんばり次第できちんと高収入が得られるだろう職種です
※なお、上記Find Job！の年収は「Webエンジニア・Webプログラマの平均年収」という基準です。
エンジニアの年収については以下の記事にも詳しく書いていますので、合わせてどうぞ。
フロントエンドエンジニアの学習を独学で始める前に知っておくべきこと
ここまで読んできてフロントエンドエンジニアに魅力を感じた方は多いと思いますが、いきなり独学で学習を始める前に知っておいてほしいことがあります。
- 学習時間を甘く見積もらない
- モチベーションは崩れやすいことを認識する
- 自分の目標と相性の良い言語を選ぶ
上記の3点です。これらの認識が甘いと、初心者が独学でフロントエンドエンジニアになるのはかなり厳しいでしょう（自信がない方はスクールに通うことをおすすめしたいです）。
詳しくは以下の記事に書いていますので、独学を始める前にぜひ読んでみてください。
フロントエンドエンジニア入門に必要なスキルまとめ
HTML/CSS
絶対に必要になるのがHTML/CSSです。この2つはWebサイトの制作を行う上でセットで用いられることがほとんどです。HTMLはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webサイトに文や画像、リンクなどの部品を配置するための言語です。
また、CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLと組み合わせて、テキストや背景の色を変えたり、下線を引いたり等デザインを持たせるために用います。
※HTML/CSSの詳しい説明は以下の記事をお読みください。
JavaScript
JavaScriptはプログラミング言語のひとつで、企業ホームページやブログ等でよく使われる何枚かの画像をスライドさせて表示させるスライダー等、サイトに動きを加えるのに役立ちます。
HTMLとCSSを使って記述をするので多くのサイトで用いられています。HTML/CSSと合わせて学習することをおすすめしたい言語です
※JavaScriptの詳しい説明は下記の記事をお読みください。
jQuery
jQueryとは、静的なサイト→動的なサイトに変えるコーディングスキルのこと。短いコードで記述することができるので扱いも学習も比較的楽で、しかもどんなブラウザでも使うことができます。
上記のJavaScriptを使いやすく拡張したもので、今やほぼ必須のスキルとなっていますのでJavaScriptと合わせて学習しておきましょう。ちなみにどんな動きをするかというと、以下の京都大学のWebサイトをご覧いただければ一目瞭然です（面白い動きをしますよ）。
探検！京都大学 http://www.kyoto-u.ac.jp/explore/
※jQueryの詳しい説明は下記の記事をお読みください。
PHP
PHPもプログラミング言語のひとつで非常に人気の高い言語です。
その理由はWebサービスの開発に特化しておりフロントエンドエンジニアの入門者でも扱い易く、しかも案件数が多く仕事も取りやすいから。後述するWordPressにも使われていることもあり、クラウドソーシングサービスでも企業でも需要が高く、覚えておいて決して損はありません。
※PHPの詳しい説明は下記の記事をお読みください。
WordPress
WordPressは全世界のWebサイト1/3のシェアを占めるブログ作成ソフトです。先程も書いたようにPHPでできており、カスタマイズにはHTML/CSS、javaScriptも使用します。
さらに、管理が楽なため様々な企業がオウンドメディアを立ち上げる機会が近年非常に増えてきたことも手伝って、WordPressは非常に使用頻度の高い存在になってきました。
プラグインや管理画面の基本的な使い方、PHP、HTML/CSS、javaScriptを使ったカスタマイズ法なども勉強しておきましょう。
※WordPressの詳しい説明は下記の記事をお読みください。
PhotoShop/illustrator
2大デザインソフト「PhotoShop」「illustrator」も学習しておきましょう。ちなみにそれぞれ以下の用途で使用します。
- PhotoShop：バナーの作成やWebサイトのクリエイティブ全般の修正・変更
- illustrator：アイコン、ロゴ、Webサイトで使うイラストの作成
Webデザイナーが用いるソフトのため必須スキルではありませんが、先程も書いたようにフロントエンドエンジニアにデザインスキルを求める企業も中にはありますので、身につけておくことであなたの市場価値は高まります。
※学習書籍をお探しの方は以下の記事もご参考にどうぞ。
フロントエンドエンジニア入門におすすめな、独学勉強法
では、ここからはフロントエンドエンジニア入門におすすめな独学での勉強法を簡単にご紹介します。
目的を明確にする
まずはモチベーションを高く保つために、「なぜあなたがエンジニアを目指すのか」を明確にしておくのが第一です。また、それと合わせて、
- いつまでにプログラミングを習得するか
- いつまでに就職・就職するか
の2つも合わせて明確な期限を設けましょう。
※詳細は以下の記事も合わせてお読みください。
無料学習サイトを使い倒す
目的・期限が明確になったところで、続いてはプログラミングの無料学習サイトを活用しプログラミングを体感しながら学習を始めましょう。
動画形式のもの、スライド形式のもの…等、今やプログラミング学習サイトは無料とは思えないクオリティのものが多くなってきています。これらを使い倒し、実際に手を動かしながら繰り返し学習しましょう。
※おすすめのプログラミングの無料学習サイトは以下の記事をご参考にどうぞ。
学習効率を飛躍的に上昇させるツールを活用する
また、上記に加えて以下3つのツールを活用することで、最短でフロントエンドエンジニアの学習を終わらせることができるでしょう。
ちなみに、「Toggle」は時間管理ツール、「Evernote」は有名なメモ共有アプリ、「Wanderlist」はTo-doリストの管理を行うソフトです。
フロントエンドエンジニアの需要は？
フロントエンドエンジニアにはどれだけの需要があるのか、転職サイト・フリーランス向け案件サイトそれぞれの求人数を見ていきましょう。
転職サイトでのフロントエンドエンジニア求人数
まずは、転職・就職を目指す方向けに、大手求人サイトでエンジニアの求人数を検索してみると、以下のように非常に多くの案件がヒットします。
複数名を募集している求人も多く、大手企業が直接募集しているケースも目立ちます（ユニクロ、価格コム、ヤフー、楽天など）。また、先程も引用したように平均年収も456万円と高額で、500万以上を稼ぐ人も少なくないため、需要はとても高いのが見て取れます。
フリーランス向けのフロントエンドエンジニア求人数
続いて、フリーランス向け求人の数は以下の表のとおりです。
| 求人サイト名 | 求人数（2019年4月12日時点） |
| クラウドテック | 608 |
| ギークスジョブ | 75 |
| レバテックフリーランス | 40 |
会社員の募集と遜色がないほど充実しており、単価：月60万円を超える案件も豊富。さらに、ものによっては完全リモート（在宅ワーク）可や、週3日以上の可動でOKなど、働き方も自由に選べます。
挫折なくフロントエンドエンジニアに必要なスキルを学ぶなら
難しそうだし、挫折したらやだな…。
ここまでフロントエンドエンジニアなるための学習方法について解説してきましたが、上記のような悩みを持っている方も多いですよね。
そんな方には、弊社が運営するサブスク型のプログラミングスクール「SAMURAI TERAKOYA」がおすすめです。
月額2,980円で、主に4つのサービスを提供させていただきます。
- 現役エンジニアによる月1度の「マンツーマン指導」
- 回答率100％の「Q&Aサービス」
- 作りながら学べる40種類の「教材」
- 学習を記録&仲間と共有できる「学習ログ」
目的にあった教材を選べば、どなたでも効率よく学習できるほか、Q&Aサービスやマンツーマン指導を活用することで、挫折せずフロントエンドエンジニアに必要なスキルの習得が可能です。
フロントエンドエンジニアに必要なスキルを効率的に学びたい人はもちろん、何から始めたらよいのかわからない方は、ぜひ「SAMURAI TERAKOYA」をご利用ください。
まとめ
以上、ここまでの内容を振り返ると、まずはおすすめのスキルは以下の6つです。
- HTML/CSS
- JavaScript
- jQuery
- PHP
- WordPress
- PhotoShop/illustrator
そしてフロントエンドエンジニア入門用の勉強法のコツは以下の通り。
- 目的を明確にする
- 無料学習サイトを使い倒す
- 学習効率を飛躍的に上昇させるツールを活用する
以上の内容で進めることが独学でフロントエンドエンジニアを目指す上での近道です。あなたが一日でも早くフロントエンドエンジニアになり、理想の働き方ができますように。
