【保存版】全部読んだら完全未経験者でも絶対Webクリエイターになれる本29冊

こんちには、フロントエンドエンジニア歴が1年のじぇしーです。

Webクリエイター1年生の皆さん、日々レベルアップできてますか？　Web未経験の皆さん、自分の学んでいる技術が本当に仕事で役に立つのか、不安じゃないですか？

今日は技術的なネタがないので、今日は0から100まで、完全独学を貫き通した、独学の鬼の私が、中途未経験でLIGのフロントエンドとして採用されるまでに読んだ良書を全18レベル/29冊でご紹介します。

基本的にはフロントエンド向けの情報が多いですが、レベル6までの本を読破するだけでも、デザイナーとしてとりあえずは働き始めることができるような内容となっています。ここで紹介している本を全部読んだら絶対に、Webプログラマー / デザイナーになれます。ソースは自分です。未経験からWeb系の仕事に付きたい方のお役に立てば幸いです。

レベル１: HTML/CSS

HTML/CSSを学ぶために、まずはDreamweaver（Dw）を覚えましょう。Dwの補助を借りながらwebページを作っていくと、自然とHTML/CSSを学習することができます。

 

Dreamweaverの使い方を覚えたら、Webサイトを1つ作ってみると知識が定着します。

Emmetの使い方を覚えてDwから卒業する

DwでしかWebページを作れないというのもなかなか不便です（毎月お金もかかりますしね）。

Emmetは、Bracketsのような無償のエディタに導入すると、HTML/CSSがストレスなく書けるようになるので、ぜひ早い段階で覚えることをおすすめします。「HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由」などを参考に使えるようになると便利です。

レベル２: Photoshop / Illustrator (基礎)

フロントエンドエンジニアがPhotoshop(Ps) / Illustrator(Ai)を触ることはデザイナーほどありませんが、画像を切り出したり、渡された素材をコーディングに適切な形に編集したりする作業は日常的に発生しますので、最低限、Ps / Aiは自由に使えたほうがいいでしょう。全体的に、なにかを作るよりも操作方法を覚えていく時間のほうが多いので、すこし退屈な勉強になるかもしれません。

こちらに関しては私が勉強した当時よりもずっとわかりやすい書籍が発刊されていたのでそちらを紹介します。

練習に使う画像などの素材に困ったら

Photoshopは基本的に、写真を加工するためのアプリケーションなので、練習用に画像があったほうが効果的に学習ができます。練習に使えるような写真がないという方は、Adobe Stockなどからサンプル（プレビュー）をダウンロードできますので、利用するといいかもしれません。

レベル３: Photoshop / Illustrator (実践)

Ps / Aiの基本操作ができるようになったら、実際にWebページをデザインしていきます。また、制作の現場で各機能をどのように使うかを学習します。

レベル４: WordPress(PHP)

WordPressは導入が簡単で、PHPの入門としては最適です。HTML/CSSがある程度書けるようになったら、HTML/CSSのWordpressでブログを作ってみましょう。

WordPressはとても安定したソフトウェアなので、多少説明しているバージョンが古いものでもメジャーバージョン（バージョン番号の一桁目。「Wordpress 4.6.1」なら「4」）が違わない限り、学習にはほとんど差し支えないでしょう。

PHPは闇が深い

PHPを完全に理解しようとすると、ネットワークの仕組みやサーバーの設定、ターミナルコマンドなど、多くを芋づる式に勉強しなくてはならなくなりますので、Wordpressを触っていて理解できないことがあっても、深く追求しない方が学習がスムーズに進みます。

どうしてもわからないことがあれば、teratailなどを利用して誰かに聞いてみるといいかもしれません。技術系の書籍では書いてあるコードが間違っていたり、環境によって動かないことが度々あるので、書いてあるとおりにコーディングしても動かない場合は出版社に直接メールを送ってみるのもひとつの手です。

レベル５: jQuery

jQueryは複雑なJavaScriptをプログラマの代わりに操作してくれる、ライブラリと呼ばれるものです。ある程度サイトを作れるようになったら、WebページにjQueryを使って動きをつけてみます。

