学びに終わりはありません。特に、Web開発の世界では終着点なんてありません。Web業界は常にアップデートや改善を繰り返しているので、Webに関わっている人たちも同じことをしなくてはならないのです。新しい変化についていこうとすると疲れてしまいますが、その必要はありません。
この記事では、ちょっとした「実験」が新しいことを学ぶのに効果的な方法であること、JavaScriptの知識を楽しくアップデートし続ける方法を紹介しましょう。
実験を楽しくしよう
本業以外の仕事、サイドプロジェクトの経験はありますか？ もしサイドプロジェクトの経験があれば、最初はとても楽しかったのに、すぐにややこしくなって混乱してしまった経験もあると思います。なにかに行き詰まるというのはあまり楽しいものではなく、それがサイドプロジェクトだったとしても、本業に対するモチベーションも下げてしまいます。
この問題はおもに、自由時間にくつろぎたいときに、スコープクリープやプレッシャーを感じることで起こります。しかし、いくつかのルールを導入することにより、予測不可能なトラブルを確実に避けられます。
- 作業の準備をする：実験の規模がどのくらいでなにを含むのかチェックする。規模が大きすぎる場合は、ちゃんとチェックできるように分割し、それぞれをやり遂げられるか、それともやめるべきかを決める
- タスクのスケジュールを決める：毎晩夜更かしするのはNG。週に1回か2回、1時間か2時間のスケジュールがおすすめ
- 締め切りを作らない：リラックスが必要。目的を定めるのは良いことだが、同時に目的を定めないことも大事
- 自由時間もキープする：ぐずぐずと先延ばしにするのはだめだが、全人生をチェックやToDoリストに費やす必要もない。苦労した分楽しむ時間も持つべき
ちょっとした実験といっても、規模の大きな実験の一部、ということではありません。たとえば、データ可視化プロジェクト。時間がかかる作業ですが、小さなタスクに分けるのは簡単です。
- ワークフローをきちんと作る
- 興味深いデータを集める（こちらのAPIリストがおもしろい）
- Node.jsのES2015機能を使い、データを取得・処理する
- いろいろな技術（canvas、WebGL、DOM/SVG）を比較・選択し、ライブラリー（d3.js、p5.js、THREE.js）でデータを可視化する
- 選んだツールを使ってデータを可視化する
私自身は、実験の記録用ツールとしてTrelloを使っています。Trelloで実験のリスト化や計画を作り、必要な情報を追加して実験開始に備えています。大規模なプロジェクトの場合、新規ボードを作ってタスクごとにカードを追加します。もちろん、これ以外の方法でも構いません。いろいろとドキュメント化すると頭の中をすっきりさせるのに便利です。
実験をレビューをしよう
実験には、新しいものに実際に触れて学ぶというメリットがあるのはもちろん、自分のスキルを向上させるすばらしい機会でもあります。実験を見返しながら次のように自問自答してください。
- しっかりした準備をした場合、実験中の問題点は改善されたか。また、どのように改善されたのか
- 実験の質はどうだったのか。また、改善するにはなにができるのか
- 実験の準備をもっと効果的にできた可能性はあったか
実験のレビューや改善からは、Web業界では非常に貴重な経験値を得られます。コミュニケーションやドキュメント化にも効果的です。実験レビューがブログ投稿として使えることが多いからです。
JavaScriptとは関係ありませんが、私が特に楽しいと感じたものにSassでのベクターグラフィックスの作成があります。座標のマップをパスに変換し、シングルピクセルのbox-shadowとして再描画しました。いままでよく知らなかったSassの機能について学ぶだけでなく、アルゴリズムについてもある程度研究しなければなりませんでした。
インスピレーションを見つけよう
なにを勉強すべきか分からないなら、インスピレーションを得るためのリソースを手元に置いておくのがおすすめです。
ビジュアルやアートが好きなら、CodePenから始めることをおすすめします。どのように動くのか分析してみる価値のあるすばらしいペンがたくさんあります。もっと冒険してみたいなら、DribbbleやBehanceもおすすめです。
SitePointは多様な背景を持つ多くの著者によって支えられています。JavaScript ChannelにはJavaScriptならではの良さが詰まっています。
ランタイム環境
JavaScriptがブラウザーで稼働することはすでに知っているとおりですが、ブラウザー以外の場所でJavaScriptを実行できることはどうでしょうか。
- Node.js：非ブラウザー型JavaScriptランタイムとして一番人気がある。Node.jsがあればスクリプトやコマンドライン・インターフェイス、デスクトップアプリを始め多くのものが書ける。WindowsやOS X、Linuxでサポートされている
- Electron：昔ながらのHTMLやCSS、JavaScriptを使ってクロスプラットホーム対応のデスクトップアプリを作成できる
- Cordova：HTML、CSS、JavaScriptを使ってモバイルアプリを作れる
- React Native：Reactのフレームワークを利用してモバイルアプリを作れる
ブラウザーのAPI
ここ数年でたくさんの新しいAPIがブラウザーに導入され、いろいろと楽しいことができるようになりました。
- Service Worker API ：大規模なAPIで、オフラインサポートの提供などいろいろなことができる
- WebRTC：ほかのコンピューターとのリアルタイム接続や、音声・ビデオデータの共有ができる
デバイスハードウェアの使用、センサーの読出し、デバイスにバイブなどの機能を持たせるAPIもあります。
- Ambient Light Sensor（光センサーモジュール）： 周辺の光の明るさ情報を提供する。Webサイトやアプリの最適化に活用できる
- Battery Status（バッテリの状態）：読んで字のごとく、バッテリの状態の開示要求ができる。また、重いアプリケーションに省電力モードの適用もできる
- Geolocation（地理位置情報）：ユーザーの位置情報を把握できる
- Network Information （ネットワーク情報）：容量の小さなファイルをクライアントに提供するときに使える
- Notifications（通知）：チャットアプリなど、あらゆるアプリにとって便利な存在
- Pointer Lock（ポインターロック）：マウス入力を使用するゲーム制作時の友になってくれる
- Proximity（プロキシミティ）：ユーザーとデバイスとの距離を教えてくれる。ハグの検知ができるかもしれない
- Device Orientation（デバイスの方向の検出）：デバイスの向きの変化を検知できる
- Vibration（バイブレーション）：デバイスを振動させる。ゲーム向き
ライブラリーとフレームワーク
ほとんどの場合、ライブラリーの目的は作業をスムーズにすることなので、ライブラリーの経験があっても損することは決してありません。また、仕事に必要なライブラリーとフレームワークは、人気の高いもの（AngularやReactなど）がおすすめです。1回か2回実験すれば、準備は万全になります。
また、ライブラリーとフレームワークはそれほど長続きしないことも覚えておいてください。便利ではあるものの、ライブラリーとフレームワークによって解決できる問題はなにかを知り、ライブラリーとフレームワークなしでも解決できるようにしておかなくてはなりません。
■アーキテクチャ向け
- Angular：いまだ多くのチームに活用されているMVCフレームワーク
- React：ビューのレンダリングに使用するライブラリー
- Polymer：Webコンポーネントの作成に使うライブラリー
- Lodash.js、Underscore.js、Ramda.js：関数型プログラミングライブラリー。好んで使うチームはそう多くないものの、関数型プログラミングはスキルとして高く評価されるので、チェックする価値はある
■ビジュアル向け
- D3.js ：グラフィック・DOM操作ライブラリー。グラフィックをSVGまたはHTMLにレンダリングしたいときに使える
- p5.js：Processing（柔軟なソフトウェアスケッチブック、およびビジュアルアーツのコンテキスト内でのコーディング方法を学ぶ際の言語）にインスピレーションを受け、描画や計算機能を豊富に揃えている
- Three.js：WebGLの難しい部分を省いてくれる、高レベルの3D API
現実世界で使えるアイテム
個人的には、現実世界を変えられるようなソフトウェアが書けるととてもわくわくします。あなたもそうなら、次のようなアイテムの購入を考えてください。
- Raspberry Pi：クレジットカードサイズのシングルボード・コンピューターで、教えたり学んだりするのに最適
- Arduino：Raspberry Piに似ているが、よりエレクトロニクス分野に特化している
- LEGO MINDSTORMS：LEGOハードウェアを操作できるミニコンピューター。嫌いな人はいないはず
- Johhny-Five：ロボット工学やIoT（モノのインターネット）のためのJavaScriptフレームワークで、Arduinoなどのデバイスにインストールできる
すべてJavaScriptでプログラム可能、またはJavaScriptを実行できます。
最後に
ちょっとした実験は、新しいことを実際に試す最高のアプローチです。また、仕事のやり方を改善できるという、この業界ならでは最高のメリットもあります。いくつかのルールを導入するだけで実験が楽しくなり、もっと勉強してパフォーマンスを上げたいというモチベーションを得られます。
※本記事はMark Brownが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：Improve Your JavaScript Learning with Fun Experiments）
［翻訳：加藤由佳／編集：Livit］
