JavaScript - Speaker Deck

Slide 1

Slide 1 text

JavaScript 研修 (公開版) Author: @progfay

Slide 2

Slide 2 text

Name: 眞野隼輔まのしゅんすけ @progfay ‧2020 年度⼊社 (新卒 4 年⽬) ɾWeb Frontend Engineer ‧最近は料理にハマっている

Slide 3

Slide 3 text

想定受講者 ‧何らかのプログラミング⾔語を読み書きできるレベルのエンジニア ‧例: Java, C++, Python, Ruby, Go, etc …

Slide 4

Slide 4 text

何のための研修？ ‧JavaScript で書かれたコードを読めるようになって欲しい ‧業務では、既に実装されている処理を読む機会が多い ‧コードを読むことで「何がしたいか」を学ぶことができる JavaScript の基本的な記法と慣習について共有する

Slide 5

Slide 5 text

研修の⽬標 ‧まずは not bad なコードが書けるようになる ‧他⼈が書いたコードを読んで雰囲気を掴めるようになる

Slide 6

Slide 6 text

やらないこと ‧特定のライブラリの使い⽅ ‧React / Next.js の使い⽅は別の講義でやります ‧古い JavaScript の記法や慣習 (ES 6 以前) ‧発展的な JavaScript 記法について (tc 3 9 /proposals など) ‧JavaScript の内部的な機構や詳細な仕様について

Slide 7

Slide 7 text

わからないことがあったら ‧「わからない」と⾔うのも社会⼈として必要なスキル ‧「認識が合ってるか不安」もどんどん質問しましょう！ ‧もしくは信頼できるソースを確認してみよう 👀

Slide 8

Slide 8 text

信頼できるソース ‧何かあれば、とりあえず MDN で調べてみる ‧JavaScript の⼊⾨資料なら JavaScript Primer がオススメ ‧詳細な仕様は ECMAScript Language Specification (上級者向け) ‧実際に⾃分で動かしてみて確かめるのも⼤切

Slide 9

Slide 9 text

‧ブラウザ上で動く (Chrome, Safari, Firefox, etc … ) ‧サーバー上でも動く (Node.js など) ‧最近はほんといろんなところで動いている ‧静的型付けがない What’s JavaScript?

Slide 10

Slide 10 text

実⾏環境構築 https://nodejs.org/en/download

Slide 11

Slide 11 text

実⾏環境構築うまく動かなければ https://stackblitz.com/fork/node を使おう

Slide 12

Slide 12 text

Hello, world! 値を標準出⼒に表⽰するには console.log を使う

Slide 13

Slide 13 text

セミコロンセミコロンは付けても付けなくてもよい

Slide 14

Slide 14 text

・Number ・String ・Boolean ・undefined / null ‧and more … (今は知らなくても⼤丈夫) Primitive Value

Slide 15

Slide 15 text

Number Integer 型や Float 型はない

Slide 16

Slide 16 text

String 3 通りの書き⽅がある

Slide 17

Slide 17 text

null / undefined ‧undefined: void 型の関数の返り値など ‧null は別⾔語と同様の考え⽅で OK ‧nil, None などと同等

Slide 18

Slide 18 text

変数宣⾔変数宣⾔には const か let を使う

Slide 19

Slide 19 text

‧慣習: 基本的には const を使う ‧再代⼊される可能性があるとコードが追いづらくなるため ‧どうしても const ではダメなときのみ let を使う ‧説明変数を使ったり、書き⽅を⼯夫したりする ‧変数宣⾔には var もあるが、これは使わない変数宣⾔

Slide 20

Slide 20 text

Array

Slide 21

Slide 21 text

Object key と value の組み合わせを並べることができる

Slide 22

Slide 22 text

Object Object 同⼠の展開を⾏うスプレッド構⽂が便利

Slide 23

Slide 23 text

Object Object の property access には 2 通りある

Slide 24

Slide 24 text

Object 存在しない property アクセスには undefined が返る

Slide 25

Slide 25 text

Error null や undefined の property にアクセスすると Error になる

Slide 26

Slide 26 text

try-catch

Slide 27

Slide 27 text

⽐較 JavaScript の⽐較には == と === がある

Slide 28

Slide 28 text

⽐較 == は暗黙の型変換をしてから⽐較する

Slide 29

Slide 29 text

‧慣習: 基本的に === を使⽤し、 == は使わない⽐較 undefined と null の check への == の使⽤は例外とする⼈も

Slide 30

Slide 30 text

Function

Slide 31

Slide 31 text

Condition

Slide 32

Slide 32 text

Loop

Slide 33

Slide 33 text

Class

Slide 34

Slide 34 text

‧JavaScript における this は難しい ‧Object, Function, Class などのいろんなところで使える ‧呼び出す場所などによって this が指す対象が変わってくる ‧挙動を詳しく知りたい⼈は⾃分で調べてみよう ‧関数とthis · JavaScript Primer #jsprimer this

Slide 35

Slide 35 text

this ‧個⼈的⾒解: 極⼒ this の利⽤は極⼒避けた⽅が良い ‧挙動が分かりづらいため、バグを⽣み出しやすい ‧その結果として Class を使わない実装が多い印象 ‧注: ライブラリの特性上、 Class を扱うときもある

Slide 36

Slide 36 text

‧JavaScriptはシングルスレッドで動作する ‧⾮同期処理: タスクの完了を待たずに別タスクを実⾏できる ‧例: データ読み込み中でもボタンクリックに反応できる⾮同期処理

Slide 37

Slide 37 text

‧アプリケーションはイベントが発⽣するまで待機し、   イベントが発⽣したときに対応するアクションを実⾏する ‧JavaScript の⾮同期処理の基盤を提供している Event 駆動

Slide 38

Slide 38 text

Callback

Slide 39

Slide 39 text

fetchData → filterData → sortData → displayData

Slide 40

Slide 40 text

fetchData → filterData → sortData → displayData 🤮 Callback 地獄 🤮

Slide 41

Slide 41 text

Promise ⾮同期処理をより簡潔に表現するためのオブジェクト

Slide 42

Slide 42 text

Promise

Slide 43

Slide 43 text

Promise

Slide 44

Slide 44 text

‧⾮同期処理を同期的な書き⽅で記述するための syntax sugar ‧`async` と `await` の 2 つの keyword が追加された ‧エラーハンドリングには try-catch を使⽤する async / await