はてな教科書JavaScript編

by fand/amagitakayosi

Slide 1

Slide 1 text

id:amagitakayosi はてな教科書

Slide 2

Slide 2 text

id:amagitakayosi はてなブログチーム Kyoto.js 主催

Slide 3

Slide 3 text

はてな教科書

Slide 4

Slide 4 text

はてな教科書はてなインターンで利用されている内容 Perl, Scala, JS, Swift MySQL 基礎 WAF

Slide 5

Slide 5 text

JavaScript 講師やりました教科書のリニューアルしました

Slide 6

Slide 6 text

はてなインターン一ヶ月で講義から本番機能リリースまで前半: 講義と実習後半: チームに配属されて開発

Slide 7

Slide 7 text

前半の時間割講義: 2 時間実習: 5 時間

Slide 8

Slide 8 text

つまり 2 時間で「サービス開発できる最低限のJS」を教えないといけない

Slide 9

Slide 9 text

とはいえ古いJS のバッドノウハウとか教えたくない ES2016 対応したいとか書いてほしくない

Slide 10

Slide 10 text

社内プロジェクトの様子最近のプロジェクトは TypeScript or Babel どのチームも gulp とか使ってる Angular, React, Vue → 配属後、 ES5 で頑張る必要はない

Slide 11

Slide 11 text

要件チームに配属されても仕事できる JavaScript 未経験でも OK ES2015 対応 Node.js & npm 対応フレームワークにもちょっと触れる

Slide 12

Slide 12 text

できました講義前日まで加筆してた

Slide 13

Slide 13 text

やったこと従来の教科書をブラッシュアップ章ごとに分割 GitBook で表示できるように

Slide 14

Slide 14 text

ブラッシュアップ 2008 年から少しずつ進化古びた情報ある不正確な情報ある 2000 行のmarkdown ファイル1 枚

Slide 15

Slide 15 text

ES2016 に準拠今年は2016 年なので Symbol 型が増えたり Template Literal が増えたり

Slide 16

Slide 16 text

ガンガンいこうぜ

Slide 17

Slide 17 text

MV* フレームワークについて社内で使われてる奴を紹介 jQuery でページ作る時の方針も困ったら参照できるように

Slide 18

Slide 18 text

Node.js, npm に言及インストールからまで講義では使わないが、後半で使うかも

Slide 19

Slide 19 text

気をつけたところ「～かも」はなるべく使わない仕様について書くときは出典をあたる資料作ってたはずが、仕様読んでたら一日終わった

Slide 20

Slide 20 text

GitBook を採用 Markdown でオンライン書籍つくれるサービス azu_re さんの資料 gitbook.com で配信までしてくれる

Slide 21

Slide 21 text

Markdown で書かれてるようす

Slide 22

Slide 22 text

GitHub Pages で公開ドメインがかっこいい GitBook.com に登録不要修正の度にビルド & push が必要

Slide 23

Slide 23 text

公開

Slide 24

Slide 24 text

Pullreq きてる様子

Slide 25

Slide 25 text

振り返り概ね好評モダンな内容を盛り込めた Promise の扱い等、教えきれない質問の半分が Promise

Slide 26

Slide 26 text

今後の運用 CI 導入したいサンプルコードがちゃんと動くかテストビルド自動化 textlint

Slide 27

Slide 27 text

今後の講義もっと実践的な内容に寄せる？講義時間を増やす？？？？フロントエンドコース欲しい（放言）

Slide 28

Slide 28 text

完株式会社はてなでは若者の育成や社外への情報共有にオープンなエンジニアを募集しています！！！！