GTB2020 - フロントエンド・非同期プログラミング研修

講師の紹介

Yusuke Iinuma

• 職業: Webフロントエンドエンジニア
• 所属: GMOペパボ株式会社

フロントエンドとは

そもそも研修の表題になっている「フロントエンド」とは何なのでしょうか？

「フロントエンド」は明確な定義がある言葉ではなく、人や状況によって解釈が異なる言葉だと思います。例えば、僕はWebアプリケーションの開発を生業にしているので、「フロントエンド」 = 「Webフロントエンド」と考えがちですが、モバイルアプリの開発をしている人は、「フロントエンド」 = 「モバイルアプリ」と捉える人もいるかもしれません。

「広義の意味でフロントエンドって何？」って聞かれたら、「人と機械を繋ぐインターフェース(UI)を作ること」かなと僕は思ってます。皆さんも「フロントエンドって何かな？」と考えてみると面白いかもしれません。

参考: さまざまなインターフェースが出てくる、Microsoftのコンセプトムービー

Microsoft: Productivity Future Vision - YouTube

本研修で扱うフロントエンド

本研修で扱うフロントエンドは、Webフロントエンドのみを扱います。さらにWebフロントエンドの中でもJavaScriptについて主に扱います(他の研修でHTML／CSSは受講済みのため)。

研修の全体像

• 全体の概要

• フロントエンド

  • プログラミング言語
  • アプリケーションの形式
  • モジュール機構

• 非同期プログラミング

  • 同期と非同期
  • コールバック
  • Promise
  • async/await

• Vue.js + Web APIを使った掲示板アプリ開発ハンズオン

  • ハンズオンの全体像の説明
  • Vue.jsを触ってみよう
  • 掲示板に投稿できるようにしてみよう
  • JSからGETリクエストしてみよう
  • 掲示板アプリで、GETリクエストした内容を表示してみよう
  • JSからPOSTリクエストしてみよう
  • 掲示板アプリで、POSTリクエストして投稿できるようにしてみよう

おまけ (時間の余裕があればやること)

• 全体を通しての質疑応答
• extraディレクトリ(おまけコンテンツ)の中の内容からどれか話す

研修を通して掴んでもらいたいこと

Webフロントエンドの技術の構成要素の役割を知ってもらう

Webフロントエンド開発で使われるツールは数多くあります。本研修ではそのツールの役割の説明を重視して行います(特定のツールの利用方法についてはあまり触れません)。なぜツールの役割の説明を重視するかというと、ツールの役割を理解できれば、将来新しいツールが出てきたときも、それが自分にとって必要なものなのかどうかを見極めることができるからです。ツールの役割という特定のツールより一段抽象化されたレイヤーでWebフロントエンド技術を学んでみようと思ってもらえたら幸いです。

(もしJSの文法や機能を学びたい場合は、extra/input-web-frontend.mdに書いている本などを読んでみてください)

ハンズオンで利用するWeb APIサーバー

yinm/gtb2020-api-for-frontendのサーバーを起動してください。