今日からはじめられるWebエンジニアになるための学習ハンドブック【フロントエンド編】

前回までのレッスンでは、HTML、CSS、JavaScriptについて学習しました！
今回は、フロントエンドエンジニアを志望する方に向けた学習手順をご案内していきます！

【学習の流れ】
1.学習準備＆共通学習編
2.フロントエンド編　←今回はこちら！
3.バックエンド編＆まとめ
4.おまけ

フロントエンド志望の方の学習ステップ

岩崎　ここからはフロントエンド、バックエンドに分かれて学習を進めていくのですね。
フロントエンド志望の場合は、何を学べばいいですか？

境野　フロントエンドエンジニアは、基本的にはここまでで学んだ3つの言語で開発を行うことが可能です。さらに使いこなせるよう、Sass、 jQuery、Vue.jsを学習してみましょう。

Sass

境野　CSSのコードを書いているときに、何度も同じコードが出てきたことに気がつきましたか？

岩崎　そうですね。もう少し簡潔にまとめられないのかなって思っていました。

境野　CSSをより便利に書くための言語として、Sass（サス）というものがあります。
Sassを使うことで、CSSのコードをより簡潔に書くことができ、同じコードを何度も記載する必要がなくなります。開発の規模が大きくなった際でも拡張や変更がしやすくなるので使いこなすと便利です。
現在はSCSS記法というものが主流となっています。

Progateの「Sass」のレッスンで練習してみましょう。

《 Sassの学習》

[学習コース] Sass Ⅰ (1~2)

〈Sassの理解度チェック〉
□Sassを使用するメリットを説明できる
□入れ子構造を使ってコードを簡潔に表現することができる

jQuery

境野　jQuery（ジェイクエリー）はJavaScriptのライブラリのひとつです。

岩崎　ライブラリってなんでしょうか？

境野　ライブラリとは、よく使われる機能やプログラミングの部品をまとめたものです。
JavaScriptだとたくさんのコードを書かないといけない処理も、jQueryを使いこなすことで簡単なコードで書くことができます。

例えばJavaScriptで書く下記のコードは、

var testList = document.getElementsByClassName('test-list');

jQueryで書くと以下のように書くことができます。

var testList = $('.test-list');

簡単な例ですが、短く記載できました。

jQueryを使ってどんなコードを書くことができるのか、Progateで試してみましょう。

《 jQueryの学習》

[学習コース] jQuery 初級編
[学習コース] jQuery 中級編
[道場コース] jQuery 中級編
[学習コース] jQuery 上級編

〈jQueryの理解度チェック〉
□jQueryを使用するメリットを説明できる
□classとidの使い分けができる
□cssメソッド、htmlメソッド、textメソッドの使い分けができる
□thisの構文を使うことができる
□findメソッドやchildrenメソッドを使って子要素の取得ができる
□hoverメソッドを使ってホバーイベントを取得できる
□eqメソッドやindexメソッドを用いて要素指定取得ができる

Vue.js

境野　さらに効率的に開発するためにVue.js（ビュージェイエス）というものをご紹介します。
Vue.jsはJavaScriptのフレームワークのひとつです。

岩崎　フレームワークってなんでしょうか？

境野　フレームワークとは、Webアプリケーションを開発しやすくするための枠組みのことです。よく使われる機能や基本的な機能がまとめて用意されています。
フレームワークを使うことでプログラムの見通しが良くなったり、少ないコードの量で機能性の高いアプリケーションを開発することが可能になります。
今日的なWebアプリケーションではほとんどがフレームワークを使って開発されています。

岩崎　Vue.jsを使うとどんなことができるんですか？

境野　ユーザーが使いやすく見やすいWebアプリケーションを効率的に構築することができます。
上手く活用することで、洗練されたSPA（シングルページアプリケーション）の開発も可能となります。Vue.jsはフレームワークの中でも特にシンプルで学習もしやすいため、初心者でも扱いやすいと言われています。

Vue.jsのレッスンはProgateにないので、Youtubeの動画と書籍を組み合わせて学習を進めていきます。

《 Vue.jsの学習》

境野まずは下記の動画をみて、ざっくりとVue.jsについて把握してみましょう。

Vue.js入門

配信者のたにぐちまことさんは数多くの技術書を出版されていることで有名です。やさしく、わかりやすく説明されているので、まずはこの入門動画をみてみましょう。

Vue.js入門 #01：一番最初のプログラム
Vue.js入門 #02：最初のプログラム解説
Vue.js入門 #03：if構文とディレクティブ
Vue.js入門 #04：Vue.jsによる属性の書き換え
Vue.js入門 #05：ボタンクリックで現在時刻を表示する - v-onディレクティブ
Vue.js入門 #06：配列の内容を繰り返し表示する - v-for
Vue.js入門 #07：Vue.jsの動きにアニメーションを追加しよう
Vue.js入門 #08：コンポーネントで再利用可能なパーツを作ろう

岩崎　Youtubeでの動画学習はすごくわかりやすいですね！実際のエンジニアさんがコードを書いているところを動画で見れるところも魅力的でした。

境野そうですね、僕がプログラミング学習をはじめた頃はこういう動画はあまりYoutubeには出ていなかったように記憶しているので、これから学習をはじめる人は動画は良いです。

Youtubeでの学習が完了した人は以下のチュートリアルをやってみましょう。ToDoリストをつくりながら学習できる内容になっています。内容がわからなくてもつくりきることを目標にしてください！

https://cr-vue.mio3io.com/tutorials/todo.html#%E5%AE%8C%E6%88%90%E5%BD%A2

岩崎　最初に完成形が置いてあるので、間違っても見比べながらやりきることができそうです。

境野最後におすすめの本ですが、本格的にエンジニアになることを目指している方は以下の書籍で学習してみましょう。こちらの著者の山田祥寛さんも数多くの技術書を出版されていることで有名です。

・これからはじめるVue.js実践入門

こちらの書籍は骨太な内容になっています。ライトに学びたい方は購入を後回しにしてくださいね。中級者になるまで十分つかえる内容になっています。ノートアプリなどに自分が理解したことをメモしながら学習していきましょう。

〈Vue.jsの理解度チェック〉
□フレームワークとは何か説明できる
□Vue.jsを使用するメリットを説明できる
□データバインディングについて説明できる
□ディレクティブを活用できる
□isDoneを使用してToDoの完了状態を管理できる
□v-ifディレクティブを使って条件分岐ができる
□computedキーを使ってデータから動的にプロパティを算出できる
□LocalStorageを使って入力したデータを永続化や読み出しができる
□Componentについて説明できる
□Componentに機能を持たせることができる
□propsキー、emitキーを用いて Componentに値を送れる