Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WEBフロントエンドの学習の仕方

K.Himeno
October 08, 2019

 WEBフロントエンドの学習の仕方

2019年10月08日にサポーターズCoLabにて発表した内容になります。

以下の内容を大題として発表しました。

1. 新しい情報を消化するまでのルーチン
2. 情報収集の巡回と消化に必要な知識
3. WEBフロントエンドの背景知識(ざっくり版)

中盤から後半に進むほど難易度が徐々に難易度が高くなっていますが、WEBフロントエンドの学習を進めて行きたい方で、次に何をやるべきかわからない場合の指針として閲覧いただければ幸いです。

・イベントURL:https://supporterzcolab.com/event/956/

K.Himeno

October 08, 2019
Tweet

More Decks by K.Himeno

Other Decks in Technology

Transcript

  1. 1. GitHubを開く 2. 気になるRepositoryがある 3. READMEを見る a. → 面白そうだったら★ 4.

    ★動かす a. → 面白かったら★ 7 新しい情報を消化するまでのルーチン GitHubで発見パターン
  2. 12 フロントエンドの学習の指針 • WEB DEVELOPER ROADMAP ◦ https://github.com/kamranahmedse/developer-roadmap ◦ https://roadmap.sh/

    何をどこで使うのかを具体的 に紹介していきます 情報収集の巡回と消化に必要な知識
  3. フロントエンドフレームワークを利用する場合 • React ◦ create-react-app(https://github.com/facebook/create-react-app) • Vue ◦ Vue-cli •

    Angular ◦ Angular-cli テンプレートジェネレーター CLIにバンドルされているタイプ 16 情報収集の巡回と消化に必要な知識 - 環境構築をする
  4. • 自作ジェネレーターを作る場合(玄人向け) 生成時にインタラクティブにパラメーターを調整できる ◦ yeoman(JavaScript製) ▪ https://yeoman.io/ ◦ cookiecutter(Python製 /

    玄人向け) ▪ https://github.com/cookiecutter/cookiecutter • Github Template(初心者にも優しい) ◦ https://help.github.com/ja/articles/creating-a-repository-from-a-te mplate テンプレートジェネレーター 自由度が高いタイプ 17 情報収集の巡回と消化に必要な知識 - 環境構築をする
  5. テーマを決める 何もテーマが思いつかない場合は以下の2つを題材につくる • カウントアプリ ◦ Hello World気分で作る • TODOリスト ◦

    応用を利かせて作る ◦ http://todomvc.com/ 迷ったらこれ 22 情報収集の巡回と消化に必要な知識 - テーマを決める
  6. • デザインパターン ◦ https://www.techscore.com/tech/DesignPattern/index.html/ • アーキテクチャ ◦ アプリケーション系 ▪ ドメイン駆動開発(ユビキタス言語,

    DI, DIP, CQS, CQRS, ...etc ) ◦ インフラ系(Backend領域) ▪ Continuous Integration(CI)/ Continuous Delivery(CD) ▪ Websocket / Rest API Why:小手先のテクニックだけではない話がたくさん転がっている為 設計と開発の練習内容 なるべく早く手を出したほうが良いもの 24 情報収集の巡回と消化に必要な知識 - 設計・開発
  7. バグが発生してもなかなか解決しない バグの種類によって、バグの特定と対策が可能な状態を目指す • 理解度の問題:同期・非同期処理などの理解がおいつていない ◦ 例)callback, Promise, async/await • 技術の問題:テストが無い

    ◦ テストを自然に書ける環境がないなど • 複雑度の問題:バグの原因が絞り込めない場合 ◦ 責務分離が明確でないアーキテクチャの可能性 ◦ 要件が複雑な場合(現実) 26 情報収集の巡回と消化に必要な知識 - バグ
  8. バグが発生してもなかなか解決しない できる範囲で仕組みで解決する • 理解度の問題 ◦ わかるまで調べる(大前提) ◦ わからなければ、Q&Aサイトにわかったところまで質問する • 技術度の問題

    ◦ テスト(jest) / 構文チェック(eslint) / 型(typescript) • 複雑度の問題 ◦ アーキテクチャで受け止める(難易度高) ◦ ドキュメントで情報共有など → 後のスライドで掘り下げる 27 情報収集の巡回と消化に必要な知識 - バグ
  9. デプロイする もっといろいろ試しておきたい人向け 自分でWEBサーバーを立ち上げたい場合 • Nginx / Apacheなどを利用 ◦ GCP/AWS/さくら/ロリポップなどでホスティング ◦

    Ansibleなどの構成管理ツールを使ってみる • コンテナでデプロイ ◦ Docker Swarm / k8s ◦ オーケストレーションツールの練習など • CDNにデプロイ ◦ AWS / GCP / Fastlyなど 30 情報収集の巡回と消化に必要な知識 - デプロイ
  10. 34 jQueryと仮想DOM • jQueryはスクレイピング ◦ レンダリングされた目的の DOMを取得し、イベント(onClickなど)をバインドす る ▪ 目的のDOMがレンダリングされていると限らない

    ▪ DOMの取得 → バインド → 要素の更新 → バインド, etc… を実装する と小規模を超えたあたりからコードが瓦解を始める • 仮想DOM ◦ JavaScript内からDOMを生成する。 ▪ → DOMがあることを保証できる ◦ 生成時にイベント(onClickなど)をバインドする。 ◦ JavaScript内でDOMのライフサイクルを定義できる → JavaScript内でDOMのライフサイクルを手に入れた
  11. ライフサイクルをJavaScriptで管理 すると何が良いのか?① • アプリケーションに必要なデータ の流れと、 ユーザーに提供するViewの管理を分離することができる。 右図の例の場合 • アプリケーションに必要なデータ ◦

    氏名の値「hoge fuga」 ◦ 年齢の値「18」 • 上記以外はViewを構成する情報 ◦ フォーム/氏名/年齢 ◦ 枠、サイズなど 36 hoge fuga 18 氏名 年齢 フォーム
  12. アーキテクチャで対応すること 例:仕様変更 • 氏名、年齢を入力と同時にフォーム下部に「〇〇さん 〇〇歳」と表示するよう にする。 38 hoge fuga 18

    氏名 年齢 フォーム hoge fugaさん 18歳 const state = { name: “hoge fuga”, age: 18 }; Stateの参照をそれぞれの DOM に渡すだけで済む