シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > プログラミング > JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
注目記事ピックアップ
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/10/13 20:50

JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!

carbide-01 どうも、まさとらん(@0310lan)です!

これからJavascriptを学習しようと考えている人、もしくは現在勉強中の人にオススメのコードエディタが無償公開されているのでご紹介しようと思います。

【 Carbide 】
carbide-02 「Carbide」は、プログラミングの構造を視覚的に分かりやすくしてくれたり、ちょっと面倒に感じる部分を強力にサポートする便利な機能が盛りだくさんです。

まだ開発段階で扱いにクセのあるサービスですが、すでに十分な機能が実装されているのでご興味ある方はぜひ参考にしてみてください!


使い方!

それでは、実際に「Carbide」を使いながら、どのようなサービスなのかを見ていきましょう!


まずは、サイトにアクセスして画面上部にある「New」をクリックします。
carbide-03

新規にプロジェクトが作成されて、「コードエディタ」が表示されました!
carbide-04 このエディタを使って、すぐにプログラミングを始められるのですが、まずは独特な操作方法を確認しておきましょう。


「Carbide」は、頻繁に使うことになる重要な「ショートカットキー」が2つ用意されています。
そこで、この「ショートカットキー」をご紹介するために、簡単な「配列」のサンプルコードを用意してみました。
carbide-05 「fruits[0]」が「りんご」を意味していることはすぐに分かると思いますが、一般的には「console.log()」などを使って現在の状態(中身)を確認することが多いのではないでしょうか。


それでは、カーソルを「;」の手前に移動して、1つ目のショートカットキーである「Cmd + I(Ctrl + I)」を押してみてください。
carbide-06

すると、すぐ下に「りんご」と表示されました!
carbide-07 つまり、このショートカットキーは「cnosole.log()」のような感覚で使える機能になっているわけです。
また、コード内ならどこでも利用できて、同時に複数個をチェックすることも可能です!


特に関数などが増えて把握しづらくなってきて「ちょっと確認したい…」という時にとても便利に使えます。
carbide-08 (同じショートカットキーを再度押すと非表示になります…)


さらに、2つ目の「ショートカットキー」として、今度は「Cmd + E(Ctrl + E)」を押してみてください!

すると、専用のウィジェットが表示されたと思います。
carbide-09 このウィジェットには、さまざまなバリエーションがあるのですが、「配列」の場合はそのまま中身を選択できるウィジェットが表示されます。


「①レモン」を選択すると、自動的に「②fruits[2]」と変換されているのが分かります。
carbide-10 これにより、配列の構造を把握しやすくなっており、複雑な多次元配列なども理解しやすいと思います。


また、同じように「オブジェクト」や「JSON」なども見やすいカタチで表示されるので、慣れていない方は学習しやすいでしょう。
carbide-11 この「ウィジェット機能」は、「Carbide」の醍醐味でもあり他にもさまざまな用途に最適化されたカタチで柔軟に表示されるのが特徴です。


例えば、「IF文」で文字列の比較などを行う際に、対象を「①範囲選択」してからウィジェットを表示すると、「②どこが違うから「false」なのか」を可視化してくれるのです。
carbide-12 文字に「色」が付いている部分が相違点となっており、「IF文」がどのように判断しているのかをチェックしたい時に便利です。


また、ゲームプログラミングなどでよく出てくる「Math.sin()」なども、実際にどれくらいの振れ幅で設定しているのかを可視化することができます。
carbide-13 「①points」からグラフのウィジェットを表示して、さらに「②振れ幅の数値」もウィジェットにすれば、スライダーをマウスで動かすだけでグラフが同期しながらアニメーションします。

このように、2種類の「ショートカットキー」を覚えるだけで、「Carbide」の活用範囲がグンと広がるので忘れないようにしましょう!


便利なウィジェット機能をさらに使ってみよう!

「Carbide」の醍醐味である「ウィジェット」を少し紹介しましたが、実はまだまだ便利に活用できる仕掛けが搭載されています。

そこで、いくつかユニークなモノをピックアップして紹介してみようと思います。


例えば、位置情報をプログラミングする時に使う「緯度・経度」は、座標を入力するだけでマップを表示することが可能です!
carbide-14 特別なことは一切不要なので非常に便利だし、複数のポイントを表示させることもできます。


また、16進数の「カラーコード」を調べるケースは多いかと思うのですが、これもウィジェットを表示するだけで自在にカラー指定ができます。
carbide-15 マウスで好きな色を選択するだけで、コードも自動的に変換されるのは便利でしょう。


「日付」を扱う場合にも、カレンダーから好きな「日時」を簡単に設定することが可能!
carbide-16 日付から時間まで、すべてマウスで操作できます。


「画像」を外部から取得するような場合に、「どんな画像だったかな?」という時にはウィジェットで画像を確認することができます。
carbide-17

さらに、正規表現を扱う場合もウィジェットは大活躍します!

というのも、設定した正規表現がどのように表示されるのか、実際のサンプルをいくつか自動的に表示してくれるのです!
carbide-18 これはかなり便利な機能で、間違いを素早く発見できるし、いちいちテストする手間も省けるので大変助かります。


コードを公開してみよう!

「Carbide」で作成したプログラムは、自動的にブラウザへキャッシュされるようになっていますが、GitHubの「Gist」へ永続的に保存することも出来ます。


方法は2種類あって、自分のGitHubアカウントと連携していなければ「①Carbide Public」のGistに保存されて、連携していれば「②自分のアカウント」のGistに保存されるようになっています。
carbide-19

ちなみに、ファイルは1つだけでなく、複数のファイルを作成することも出来ます。
コードエディタの下段(もしくは上段)にマウスカーソルを移動すると、小さく「insert cell」という文字が表示されるのでクリックします。
carbide-20 すると、エディタがもう1つ表示されて、新しいファイルを作れるようになります。
JavaScriptだけでなく、CSSファイルなども作れるようになっており、もちろんすべてのファイルをGistへアップロードすることが出来るようになっています。


まとめ

今回は、ほんの少しの機能しかご紹介できていませんが、とにかく困ったら「ウィジェット」を表示することでいろいろ助けてくれるエディタであることはイメージ出来たのではないでしょうか。

これから、さまざまな機能追加が行われてバージョンアップすると思うので、さらに便利でユニークなエディタに進化すると思われます。

JavaScriptの勉強にも最適なので、ご興味ある方はぜひ一度トライしてみてください!


<参考>
「Carbide」公式サイト
「ウィジェット」公式ドキュメント



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る