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