JavaScriptはおそらく地球上でもっとも早いスピードで進化している言語で、また言語の仕組み的にも他のメジャーな言語と比べると非常に特殊なので、まずはjQueryを十分に使えるようになってからでも勉強を始めるには遅くないかと思います。

ここまでで最低限のWebページは作れます

おそらく、ここまでの書籍を実際に手を動かして作りながら読んでいれば、最低限のものは作れるようになっているかと思います。仕事の中から得られることも多いので、ポートフォリオを作って制作会社のアルバイトに応募してみてもいいかもしれません。

逆に言うと、このレベルの知識はフロントエンドエンジニア、デザイナーに共通するWebクリエイターに最低限必要な基礎になります。

レベル６: デザイン（基礎）

実務では、フロントエンドエンジニア（コーダー）はデザイナーからカンプをもらってデザインを起こしていくので、一からデザインを起こしていくようなことはありません。

しかし、ユーザーが操作する前提で作成しているWebデザインは、ほとんどの場合一定の規則性をもってデザインされているので、デザインの基礎を知り、カンプからデザイナーの意図を一部でも汲み取れるようになれば、効率よくコーディングができるようになります。

まずは基本的な考え方から。

 
基本的な考え方を身に着けたら、より具体的なデザインの技術を身に着けましょう。

 
Webデザインに特化したデザインも学びます。

レベル７: Web業界の流れを知る

近年のWeb業界は、非常に流れが早く、うっかりするとすぐに取り残されてしまいます。
ここで紹介する書籍は、必ずしも具体的に何かができるようになるものだけではありませんが、国内の最新の制作事情を知ることで、自分の業界内でのレベル感を知ることができます。

これから就職活動をされる方ならば、自分の志望する会社がどの程度のスキル感をもつ会社なのか把握する一助になるので、目を通す程度には見ておきたい書籍です。

コーディングに寄らない、総合的な内容。

 
コーディングに重点をおいた内容。フロントエンドエンジニアリングはここ1、2年で急速に高度化、複雑化しているので、その変化を感覚として追っておくと、より発展的な技術にも抵抗なく対応できます。

レベル８: プログラミングの基本的な概念を知る

JavaScriptだけではない、すべてのプログラミングに通じる、基本的な概念を学びます。
多くのプログラミング言語は、文法などの書き方の他に、その言語全体に通じるコンセプト（指向）を元に作られています。

その中でも「オブジェクト指向」は最も一般的で、オブジェクト指向以外の言語の解説でも、「オブジェクト指向では〜のように表現するが、関数型言語では〜のように表現する」というように頻繁に引き合いに出されるので、基本的な概念はおさえておくと今後さらに専門的な内容を学ぶのに役に立ちます。

ちなみにフロントエンドエンジニアがよく使うJavaScriptは「プロトタイプベースのオブジェクト指向」です。

開発者がどのような「指向」でプログラムを書くかは、言語によって強制はされていない

「指向」とはあくまでも「中心的な概念」という意味で、乱暴に言い換えれば「プログラムの書き方の手法」ということになります。そのためオブジェクト指向言語であっても関数型のように書くこともできますし、あるいは両方の間のような書き方をすることもできます。

例えば、JavaScriptは「プロトタイプベースのオブジェクト指向」で書かれることを前提とした言語ですが、プログラミング初心者はほぼ確実にJavaScriptで「手続き型」のプログラミングをしているはずです。

レベル９: Raspberry PiでLinuxの基礎を覚える

PHPを理解するには、まずはPHPを動作させる基盤である、サーバーそのものの基本的な使い方を理解する必要があります。

サーバーとは、Webページを私達のPCに送信（Serve）してくれるコンピューターのことです。Linuxはもっとも多くのサーバーで採用されているOSで、世界中のほとんどのWebページはLinuxから提供されています。

Raspberry Piは教育・ホビー用のカードサイズの小型PCで、Linuxの使い方を理解するのに最適な教材です。実際に動作させるためには、Raspberry Pi本体以外に、ディスプレイとマウス、キーボード、その他こまごまとしたパーツがいくつか必要なので、パッケージである程度まとめて購入してしまうのが簡単です（ディスプレイ、マウス、キーボードももしなければ忘れずに）。

レベル10: 「手続き型」プログラミングから卒業する

