JavaScriptのおベンキョーとしてChrome拡張機能がいいんじゃないかなーと思った話

どうも、こんにちは。まっちーです。

2016年上半期、答えに窮した質問ナンバー1!!

同僚「まっちーさん、どうやってJavaScript覚えたんですか?」
まち「遅延評価勉強法だったかな。案件で必要に迫られて覚えたよ〜」

うん、答えられたようで答えられてないですね。
相手の求めてる回答じゃないですから。
その節は曖昧に濁した回答を致しまして申し訳ありませぬでした。

今回は質問の回答を真面目に考えてみたいと思っておりまする。

javscript-1

どうやって覚えたんだっけ?昔を振り返って

実際、「案件で必要に迫られて〜〜」の部分は事実です。
当時の基本的な業務はPHPのコーディング、サーバーサイドアプリケーションの実装でした。

フローは、マークアップエンジニアの方にHTML, CSS, JavaScriptファイルを用意していただいてから、PHPアプリケーションへの組み込みという流れ。
ここで綺麗にフロントエンドとサーバーサイドの作業を切り分けられれば理想ですが、そうは問屋が卸さないのが世の常。
どうしても横断的な知識と技術が求められます。

それっぽく言えば「実践で習得した」、率直に言えば「やんなきゃいけないから無理やり覚えた!」です。

やったことといえば、人のソース解析して、ググッて、コーディングして、つまずいてを繰り返しました。
オライリーの本を開いたのは「ある程度かける」ようになってからです。
僕は参考書から入るタイプなのですが、JavaScriptに関しては順序が逆でした。
断片的な知識が脳内で急激に体系化されて「キモチぃぃぃぃ俺天才じゃね??」となったとかならなかったとか。

ただ「ある程度かける」というのは曲者で、

  • 動くけど汚い
  • 保守性が低い
  • 構造化されていない or すぐ壊れる

といった素敵コードでございました。

さて、ここ質問です。
先のような素敵コードをなんというかご存知でしょうか?
はい、そうですね、クソコードですね。
自慢じゃないですが量産しましたともそりゃね。
嗚呼、辛くなってきました。

端的に言って、学び方として効率的ではなかった、と思います。

JavaScriptの勉強にたどり着く前の壁

さて、自分の経験ベースでこれがためになったなーというエッセンスを抽出してみると

  • 専門書で体系的に学ぶこと
  • 自分でコーディングすること
  • ソースを解析すること(可能であれば実装者にどうしてそう書いたのか意図を確認する)

というのがよかったように思います。
この3つのサイクルをぐるぐるしましたです。

なんですが、いくつか問題がありました。

まずですね、専門書を読もうにも読めませんでした。字面を追うだけ。
なぜかと言えばコーディングの経験が足りないからです。
自分でコーディングでしてある程度体で覚えないと頭に入ってきません。

ここで壁。
PHPはかけるにしても、HTML, CSSの知識は最小限でした。
つまーり、JavaScriptを組み込むテンプレートをへんてこなのしか用意できなかったんですね。
JavaScriptの勉強したいのにHTML, CSS用意するに必死になっちゃう!
JavaScriptにたどり着いた頃にはもうライフは0よ状態。
だからこそ実案件(HTML, CSSが提供される場)が、学習の場かつ本番になっていたように思います。
そうすると曖昧な知識で動かせてしまうJavaScriptのデメリットがでてしまいます。
自分しか触らないクソコードは被害ないですが、案件に入ってしまうとアウチです。

あと、じゃあ自分で何か作ってみようと思った時に、0→1作るのってしんどかったんですね、性格的に。
1→10のが得意。

そういうときにこれ知ってればな〜と今になって思うのが、本日の主役、Chrome拡張機能です。
やっと登場。前振り長かったな。

ce

Chrome拡張機能

What are extensions?

Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS.

HTML, JavaScript, CSSで作れるChromeブラウザの拡張プログラムですね。
JavaScriptの学習としてのオススメポインツは他人の作ったサイトを拡張できること【超重要】です。
つまり自分でHTML, CSSを用意しなくていいということですね。
すでにできあがっているサイトを拡張するので10→11の作業にのみに集中できます。
ちょっとかゆいとこだけ、自分が欲しい機能だけ実装すればいい。
スバラシイナァ-

Chrome拡張機能の作り方

Chrome拡張機能の作り方はチュートリアルを読んでいただければと。
英語ですがめちゃ簡単なのでゆっくり読んで動かしてみてください。
Getting Started: Building a ChromeExtension

