侍エンジニアブログ編集部のテラです。フロントエンドの学習をはじめるときって、とりあえず本を買って学習しようと思いますよね。フロントエンドの学習って書籍が多すぎて何を購入すればいいかよく分からない......どんな手順でまずは何から学習すればいいの?このような悩みをお持ちでないでしょうか?フロントエンドに関する本ってたくさんあって、どの書籍を選べばいいのか難しいですよね。本屋さんにいっても結局どれがいいか分からず、困ることもあると思います。そこでこの記事では、学習ステップ順に未経験者がフロントエンドを学習するオススメ書籍を紹介します。この記事を読むことで、どの本を買うか迷わずにすぐに学習にとりかかることができます。迷う時間を学習時間に当ててみて下さい。まとめ:効率的に学習するなら本以外の教材も活用しようStep1:HTML/CSS・JavaScriptを理解しよう画像:Sutterstockまず最初のステップは、HTML/CSS・JavaScriptの学習です。これらの言語はフロントエンドの基本です。Webページの見た目を作るために、必ず使う言語です。そのため、先ずはこの3つの基礎をマスターしましょう。Amazonこちらの参考書は、HTML/CSSを使って、ハンズオン形式で学習を進めることができます。近年主流となっているデザインスタイルを適用しています。実際にスタンダードレイアウトグリットレイアウトシングルページレイアウト上記3つのサイトを作りながら、実践的なスキルを身につけることができます。侍エンジニア塾社内で未経験からエンジニアなった人も、この本を通じてスキルを身に着けています。実践的な内容ですが、挫折すること無く楽しく学べる一冊です。Amazon日本で1番売れているJavaScriptの本です。いったところから、実践的に使われるフレームワークやアニメーションなど、実践的な内容を学習できる一冊です。この本1冊があれば、JavaScriptの実践的な開発を進めるための知識を抑えることができます。辞書的にも使えるので手元にあると安心できます。Step2:Bootstrap・JQueryを理解しよう画像:Sutterstock最初のステップでフロントエンドの基礎を学んだら、次はレスポンシブページ(スマホ対応ページ)JQueryに取り組み、Webページをスマホ対応させたり、Webページに動きをつけて表現の幅を広げましょう。レスポンシブ対応ページとは、ユーザーが見ている画面に合わせてWebページを最適な幅や配置で表示させるページです。多くのユーザーがスマートフォンを通じてWebページを見ている現在では、必須のスキルです。Bootstrapでレスポンシブ対応を学ぶレスポンシブ対応のページを作成するために、Bootstrapを学びます。Bootstrapは簡単にスマートフォンに対応したページを作ることができるフレームワークです。JQueryでJavaScriptの実装をできるようにする「JQuery」とは、簡単に説明するとJavaScriptを扱いやすくしたものです。本来複雑なプログラムが必要な場合でもJQueryを利用することで少ない記述で表現できます。フロントエンドで良く使われるライブラリの一つでWebページに動きを付けるために利用されます。AmazonBootstrapの全機能が解説されており、Bootstrapを学習するのにオススメの一冊です。CSSフレームワークの基本からオリジナルカスタマイズ方法まで解説されており幅広く技術を身につけることが可能です。今後フロントエンドの開発を行う上で、活躍してくれる1冊なので手元に持っていても損はない本です。AmazonjQueryを初めて学習する方にオススメのベストセラー書籍です。jQueryの基本的使い方や実際の開発現場で使われるサンプルコードが100本以上掲載されています。スマートフォン向けのデザインサンプルも掲載されており実践的な内容です。この本の特徴は、全サンプル商用利用可能という点です。この本で学べばすぐにWeb制作を開始することが可能です!ここまで学習したらWebページを作ろうHTML/CSS(Bootstrap)、JavaScript(jQuery)について紹介しました。ここまで学習したら、最低限のWebページ制作ができるレベルまでなっています。プロフィールページを作ってみましょう。クラウドソーシングサービスを使って案件獲得もできるので、ポートフォリオを作成して応募してみましょう。UI/UX設計の知識を身に着けよう画像:SutterstockUI/UXの設計知識を身に付けることで、フロントエンドエンジニアとして市場価値を向上させることができます。「UI」とはユーザーインターフェースのことで、Webデザインやサイトの操作性のことを指します。「UX」とはユーザーエクスペリエンスのことで、商品やサービスを得られる体験で満足度使い心地などをさしています。フロントエンドエンジニアにUI/UX設計が求められるのかというと、スマホの普及が関係しています。スマホの普及とともに多くのWebサービスが登場し、ユーザーとサービスが接するポイントや購入経路が多様化しているからなんです。多様化したことによって、Webサイトの操作性が悪いデザインや満足度が低いとサービスと他のサービスに乗り換えられたりブランドイメージを損なう原因になるからです。UI/UX設計ができるマーケティング視点やユーザー体験などを考慮したWebサイト設計ができるフロントエンジニアの価値が高くなっています。Amazonこちらの書籍はUI/UXについて定義から、人間の認知特性に触れながら具体的にデザインに落とし込む方法について解説しています。実際にパソコンやスマートフォン別でデザイン事例を使いながら体形的に学ぶことができます。この書籍を通じて、Webサイトの閲覧者やアプリユーザーが迷わないデザインや、使いやすいデザインについて実践的に学習できるのでオススメです。Step4:WordPress(PHP)でWebサイト画像:Sutterstockここまで学習できたら、WordPressを使ってWebサイト制作の学習を進めましょう。WordPressは世界のWebサイトの30%以上のサイトで利用されている人気のWebサイト制作ツールです。WordPressを使ったWebサイト制作ができると仕事の幅も広がり、フリーランスの場合、コーディングだけの仕事をこなすよりも高単価で案件を獲得できるようになります。Amazonこの本1冊でWordPressの基礎から応用までを習得することができます。手順通りに実施するだけで開発やデザインができるテンプレートが付いてます。この本をマスターすればWordPressで高度な仕事ができるレベルになるでしょう。Web制作の仕事を獲得してみようWordPressを使ったWebサイト制作までできるようになったら、あなたはフリーランスとして案件を獲得できるレベルになっています。ポートフォリオサイトを作成してみましょう。その後、クラウドワークスやランサーズを利用して案件獲得をするのがオススメです。フリーランスとして案件を獲得する方法については下記の記事で詳しく解説しています。2018年11月30日フロントエンドエンジニアとしての価値を高めるには?画像:Sutterstockここからは、フロントエンドエンジニアの市場価値をさらに高めるスキルについて紹介します。以下の3つのスキルを身に付けることで、市場価値の高い人材となり高単価の案件獲得に繋がります。Amazonフロントエンドエンジニアはちょっとした画像の加工やデザインの修正を実施する場合が頻繁にあります。PhotoshopとIllustratorを使えると自分で対応することができるので便利です。基本的に操作方法や機能の使い方を学習するだけなので、基礎的な本を利用して学習しましょう。この本を1冊でPhotoshopとIllustratorの基礎的な内容に関して学習することができます。学習しながらバナーを作成したり、写真を加工しながら学習したほうが楽しく効率的に技術を身に付けることが可能です。Amazon先ほどjQueryについて紹介しましたが、Vue.jsというJavaScriptのフレームワークを使えることで、フロントエンジニアとして貴重な人材になります。Vue.jsは学習コストが低い上に日本語の情報も多く存在しています。モダンな開発を行なっている企業での利用が多くなっています。この本では「フレームワークって何?」というフレームワークの概念の解説しているので、フレームワークに初めて触れる人でもオススメできます。チュートリアルも盛り込まれており、サポートページがWeb公開されているので書籍と合わせて使うことで効率的に学習することが可能です。AmazonWeb制作を実施する上で把握しておきたいのが「タイトルタグ」「メタディスクリプション」「見出しタグ」「alt属性」などの、SEOに最適化した内部構造です。SEOに最適化した内部構造とは、Googleのクローラーにとって分かりやすい構造になっていることなどが上げられます。この書籍を通じて、SEOに最適化したサイト制作や内部構造について学習することができます。現在のサイト制作はSEOで上位を上げることを目的としていることが多いので、この本でマスターしましょう。まとめ:効率的に学習するなら本以外の教材も活用しようここまでフロントエンドを学習するにあたっての、段階別でオススメの書籍を紹介してきました。いえ、未経験から独学で本を使った学習をすると挫折する可能性が高くなります。本で学習するとエラーでつまずいてしまうなど、モチベーションが続かなかったりします。そのため、無料の学習サイトを利用して効率良く学習を進めましょう。無料学習サイトの紹介については、「【全て無料】独学でもスキルが身につくプログラミング学習サイトTOP5」にて紹介しています。Reserved.現役生徒500名以上が在籍する弊社のプログラミング学習プランをあなたに合わせて最短1分で診断します。