06 - 刮目せよ! 〜"index.js" を読む〜

「あ，今回は Docusaurus の設定そのものとはあまり関係ないから，忙しい人は読まなくていいよ」

「おい，じゃあどうしてわざわざひとつの話にしてるんだ」

即座につっこむ EeePC。 私は真顔で答える。「 index.js に何が書いてあるか読めるようになったから」

「なに？」EeePC が間の抜けた声を出す。「君は Javascript が書けなかったんじゃないのか？」「昨日まではね」「おかしくないか？」「ぐっすり寝て頭が整理されたんだよ」「いや，それで済む問題じゃ…」「 士，別れて三日、即ち刮目して見るべし (※)，だよ」「三日どころか半日…う，うむ，それじゃあ，本当に読めているのか教えてもらおうか」

※ 士別三日，即更刮目相待 (資治通鑑·六十六巻)。 毎日鍛錬している人は少し会わないうちに見違えるほど成長しているから気をつけろよ，という意味。

「その前に，何で私が読めるようになったのか説明するね」

そう言って私は自分の index.js を開く。

https://github.com/jamcha-aa/Docusaurus-Guide/blob/master/website/pages/en/index.js

const React = require('react');

const CompLibrary = require('../../core/CompLibrary.js');
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;

「 const って何行も書いてあるじゃん?」「ああ」「const って何？」「さあ？君は知っているんじゃないのか？」

「昨日まではわからなかった。だから調べたの。そしたらね，これが 変数 だってわかったんだ。あ，これ変数なんだ，って思って index.js を見直したら，『 function は関数の定義だな？return で値を返してるし』『 Button は React.component を継承してるんだ』『あ，render で html を出力してるんだ』って，それまで記号の羅列だったのが一気に文章として見えてきたんだよ」

「継承…，そうか。君はオブジェクト指向自体は知っていたんだったな」「うん。java と perl は書いたことがあるから」「perl？」「うん。使わされたサーバに perl しか入ってなかったから」「ふむ」「render で html 出力してるのがわかったのも，perl で html 吐く方法知ってたからだよ」

「どこで知識が役に立つかわからんものだな。それじゃあ index.js がどんな文章か説明してもらおうか」「いいよ」

ライブラリの読み込み
ライブラリの読み込み
...

パーツの定義
  ボタン
  ロゴ
  タイトル等

HomeSplash で一部を html 出力

Index で残りの html 出力

「こんな感じ」

「本当に読めてるんだな…」EeePC が信じられないといった様子で言う。

「睡眠てすごいね」「…ああ，本当にすごいな。じゃ，じゃあ， let は何だ？」「const と同じ変数の一種。Emacs Lisp でも使うよ」「 props は」「部品を使い回すときに，元の部品 (親コンポーネント) で使える情報。そのまま使いたいときは props のままでよくて，変えたいときは state を使う」

「うーむ…」EeePC がうなる。「君はこれまで Docusaurus をずっと怖がっていたが，その心配はもうなさそうだな」「新しく機能を追加する，とかはまだできないけど，でももう怖くないよ」「それなら安心だな。この調子で残りのファイルも頼むよ」「まかせてよ!」