paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

JavaScript環境で使えるJupyter Notebook風のWebサービス「Dnotebook」を使ってみた!

f:id:paiza:20210113115713j:plain
どうも、まさとらん(@0310lan)です!

今回はJavaScript環境で動くJupyter Notebookのような無料Webサービスをご紹介します。

インタラクティブに動作するJavaScriptを活用したドキュメント作りが可能であり、学習用途はもちろんのことデータ分析・可視化・機械学習・プロトタイプ作りなど、さまざまな用途に活用できるのが特徴です。

JavaScriptを使ったドキュメント作りにご興味ある方はぜひ参考にしてみてください!

ちなみにJavaScriptの基本は、paizaラーニングの「JavaScript入門編」で学ぶことができます。

Dnotebook

f:id:paiza:20210113115801j:plain

■「Dnotebook」の使い方

それではさっそくですが、「Dnotebook」をどのように使っていけばいいのか詳しく見ていきましょう。

「Dnotebook」はnpmからインストールしてローカル開発環境で利用できますが、現在はブラウザ上で使える無料のクラウド版も提供されているので今回はこちらを使いましょう。

以下のURLからアクセスできます!

<Dnotebookクラウド版>
https://playnotebook.jsdata.org/


サイトにアクセスすると以下のような画面が表示されます。

f:id:paiza:20210113115903j:plain

この画面が1つのドキュメントになっており、「コードエディタ」と「マークダウンエディタ」を自由に配置できます。


デフォルトでは最初にコードエディタが表示されているので、試しにconsole.log()で好きな文字列を表示してみましょう。

console.log('Hello Dnotebook!!');


上記のコードを入力してから【Run】ボタンをクリックすると以下のように文字列が表示されます。

f:id:paiza:20210113120103j:plain

このようにJavaScriptのコードをそのまま実行できるようになっているわけです。


次にマークダウンのテキストを追加してみましょう。【Text】アイコンをクリックしてみてください。

f:id:paiza:20210113120113j:plain


さきほどのコードエディタ下部にテキストエディタが表示されました!

f:id:paiza:20210113120125j:plain


マークダウンは一般的な記法が使えるようになっています。入力し終えたら【Run】ボタンをクリックしてください。

f:id:paiza:20210113120134j:plain


するとHTMLに変換されて表示されます!

f:id:paiza:20210113120143j:plain

テキストを修正したい場合は、文字部分をダブルクリックするとエディタ表示に切り替わります。ちなみに、コードとマークダウンは好きなだけ追加したり、不要なものを削除したりができるようになっています。

このように「コードエディタ」と「マークダウンエディタ」を組み合わせて、最終的に1つのドキュメントとして構築できるのが「Dnotebook」の特徴と言えます。

■データを可視化してみよう!

「Dnotebook」は手軽にデータを可視化するための「Danfo.js」が搭載されており、複雑なデータを直感的に分かりやすいグラフやチャートに変換できるのでご紹介しておきます。

サンプル例としてシンプルな数値データを折れ線グラフで表示してみましょう。データは配列にしてSeries()メソッドを以下のように記述すればOKです。

const data = new dfd.Series([1, 3, 2, 6, 10, 34, 40, 51, 90, 75]);


あとは作成したデータオブジェクトをplot()メソッドで実行するだけです。

data.plot(this_div()).line();

f:id:paiza:20210113120316j:plain


エディタ下部に可視化されたグラフが表示されます!

f:id:paiza:20210113120326j:plain


グラフの上部にはオプションメニューも用意されています。

f:id:paiza:20210113120333j:plain

ズームイン・アウトや画像として保存したりなどができるようになっています。


