Gutenbergの実装箇所を素早く見つけて開発をはかどらせる
公式のハンドブックやいろいろな開発者によるブログ記事なども充実してきましたが、一番確実なのは実装コードを実際に見てみることです。
ただ、Gutenbergのコードは量が多く、慣れないと目的の実装箇所を見つけるのに時間がかかってしまうことでしょう
すべてのソースコード
GutenbergはGitHubで管理されており、すべてのソースコードが公開されています。
したがって時間さえあれば順に目を通すことで必ず実装コードを見つけることはできます。
ただし前述の通り量が多いため現実的ではありません。
ここでは実装コードを見つけるいくつかの方法を挙げておきます。
検索してみる
GitHubには検索機能がついています。
検索はGitHub全体だけではなくプロジェクト内だけでも行うことができるため、大体これで見つかります。
例として 『IconButton』 を探してみます。
GitHubのGutenbergのページに行き、左上の検索欄に『IconButton』と入力します。
そのままエンターを押すか『In this repository』でリポジトリ内で検索を行うことができます。
コード内に69件見つかったようです。
定義を探す場合は『export IconButton』という風に export も付けるともう少し絞り込むことができます。
50件になりました。
後は検索結果を見て正解を探します。
大抵の場合 『 export default 名前 』という風になっています。
見つかりました。
リンクからソースを見ることができます。
どんな引数を受け付けるのかが一目でわかります。
基本はボタンが表示され、ツールチップがある場合はツールチップも表示されるようになることがわかります。
相対パスからたどる
先ほどの IconButton は Button を使用していましたが、ソースの上部に Button を使用するための記述があります。
この記述から素早く Button の定義に移動できます。
『..』は１つ上のディレクトリを指します。
（『.』は同じ層のディレクトリを指します。）
現在『gutenberg/packages/components/src/icon-button/index.js』にいます。
index.js は除いて１つ上の『src』を選択します。
『button』に移動します。
『index.js』にコードがあります。
WordPress名前空間からたどる
ソースコードを見ると気づくと思いますが
import ... from @wordpress/... のような「@wordpress」を含む記述がたくさん出てきます。
webpack の設定を見てみると、いろいろ処理して結局 packages/『@wordpress/...の@wordpressを取り除いたもの』が基準になることがわかります。
ここでは下の例でソースコードを探してみます。
@wordpress/data なので packages/data に移動します。
さらに src/index.js に移動します。
探している『withSelect』と『withDispatch』がありました。
先ほどの 相対パスからたどる 方法で実際のコードまで移動します。
ソースコードを見つけることができました。
変数名からたどる
実装例などで次のような記述をよく見かけます。
const {PluginSidebar, PluginMoreMenuItem} = wp.editPost;
const {PanelBody, IconButton} = wp.components;『PluginSidebar』や『IconButton』を前述の 検索してみる の方法で見つけてもよいですが、
wp.editPost や wp.components からもたどることができます。
例えば wp.components の場合は『packages/components』、wp.editPost の場合は『packages/edit-post』が基準になります。
実際に『PluginSidebar』のソースコードを探してみます。
まず『packages/edit-post』に移動します。
さらに src/index.js に移動します。
後は 相対パスからたどる 方法でソースコードにたどり着くことができます。
まとめ
ソースコードを見つけるための方法を４つ紹介しました。
素早く目的のコードを見つけて動作を理解する手助けになれば幸いです。
