Yusuke Iinuma
- 職業: Webフロントエンドエンジニア
- 所属: GMOペパボ株式会社
そもそも研修の表題になっている「フロントエンド」とは何なのでしょうか？
「フロントエンド」は明確な定義がある言葉ではなく、人や状況によって解釈が異なる言葉だと思います。例えば、僕はWebアプリケーションの開発を生業にしているので、「フロントエンド」 = 「Webフロントエンド」と考えがちですが、モバイルアプリの開発をしている人は、「フロントエンド」 = 「モバイルアプリ」と捉える人もいるかもしれません。
「広義の意味でフロントエンドって何？」って聞かれたら、「人と機械を繋ぐインターフェース(UI)を作ること」かなと僕は思ってます。皆さんも「フロントエンドって何かな？」と考えてみると面白いかもしれません。
参考: さまざまなインターフェースが出てくる、Microsoftのコンセプトムービー
Microsoft: Productivity Future Vision - YouTube
本研修で扱うフロントエンドは、Webフロントエンドのみを扱います。さらにWebフロントエンドの中でもJavaScriptについて主に扱います(他の研修でHTML／CSSは受講済みのため)。
-
全体の概要 (10min)
-
フロントエンド (55min)
- プログラミング言語 (20min)
- アプリケーションの形式 (20min)
- モジュール機構 (15min)
-
非同期プログラミング (30min)
- 同期と非同期 (10min)
- コールバック (10min)
- Promise (5min)
- async/await (5min)
-
休憩 (10min)
-
Vue.js + Web APIを使った掲示板アプリ開発ハンズオン (125min = 75 + 50)
- ハンズオンの全体像の説明 (5min)
- Vue.jsを触ってみよう (16min) - 説明:10, 作業:2, 解説:1, 質疑: 3
- 掲示板に投稿できるようにしてみよう (28min) - 説明:15, 作業:5, 解説:5, 質疑: 3
- JSからGETリクエストしてみよう (26min) - 説明:19, 作業: 3, 解説: 1, 質疑: 3
-
ランチ休憩
- 掲示板アプリで、GETリクエストした内容を表示してみよう (13min) - 説明:5, 作業:3, 解説:2, 質疑: 3
- JSからPOSTリクエストしてみよう (22min) - 説明:13, 作業:4, 解説:2, 質疑: 3
- 掲示板アプリで、POSTリクエストして投稿できるようにしてみよう (15min) - 説明:5, 作業:4, 解説:3, 質疑: 3
-
次の講義との間の休憩 (10min)
おまけ (時間の余裕があればやること)
- 全体を通しての質疑応答
extraディレクトリ(おまけコンテンツ)の中の内容からどれか話す
Webフロントエンド開発で使われるツールは数多くあります。本研修ではそのツールの役割の説明を重視して行います(特定のツールの利用方法についてはあまり触れません)。なぜツールの役割の説明を重視するかというと、ツールの役割を理解できれば、将来新しいツールが出てきたときも、それが自分にとって必要なものなのかどうかを見極めることができるからです。ツールの役割という特定のツールより一段抽象化されたレイヤーでWebフロントエンド技術を学んでみようと思ってもらえたら幸いです。
(もしJSの文法や機能を学びたい場合は、extra/input-web-frontend.mdに書いている本などを読んでみてください)
ハンズオンで作成するフロントエンドアプリでは、Webアプリ フレームワーク / REST研修で作成したWeb APIの機能縮小版(@yinmが用意したもの)を使います。Webアプリ フレームワーク / REST研修で作成したWeb APIがどのように利用されるかを意識してみると、知識の繋がりができて良いと思います。
- このリポジトリをClone(ダウンロードでもいいです)して、03-handsonのディレクトリを好きなテキストエディタで開けるようにしてください (ハンズオンでリポジトリ内のファイルを編集してもらうため)
- 質問はチャットで書き込んでもらえれば、折を見て回答します
- もちろん、必要に応じて口頭で話しかけてもらって構いません
- 他にもチャットには色々書いてもらえると、講師が喜びます (1人で長時間話すのはつらいので...！)
- たまに立ち上がって体を動かすなど、聞きやすい姿勢で受講してもらって構いません