2020/07/17: いくつか追記しました
はじめに
私は、TechTrainでフロントエンドのメンターとして面談する中で「最近フロントエンドの勉強を始めました！」という方や、フロントエンドエンジニアを目指す学生と話す機会が何度もあります。
その中でよくある質問が
「フロントエンドの情報収集ってどうしてますか？」
です。
何度も質問を貰うので、気になる人は多いのかなと思います。
この記事では「私がどんな風に情報収集しているか」を紹介しようと思います。主に情報収集の流れと、どこからフロントエンドの情報を集めているかについてです。
情報収集の流れ
まずは情報収集の流れとして主にプロセス的な観点で整理してみます。
私の情報収集を抽象化すると以下の3つのプロセスがあると思います。
- 情報源から情報を集める(ex: Twitter, Blog, Qiita)
- 特定の場所に情報を溜める(ex: はてなブックマーク, Pocket)
- 集まった情報を処理して消化する(ex: じっくり読む, ざっと読む, メモにまとめる)
それぞれについて詳しく説明します。
1. 情報を集める
まずは「情報を集める」についてです。
日々の隙間時間でフロントエンドに関する情報が集まる場所(ex: Twitter, Blog, Qiita)を訪れて、情報を集めています。
Twitterは隙間時間にチラチラ見て、それ以外だとおおよそ1日10分〜15分くらい、明示的に時間を確保して好きなサイトをざっと眺めていると思います。あとは、電車など移動時間の合間にスマホで行うことが多いです。
どこで情報を集めるかは後述のフロントエンドの情報源で詳しく紹介します。
とにかく、自分にとっての情報源から情報を集めるフェーズです。
2. 情報を溜める
次は「情報を溜める」です。
「情報を溜める」では、「1. 情報を集める」で大量の情報に触れる中から「あとで読もう」と思った記事やページを、後からすぐに参照できる場所に溜めます。
ここで主に使われているサービスは、「はてなブックマーク」や「Pocket」があると思います。
私ははてなブックマークを利用しています。
toshi-tomaのブックマーク
はてなブックマークを利用している理由は以下のとおりです。
- PC & スマホからも同じ体験ができる
- タグ機能で整理したり絞り込みができる
- 他の人のコメントが見れる & どんなタグを付けているか分かる
「あとで読もう」と思った記事やページは、「あとで読む」タグを付けてブックマークに登録しています。タグはその都度適切なものを追加で選択しておくことも多いです。そうすると後で記事のタイトルとタグを見て、内容をある程度予測することができます。
そして、PC版ならはてなブックマークのChrome拡張、スマホならはてなブックマークアプリをインストールしています。
インストールしておけば、気になった記事があると、即座に「あとで読む」タグを付けて登録できるので便利です。
3. 集まった情報を処理する
最後に「集まった情報を処理する」について話します。
このフェーズでは、記事の内容を読んで、自分なりに消化していきます。
「2. 情報を溜める」により、毎日のように「はてなブックマーク」に気になった記事が追加されていきます。
これにより、自分が処理する必要がある情報が1つの場所に集まっていることになります。
私は、定期的にまとまった時間を使ってはてなブックマークの「あとで読む」タグを見ています。
だいたい週末の30分くらいの時間を使っています。
ここでは、「つまみ食いしたい情報」 or 「しっかり咀嚼したい情報」かを意識しています。
全ての記事をしっかり読んでいると時間がいくらあっても足りないので、まずはさっと目を通して、あとで時間をかけてしっかり読もうと思った記事は、「あとでじっくり」タグに変更して、時間をある程度確保できる時にそのタグの記事を読んでいます。
「つまみ食いしたい情報」だなと思ったものは、その場で読んで、「あとで読む」タグを外します。
情報収集プロセスのまとめ
3つのステップに分けて、情報収集のプロセスを紹介しました。
私の場合は
- 情報収集は隙間時間にやる
- まずは1つの場所に情報を集める
- 「つまみ食いしたい情報」 or 「しっかり咀嚼したい情報」を分けて考える
を意識しています。
フロントエンドの情報源
情報収集のプロセスを紹介しました。最後にプロセス1の 「情報源から情報を集める」の部分にフォーカスして、フロントエンドの情報をどこから集めるのかを紹介します。
私の場合は主にTwitterがメインです。Twitterは、ツイート内容が情報源というよりも、おすすめの記事や公開された記事への導線として最も利用していると思います。
自分が関心のある分野で著名なエンジニアやよく情報を発信している人をフォローしています。
全部見るのは大変なので、リスト機能を使っています。
流行りそうな技術やライブラリは複数の人が同じようなタイミングでツイートしている事が多いので、慣れると傾向がつかめる気がします。
ライブラリや特定技術に詳しいエンジニアがいるので、自分の知りたい情報に応じてフォローしています。
どんな人がいるのかわからない場合は、著名なエンジニアがフォローしている人を見てみるのも良いと思います。
はてなブックマーク テクノロジー人気エントリー
はてなブックマークの「テクノロジーの人気エントリー」はフロントエンドに限らずTech系の記事をよく目にします。
ある程度有名や流行っている記事が上がってくる気がします。Twitterよりは情報として少し遅めだと思います。
はてなブックマーク お気に入りフィード
はてなブックマークでは、ユーザーをお気に入りに追加することができます。
そうしておくと、自分がお気に入りにしているユーザーが、はてなブックマークに登録した記事を、「お気に入りフィード」でチェックすることができます。
情報収集力が高いエンジニアがどんな記事をチェックしているかを効率的に把握できるのでおすすめです。
JSer.info
有名なサイトとして、フロントエンドエンジニアはチェックしている人が多いと思います。
フロントエンドに関する情報、ライブラリやブラウザ情報など、動向はだいたいここを見て把握できています。
サイボウズでは、Jser.infoや最近の気になった記事をランチタイムに見るフロントエンドランチを開催してたりします。
フロントエンドランチの様子
カンファレンスの資料
フロントエンド系のカンファレンスや勉強会の資料もおすすめです。
大きめのカンファレンスは後日スライドのまとめ記事が公開されると思うので、それでまとめてチェックするのも良いです。
JSConf JP 2019 All talks and Twitter account list
FRONTEND CONFERENCE 2019 登壇資料まとめ
フロントエンドカンファレンス福岡 2019 登壇資料まとめ
カンファレンスの動画(YouTube)
カンファレンスの動画は後日、YouTubeで公開されることが多いと思います。
実際に海外のカンファレンスにいかなくても、動画で内容をチェックできるので嬉しいですね。
- Google Chrome Developers
- JSConf
- builderscon
- Frontend Conference Fukuoka 2019
ブラウザ情報
https://blog.chromium.org/
https://hacks.mozilla.org/
https://webkit.org/blog/
あまりマメにチェックできていませんが、ブラウザの新しいバージョンがリリースされたタイミングでリリース情報をチェックしたりもします。
GitHub
https://github.com/
https://github.com/notifications
GitHubでは興味のあるエンジニアをフォローしたり、リポジトリをwatchしています。
FeedやNotificationsにエンジニアの動向やリポジトリの動きなどが流れてきます。
Qiitaのトレンド
他のエンジニアがどんな分野に興味をもっているのかを知れると思います。
日本のエンジニアのトレンドが分かる気がします。
Podcast
個人的に音声コンテンツが好きなので通勤時間などにPodcastを聞いていることが多いです。
Webやフロントエンドに関する情報だとmozaic.fmやUIT INSIDEがおすすめです。
英語を聞くのが得意な人は英語のPodcastがおすすめで、フロントエンド系のものも多いです。
- JavaScript Jabber
- TalkScript
- Software Engineering Daily
- React Podcast
- Front End Happy Hour
英語だと全然理解できなくて、辛いですがたまーに聞いてます。
勉強会やカンファレンスに参加
勉強会やカンファレンスに行けば、ある程度活用されている技術から、最近出てきたので試してみた系の技術まで幅広く一気にインプットできます。
国内でのカンファレンス
- https://jsconf.jp/2019/
- https://2019.kfug.jp/
- https://frontend-conf.fukuoka.jp/
- https://www.tsconf.jp/
勉強会はconnpassで知ることが多いです。
ブログや記事
ブログや特定のメディアなどの記事はTwitterで知って、そこから訪れることが多いので、明示的に調べて訪れることは少ないです。
最後にTwitter経由でよく見るサイトや周りのエンジニアからおすすめされたサイトを一部紹介します。
- CSS Tricks
- Web Performance Advent Calendar
- Echo JS
- Web.dev
- Web Scratch
- mizchi's blog
- teppeis blog
- 技術探し
- blog.jxck.io
- from scratch
- dackdive's blog
- 別にしんどくないブログ
- Medium | Toru Kobayashi
- ICS MEDIA
- Developers.IO
- UX MILK
- Frontend Weekly
- CodeGrid
- The State of JavaScript/
- The State of CSS 2019
- 30歳からのプログラミング
- uhyo/blog
ざっと書き出しただけなので、いつもお世話になっているのに漏れているブログもあるかもしれません🙏
まとめ
この記事では、情報収集のプロセスについての説明と、フロントエンドに関する情報をどこで集めるのかについて紹介しました。
ここまでたくさんの情報源を紹介しましたが、情報収集に集中し過ぎないのが大切だと思いました。
情報収集ももちろん大切で継続するのは重要ですが、気になったライブラリや技術を1つ選んで、手を動かして探求する時間のほうが大きく成長できると思います。どちらも大切なので、情報収集と探求を良いバランスで行っていくと良いと思います。
手を動かして探求しつつ、合間に情報収集をすることを私も意識していこうと思います。
そして、日々有益な情報を発信してくれる皆様、いつもありがとうございます！