JavaScript

Recruit

PRO

August 10, 2023

Tweet Share

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

46. None

47. ググりづらい機能集

48. Workshop or https://stackblitz.com/fork/recruit-tech-javascripting