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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

■ 自己紹介・伊藤翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社・野球とアイドルが好きです。　・最近のオススメ：sora tob sakana 先日メジャーデビュー

Slide 3

Slide 3 text

■ 自己紹介・伊藤翔 / @itosho 　・所属：コネヒト株式会社 / Supership株式会社・野球とアイドルが好きです。　・最近のオススメ：sora tob sakana 先日メジャーデビュー・主にサーバーサイドエンジニアをやっています。　・よく書く言語：PHP / Ruby / Golang

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 ES2016 ES2015 Babel webpack React Yarn Vue.js Flux Redux Flux Utils Prettier Flow TypeScript Gulp Virtual DOM JSX ■ ググった結果

Slide 9

Slide 9 text

9 ES2016 ES2015 Babel webpack React Yarn Vue.js Flux Redux Flux Utils Prettier Flow TypeScript Gulp Virtual DOM JSX ■ ググった結果 (ﾟAﾟ;)ｺﾞｸﾘ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

1 ■ コードみた結果

Slide 12

Slide 12 text

1 ■ ぼくの知っているJavaScript

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

①片手間でやらない 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

2 ■ 具体的にやったこと・分からないことを一個ずつ分解する。　・そして、それが何者なのかを調べる。　・詳細は分からなくても、何者かが分かるようになれば何とかなる。　【例】export default class EmptyState extends AbstractComponent ・頭の中にindexだけ作って、実際の知識はインターネットから取ってくるイメージ　・自分の頭は有限だけどインターネットは無限　・調べ方だけ分かっていれば何とかなる　・多言語からの応用も可能！

Slide 22

Slide 22 text

2 ■ 具体的にやったこと・勝手に先生をつくる　・界隈で有名な人の記事や発表をウォッチする・ぼくの場合は Stoyan Stefanov さんを先生に　・facebookのエンジニア　・『Reactビギナーズガイド』（オライリージャパン）の作者　・YouTubeにカンファレンスの動画がけっこうある

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

結果 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

2 ■ コードみても

Slide 28

Slide 28 text

分かる、分かるぞ！ 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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