Pro Yearly is on sale from $80 to $50! »

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

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

コネヒトマルシェ #2〜webフロントエンド市〜でのLT発表資料です。

Ad4c3c738e57a9bbcb800871e81c232d?s=128

itosho

May 18, 2018
Tweet

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