折れ線グラフだけでなく棒グラフ・円グラフ・散布図…など、さまざまな可視化を手軽に利用できるのも特徴でしょう。(参考リンク

f:id:paiza:20210113120401j:plain


また、グラフ以外の手段としてテーブル(表)を構築して表示することもできます。たとえば以下のようなデータがあるとします。

json = [
    { A: 0.4612, B: 4.28283,  C: -1.509,   D: -1.1352 },
    { A: 0.5112, B: -0.22863, C: -3.39059, D: 1.1632 },
    { A: 0.6911, B: -0.82863, C: -1.5059,  D: 2.1352 },
    { A: 0.4692, B: -1.28863, C: 4.5059,   D: 4.1632 }
]


このデータをテーブル表示するには、DataFrameオブジェクトを作成してtable()メソッドを実行します。(Seriesオブジェクトもテーブル表示可)

table(new dfd.DataFrame(json));


すると以下のような結果が表示されます!

f:id:paiza:20210113120437j:plain

グラフによる可視化手段と合わせて活用すると、ドキュメントがさらに見やすくなるはずです。

■外部ライブラリを使ってみよう!

「Dnotebook」は一般的なJavaScriptライブラリを簡単に追加できる仕組みが用意されているので合わせてご紹介しておきます。

利用するのはload_package()メソッドです。

このメソッドに外部ライブラリのCDNリンクを配列で指定するとドキュメントで使えるようになります。


たとえば、複雑なグラフやチャートを作成できる「plotly.js」を導入してみましょう。以下のコードを記述して【Run】ボタンをクリックしてください。

load_package(['https://cdn.plot.ly/plotly-latest.min.js']);

f:id:paiza:20210113120530j:plain

実行しても特に変化はありませんが、これで導入は完了しています。


次に新しいコードエディタを追加して、ランダムな数値データによるヒストグラムを作成してみましょう。

const data = { x1: [], x2: [], y1: [], y2: [] };
for (var i = 1; i < 500; i++) {
  const k = Math.random();
  data.x1.push(k * 5);
  data.x2.push(k * 10);
  data.y1.push(k);
  data.y2.push(k * 2);
}

const trace1 = {
  x: data.x1,
  y: data.y1,
  type: "histogram",
  xbins: { end: 2.8, size: 0.06, start: 0.5 },
  marker: { color: "rgba(255, 100, 102, 0.7)", line: { width: 0.2 } }
};
const trace2 = {
  x: data.x2,
  y: data.y2,
  type: "histogram",
  xbins: { end: 4, size: 0.06, start: -3.2 },
  marker: { color: "rgba(100, 200, 102, 0.7)", line: { width: 0.2 } }
};

Plotly.newPlot(this_div(), [trace1,trace2], {barmode:'overlay'});


上記のプログラムを実行すると、「plotly.js」を利用した可視化が実現できているのが分かります!

f:id:paiza:20210113120621j:plain


今度は「jQuery」を追加してQiitaの投稿記事一覧を取得してみましょう!

方法はさきほどと同じで、load_package()メソッドを利用してまずはjQueryライブラリを追加します。

load_package(['https://code.jquery.com/jquery-3.5.1.min.js']);


次に新しいコードエディタを追加して、$.ajax()メソッドからQiitaのAPIを利用して記事一覧を取得します。

$.ajax({
  url: 'https://qiita.com/api/v2/items',
  type: 'GET',
  dataType: 'json'
})
.done(function(data) {
  d = data; //データをグローバル変数に格納
})

f:id:paiza:20210113120727j:plain

上記のコードでは、取得したデータを一時的にグローバル変数に格納するところで終了している点に注意してください。「Dnotebook」では、任意のサーバからデータを取り出す場合に、データの取得処理とデータを出力する処理を分ける必要があります。

そのためコードエディタをもう1つ追加して、今度は取得したデータを出力する処理を記述しましょう。

d.forEach(item => console.forlog(item.title))


実行するとエディタ下部に投稿記事のタイトル一覧が表示されます!

f:id:paiza:20210113120749j:plain

上記のように複数のデータを出力する場合はconsole.log()ではなくconsole.forlog()を使うので間違わないようにしましょう。

■ドキュメントの書き出しについて

「Dnotebook」で作成したドキュメントは、JSON形式のデータとして書き出すことができます。

方法は簡単で、画面上部のOptionsメニューから【Download Notebook】を選択するだけです。

f:id:paiza:20210113120804j:plain


書き出されたJSONファイルは「Dnotebook」で再度読み込むこともできます。Optionsメニューから「Upload Notebook」を選択すると、ファイル選択画面が表示されるのでJSONファイルを指定します。

f:id:paiza:20210113120827j:plain

これで保存したドキュメントが瞬時に読み込まれて続きから編集もできるようになります。

このように「Dnotebook」は、インタラクティブにJavaScriptを学べる学習ツールとして使うだけでなく、データサイエンス・分析などの用途にも使えます。また、Tensorflow.jsを活用した機械学習モデルの構築にも役立つでしょう。

ちなみに、今回ご紹介した「Dnotebook」の類似サービスもあるので、合わせて参考にしてみてください!

paiza.hatenablog.com

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回は、JavaScript環境のJupyter Notebookのように使えるWebサービスをご紹介しました!

まだ開発段階ではありますが、すでに実用的なサービスとして稼働しているのでJavaScriptを利用したコンテンツ作りには重宝します。操作に慣れてきたら自分のサーバで「Dnotebook」を稼働させてネット上に公開するとさらに楽しくなります。

JavaScriptを活用したインタラクティブなドキュメントにご興味ある方はぜひ参考にしてみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.