僕の方で今回作ってみたのがこれ
※実はこの記事は作ってみた勉強会の出し物だったりします。

Google Keep検索ショートカットです。
EvernoteからGoogle Keepに移行したのですが、Windowを開いてから検索するがめんどくさく感じてきたので作ってみました。
(ローディングの待ち時間の間に検索ワード忘れちゃうんですよね。オジサン脳。)
非常にシンプルなものでして、実装時間にして0.5〜1時間くらいでしょうか。
明らかにこの記事の方が時間がかかっております。

クローンしたディレクトリ or zipをダウンロードして展開したディレクトリを下記ページにドラッグアンドドロップでインストールされます。

chrome://extensions/

※URLに直接入力してください

ChromeにはJavaScript APIsが用意されていて、検索ワードの保存に、 chrome.storage を使用していますが、その他は通常のWebアプリケーションのコードと何も変わりません。

試しに、index.htmlをブラウザで直接開いてもらうとテキストボックスだけのページが開くと思います。
これをポップアップで表示しているだけですね。
※chrome.storageが使用できないので検索は動作しません。index.htmlの24行目をコメントアウト、25行目をアンコメントしていただくと動作します。

jQueryもつかえますし、CSSフレームワークにはTwiiter Bootstrapをつかっています。
まずは普通のWebアプリケーションを作るのと同じ要領で動かせることを理解していただければおっけーです。

Content Script

Chrome拡張はContent Scriptと呼ばれるスクリプトを任意のページで実行することができます。 好きなページで自分の書いたJavaScriptを実行できる、ということです。

他人の作ったサイトを拡張できる【超重要】

ですね!

サンプルとして こちら の拡張機能をさきほどと同じ要領でインストールしてみてください。
【重要】このブログを読んだあとはこちらの拡張機能を削除することを強く推奨します。

インストールしたら弊社サイトにアクセスして画像にマウスを置くと 役員の素敵画像がランダムで表示されます。
素敵デスネ。

このように任意のページでスクリプトを実行することができます。
ページに指定にはワイルドカード(*)が使用できます。
今回は

http://www.s-arcana.co.jp/*

とmanifest.jsonに定義していますので、このページもリロードすると素敵画像が見られると思います。
まだまだ素敵が足りないよ!!という方はどうぞ。

directory

特筆すべきはこのディレクトリ構成。
manifest.json以外、JavaScriptファイルしかありません。
HTML, CSSをまったく書くことなくJavaScriptがかけます!。

JavaScriptの勉強したいのにHTML, CSS用意するに必死になっちゃう!

この過程をスルーできちゃう。
楽ちんだナァ〜

具体的な作り方については下記をご参照ください。
Chrome拡張の開発方法まとめ その1:概念編

まとめ

JavaScriptは動かすは易し、コントロールは難し、と言った印象があります。
中途半端な知識で動かせるけれど、実案件で通用するかはまた少し別のお話。
Chrome拡張機能であれば、クソコード迷惑かけないですし、JavaScriptから書き始められます。
自分の欲しい機能を追加できる手軽さがありますし、素晴らしい機能であれば配布も容易です。

JavaScriptのコーディング機会して活用してみてください〜

余談

下記の3つめについて補足デス。

  1. 専門書で体系的に学ぶこと
  2. 自分でコーディングすること
  3. ソースを解析すること(ついでに実装者にどうしてそう書いたの聞いてみる)

どうして実装者に聞くのがいいのかデス。

例えばクラスの継承について。
PHPであれば

class Foo extend Bar {…}

と書きます。
PHPの機能としてextendが用意されています。

が、JavaScriptにはありません。
(ありませんでした、正確ですね。ES2015でextendのシンタックスが使えるようになりましたが一旦置いといて。。)
継承と同じようなことを実現するテクニックがあるので実装は可能です。

ただここで問題がありまして、テクニックで実現するとキーワードがないのでググるのが難しいのです。
そうなると解析が行き詰まります。
そのため実装者にどういう目的でコーディングをしているのか聞いてみるとキーワードが拾えて調査が捗ると思います。

継承のほかにはは即時関数(手段)でスコープを作る(目的)なんかもそうですね。
目的がわかればググれます。
スコープとは、なぜスコープが必要なのか、グローバル汚染とは、と順を追って調べることができます。
キーワードがわかれば自習がはかどりますので、あまり遠慮せずに聞いてみるといいと思いますよ〜。

余談おっしまい。