Gutenbergのカスタムブロック

node.js

　こんにちは！Udemy講座によるWordPress学習を進めているあーやといいます。　

　今回は、Gutenbergのカスタムブロックについて学習しました。

　詳しくは、JavaScriptとReactの知識がないと難しいらしく、

環境づくりや使用するフォルダーなど初歩的な部分を学習しました！

　Reactとは、JavaScriptライブラリのことのようです。

まだ学習したことはありません。

なので、他の学習が落ち着いたらUdemy講座利用して学びたいと思います。

　まずは、ブラウザー外のJavaScriptの実行環境を整えるべく、

node.jsをインストールしました。

　ここでは、ターミナルに入力していくのですが、スペースやスペルミスがないよう気を付けて入力します。（私は、毎度のことながら、スペースのミスをしていました(-_-;)）

　node.jsでは、ブラウザー外でJavaScript実行環境を作りました。

このままでは、ブラウザーは理解していません。

　そこで、ブラウザーが解釈できる構文に変換する必要があります。

どうやら、ややこしいことになるようなのですが、

WordPressでは、簡単にできるパッケージがあるのです。

@wordpress/create-block

@wordpress/scripts

これを使って、ビルド環境のセットアップを行いました！

難しいことを、簡単にしてくれるところもWordPressのいいところ、初心者に優しいところですよね。

　また、ビルドという言葉がでてきたけど、ビルドって何？となりました。

コードにバグがないか解析、問題ない場合に実行、解釈できるかたちにファイルを変換するもののようです。（難しい）

　あとは、Gutenbergのプラグインが表示されるので、有効化すれば、OKです。

その後、コードを追加、変更したりすることで使いこなせるようです。

　私なりに、今回学習したことをまとめました。

　新しい言葉もたくさんあり、難しい内容でしたが、後ほどしっかり学べたらなと思います！

　最後までお読みいただきありがとうございました！