JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
ANGIE / 2016年10月13日 11時50分
どうも、まさとらん(@0310lan)です!
これからJavascriptを学習しようと考えている人、もしくは現在勉強中の人にオススメのコードエディタが無償公開されているのでご紹介しようと思います。
【 Carbide 】
「Carbide」は、プログラミングの構造を視覚的に分かりやすくしてくれたり、ちょっと面倒に感じる部分を強力にサポートする便利な機能が盛りだくさんです。
まだ開発段階で扱いにクセのあるサービスですが、すでに十分な機能が実装されているのでご興味ある方はぜひ参考にしてみてください!
使い方!
それでは、実際に「Carbide」を使いながら、どのようなサービスなのかを見ていきましょう!
まずは、サイトにアクセスして画面上部にある「New」をクリックします。
新規にプロジェクトが作成されて、「コードエディタ」が表示されました!
このエディタを使って、すぐにプログラミングを始められるのですが、まずは独特な操作方法を確認しておきましょう。
「Carbide」は、頻繁に使うことになる重要な「ショートカットキー」が2つ用意されています。
そこで、この「ショートカットキー」をご紹介するために、簡単な「配列」のサンプルコードを用意してみました。
「fruits[0]」が「りんご」を意味していることはすぐに分かると思いますが、一般的には「console.log()」などを使って現在の状態(中身)を確認することが多いのではないでしょうか。
それでは、カーソルを「;」の手前に移動して、1つ目のショートカットキーである「Cmd + I(Ctrl + I)」を押してみてください。
すると、すぐ下に「りんご」と表示されました!
つまり、このショートカットキーは「cnosole.log()」のような感覚で使える機能になっているわけです。
また、コード内ならどこでも利用できて、同時に複数個をチェックすることも可能です!
特に関数などが増えて把握しづらくなってきて「ちょっと確認したい…」という時にとても便利に使えます。
(同じショートカットキーを再度押すと非表示になります…)
さらに、2つ目の「ショートカットキー」として、今度は「Cmd + E(Ctrl + E)」を押してみてください!
すると、専用のウィジェットが表示されたと思います。
このウィジェットには、さまざまなバリエーションがあるのですが、「配列」の場合はそのまま中身を選択できるウィジェットが表示されます。
「①レモン」を選択すると、自動的に「②fruits[2]」と変換されているのが分かります。
これにより、配列の構造を把握しやすくなっており、複雑な多次元配列なども理解しやすいと思います。
また、同じように「オブジェクト」や「JSON」なども見やすいカタチで表示されるので、慣れていない方は学習しやすいでしょう。
この「ウィジェット機能」は、「Carbide」の醍醐味でもあり他にもさまざまな用途に最適化されたカタチで柔軟に表示されるのが特徴です。
例えば、「IF文」で文字列の比較などを行う際に、対象を「①範囲選択」してからウィジェットを表示すると、「②どこが違うから「false」なのか」を可視化してくれるのです。
文字に「色」が付いている部分が相違点となっており、「IF文」がどのように判断しているのかをチェックしたい時に便利です。
また、ゲームプログラミングなどでよく出てくる「Math.sin()」なども、実際にどれくらいの振れ幅で設定しているのかを可視化することができます。
「①points」からグラフのウィジェットを表示して、さらに「②振れ幅の数値」もウィジェットにすれば、スライダーをマウスで動かすだけでグラフが同期しながらアニメーションします。
このように、2種類の「ショートカットキー」を覚えるだけで、「Carbide」の活用範囲がグンと広がるので忘れないようにしましょう!
便利なウィジェット機能をさらに使ってみよう!
「Carbide」の醍醐味である「ウィジェット」を少し紹介しましたが、実はまだまだ便利に活用できる仕掛けが搭載されています。
そこで、いくつかユニークなモノをピックアップして紹介してみようと思います。
例えば、位置情報をプログラミングする時に使う「緯度・経度」は、座標を入力するだけでマップを表示することが可能です!
特別なことは一切不要なので非常に便利だし、複数のポイントを表示させることもできます。
また、16進数の「カラーコード」を調べるケースは多いかと思うのですが、これもウィジェットを表示するだけで自在にカラー指定ができます。
マウスで好きな色を選択するだけで、コードも自動的に変換されるのは便利でしょう。
「日付」を扱う場合にも、カレンダーから好きな「日時」を簡単に設定することが可能!
日付から時間まで、すべてマウスで操作できます。
「画像」を外部から取得するような場合に、「どんな画像だったかな?」という時にはウィジェットで画像を確認することができます。
さらに、正規表現を扱う場合もウィジェットは大活躍します!
というのも、設定した正規表現がどのように表示されるのか、実際のサンプルをいくつか自動的に表示してくれるのです!
これはかなり便利な機能で、間違いを素早く発見できるし、いちいちテストする手間も省けるので大変助かります。
コードを公開してみよう!
「Carbide」で作成したプログラムは、自動的にブラウザへキャッシュされるようになっていますが、GitHubの「Gist」へ永続的に保存することも出来ます。
方法は2種類あって、自分のGitHubアカウントと連携していなければ「①Carbide Public」のGistに保存されて、連携していれば「②自分のアカウント」のGistに保存されるようになっています。
ちなみに、ファイルは1つだけでなく、複数のファイルを作成することも出来ます。
コードエディタの下段(もしくは上段)にマウスカーソルを移動すると、小さく「insert cell」という文字が表示されるのでクリックします。
すると、エディタがもう1つ表示されて、新しいファイルを作れるようになります。
JavaScriptだけでなく、CSSファイルなども作れるようになっており、もちろんすべてのファイルをGistへアップロードすることが出来るようになっています。
まとめ
今回は、ほんの少しの機能しかご紹介できていませんが、とにかく困ったら「ウィジェット」を表示することでいろいろ助けてくれるエディタであることはイメージ出来たのではないでしょうか。
これから、さまざまな機能追加が行われてバージョンアップすると思うので、さらに便利でユニークなエディタに進化すると思われます。
JavaScriptの勉強にも最適なので、ご興味ある方はぜひ一度トライしてみてください!
<参考>
・「Carbide」公式サイト
・「ウィジェット」公式ドキュメント
written by まさとらん(@0310lan)
外部リンク
この記事に関連するニュース
-
日本HP社長も愛用のHyperXブランドから新型キーボード/マウス/バックパックが登場! 実機を試して分かったこと
ITmedia PC USER / 2024年7月12日 12時5分
-
今更more.comを使うのか!? Windowsでのページングを考える
ASCII.jp / 2024年7月10日 12時0分
-
Windowsが今更(?)開発者に優しくなろうとしている!? 「Dev Home」は開発者にとって使い物になる?
ASCII.jp / 2024年6月23日 10時0分
-
Google Workspaceをビジネスで活用する 第89回 ファイルの頭文字検索が可能になった「Googleドライブ」、ショートカットの変更に注意
マイナビニュース / 2024年6月21日 9時0分
-
WindowsでChatGPTを使うならPowerToysの新機能「Advanced Paste」で効率UP!
ASCII.jp / 2024年6月18日 9時0分
ランキング
-
1なぜ?「N-BOX」新型登場でも10%以上の販売減 好敵「スペーシア」と異なる商品力の改め方
東洋経済オンライン / 2024年7月17日 9時30分
-
2ドラマ「西園寺さん」ヒットの予感しかない3理由 「逃げ恥」「家政夫ナギサさん」に続く良作となるか
東洋経済オンライン / 2024年7月16日 20時0分
-
3第171回芥川賞は朝比奈秋さんと松永K三蔵さんがダブル受賞
産経ニュース / 2024年7月17日 18時4分
-
4「ユニクロ・GU・COSのTシャツ」全部買ってわかった“本当にコスパが高い傑作アイテム”
日刊SPA! / 2024年7月17日 18時37分
-
5イケアのモバイルバッテリーに“発火恐れ” 製造不良で一部自主回収…… 海外では事故も発生
ねとらぼ / 2024年7月17日 20時10分
記事ミッション中・・・
記事にリアクションする
![](/pc/img/mission/mission_close_icon.png)
記事ミッション中・・・
記事にリアクションする
![](/pc/img/mission/point-loading.png)
エラーが発生しました
ページを再読み込みして
ください
![](/pc/img/mission/mission_close_icon.png)