個人的には、「手続き型」プログラミングから卒業できるかどうかが、エンジニアと非エンジニアの境界線だと思っています。壁はそれなりに高いので、すぐには理解できないかもしれませんが、他の言語を勉強したり、いろいろなプログラムを書いたり読んだりしているうちに、徐々にわかっていくかと思います。

「JavaScriptパターン ―優れたアプリケーションのための作法」とほとんど同じコンセプトの書籍として、「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」や「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」、「JavaScript Ninjaの極意」など、多くの書籍がありますので、自分のレベルや志向に合わせて選んでみてください。

オライリーは神

レベル9になって初めて、緑のクラシックな書籍を紹介しましたが、これはオライリー・ジャパン（オライリー）が出版しています。オライリーが出版する書籍はプログラミング初心者にとってはこれ以上になく難解である一方、それなりに知識がある人にとってはとてもわかりやすく詳細にかかれているので、この本が自分の部屋に何冊積んであるかが自分のエンジニアとしてのレベルと思って差し支えないかと思います。

レベル11: バージョン管理システムGitを理解する

Gitとは、コードの最新版を管理する、バージョン管理システムです。Web制作の現場でもだいぶ浸透している印象があります。
Gitを使うと、「Webサイト_20160101」「Webサイト_20160101(1)」「Webサイト_20160101-最新」のような、悪夢のようなバージョン管理から逃れることができるようになるので、ぜひ覚えましょう。

ここまでできれば「フロントエンドエンジニア」

ここまでできれば、やっとフロントエンドエンジニアです。長いですね……書くのも疲れてきました……。
ここまで紹介した書籍の知識が全部あって、それを反映したポートフォリオ（githubアカウントとwebページ）があれば、未経験でもきっとどこかの会社がフロントエンドエンジニアとして採用してくれるはずです。

レベル12: JavaScriptを完全に理解する

JavaScriptの使用方法だけでなく、JavaScriptという言語の仕様自体を理解します。おそらくここまでのセクションで最も難解で、「物理的に重い」書籍です。

読み終わった頃には、ただ動くだけでなく、実行速度やコードのスマートさを意識できるようになると思います。

レベル13: ネットワークの仕組みを理解する

モダンなJavaScriptプログラムはAjaxによって頻繁にデータの送受信を行いますので、ネットワークの仕組みを理解することはとても重要です。

資格に興味があれば…

もし資格に興味があれば、CCENTやCCNAは、社会的な評価が高く、紹介した「マスタリングTCP/IP」とも内容が被っているのでおすすめです。

ここまでがフロントエンドエンジニアの「共通ルート」

ここまでが、フロントエンドエンジニアが共通して通る道かと思います。これ以降は、WebGLなどを活用してビジュアルを重視したものを作りたいのか、フレームワークなどを活用してシステムを作っていきたいかで、先に優先して学ぶべきするべき項目が変わっていきます。

レベル14: （表現重視派）インタラクティブアニメーションを作れるようになる

Web上での表現を学ぶなら、three.jsの使い方を覚えてみましょう。Webページに表現を加えるためのライブラリにはその他にも、PixiJS、Paper.js、EaselJS、TweenMax、Snap.svgなど様々あり、これらをプロジェクトの要件や表現によって使い分けていく必要があります。

こちらの技術に関しては日本語情報が少なく、私も書籍は読んだことがないので、オライリーの良さそうな書籍を例として掲載させてもらいます。

レベル15: （システム重視派）フレームワークに触れてみる

サーバーサイドの動きを知るためにも、フレームワークの概念を知るためにも、PHPならLaravel、RubyならRuby on Railsどちらか好きになれそうなフレームワークの使い方を覚えてみましょう。

フレームワークとは、ある程度の規模のアプリケーションを構築する上で基盤となるものです。

ここまではほとんど、自分自身でプログラムを書き、「クリックされた時」など、自分自身でそのコードが呼び出されるタイミングを決めてきましたが、「フレームワーク」を利用してプログラムを作成した場合は、プログラムは開発者が指定したタイミングではなく、フレームワークが指定したタイミングで呼び出されるようになります。

