どうも、まさとらん（@0310lan）です！
今回はJavaScriptを変わった方法で実行できる無料のオンラインエディタをご紹介します！
nattoは、無限の広さのキャンバスを持ったエディタです。このキャンバス上には複数のブロックを作成できます。ブロックのひとつひとつはコードエディタの役割を持っていて、作成したブロック同士を相互に連結させながら、プログラムを組み立てることができます。
簡単なWebアプリなども開発できるので、JavaScriptの新しい体験をしてみたい人はぜひ参考にしてみてください！
なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができます。
【 natto 】
■「natto」の使い方
それでは、「natto」の基本的な使い方から詳しく見ていきましょう！
ひとまず利用するだけならログインは不要です。サイトにアクセスすればすぐに専用のエディタが表示されます。
エディタのキャンバス上を右クリックするとメニューが表示されるので【add eval】を選択してみてください。
以下のような「評価ペイン」というウィンドウが作成されます。
これは単純な四則演算やJavaScriptの式を評価して実行できる機能を持っています。簡単にいえば小さなコードエディタというわけです。
たとえば、ボックスに「10+50+40」と入力すれば結果が出力されるのが分かります。
また、配列に格納されている数値をmap()で1ずつ足していくような処理も可能です。
さらにfetch()を使ってWeb APIを活用した通信処理も実行できます。
たとえば、GitHubのAPIを利用して「JavaScript」に関連するリポジトリ情報を取得するには以下のコードを入力します。（console.logは不要です）
fetch('https://api.github.com/search/repositories?q=javascript').then(data => data.json())
JSONデータが取得できているのが分かりますね。
この状態で今度は右上にある「矢印アイコン」の部分を、キャンバス上の空いている箇所にドラッグ＆ドロップしてみてください。
すると新しい「評価ペイン」が自動生成されて相互に連結されます。
出力されているのはさきほど取得したJSONデータです。このペイン上ではJSONデータが「value」という変数に格納されています。
そのため、たとえば「value.items」と入力すればJSONデータにある「items」プロパティの中身だけを出力させることができます。
ここでキャンバス上の空いている部分を右クリックして【add table】を選択してください。
そして「items」プロパティを出力しているウィンドウの矢印アイコンを、「テーブルペイン」のウィンドウにドラッグ＆ドロップします。
すると「items」プロパティの中身が整形されてテーブル上に出力されます。
このように「テーブルペイン」は配列などのデータを視覚的に見やすくしてくれます。
また、ヘッダー部分をクリックするとソート機能によって並び替えることもできます。
さらに、任意のヘッダー部分をキャンバス上の空いている部分にドラッグ＆ドロップしてみましょう。
すると選択したヘッダー列の箇所だけを抽出して出力できます。
このように取得した結果をドラッグ＆ドロップで別のペインと相互に連携することで、視覚的に分かりやすいデータへ簡単に変化させられるわけです。
ちなみに各ウィンドウが糸をひいて連結されているように見えることから、このWebサービスの名称が「natto（納豆）」と命名されたとのことです。（参考リンク）
■天気予報アプリを作ってみよう！
「natto」の基本的な操作が分かったところで、今度は簡単なサンプルデモを作ってみましょう。
以下の天気予報APIを利用して「東京都」の天気を出力するという簡単なものです。
＜天気予報API＞
https://weather.tsukumijima.net/
天気予報APIを利用して東京都の天気情報を取得するURLは以下のとおりです。
https://weather.tsukumijima.net/api/forecast/city/130010
上記を踏まえながら、新しい「評価ペイン」を作成して次のコードを入力してみましょう。
fetch('https://weather.tsukumijima.net/api/forecast/city/130010').then(r => r.json())
東京都の天気情報をJSONデータで取得できているのが分かりますね。
次にこのJSONデータから必要な情報だけを抽出してみましょう。今回は3つの情報を取得するようにします。
- 天気のタイトル
- 日付
- 画像URL
そこで、さきほどの「評価ペイン」から矢印アイコンをドラッグ＆ドロップして新しいペインを作成します。冒頭でも解説しましたが、JSONデータは「value」という変数に格納されるので、「value.title」とすれば天気のタイトルが得られます。
そして、最初に作ったペインの矢印アイコンからもう一度ドラッグ＆ドロップして別の「評価ペイン」を作成します。
今度は「value.forecasts[0]」と入力して天気予報の情報だけを抽出します。
さらにこのペインからドラッグ＆ドロップで2つの新規ペインを作成して、日付と画像URLの情報だけを抽出します。
日付は「value.date」、画像URLは「value.image.url」で抽出できます。
これで必要な情報がそろいました！
次に、キャンバス上の空いている部分を右クリックして新規の「評価ペイン」を作成します。そして、上部のオプションから【HTML】を選択しておいてください。
「HTML」を選択することで、このペインにHTMLを記述できるようになるのです。
そして、これまでに抽出した「タイトル」「日付」「画像URL」のペインをドラッグ＆ドロップして3つの情報を「HTML」のペインに合体させます。
それぞれの連結部分をクリックして分かりやすい名称を設定しておくといいでしょう。
ここで設定した名称は評価ペイン上で ${title} のように記述して使うことができます。
あとはHTMLを記述するだけで天気予報が表示されます！
' <h1>${title}</h1> <p>${date}</p> <img src="${title}"/> '
今回のサンプルみたいに「評価ペイン」の出力結果を別の「評価ペイン」の入力として相互に利用できる仕組みがあるので、活用することでさまざまな使い方ができるようになっています。
■Canvasでお絵かきしてみよう！
「natto」ではCanvasを使った簡単なグラフィック処理もできるので合わせて解説をしておきます。
まずは新規の「評価ペイン」を作成して、オプションから【DOM】を選択します。
次にJavaScriptからCanvas要素を生成します。
document.createElement('canvas')
これでこのペインはCanvas要素になるので、自由にお絵かきができます。
そこで、ドラッグ＆ドロップから別のペインを作成して、「canvas」という名称を設定しておきましょう。
新しく生成したペインはオプションから【function body】を選択しておきます。
これで接続元のペインに処理を返すことができるようになります。
あとは通常のCanvas処理と同じようにグラフィックを扱うことができます。たとえば、以下のコードを入力して四角形を描画してみましょう。
var ctx = canvas.getContext('2d'); ctx.fillRect(10,10,100,100);
接続元のペインを見てみると、塗りつぶしの四角形が描画されているのが分かります。
これでCanvasを利用したお絵かきができるようになったわけです！
このようにペインのオプションを組み合わせることで、さまざまな活用法が得られるのでぜひいろいろ試してみてください。
■npmパッケージの読み込みについて
「natto」はSkypackを利用してNode.jsで使うnpmパッケージを読み込んで利用できる機能があるのでご紹介しておきます。
まずはキャンバス上で右クリックから【add define】を選択します。
これで「定義ペイン」が作成されます。
そこで便利な関数を提供するパッケージの「lodash」を読み込んでみましょう。以下のコードを入力してください。
import('https://cdn.skypack.dev/lodash')
すると正常にパッケージが読み込まれたことを意味する出力が確認できます。
次にウィンドウ右上をクリックして名称を設定します。「lodash」は一般的にアンダースコアが使われるので「 _ 」を設定しておきます。
これですべての「評価ペイン」にて「lodash」が使えるようになりました。
試しに新しいペインを作成して、以下のコードが正常に動作するか確認しておきましょう。
_.isString("Hello natto")
問題なければ「true」が出力されるはずです。
■プロジェクトの書き出しについて
「natto」のエディタ上部にあるオプションアイコンをクリックすると、プロジェクトの公開や書き出しの実行ができるようになっています。
【publish canvas】を選択するとネット上にプロジェクトを公開できるようになります。専用のURLが生成されるのでシェアすれば誰でも閲覧できるようになるわけです。（無料のユーザー登録が必要です）
【export script】を選択すると、プロジェクトをそのままJavaScriptのソースコードに変換してくれます。
<script type="module">
上記のタグを利用してコードを実行できるようになっていますが、まだ現時点では実験的な機能なので完全に再現されるわけではありません。（生成されるmain関数を実行することで動作します）
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回はJavaScriptのコードをインタラクティブに連結＆実行できるエディタをご紹介しました！
「natto」はまだ開発段階であり、毎日のように改善と新機能の追加が行われています。
エディタはどんどん使いやすくなっており、できることも増えているので今のうちから操作に慣れておくとユニークな体験ができるはずです。
JavaScriptを利用したWeb開発に興味ある方も含めて、ぜひみなさんも楽しいプログラミングの世界を体験してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
