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
9.2k
JavaScript
2023年度リクルート エンジニアコース新人研修の講義資料です
Recruit
PRO
August 10, 2023
Tweet
Share
More Decks by Recruit
See All by Recruit
問題解決に役立つ数理工学
recruitengineers
PRO
10
2.6k
Curiosity & Persistence
recruitengineers
PRO
2
160
結果的にこうなった。から見える メカニズムのようなもの。
recruitengineers
PRO
1
350
成長実感と伸び悩みからふりかえる キャリアグラフ
recruitengineers
PRO
1
140
リクルートの オンプレ環境の未来を語る
recruitengineers
PRO
3
170
LLMのプロダクト装着と独自モデル開発
recruitengineers
PRO
1
230
新規検索基盤でマッチング精度向上に挑む! ~『ホットペッパーグルメ』の開発事例 ビジネス編
recruitengineers
PRO
2
140
新規検索基盤でマッチング精度向上に挑む! ~『ホットペッパーグルメ』の開発事例 技術編
recruitengineers
PRO
0
150
大規模プロダクトにおける フロントエンドモダナイズの取り組み紹介
recruitengineers
PRO
5
130
Other Decks in Technology
See All in Technology
Microsoft の SSE の現在地
skmkzyk
0
280
CodeRabbitと過ごした1ヶ月 ─ AIコードレビュー導入で実感したチーム開発の進化
mitohato14
1
230
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
4
230
グループ ポリシー再確認 (2)
murachiakira
0
210
Winning at PHP in Production in 2025
beberlei
1
270
Twelve-Factor-Appから学ぶECS設計プラクティス/ECS practice for Twelve-Factor-App
ozawa
3
160
Part1 GitHubってなんだろう?その1
tomokusaba
1
240
AIエージェント開発手法と業務導入のプラクティス
ykosaka
9
2.7k
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
1
860
MCPが変えるAIとの協働
knishioka
1
130
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
180
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
230
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
780
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
590
Typedesign – Prime Four
hannesfritz
41
2.6k
Site-Speed That Sticks
csswizardry
6
530
A better future with KSS
kneath
239
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.4k
Code Review Best Practice
trishagee
67
18k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Writing Fast Ruby
sferik
628
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
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