どうも、まさとらん（@0310lan）です！
今回は、マークダウンで手軽にWebサイトを構築できるサービスをご紹介します。
一般的なマークダウン記法で簡単にWebコンテンツを作れるのですが、独自のコードブロックを挿入してインタラクティブなフォーム要素も挿入できるのが特徴です。
さらにJavaScriptで好きな機能を開発できる仕組みが提供されており、簡単なWebアプリを作るなど自由度の高いサービスに仕上がっています。
すべて無料で使えるので、ご興味ある方はぜひ参考にしてください！
【 Reactive Doc 】
■「Reactive Doc」の使い方
それでは、「Reactive Doc」をどのように使えばいいのか詳しく見ていきましょう！
利用するためにユーザー登録やログインなどは一切不要です。サイトに訪れたらトップ画面にある【Try it】ボタンをクリックするだけです。
専用のWebエディタが表示されます。
このエディタからマークダウンで文章・リンク・画像などを組み合わせたWebサイトが作れます。
さらに独自に提供されているJSON形式のコードブロックを使えば、インタラクティブに動作するフォームコンテンツが挿入できます。
■「Reactive Doc」の基本的な機能について
「Reactive Doc」のエディタで提供されている基本的な機能について、いくつかピックアップしながら解説をしておきます。
まずは画面構成ですが、以下のように大きく2種類に分けることができます。
基本的な使い方としては、画面左側の【エディタ】にマークダウンで記述していきます。すると、その内容が【プレビュー】に自動反映されていきます。
見出し、本文、リンク、リスト、画像挿入など、一般的なマークダウン記法が使えます。
また、JSON形式で構成された独自のコードブロックが提供されており、インタラクティブなフォーム要素を挿入できるのが大きな特徴です。
これは画面左側のメニューから利用できますが、「/（スラッシュ）」を入力して即座にアクセスできるコマンドも提供されているので便利です。
例えば、テキストを入力するボックスを挿入したければ、「Text」ブロックを選択します。
プレビューに入力ボックスが表示されたのが分かります。
エディタを見ると「@input」というJSON形式のコードブロックが挿入されています。
このようにマークダウンで記述された文章の中に、独自のコードブロックを挿入してWebコンテンツを作成できるのが大きな特徴となります。
コードブロックには、さまざまなイベント処理に使える「ボタン」や、カラーを選択できる「パレット」など、多彩な要素があらかじめ提供されています。
これらの要素を自由に組み合わせることで、手軽にインタラクティブなWebサイトを構築できるわけです。
例えば、好きな色を選択したらその「カラーコード」を表示する簡易的なWebツールを作ってみましょう。
まずはカラーパレットをエディタに挿入します。
JSON内にあるプロパティの値を変更すれば初期設定も変えられます。
例えば、「label」プロパティの値を変更すると、カラーパレットの上部にラベルを表示できたり、「defaultValue」を変更して最初に表示されるカラーを変えたりできます。
次に、カラーコードを表示するための要素として、「テンプレート」ブロックを挿入してください。
テンプレートブロックは、フォーム要素で入力されたテキストや選択された値を簡単に表示できる機能が提供されています。もちろん、選択されたカラーの値も表示できます。
基本的な使い方としては、コードブロックの「variableName」プロパティに設定されている値を、テンプレートブロック内で {{ }} の中に記述します。
今回の場合だと、「variableName」プロパティの値が「color」なので、テンプレートブロック内に記述するのは {{ color }} になるわけです。
ここまで記述できたら、早速プレビューで確認してみましょう。
まずは好きな色を選択してください。
すると、テンプレートブロックの箇所に選択したカラーコードが表示されます。
仕組みとしては非常にシンプルですね。
また、応用次第ではブログのようなドキュメントを書いて、その中にインタラクティブに動作するコンテンツを挿入した学習リソースを作ることも可能です。
■JavaScriptも組み合わせてみよう！
「Reactive Doc」はマークダウンだけでなく、JavaScriptを記述して自分の好きな機能を開発できる仕組みも用意されています。
そこで、簡単なサンプルデモを作りながらどのようにJavaScriptを使っていけばいいのかご紹介しておきます。
今回は、GitHub APIを利用してキーワードに合致する「リポジトリの総数」を取得するシンプルなデモを作ってみましょう。
利用するエンドポイントは以下のとおりです。
https://api.github.com/search/repositories
さらに、クエリパラメータとしてキーワードを付与します。例えば、キーワードがJavaScriptであれば、エンドポイントの末尾に「?q=javascript」と記述すれば関連するリポジトリの総数が取得できます。
この仕組みを使って、早速「Reactive Doc」で試してみましょう！
まずは「エンドポイント」「パラメータ」「キーワード」をユーザーが入力できるボックスを配置しましょう。
これは先述した「Text」ブロックを使えばいいですね。
それぞれの「Text」ブロックの「variableName」プロパティには、任意の名称を付与しておきましょう。今回は「endpoint」「param」「key」という名称にしておきました。
ちなみに、エンドポイントやパラメータについては、「defaultValue」プロパティに記述しておくと最初から表示されます。そのため、ユーザーはキーワードだけを入力すればいいので便利でしょう。
次にキーワードも含めた完全なURLのコード例を表示する機能も作ってみましょう。
これはテンプレートブロックを追加して、次のように記述すればいいですね。
```@template {{endpoint}}{{param}}{{key}} ```
あらかじめ設定しておいた「variableName」プロパティの値を使っています。
ここまで記述できたら、プレビューからキーワードを入力して動作確認をしておきましょう。
インタラクティブに動作するAPIドキュメントのようになりましたね。
さらにJavaScriptを追加して、このAPIを実際に実行して結果が表示されるようにしてみましょう。
まずはAPIを実行するためのボタンを配置します。
JSONの中身をよく見ると「trigger」プロパティがあります。この値にJavaScriptの関数を設定すると、ボタンがクリックされたときに実行できるようになるのです。
今回は getResult() という関数を設定しました。
そこで、JavaScriptを記述するために「Code」ブロックを挿入してみましょう。「@code」というブロックが挿入されるので、その中に getResult() 関数を定義していきます。
```@code function getResult() { } ```
JavaScriptで記述する処理としては、キーワードを含めたAPIを実行して、その結果を取得して画面に表示するという内容です。
入力されたキーワードを取得するにはgetState()を利用します。引数に「variableName」プロパティの値を指定するだけなので簡単です。
次のように記述すると、入力されたキーワードを取得できます。
getState('key')
この仕組みを利用して、fetch()を使った通信処理を記述してみましょう。
```@code function getResult() { const url = `${getState('endpoint')}${getState('param')}${getState('key')}`; fetch(url) .then(data => data.json()) .then(json => { setState('endpoint', ''); setState('param', ''); setState('key', `${getState('key')}のリポジトリ総数：${json.total_count}`); }) } ```
実行するとJSON形式のデータが取得できるのですが、その中にある「total_count」プロパティの値がリポジトリの総数になります。
それでは、プレビューからキーワードを入力して実行ボタンをクリックしてみましょう。
「JavaScript」に関連するリポジトリの総数が表示されました！
このようにJavaScriptを活用すれば、手軽にインタラクティブな機能を追加できるわけです。
例えば、マークダウンで素早くAPIドキュメントを作成し、JavaScriptで実際に実行可能な機能を付け加えればユーザーにとって理解しやすいリソースを構築できるでしょう。
「Reactive Doc」で作ったサンプルデモのソースコードは、以下のリンクから閲覧できるので参考にしてください。（※初期化処理も追記してキーワードを再入力しやすくしてます）
＜参考リンク＞
・サンプルデモのソースコード｜GitHub
■【おまけ】
「Reactive Doc」で作成したプロジェクトは、HTMLファイルとして簡単に書き出すことができるので合わせてご紹介しておきます。
エディタの上部には以下のようなボタンが2つ搭載されています。
【エクスポート】ボタンは、プロジェクトをHTMLファイルとして書き出すことができます。
書き出されたHTMLファイルは、そのままブラウザから使ってもいいですし、GitHub PagesやNetlifyなどにアップロードして使うこともできます。ネット上に公開すれば、友人・知人などにシェアして使ってもらうこともできるので便利でしょう。
また、【インポート】ボタンを使えば、書き出されたHTMLを読み込んで続きから作業を始めたり、編集やアップデートを行うこともできます。
SILVER BULLET 戦場のエンジニア 銀の弾丸コードを打て公開中！
paizaでは先日プログラミングゲーム『SILVER BULLET 戦場のエンジニア 銀の弾丸コードを打て』を公開いたしました！
新種の軍事プログラミングで戦場に【銀の弾丸】を打ち込め！
世界中でIT化が加速し、プログラミングも生存のために重要なスキルのひとつとなった近未来の戦場。ミリタリーインテリジェンスから最前線へと飛び出した我々は、軍事プログラミングを駆使して自軍を勝利へと導く任務を負った。
平和をもたらす【銀の弾丸】を見つけることはできるのか！？
プログラミング問題を解くと拠点を制圧できるだけでなく、新たな武器や装備を獲得できます。武器イラストは、エアソフトガンメーカーの東京マルイの製品をベースにデザイン。実在するアイテムを装備することもできます。お気に入りの装備で、新たな拠点制圧に向かいましょう。
各拠点を制圧するには、それぞれに設定されているプログラミング問題をクリアしなければなりません。各拠点には問題の難度に応じてS、A、B、C、Dのランクが付与されているので、自分のスキルに応じて挑戦する拠点を選びましょう。拠点を制圧（クリア）したり、特定のミッションをクリアしたりすると、アイテムを獲得できます。
アイテムを充実させて、自分だけの装備を作り上げ、さらなる拠点の制圧を目指しましょう！
■まとめ
今回は、マークダウンとJavaScriptを利用してインタラクティブなWebサイトを構築できるサービスをご紹介しました。
ちょっとしたWebアプリやツールであればとても素早く構築できるうえ、書き出されるのは単純なHTMLファイルなので活用しやすい特徴もあります。
学習リソースを作成する目的でも使いやすいサービスなので、ぜひみなさんも独自のWebコンテンツを作ってシェアしてみましょう！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
