30代から始めるwebフロントエンド入門

Transcript

1. 30代から始めるwebフロントエンド入門 コネヒトマルシェ #2〜webフロントエンド市〜 @itosho 1

2. ▪ 自己紹介 ・伊藤 翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。

   　・最近のオススメ：sora tob sakana 先日メジャーデビュー

3. ▪ 自己紹介 ・伊藤 翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。

   　・最近のオススメ：sora tob sakana 先日メジャーデビュー ・主にサーバーサイドエンジニアをやっています。 　・よく書く言語：PHP / Ruby / Golang

4. ＿人人人人人人人人人人人人人人＿ ＞　サーバーサイドエンジニア　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 4

5. ▪ 今日話すこと ・いかにしてwebフロントエンドを学んだか 　・JavaScriptがメインです。 ・新しい技術を覚える時に必要な心構え 　・誰かの背中を押せるLTが出来ればいいなと思っています！ ・今日話さないこと 　・具体的な実装の話 　・そもそもの技術選定の話 　・アイドルの話（懇親会で！）

6. ▪ 前提 ・ぼくのwebフロントエンド遍歴 　・27〜28歳くらいまでjQueryをちょくちょく書いていた。 　・ここ数年はWeb APIの開発が多く、ほとんど書いていない。 ・コネヒト社のwebフロントエンド技術スタック 　・React 　・webpack 　・Flux

   Utils 　・Flow

7. ▪ 入門前のぼく ・webフロントエンドの潮流は速いとはよく言うけど… 　・バズった記事くらいは読んでたし！ 　・言うて全く書いたことないわけではないし！ 　・それなりにエンジニアとして経験も積んできたし！ ・ググったらなんとかなるやろー（ﾊﾅﾎｼﾞｰ

8. 8 ES2016 ES2015 Babel webpack React Yarn Vue.js Flux Redux

   Flux Utils Prettier Flow TypeScript Gulp Virtual DOM JSX ▪ ググった結果

9. 9 ES2016 ES2015 Babel webpack React Yarn Vue.js Flux Redux

   Flux Utils Prettier Flow TypeScript Gulp Virtual DOM JSX ▪ ググった結果 (ﾟAﾟ;)ｺﾞｸﾘ

10. コ、コードみればなんとかなるやろ…（震え声） 10

11. 1 ▪ コードみた結果

12. 1 ▪ ぼくの知っているJavaScript

13. 1 ▪ コードみた結果 ＼(^o^)／ｵﾜﾀ

14. 「ちゃんと」学ばなきゃ！ 14

15. ▪ ちゃんと学ぶための三原則 ①片手間でやらない ②学び方を理解するまで学ぶ ③変なプライドを捨てる

16. ①片手間でやらない 16

17. 1 ▪ ①片手間でやらない ・前提として、webフロントエンドを片手間で書ける時代は遥か昔 に終わっている。 ・自分のスキルを勘違いしない 　・歳をとると知らず知らずのうちに勘違いしてる可能性がある ・初心を忘れず、覚悟を持って学ぶ必要がある。

18. 1 ▪ 具体的にやったこと ・初心者向けの本を読む。 　・新しい言語を学ぶときと同じように。 　・意外に忘れてることがある。 ・毎日少しでもいいのでコードを書く。 出典：エビングハウスの忘却曲線を利用した超効率的復習法! http://xn--qck0d2a9as2853cudbqy0lc6cfz4a0e7e.xyz/study/ebbinghaus

19. ②学び方を理解するまで学ぶ 19

20. 2 ▪ ②学び方を理解するまで学ぶ ・とは言え、webフロントエンドはサーバーサイドに比べると変化 が速く、覚えることも多い。 ・自分の頭の中に全てを詰め込むのは不可能。 　・そもそも10代の頃のような記憶力はもうない ・何が分かっていて何が分からないのか、そして、それをどうやっ て分かるようにするかを学ぶ必要がある。

21. 2 ▪ 具体的にやったこと ・分からないことを一個ずつ分解する。 　・そして、それが何者なのかを調べる。 　・詳細は分からなくても、何者かが分かるようになれば何とかなる。 　【例】export default class EmptyState

    extends AbstractComponent<Props, State> ・頭の中にindexだけ作って、実際の知識はインターネットから 取ってくるイメージ 　・自分の頭は有限だけどインターネットは無限 　・調べ方だけ分かっていれば何とかなる 　・多言語からの応用も可能！

22. 2 ▪ 具体的にやったこと ・勝手に先生をつくる 　・界隈で有名な人の記事や発表をウォッチする ・ぼくの場合は Stoyan Stefanov さんを先生に 　・facebookのエンジニア

    　・『Reactビギナーズガイド』（オライリージャパン）の作者 　・YouTubeにカンファレンスの動画がけっこうある

23. ③変なプライドを捨てる 23

24. 2 ▪ ③変なプライドを捨てる ・聞くは一時の恥聞かぬは一生の恥 　・歳をとると、いつの間にか人に訊くのが恥ずかしくなる ・自尊心を捨てて、分からないことは恥ずかしがらず素直に訊い たほうが圧倒的に習得が速い。 　・もちろん、訊き方には気をつける必要はある。 　・訊けるようになることからはじまることがいっぱいある。 ・この発表もある意味、変なプライドを捨てるための一環

    　・無知な自分を曝け出す感じ辛いけど成長するためには必要

25. 結果 25

26. 2 ES2015 / ES2016 標準仕様及びバージョン ▪ ググっても React / Vue.js

    ライブラリ, フレームワーク Gulp / Babel / webpack タスクランナー, トランスパイラ, ビルドツール Flux アーキテクチャ Flux Utils / Redux Fluxの具体的な実装 Flow / TypeScript 型チェッカー Yarn Gemみたいなパッケージ管理ツール Prettier gofmtみたいなフォーマッタ JSX / Virtual DOM 主にReactで使われるテンプレートエンジン 及びそれを実現する概念

27. 2 ▪ コードみても

28. 分かる、分かるぞ！ 28

29. ▪ でも自分だけの力では出来なかった ・社内のメンバーにいっぱい助けられたぞ！ 　@dachi023 　・React勉強会を開催してくれた！ 　・ペアプロしてくれた！ 　・いっぱいコードレビューしてくれた！ 　@supermanner 　・同じような立場で一緒にReactやってくれて、心強かった！

30. ▪ まとめ ・タイトルに30代ってつけたけど、何かをはじめるのに年齢は関 係ない！ 　・謙虚な気持ちと向上心さえあれば大丈夫。 ・新しいことを覚えるのは愉しい。 　・先生や仲間が近くにいるともっと愉しい！ ・とは言え、まだ入門したばかりなので、これからもっと頑張って もっと成長いくぞ

31. ご清聴ありがとうございました 31