コード共有サービスを利用してサンプルコードの動作確認を行う
AngularJSのコードをサイトに直接埋め込んで動作確認をしてしまっているので、外部のコード共有サービスを利用できないかどうか確認してみました。サービスはいくつかありますが、今回確認したのは「Plunker」「CodePen」「JS Bin」「JSFiddle」の4つです。
目次
- Plunker
- CodePen
- JS BIn
- JSFiddle
- まとめ
Plunker
まず、Angular系の公式サンプルでも利用されているのが、この「Plunker」です。確認したコード共有サービスの中では唯一、ファイルの分割に対応していました。
① AngularJSベースで作成するには、左上の「New」からAngularJSと使用するバージョンを選択して、新規作成します。
② 新規作成後、最小限の構成（index.html、style.css、app.js）でファイルが作られます。
③ ファイルを追加する場合は、左のサイドメニューから「New file」を選択し、ダイアログにファイル名を入力します。
④ ダイアログで「OK」を押すと、FILES配下にファイルが追加されるので、index.htmlに追加したファイルを読み込ませます。
⑤ 作成したコードを保存する場合は、左上の「Save」ボタンを押して保存します。保存されるとブラウザに表示されているURLが変更されるので、他の人と共有したい場合はこのURLを貼り付けて送付します。
⑥ 削除する場合はゴミ箱アイコンのボタンを押します。共有した人から削除されないようにするためなのか、保存時と同じブラウザでないとこのボタンは表示されませんでした。
CodePen
よくデザイン系のサンプルコードでお世話になっているのがこちらの「CodePen」です。AngularJSで利用する場合、専用のテンプレートなどは見当たらなかったので、自分ですべて記述しないといけません。
また、HTMLには<html>や<head>タグは記述できないので、CodePen用にコードを成形しないと動作しませんでした。
① 新規作成
② HTML左横の設定アイコンを押して設定ダイアログを開き、<script>タグを追記します。
③ 上記②とは別の方法で外部ファイルを参照するこができ、その場合、同じ設定ダイアログのJavaScriptタブで外部JSファイルを指定します。
④ 設定ダイアログを閉じて動作確認が済んだら中央上の「Save」ボタンを押して保存します。Plunker同様にURLが変わるので、共有したい場合はこのURLを送付します。保存後、以下のダイアログが表示されます。
JS BIn
JSFiddle
まとめ
Angularベースでサンプルコードの動作確認、共有といったことを行う場合、やはり新規作成時にAngularのプロトタイプのコードが展開される「Plunker」を使うのが手間が省けて良さそうでした。
ただ、今回確認したサービスはすべてTypeScriptに対応しているようだったので、ファイルの分割さえしないのであれば、どのサービスも使おうと思えば使えそうです。（Angular2や4、TypeScriptでの動作は確認していません）
また、どの共有サービスも試しに利用する程度であればログインなしで利用できるので、自分が利用してみたい言語やフレームワーク、ライブラリなどが使えるどうかは事前に確認できます。
あと、CodePenに関してはアニメーションやCanvasを使って作成したコードを他の人に見てもらいたい時に利用する感じでしょうか。
細かく見ていけば使い勝手の差はもっと出てくると思いますが、ざっと確認した限りは以上です。