JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発&発行できる「JS Bin」
2009年10月23日-
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発&発行できる「JS Bin」というサイトを発見。
ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。
また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。
サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。
JavaScript 編集機能
JavaScript のタブ。コードもうまくハイライトされています。ダブルクリックでコードの編集が可能です。
HTML編集機能
HTMLのタブ、HTMLが記述されていて、こちらもハイライトが綺麗にされています。こちらもダブルクリックでコード編集可能。
JSフレームワーク読み込み機能
jQueryやprototypeなどのJSフレームワークを読み込むのもかなり簡単で、ドロップダウンから選べば自動的にHTMLのソースコードに挿入されます。
環境をまず整えるのに、HTMLを書いて<script src="〜"></script> と書いた上で、更に適切なパスに調整しなければいけませんでしたがこれだと速攻で環境を用意できて、必要なライブラリもインクルードできるので実際のコードをすぐ書けて便利です。
アウトプット機能
実行結果も、Output タブを開けば即座に表示されます。
パブリッシュ機能
ページ上部の「Save to public URL」ボタンでスクリプトを保存できます。
Permalink も発行されて、そこにアクセスすると編集したスクリプトが実行されます。
発行したページ: http://jsbin.com/iloqu3
JavaScript をこれから学ぼうっていうときにこういうツールがあったらよかったなぁ…、と思いました。
これからJavaScript を学習しようと思っている方は是非とも覚えておきましょう。
サイトは以下より
JS Bin - ブラウザ上のJavaScript 実行&パブリッシュ環境
JavaScript情報サイトのJavaScriptistもよろしくお願いいたします。
最新のブログ記事(新着順)
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 過去のエントリ