環境構築は重労働です。

近年では仮想環境の構築も随分楽になりましたが、インストール中にエラーが発生したりバージョンが違ったりすることもあります。

そのまま時間だけがどんどん過ぎていき、問題が解決できたときには既に夕方になっていたという経験はありませんか。

またフロントエンドの環境構築は速度的な問題から、開発ではローカルにインストールする場合が多いと思います。

調べた技術をちょっと試したいだけなのに環境を汚したくないという方もいるのではないでしょうか。

加えて作ったコードを共有したい・ブログに載せたいけれど、コードが見づらい・読者の環境で動かないなどの体験談もあります。

本記事はそんなちょっとした不便を解決するオンラインエディタの紹介記事です。


JSFiddleとは

JSFiddle（ジェイエスフィドル）はHTML・CSS・JavaScriptコードスニペットを共有できるオンラインIDEサービス・コミュニティです。

  • JSFiddle – Code Playground

HTML・CSS・JavaScriptの簡単なコードの実行・動作確認、編集したコードの保存・共有を行うことができます。

jQuery公式サイトではバグレポートを送信する際に、JSFiddleでデモ・テストケースへのリンクを提供して下さいとアナウンスされています。


JSFiddleの使い方

JSFiddleのサイトにアクセスすると、ボイラープレートの案内と4種類のテキストエリアが表示されている筈です。

まずはこれらの使い方を把握しましょう。


注意事項

フィドルにはURLを知っていれば誰でもアクセスすることができます。

フィドルとはJSFiddleで作成し保存するこれらのソースコードのことです。

個人情報などの漏洩してはいけない情報は入力しないようにしましょう。

またログインの有無で利用できる機能が異なります。以後、ログインした前提で説明を進めてまいりますのでご了承下さい。


ボイラープレートの選択

ボイラープレートはフィドルの雛形です。以下のような種類があります。

  • jQuery
  • Vue・React・React + JSX・Preact
  • TypeScript・CoffeeScript
  • SCSS・CSS Grid
  • Bootstrap・PostCSS

ここでは試しにjQueryを選択してみましょう。

画面が再読み込みされると、各々のテキストエリアにソースコードが、Resultパネルに実行結果画面が表示されている筈です。


HTML・CSS・JavaScriptを編集

試しにHTMLの文言を変更してみましょう。またはCSSの背景色・文字色などの変化が分かりやすい箇所であればどこでも構いません。

この段階ではまだResultパネルは元の表示のままです。書き換えたコードの結果を表示するにはフィドルを実行する必要があります。


フィドルを実行する

「Run」ボタンを押してみましょう。Resultパネルの表示が変化します。


保存・更新する

「Save」ボタンをクリックするか「Ctrl＋S」ショートカットを打つととフィドルが保存され、ヘッダーの表示が変化する筈です。

保存を繰り返すとURL末尾の数字が増えていきますが、これはバージョンを表しています。


JSFiddleの機能

JSFiddleの主な機能について紹介していきましょう。

  • パネル設定
  • エディタ設定
  • 外部リソースの追加
  • フィドルの埋め込み


パネル設定

各パネルの言語・フレームワーク・オプションなどが指定可能です。

例えば「HTML」をクリックするとLANGUAGE・DOCTYPE・BODY TAGの入力フォームが出現します。

DOCTYPEからはHTML 5だけでなくXHTML 1.0 Strict・HTML 4.01 TransitionalなどのDOCTYPE宣言の指定が可能です。

また「CSS」をクリックするとLANGUAGE・OPTIONSの入力フォームが出現します。

CSS・SCSS・SASSなどから言語を選択可能です。OPTIONSからNormalized CSSオプションを有効にすれば、Normalize.cssを適用できます。


エディタ設定

エディタのパネル配置や表示内容をカスタマイズする機能です。「Settings」ボタンを押すとメニューが表示されます。

エディタのレイアウトはClassic・Bottom results・Tabs (columns)などいくつか種類があるので、気に入ったものを選んで下さい。

また一般的な設定や動作も調整できるようになっています。本格的に使い始める前に一度覗いてみることをおすすめします。

いくつかの設定を紹介しておきましょう。

  • 行番号
  • 折り返し線
  • インデント（タブかスペースか・サイズなど）
  • コードの自動実行
  • 実行時にコンソールをクリアするか
  • ボイラープレートバーの表示頻度を下げる


外部リソースの追加

「Resources」からパネル設定にはない外部のJavaScript・CSSの読み込みが行えます。

サードパーティ製のjQueryライブラリを少し試したい場合など非常に便利です。

また動的リソースの取得も可能です。詳細な手順については公式ドキュメントを参照下さい。


フィドルの埋め込み

ブログやWebサイトに埋め込むHTMLタグを生成できます。「Embed」ボタンからメニューを開いて下さい。

どのパネル表示有無・テーマの選択・簡単なスタイルのカスタマイズが行えるようになっています。

たったこれだけです。

種類はscript・iframeの2種類から選べるようになっています。


JSFiddleのメリット

JSFiddleにはどのようなメリットがあるのでしょうか。

JSFiddleだけのメリットというよりは、オンラインエディタ全般のメリットをJSFiddleに寄せて解説することになります。

後述しますがオンラインエディタは基本的な機能は同じで、エディタ以外の付加価値やプランが違うものが多いです。

中でもJSFiddleは機能がエディタ中心に絞られているので、本当の意味でオンラインエディタのメリットについて確認しやすくはあります。

それでは順に解説を進めていきましょう。


基本無料で利用可能

基本無料で利用することができます。

