JavaScript

2023年度リクルート エンジニアコース新人研修の講義資料です

Transcript

1. JavaScript 研修 (公開版) Author: @progfay
2. Name: 眞野 隼 輔 ま の しゅんすけ @progfay ‧2020 年度⼊社 (新卒 4 年⽬) ɾWeb Frontend Engineer ‧最近は 料理 にハマっている
3. 想定受講者 ‧何らかのプログラミング⾔語を読み書きできるレベルのエンジニア ‧例: Java, C++, Python, Ruby, Go, etc …
4. 何のための研修？ ‧JavaScript で書かれたコードを読めるようになって欲しい ‧業務では、既に実装されている処理を読む機会が多い ‧コードを読むことで「何がしたいか」を学ぶことができる JavaScript の基本的な記法と慣習について共有する
5. 研修の⽬標 ‧まずは not bad なコードが書けるようになる ‧他⼈が書いたコードを読んで雰囲気を掴めるようになる
6. やらないこと ‧特定のライブラリの使い⽅ ‧React / Next.js の使い⽅は別の講義でやります ‧古い JavaScript の記法や慣習 (ES 6 以前) ‧発展的な JavaScript 記法について (tc 3 9 /proposals など) ‧JavaScript の内部的な機構や詳細な仕様について
7. わからないことがあったら ‧「わからない」と⾔うのも社会⼈として必要なスキル ‧「認識が合ってるか不安」もどんどん質問しましょう！ ‧もしくは信頼できるソースを確認してみよう 👀
8. 信頼できるソース ‧何かあれば、とりあえず MDN で調べてみる ‧JavaScript の⼊⾨資料なら JavaScript Primer がオススメ ‧詳細な仕様は ECMAScript Language Specification (上級者向け) ‧実際に⾃分で動かしてみて確かめるのも⼤切
9. ‧ブラウザ上で動く (Chrome, Safari, Firefox, etc … ) ‧サーバー上でも動く (Node.js など) ‧最近はほんといろんなところで動いている ‧静的型付けがない What’s JavaScript?
10. 実⾏環境構築 https://nodejs.org/en/download
11. 実⾏環境構築 うまく動かなければ https://stackblitz.com/fork/node を使おう
12. Hello, world! 値を標準出⼒に表⽰するには console.log を使う
13. セミコロン セミコロンは付けても付けなくてもよい
14. ・Number ・String ・Boolean ・undefined / null ‧and more … (今は知らなくても⼤丈夫) Primitive Value
15. Number Integer 型や Float 型はない
16. String 3 通りの書き⽅がある
17. null / undefined ‧undefined: void 型の関数の返り値など ‧null は別⾔語と同様の考え⽅で OK ‧nil, None などと同等
18. 変数宣⾔ 変数宣⾔には const か let を使う
19. ‧慣習: 基本的には const を使う ‧再代⼊される可能性があるとコードが追いづらくなるため ‧どうしても const ではダメなときのみ let を使う ‧説明変数を使ったり、書き⽅を⼯夫したりする ‧変数宣⾔には var もあるが、これは使わない 変数宣⾔
20. Array
21. Object key と value の組み合わせを並べることができる
22. Object Object 同⼠の展開を⾏うスプレッド構⽂が便利
23. Object Object の property access には 2 通りある
24. Object 存在しない property アクセスには undefined が返る
25. Error null や undefined の property にアクセスすると Error になる
26. try-catch
27. ⽐較 JavaScript の⽐較には == と === がある
28. ⽐較 == は暗黙の型変換をしてから⽐較する
29. ‧慣習: 基本的に === を使⽤し、 == は使わない ⽐較 undefined と null の check への == の使⽤は例外とする⼈も
30. Function
31. Condition
32. Loop
33. Class
34. ‧JavaScript における this は難しい ‧Object, Function, Class などのいろんなところで使える ‧呼び出す場所などによって this が指す対象が変わってくる ‧挙動を詳しく知りたい⼈は⾃分で調べてみよう ‧関数とthis · JavaScript Primer #jsprimer this
35. this ‧個⼈的⾒解: 極⼒ this の利⽤は極⼒避けた⽅が良い ‧挙動が分かりづらいため、バグを⽣み出しやすい ‧その結果として Class を使わない実装が多い印象 ‧注: ライブラリの特性上、 Class を扱うときもある
36. ‧JavaScriptは シングルスレッド で動作する ‧⾮同期処理: タスクの完了を待たずに別タスクを実⾏できる ‧例: データ読み込み中でもボタンクリックに反応できる ⾮同期処理
37. ‧アプリケーションはイベントが発⽣するまで待機し、 
 イベントが発⽣したときに対応するアクションを実⾏する ‧JavaScript の⾮同期処理の基盤を提供している Event 駆動
38. Callback
39. fetchData → filterData → sortData → displayData
40. fetchData → filterData → sortData → displayData 🤮 Callback 地獄 🤮
41. Promise ⾮同期処理をより簡潔に表現するためのオブジェクト
42. Promise
43. Promise
44. ‧⾮同期処理を同期的な書き⽅で記述するための syntax sugar ‧`async` と `await` の 2 つの keyword が追加された ‧エラーハンドリングには try-catch を使⽤する async / await
45. async / await
47. ググりづらい機能集
48. Workshop or https://stackblitz.com/fork/recruit-tech-javascripting