$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はてな教科書JavaScript編
Search
Amagi
October 22, 2016
Education
3
2.6k
はてな教科書JavaScript編
Kyoto.js 11で発表した資料です
Amagi
October 22, 2016
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
140
How to hack VS Code: evil ways (Japanese)
fand
5
3.7k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
560
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.9k
Real World GLSL
fand
0
290
APIs for VJ-ing
fand
1
7k
Other Decks in Education
See All in Education
あなたの言葉に力を与える、演繹的なアプローチ
logica0419
1
250
滑空スポーツ講習会2025(実技講習)EMFT学科講習資料/JSA EMFT 2025
jsaseminar
0
120
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
2
3.1k
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
2.7k
Cifrado asimétrico
irocho
0
360
KBS新事業創造体験2025_科目説明会
yasuchikawakayama
0
160
Introduction - Lecture 1 - Web Technologies (1019888BNR)
signer
PRO
0
5.8k
HyRead2526
cbtlibrary
0
170
✅ レポート採点基準 / How Your Reports Are Assessed
yasslab
PRO
0
160
【dip】「なりたい自分」に近づくための、「自分と向き合う」小さな振り返り
dip_tech
PRO
0
200
2025年の本当に大事なAI動向まとめ
frievea
0
130
中央教育審議会 教育課程企画特別部会 情報・技術ワーキンググループに向けた提言 ー次期学習指導要領での情報活用能力の抜本的向上に向けてー
codeforeveryone
0
480
Featured
See All Featured
Information Architects: The Missing Link in Design Systems
soysaucechin
0
720
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
860
sira's awesome portfolio website redesign presentation
elsirapls
0
89
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
81
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
51
46k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
2
2.8k
Making Projects Easy
brettharned
120
6.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
115
94k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Embracing the Ebb and Flow
colly
88
4.9k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Transcript
id:amagitakayosi はてな教科書
id:amagitakayosi はてなブログチー ム Kyoto.js 主催
はてな教科書
はてな教科書 はてなインター ンで利用されている 内容 Perl, Scala, JS, Swift MySQL 基礎
WAF
JavaScript 講師やりました 教科書のリニュー アルしました
はてなインター ン 一ヶ月で講義から本番機能リリー スまで 前半: 講義と実習 後半: チー ムに配属されて開発
前半の時間割 講義: 2 時間 実習: 5 時間
つまり 2 時間 で 「 サー ビス開発できる最低限のJS」 を 教えないといけない
とはいえ 古いJS のバッドノウハウとか教えたくない ES2016 対応したい とか書いてほしくない
社内プロジェクトの様子 最近のプロジェクトは TypeScript or Babel どのチー ムも gulp とか使ってる Angular,
React, Vue → 配属後、 ES5 で頑張る必要はない
要件 チー ムに配属されても仕事できる JavaScript 未経験でも OK ES2015 対応 Node.js &
npm 対応 フレー ムワー クにもちょっと触れる
できました 講義前日まで加筆してた
やったこと 従来の教科書をブラッシュアップ 章ごとに分割 GitBook で表示できるように
ブラッシュアップ 2008 年から少しずつ進化 古びた情報ある 不正確な情報ある 2000 行のmarkdown ファイル1 枚
ES2016 に準拠 今年は2016 年なので Symbol 型が増えたり Template Literal が増えたり
ガンガンいこうぜ
MV* フレー ムワー クについて 社内で使われてる奴を紹介 jQuery でペー ジ作る時の方針も 困ったら参照できるように
Node.js, npm に言及 インストー ルから まで 講義では使わないが、 後半で使うかも
気をつけたところ 「~ かも」 はなるべく使わない 仕様について書くときは出典をあたる 資料作ってたはずが、 仕様読んでたら一日 終わった
GitBook を採用 Markdown でオンライン書籍つくれるサー ビス azu_re さんの資料 gitbook.com で配信までしてくれる
Markdown で書かれてるようす
GitHub Pages で公開 ドメインがかっこいい GitBook.com に登録不要 修正の度にビルド & push が必要
公開
Pullreq きてる様子
振り返り 概ね好評 モダンな内容を盛り込めた Promise の扱い等、 教えきれない 質問の半分が Promise
今後の運用 CI 導入したい サンプルコー ドがちゃんと動くかテスト ビルド自動化 textlint
今後の講義 もっと実践的な内容に寄せる? 講義時間を増やす???? フロントエンドコー ス欲しい( 放言)
完 株式会社はてなでは 若者の育成や社外への情報共有に オー プンなエンジニアを 募集しています!!!!