またアカウント登録なしで利用が可能です。


正しい動作環境を直ぐに構築

環境構築に時間や手間がかかるのは冒頭で説明した通りです。

HTML・CSSだけであればまだ良いですが、JavaScriptフレームワークまで含めるとなるとバージョンまで合わせなければなりません。

そこまでして構築したとしても、正しい環境とは限りません。開発中にデバックしていて変だと思ったら設定が違った話はよくあります。

JSFiddleを利用すれば直ぐにコードを書くところからスタートできる上、起きたエラーを環境と切り離して考えることが可能です。


動かせる環境とコードを共有

同様に環境差異によるエラーも円滑な開発を阻害します。

もし本気で環境差異をなくそうと思ったらどうすれば良いでしょうか。

Gitリポジトリを作成してファイルを全て共有し、共有された側はローカル環境で動かす準備をしなければならないでしょう。

JSFiddleはURLを共有するだけで、そのURLを知っている誰もが同じ環境を共有し事象を確認できる仕組みです。


JSFiddleのデメリット

JSFiddleにデメリットはないのでしょうか。


一部の機能は有料

プライベート フィドル・グループ・広告非表示などのいくつかの機能を利用するには月額料金を支払わなければなりません。


JSFiddleへのアクセスが必要

JSFiddleに障害が発生したりメンテナンス中だったりすると、エディタ画面にアクセスできなくなります。

また当然オフライン環境では使えません。


CodePenとの比較

競合のオンラインエディタにCodePenがあります。

JSFiddleとCodePenのサービスを比較してみましょう。


CodePenとは

フロントエンド開発者のプレイグラウンドです。

JSFiddleでフィドルと呼んでいたものはCodePenではPen（ペン）と呼びます。

CodePenにはProject・Post・Collectionなどの機能もあります。


JSFiddleとCodePenの比較

JSFiddleではHTMLしか選択できませんでしたが、CodePenではMarkdownやSlimなどマークダウンや他のテンプレートエンジンを選択できます。

CSS・JavaScriptについても同じで、選べる言語の種類はCodePenの方が多いです。

また有料にはなってしまいますが、Project機能で複数ファイルを扱うことができます。

機能的にはCodePenの方が充実しているものの、その分画面上から特定の設定項目やオプションを探すのが大変だと感じました。

シンプルにソースコードのみを扱いたい方は、JSFiddleの方が使い勝手が良いかもしれません。


CSSDeckとの比較

CSSDeckはその名の通りデザイン寄りのギャラリーサイトのイメージが強いです。

JSFiddleとCSSDeckの機能はどのくらい違うのでしょうか。


CSSDeckとは

ボタンやガジェットなどのサイト部品をHMTL・CSSで実装し、これを一覧表示できるようにしたサイトです。

開発者寄りというよりはデザイナー寄りかもしれません。

CSSDeckにはCodeCastと呼ばれる独特の機能があります。これはユーザーがどのような手順でファイルを編集したかを記録する仕組みです。

他のユーザーが後から再生し修正手順を確認することができるようになっています。


JSFiddleとCSSDeckの比較

CSSDeckでもCodePenと同等かそれ以下の複数の言語を扱うことが可能です。

比較すべきはやはり機能よりも利用者の傾向でしょう。

CSSDeckには優れたデザインのテキストや洗練されたUI部品が豊富に揃っています。


JS Binとの比較

JS BinはJavaScript寄りのサービスです。

JSFiddleとJS Binの差異について順番に見ていきましょう。


JS Binとは

Web開発用の言語を試用するためのツールです。

JSFiddleでフィドルと呼んでいたものはJS BinではBin（ビン）と呼びます。


JSFiddleとJS Binの比較

JS BinはJSFiddleと同様、ソースコードの編集・共有以外の機能はあまりありません。画面上のUIはスッキリしています。

JS Binもプライベート ビンの機能は有料サービスです。

日本語の記事が豊富で内容もきちんとしたものが多い印象を受けました。特定の層から強い指示を得ているようです。

JS Binが他のサービスと異なる点は埋め込みコードからも編集が行えるところでしょう。

通常他のオンラインエディタの共有サービスでは、サイト上のリンクからオンラインエディタ画面に飛んだ後に編集を行います。


オンラインエディタの使い分け

機能的には細かい部分が異なりますが、基本的にコードの編集・共有が行えることに違いありません。

機能を比較していった際に、自分のやりたいことができない場合は選択肢が絞られてきます。

例えばMarkdownを使いたいならJSFiddleが対応しない限り他のオンラインエディタを利用する必要があるでしょう。

また安定性や運営状況も大事です。一部のサービスではプラン変更や障害などで埋め込みリンクが切れている場合もありました。

迷っている場合はCodePenを利用するのがシェア的にも安定性的にも良いと考えます。

もし画面を見て機能が多すぎると感じた方は、まずJSFiddleを使用して慣れてみると良いです。


おわりに

オンラインエディタを使いこなせるようになれば、新しいフロントエンド技術への敷居が低くなるでしょう。

SNSやチャットツールを通じて気軽にソースコードを共有しても良いと思います。

Webサイトの技術記事やブログの埋め込みをレベルアップさせても良いかもしれません。

会社の勉強会でスライドに映しながらリアルタイムにソースコードを編集することもできます。

これらはあくまで一例に過ぎませんが、オンラインエディタを活用する手段は他にも沢山ある筈です。

折角便利なサービスが沢山あるのに、使わないでいるのはもったいないと思います。

上手く自身の開発者生活に取り入れ活用していきましょう。