jupyterlabでJavaScriptとplotlyを使える環境を構築する

個人開発を行う場合、サーバサイドから始めるとどうしてもフロントエンドの知識が弱く、ググりながら継ぎ接ぎだらけのコードを書いているということは多いと思います。私も同じで以前作った勤怠アプリは、基本線はFlaskのブログチュートリアルに沿って、あとはその時の自分の継ぎ接ぎだらけの知識にググって得たことを足してなんとか作ったものです。この問題意識は以前から持っていたのですが、まだ対してスキルのないうちから新しい言語を取得しても中途半端になるだろうなと思い、目を瞑っていました。

が、しかし！！

最近クローラーをGoogle Cloud Platformにデプロイしようとしたら、どうもpythonベースのスクレイピングコードでヘッドレスChromeを利用するにはハードルが高い一方で、JavaScriptだとPuppeteerというフレームワークでシンプルに実装できるとわかりました。さらに、Google App ScriptはJavaScriptがベースになっており、Pythonだけの知識ではなかなか有効活用ができそうにないという状況に直面しました。そういったことから、今回、JavaScriptを学習しようと決心し、その上でローカルに学習環境を構築するためにMacbookにnode.jsを入れることにしました。node.jsはplotly.pyをjupyter labで使うときにインストールしていたのですが、jupyterlabでのJavaScript利用も念頭に再度環境を整備したので、それをまとめようと思います。

どなたかの参考になれば幸いです。

環境は以下になります。

OS: Mac OS X
前提: Homebrew、python、jupyterlabをインストール済み

1. homebrewからnodebrewをインストール

まずは、 Homebrewからnodebrewをインストールします。nodebrewはPythonのpyenvに相当するもので、様々なバージョンのnode.jsをインストールし、都度使うバージョンを選ぶことができるパッケージ管理ソフトウェアです。

$ brew install nodebrew

node.js関連のコマンドが使えるようPATHも設定します。

$ vi ~/.bash_profile

.bash_profileには以下のコードを入力します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

.bash_profileの変更を適用します。

$ source ~/.bash_profile

次のバージョン確認のコマンドが実行できれば、インストールが成功しています。

$ nodebrew -v

2. nodebrewからnode.jsをインストール

次は、node.jsをインストールします。今回は最新の安定したバージョンをインストールしています。まずはnodebrewをセットアップします。これが行わないとその後の処理が一切できません。

$ nodebrew setup
$ nodebrew install-binary stable

インストールしたバージョン確認を確認するには以下のコードを実行します。

$ nodebrew list

3. インストールしたnode.jsの有効化

さらにインストールしたnode.jsを有効にします。

$ nodebrew use v10.15.1

以上でnode.jsの環境構築は完了です。次はjupyterlab関連の環境構築を行います。

4. jupyterlabでplotlyを使うための拡張機能をインストール

jupyterlabでplotlyを使うには以下の拡張機能を使います。

$ jupyter labextension install @jupyterlab/plotly-extension

私が昨年の夏入れたときにはnode.jsの8系では機能せず、6系を入れて使っていました。しかし、今回バージョン10で確認したところ、以前と同じようにplotly.pyを実行できていたので大丈夫だと思います。これでjupyterlabのノートブック上でplotly.pyを実行できます。

5. jupyterlabでJavaScriptを使えるようにする

最後は、jupyterlabでJavaScriptを使えるようにします。以下のコードを実行します。

$ npm install -g ijavascript
$ ijsinstall

1つずつ上記コードをターミナルで実行し、完了したのち、jupyterlabを立ち上げると、JavaScript用のノートブックが作成できるようになっています。

6. jupyterlabでJavaScriptとplotlyの環境構築のまとめ

以上の処理を行うことでplotly.pyもJavaScriptも利用できるようになったと思います。昨年私が導入した時はjupyterlabの拡張機能もまだバグがある不安定なバージョンでしたがもう安定しているようです。ぜひ開発に役立てて頂けましたら幸いです。

参考サイト