今まで「呼び出す」ものであったプログラムが、今度はフレームワークから「呼び出される」ようになるということです。オブジェクト指向同様、馴染みにくい概念かもしれませんが、いくつかフレームワークを使ってみると、「呼び出される」感覚が徐々にわかっていくかと思います。

個人的には、Ruby on Railsの入門書であるRuby on Rails チュートリアルはRails Tutorial 翻訳グループの皆さんの力によってWeb上で無償で公開されており、テスト駆動開発を一緒に学ぶことができるのでおすすめです。

Ruby on Rails チュートリアル
※Railsチュートリアルは無償で公開されています

PHP、Rubyは理解しやすい言語

PHP、Rubyを学習する書籍自体はここまで紹介して来ませんでしたが、どちらもJavaScriptに比べると、癖が少なく覚えやすい言語ですので、適宜自分の理解力にあった書籍やWeb上の情報を活用して学習してみてください。

レベル16: （システム重視派）Node.jsでタスクランナーを組めるようになる

Node.jsは、PHPやRubyのようにサーバーサイドで動作するJavaScript（の実行環境）です。最近のフロントエンド技術の中では、特にタスクランナーを組むために必須の技術となっています。日本語の書籍だと、まだだいぶ古いバージョンにしか対応していない書籍しかありませんが、基本は変わっていませんので、読む価値はあります。なお、トラブルを避けるために、手を動かしながら読み進めるときは、Node.jsやモジュールのバージョンは書籍に合わせましょう。

なお、Node.js初心者の方は、gulpを利用して比較的簡単にタスクランナーを構築するという選択肢もあります。ただ、タスクランナーの構築方法に関しては、まだまだ日本語情報が少ないので、Web上の公式情報(英語)や、OAサイトのstack overflow、GitHub、洋書などを参照するしかないかもしれません。

ゼロから始めるJavaScript生活
gulpによるタスクランナー構築のチュートリアル

レベル17: （システム重視派）JavaScriptのフレームワークを使えるようになる

実はJavaScriptにもフレームワークが存在します。通常の受託のWeb制作では使用する機会があまりないかもしれませんが、Node.jsの登場により、JavaScriptのフレームワークがサーバーサイドでも動くようになったり、ElectronによってデスクトップアプリケーションをHTML/CSS/JSを使用して作れるようにな環境が整ってきたことによって、JavaScriptフレームワークを活用できることは、フロントエンドエンジニアにとって重要な技術となっています。

ちなみに、「AngularJS　アプリケーションプログラミング」は執筆時点でAngularJS v1を対象としています。v2ではコンセプトレベルで変更が加えられているので、書籍を購入される際はできればv2を対象としたもののご検討をおすすめします。

レベル18: （共通）次のJavaScript（ES6）を知る

ES6はJavaScriptの「未来の」規格で、まだまだ対応しているブラウザはごく少数です。しかし、主要な機能は、Babelやwebpackを利用して、「現在の」ブラウザが解釈できる形式に書き換え可能です。

ES6を活用して、より複雑で高機能なアプリケーションを素早く美しく作りましょう。

終わりに。大切なのは手を動かしてつくり続けること

気づけばただ技術系のネタを書くほうが10倍マシなくらい、長い記事になってしまいました。

書籍の紹介はフロントエンドエンジニアリングに絞って、周辺知識などは削り、できるだけ少なくとどめたつもりでしたが、それでも、29冊+1台も紹介することになってしまいました。1ヶ月に2.5冊読んでも1年かかります。現在のフロントエンジニアに求められる知識がどれだけ広範囲に及ぶか、改めて実感します。

ちなみに私は別の学校に通いながら隙間時間で勉強をしていたので、すべて読破するまでに3年ほどかかりました。専門学校で勉強するよりも費用も時間も10分の1以下で済みますが、勉強し始めた頃は当然ここに書いたような知識はまったくない状態だったので、3年間誰からもアドバイスを受けずに勉強し続けるというのは、正直辛いものがありました。

ただ、クリエイターになるために何より大切なのは何かをつくることです。すべての学習はそのためにあると私は思っています。書籍を読むだけでなく、ぜひ実際に手を動かしてマネでもいいのでなにかを作りながら読みすすめると、時間を忘れて、楽しく勉強できると思います。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る