ホームページの価値を最大化するCMS、WordPress(ワードプレス)。WordPressに関する情報をまとめておりますので是非ご活用ください。P7viewニュースHOMEニュースGutenbergはReactをどのように利用しているかWordPressの新しいエディタGutenbergは紆余曲折を経てReactでの開発を続けており、2018年5月ぐらいのリリースを目指しているようだ。新しいAPIも整備されつつあり、カスタムフィールド製造業界を震撼させたメタボックスも新しいAPIが整備されつつある。いずれにせよ、投稿編集画面に新しい時代が訪れることは間違いないので、それをどのように作っているのかについて知っておくのは悪いことではない。今回の記事ではあまり詳細に立ち入らないが、Reactは昨今のJavascript開発を牽引するライブラリであり、2010年ごろのJavascript開発とは圧倒的に違っている。圧倒的に変わった点として、次のようなものがある。npmを使ったパッケージ管理。いうコマンドをなんでかよくわからないまま打たされている人も多いだろう。ホスティングされているライブラリを管理するコマンドだ。WordPressプラグインの公式リポジトリからプラグインをダウンロードするようなものだと思ってもらっていい。Javascriptのトランスパイル。PHPはスクリプト言語なので実行時にソースコードを読み取るが、C言語やJavaはコンパイルを行って、実行形式のバイナリを作成する。JSX)、実行環境の多様化(ブラウザ、NodeJSによるサーバサイド)などに対応するため、元のファイルを変換する処理を行うことが増えている。決定的に異なるのは上記二点である。JSXほか)もあるが、特に触れない。重要なのは「これまでのWordPressはこうしたモダンJS開発の手法を取り入れていなかった」という点である。zipファイルをぽんとアップロードすればレンタルサーバーでも動くので、インストール時になにかコマンドを打ったりする必要もない。フォルダ以下に同梱される形だった。Gurenbergのnpm構成さて、前述した通り、GutenbergはReactを利用しているため、上記のテクノロジーを取り入れている。見てみると......Reduxを採用しているようだ。なると、このReduxの概念を理解せずに拡張機能を作ることは難しそうである。興味深いのは、依存するライブラリとして以下の指定があること。JSで再実装したものや、アクセシビリティ関連のものがまとまっている。これまで、WordPressではコアのソースを自前のSVNにホストするということにこだわってきたと思うのだが、今後は分散管理になるのだろうか。Githubにドキュメントがまとまっているさて、最近Gutenbergのことを心配する人が多いので、Gutenbergについて説明するプロジェクトページが用意されたのだが、実はGithubの各ディレクトリにはreadmeが整理されており、「これはなんなのか」「このコンポーネントはどうなっているのか」といったことについての説明がある。editorディレクトリのreadmeよりこれらのドキュメントは非常によくできているので、見てみるとよいだろう。依存関係は名前空間で解決さて、最近のJavascriptでは依存するライブラリを指定する機能がある。}多くの場合、webpackやBrowserifyによるトランスパイルの過程で外部に影響を与えない形で読み込まれ、パッケージングされる。流行りのSPA(シングルページアプリケーション)ではなく、WordPressのように「プラグイン自体があったりなかったりする」「利用するかしないかはページごとにPHPの側で決める」という場合、どんな風に実装しているのだろうか。これはメディアライブラリと同じく、wp名前空間以下に展開することで利用される。依存関係を指定し、参照する形になりそうだ。window.wp.element)となっており、wp以下の変数を参照することでGutenbergのAPIにアクセスしている。モダンなES2015以上やJSXで書きたい人にはそのためのサンプルが用意されている。なると、あとは「プラグイン同士がバッティングする可能性は?」「プラグインやテーマが特定のライブラリを読み込んでいる場合、それは二重読み込みにならないの?」という疑問が湧いてくるが、これはいまのところ解決する方法は提示されていない。まとめ以上、概観ではあるが、Gutenbergがどのように動いているのかについて説明した。WordPressプロジェクトのうち、Gutenbergはもっともモダンなテクノロジーを採用しているものの一つなので、「中身どうなってんだろ」と見てみることは、今後のWordPress開発の行方を占う意味でも役に立つのではないだろうか。よるWordPress開発がどんなものなのかをお見せしようとおもっているので、お楽しみに。最初に表示されました。ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。