Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript
Search
Recruit
PRO
August 10, 2023
Technology
6
8.9k
JavaScript
2023年度リクルート エンジニアコース新人研修の講義資料です
Recruit
PRO
August 10, 2023
Tweet
Share
More Decks by Recruit
See All by Recruit
大規模プロダクトにおける フロントエンドモダナイズの取り組み紹介
recruitengineers
PRO
4
25
技術的ミスと深堀り
recruitengineers
PRO
3
26
『ホットペッパーグルメ』における マルチプラットフォーム化の歩み
recruitengineers
PRO
2
10
『じゃらんnet』アプリ 改善活動の軌跡
recruitengineers
PRO
2
13
『スタディサプリ for SCHOOL』における Flutter導入とその成果
recruitengineers
PRO
2
9
よりよいビジネスの「実現」のために エンジニアリングを発揮する
recruitengineers
PRO
3
31
イテレーティブな開発で 不確実性を乗り越える
recruitengineers
PRO
3
10
株式会社リクルート 社内ISUCONの裏側
recruitengineers
PRO
1
17
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
29
Other Decks in Technology
See All in Technology
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.2k
日経のデータベース事業とElasticsearch
hinatades
PRO
0
230
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
OPENLOGI Company Profile
hr01
0
60k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
670
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
110
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
220
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Fireside Chat
paigeccino
34
3.2k
Building Your Own Lightsaber
phodgson
104
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Site-Speed That Sticks
csswizardry
4
410
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Navigating Team Friction
lara
183
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
JavaScript 研修 (公開版) Author: @progfay
Name: 眞野 隼 輔 ま の しゅんすけ @progfay ‧2020 年度⼊社
(新卒 4 年⽬) ɾWeb Frontend Engineer ‧最近は 料理 にハマっている
想定受講者 ‧何らかのプログラミング⾔語を読み書きできるレベルのエンジニア ‧例: Java, C++, Python, Ruby, Go, etc …
何のための研修? ‧JavaScript で書かれたコードを読めるようになって欲しい ‧業務では、既に実装されている処理を読む機会が多い ‧コードを読むことで「何がしたいか」を学ぶことができる JavaScript の基本的な記法と慣習について共有する
研修の⽬標 ‧まずは not bad なコードが書けるようになる ‧他⼈が書いたコードを読んで雰囲気を掴めるようになる
やらないこと ‧特定のライブラリの使い⽅ ‧React / Next.js の使い⽅は別の講義でやります ‧古い JavaScript の記法や慣習 (ES
6 以前) ‧発展的な JavaScript 記法について (tc 3 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
Number Integer 型や Float 型はない
String 3 通りの書き⽅がある
null / undefined ‧undefined: void 型の関数の返り値など ‧null は別⾔語と同様の考え⽅で OK ‧nil,
None などと同等
変数宣⾔ 変数宣⾔には const か let を使う
‧慣習: 基本的には const を使う ‧再代⼊される可能性があるとコードが追いづらくなるため ‧どうしても const ではダメなときのみ let を使う
‧説明変数を使ったり、書き⽅を⼯夫したりする ‧変数宣⾔には var もあるが、これは使わない 変数宣⾔
Array
Object key と value の組み合わせを並べることができる
Object Object 同⼠の展開を⾏うスプレッド構⽂が便利
Object Object の property access には 2 通りある
Object 存在しない property アクセスには undefined が返る
Error null や undefined の property にアクセスすると Error になる
try-catch
⽐較 JavaScript の⽐較には == と === がある
⽐較 == は暗黙の型変換をしてから⽐較する
‧慣習: 基本的に === を使⽤し、 == は使わない ⽐較 undefined と null
の check への == の使⽤は例外とする⼈も
Function
Condition
Loop
Class
‧JavaScript における this は難しい ‧Object, Function, Class などのいろんなところで使える ‧呼び出す場所などによって this
が指す対象が変わってくる ‧挙動を詳しく知りたい⼈は⾃分で調べてみよう ‧関数とthis · JavaScript Primer #jsprimer this
this ‧個⼈的⾒解: 極⼒ this の利⽤は極⼒避けた⽅が良い ‧挙動が分かりづらいため、バグを⽣み出しやすい ‧その結果として Class を使わない実装が多い印象 ‧注:
ライブラリの特性上、 Class を扱うときもある
‧JavaScriptは シングルスレッド で動作する ‧⾮同期処理: タスクの完了を待たずに別タスクを実⾏できる ‧例: データ読み込み中でもボタンクリックに反応できる ⾮同期処理
‧アプリケーションはイベントが発⽣するまで待機し、 イベントが発⽣したときに対応するアクションを実⾏する ‧JavaScript の⾮同期処理の基盤を提供している Event 駆動
Callback
fetchData → filterData → sortData → displayData
fetchData → filterData → sortData → displayData 🤮 Callback 地獄
🤮
Promise ⾮同期処理をより簡潔に表現するためのオブジェクト
Promise
Promise
‧⾮同期処理を同期的な書き⽅で記述するための syntax sugar ‧`async` と `await` の 2 つの keyword
が追加された ‧エラーハンドリングには try-catch を使⽤する async / await
async / await
None
ググりづらい機能集
Workshop or https://stackblitz.com/fork/recruit-tech-javascripting