どうも、まさとらん（@0310lan）です！
今回は、環境構築をすること無くブラウザ上から自由にNode.jsを使ったプログラム開発ができるサービスをご紹介します！
非常に多機能であり、Jupyter Notebookのような記事とコードを混在させたノートブックを作って公開することができます。
使い方次第でサーバーレスな独自APIの構築も可能なので、ご興味のある方はぜひ参考にしてみてください！
【 RunKit 】
■「RunKit」の使い方
それでは、最初に「RunKit」の使い方から見ていきましょう！
まずはトップ画面の右上にある「Sign in」ボタンをクリックします。
ログイン画面が表示されるので、その下にある「Sign up」ボタンをクリックしてユーザー登録を済ませておきましょう。
メールアドレス・パスワードなどを入力するだけで完了します！
※登録したメールアドレス宛に「認証リンク」が送付されるので、あとで確認しておきましょう。
サンプルコードが入力されたノートブックが表示されます。
「RunKit」では、このようにテキストとコード（実行環境も含む）が混在したノートブックを作成することができます。
今回は、新規のノートブックを作成したいので、画面左のメニューにある「＋」アイコンをクリックします！
すると、新規ノートブックが開きます。
今回は、このノートブックを使ってさまざまなプログラミングを試してみましょう！
■「RunKit」によるNode.jsプログラミング
それでは、実際に「RunKit」を使いながらどのようなサービスなのかを見ていきましょう！
まずノートブックの「タイトル」を入力します。
これはブログの記事タイトルを書くようなものですね。
その下にNode.jsのバージョンを選択できるようになっています。
ここで設定したバージョンは、このノートブックでNode.jsプログラムを実行する際に利用されます。
ノートブックでは、プログラムとテキストを切り替えながら作成することができます。
プログラムモードでは、単純にコードを書くだけでなく実行環境も備わっているので「run」ボタンをクリックするだけでコードを実行させることができます。
特徴的なのは、実行結果を可視化してくれる機能が備わっている点です！
例えば、次のようなコードがあるとします。
console.log('<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3>');
console.log('<input type="range">');
console.log('#ff5959');
これは単純にコンソールログへHTMLやカラーコードを出力するだけなのですが、「RunKit」で実行すると以下のように可視化されます！
HTMLのテキストやフォーム部品・カラーなどが分かりやすく表示されていますね。
この機能を利用すると、例えば位置情報が含まれている場合はマップでも表示してくれるわけです！
「RunKit」では、実行した結果のデータを自動的に解析して最適な表示を行ってくれるので非常に便利です。
さらに、数十万あるNode.jsのパッケージもインストール不要ですぐに利用できます！
使い方は簡単で、「add library...」ボタンをクリックします。
検索ボックスに追加したいパッケージ名を入力して「require」ボタンをクリック！
（今回はexpressを選択してみました）
すると、コードボックスに選択したパッケージが追加されます。
上記の場合だとexpressが利用できるようになっています。
そこで、簡単なサーバを構築して実行すると出力結果にはWebページが表示されるというわけです！
Node.jsの便利なパッケージを活用すれば可能性は無限大となり、とてもユニークなノートブックを作成できるでしょう。
また、独自の環境変数も作成できるので他サービスのIDなどを登録して連携するような使い方も簡単です。
■独自の可視化ツールを作成してみよう！
「RunKit」は実行結果を自動的に最適な表示へ可視化してくれると解説しましたが、実は自分で自由にカスタマイズすることも可能です。
例えば、次のようなコードがあるとします。
var getJSON = require("async-get-json"); var result = await getJSON("https://api.github.com/search/repositories?q=javascript"); result.total_count;
これは、GitHubに登録されているJavaScript関連のリポジトリ数を出力するものです。
これを実行すると以下のようになります。
単純な数値で「リポジトリ数」が出力されるだけですよね？
この表示をもう少し工夫して独自の可視化機能を実装してみましょう！
方法としては、まず最初に公式のパッケージとして提供されている「value-viewer」を次のように追加しておきます。
var { ValueViewerSymbol } = require("@runkit/value-viewer");
あとは、「ValueViewerSymbol」という名称で次のようなオブジェクト構造を作ればOKです！
var myObject = { [ValueViewerSymbol]: { title: "【タイトル】", HTML: "【HTML】" } };
「タイトル」と「HTML」の2つを自由にカスタマイズすることで、独自の可視化が可能です。
例えば、Bootstrapを利用して単純なHTMLを構築すれば次のような表示を簡単に作れるわけです！
以下のリンクからサンプルコードを閲覧できるので、ぜひ参考にしてみてください！
なお、paizaラーニングでは、学習講座として「JavaScript入門編」や「HTML/CSS入門編」を公開しています。そちらも合わせてチェックしてみてください。
＜参考ドキュメント＞
■サーバーレスな独自APIを作ってみよう！
「RunKit」には、エンドポイントを作成して独自のAPIを構築できる機能も提供されているので少しだけ紹介しておきます！
仕組みは簡単で、次のような記述ですぐにエンドポイントを作成できます。
exports.endpoint = function(request, response) { //ここにコードを記述する }
例えば、「Hello RunKit」という単純なテキストを返してくれるだけのAPIは次のように作成できます。
exports.endpoint = function(request, response) { response.end("Hello RunKit"); }
そして、「endpoint」という項目をクリックします！
すると、設定したテキストが返されて表示されているのが分かりますね。
あとは、ブラウザに表示されているURLを利用すれば、どこからでもこのテキストを取得できるようになるわけです。
この機能を活用すると、例えば独自のデータをJSONで返してくれるAPIなども簡単に作れるので便利です！
＜参考ドキュメント＞
■ノートブックの書き出しと公開について
「RunKit」で作成したノートブックは、分かりやすいURLで公開したりファイルに書き出すことが可能なのでご紹介しておきます！
まず、URLを編集する場合は「publish」という項目をクリックします。
すると、入力ボックスが表示されるので自由に編集をしましょう！
ここに入力したテキストがURLのサブディレクトリに適用されます。
例えば、URLを見ただけでノートブックの内容が分かるような文字列だと他のユーザーが理解しやすくて良いでしょう。
また、ノートブックをファイルにダウンロードする場合は、左メニューにあるアイコンをクリックします！
Node.jsのコードはもちろんですが、package.jsonなども一緒に取得できるので他の環境で試したい場合にも便利ですね。
ちなみにですが、ノートブックの埋め込みにも対応しているので自分のブログやサイトにそのまま表示させるような使い方も出来ますよ！
＜参考ドキュメント＞
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
■まとめ
今回は、ブラウザ上でNode.jsのプログラミングを試したり、サーバーレスなAPIを構築できるサービスをご紹介しました！
個人的にはNode.jsのプログラミング学習はもちろんのこと、ミニアプリを作ってポートフォリオ感覚で公開しても良いし、Node.jsのパッケージを試す場所としても最適だと感じました。
公式のフォーラムも活発に活動されており、もし不明点があれば気軽に相談ができるのも便利です。
Node.jsを気軽に試したい方や、プロトタイプ作りなどに興味のある方はぜひ挑戦してみてください！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
