JavaScriptのアプリを共有するWebサービスを比較してみた

始めに

皆さん、初めましての方は初めまして。そうじゃない方は、……なんでしょうね? まあ、こんにちは。拓殖大学ディジタルコンテンツ研究愛好会のみっきぃというものです。普段はJavaScript(以下、JS)を触ったりWorld of Tanks*1で遊んだりしてます。よろしく。

 

さて、皆さん、私はJSが好きです。日ごろ、暇なとき等に、思いついたものをその場でパパッと実装したりするのにはちょうど良いシンプルさと、それなりに凝ったものを腰を据えて実装する、という場合にも対応しうるパワフルさを備えた言語だと、私は思います。

 

そんなJSを学んでいると、サンプルプログラム等を表示するために、JSのプログラムをシェアするサービスを用いたサイトを見かけることが多々あります。今回は、そういったWeb上で見られる幾つかのサービスを、実際に触ってみた感想を含めて簡単に紹介していきたいと思います。

 

サービスの紹介

今回は四つのサービスを比較してみました。それでは早速それぞれのサービスを見ていきましょう。

jsdo.it

jsdo.it

 

こちらは日本国内の企業が提供しているサービスです。コードの投稿にはアカウントの作成が必要ですが、GoogleアカウントやTwitterアカウントを使用することができるため、手軽に使い始められますね。

 

jsdo.itの特徴としては、

  • 日本語で登録されている物が多い。
  • JS以外にもTypeScriptやCoffeeScriptにも対応している。
  • 他の方が投稿した物をフォークすることができる。

こういったところでしょうか。使っていて少し不便に感じることは、コードの自動保存機能が備わっている反面、保存されるたびにページが遷移したことになってしまい、一度コーディングを始めると履歴が大変なことになってしまう、という点ですかね。しかしこれはサービス全体の質の高さから考えればささいな問題ですね。

 

CodePen

codepen.io

 

こちらは雑に言うと海外版jsdo.itです(こちらが先かな? よぐわがんね)。こちらもコードの投稿、保存にはアカウントの作成が必要ですが、アカウントを作成しなくても、コードの入力、実行は可能です。こちらの場合、他のサービスのアカウントを使用することが出来ないので要注意です。

 

CodePenの特徴としては、

  • 海外、特に英語圏からの投稿が多い。
  • 最新の技術を使用したデモ等が多く見られる。
  • 投稿に対してコメントを付けることができる。

といったところですね。こちらもページの保存を行うとページ遷移が発生するのが悩みどころです。また、個人的には入力画面は良いとしても、結果を表示する部分が少し見づらいな、と感じますね。しかし、投稿に対してコメントを付けられる機能に見られるように、jsdo.itとは違った方向性でコードのシェアを図っているのが面白いですね。

 

JSFiddle

jsfiddle.net

こちらも海外のサービスとなります。こちらも登録不要でコーディング、実行は可能ですが、保存にはアカウントが必要となります。また、他のサービスのアカウントを使用することはできません。

 

JSFiddleの特徴としては、

  • シェアリングサービスというよりは個人的な作業ページとしての色が濃い。
  • そのためか、エディタ画面がフロントページとなっている。
  • 自身のコードをフォークして管理することができる。

といった感じです。jsdo.it、CodePenとは色の異なるサービスですが、埋め込みパーツの作成が非常に簡単であったり、非常にシンプルなUIにまとめあげられていたりと、個人的には使い勝手は良い印象を受けます。見た目にわかりやすい、ということはかなり重要な事だと個人的には思いますね。

 

JS Bin

JS Bin - Collaborative JavaScript Debugging

 

こちらも海g(ry。こちらもログインせずに入力実行は可能、保存にはアカウントを欲求されます。このJS Binは、GitHubのアカウントでログインすることが可能なのが嬉しいですね。

 

特徴としては、

  • GitHubとの連携機能が強力。
  • 開発、運営者がブログを運用しており、ページの今後の動向などが把握しやすい。
  • 作業ページの切り替えが格別に便利。

といった感じです。GitHubとの連携の恩恵の一つとして、ライブラリの更新がリアルタイムで反映される、という点が大きいと思います。また、dropboxにバックアップを取ることもできるなど、外部のサービスと積極的に連携しているのも特徴と言えると思います。

 

まとめとして

 今回紹介したサービスは全てコードを埋め込みの形で外部のページに表示することができます。

こういった感じですね。この埋め込みについても、それぞれのサービスで微妙に形態がことなっていたりして、面白く感じます。

 

私は普段はjsdo.itを利用しています。他の方が書いた様々なコードに触れることで、新しいアイデアを思いついたりすることもよくあります。こういった背景から、jsdo.itやCodePenはコードを作成、実行する場であると同時に、共有するための場でもある、ということが前面に押されているように感じます。

 

JSFiddleやJS Binはサービス上では他の方が書いたコードに積極的に触れていくことはあまりありませんが、シンプルな環境で素早く動作確認ができたり、他のページの埋め込みもシンプルであったりと、より実装向けなサービスである、という印象を感じています。

 

場面に応じて、いずれのサービスを利用するかを分けられるようにしていきたいですね。

 

皆さんもこれらのサービスを利用してJSでのんびり実装、していきませんか? といったところで今回はここまでです。

 

あとアドベントカレンダーのこと

この記事は拓殖大学ディジタルコンテンツ研究愛好会のアドベントカレンダー2016に参加しています。よろしければ他の記事もどうぞ~

www.adventar.org

 

 

*1:戦車をテーマにしたオンラインゲーム、PCの他にPS4、XBOX360等でも配信中。みんな、やろう!