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.5k
JavaScript
2023年度リクルート エンジニアコース新人研修の講義資料です
Recruit
PRO
August 10, 2023
Tweet
Share
More Decks by Recruit
See All by Recruit
Azure Functions HTTPトリガーにおけるタイムアウトでハマったこと
recruitengineers
PRO
2
150
実務につなげる数理最適化
recruitengineers
PRO
6
690
うちにも入れたいDatadog
recruitengineers
PRO
2
380
リクルートのデータ基盤 Crois 年3倍成長!1日40,000コンテナの実行を支える AWS 活用とプラットフォームエンジニアリング
recruitengineers
PRO
2
330
Splunk Enterpriseで S3のデータを直接検索してみた!
recruitengineers
PRO
2
150
Looker APIを使い倒す ユーザーフィードバックを基にした継続的改善サイクル
recruitengineers
PRO
3
57
Kaggleふりかえり会〜LLM 20 Questions & ISIC 2024
recruitengineers
PRO
2
230
Balancing Revenue Goals and Off-Policy Evaluation Performance in Coupon Allocation
recruitengineers
PRO
2
51
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
390
Other Decks in Technology
See All in Technology
継続的にアウトカムを生み出し ビジネスにつなげる、 戦略と運営に対するタイミーのQUEST(探求)
zigorou
0
520
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
260
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
なぜCodeceptJSを選んだか
goataka
0
160
.NET 9 のパフォーマンス改善
nenonaninu
0
780
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
非機能品質を作り込むための実践アーキテクチャ
knih
3
980
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
260
UI State設計とテスト方針
rmakiyama
2
450
Featured
See All Featured
Done Done
chrislema
181
16k
The Cult of Friendly URLs
andyhume
78
6.1k
Building Your Own Lightsaber
phodgson
103
6.1k
Facilitating Awesome Meetings
lara
50
6.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Making Projects Easy
brettharned
116
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Statistics for Hackers
jakevdp
796
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Agile that works and the tools we love
rasmusluckow
328
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