ワードプレス公式チュートリアルでブロックを作成①【環境準備編】
2022年1月リリースのワードプレスversion5.9でフルサイトエディターが実装されると、ブロックをサイト内に自由に配置できるようになります。
したがって『Gutenbergのブロックを自作できるかどうか』が、サイト制作の自由度を大きく左右していく・・・そう考えて私もブロックの作成方法を勉強していくことにしました。
そこでまずはワードプレス公式サイトのブロック作成チュートリアル通りに進めてみようと思います。本記事を含めて３回に分けて、自分なりに実行した手順と理解した内容を紹介していきます。
今回は準備編として環境構築です。
ブロック作成の環境として、Node.jsのインストールをする。
使用PC/OS・・・Windows10
使用エディター・・・Visual Studio Code
公式サイトの環境構築ページは以下の通りです。
https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/
残りの2回の記事は以下の通りです。
https://web-children.com/2022/01/02/block-creation-of-basic-...
手順概要
- Node.jsの公式ページからインストール用ファイルをダウンロード
- ダウンロードしたファイルを実行してインストール
- VS CodeのターミナルでNode.jsが無事インストールできたことを確認
①ファイルのダウンロード
１．Node.js公式ページにアクセス
２．ファイルをダウンロード
LTS版のほうをクリックしてダウンロードします。2022年1月1日現在はversion16.13.1です。
ダウンロードされるファイルは、node-v16.13.1-x64.msi です。
※ダウンロードタブに切り替えると、Mac用のファイルもダウンロードできます。
②インストール（ファイルの実行）
ダウンロードしたnode-v16.13.1-x64.msiをクリックするとインストールがスタートします。
以下画面の通りに進めます。
これでインストールがスタートします。しばらくして次の完了画面が表示されれば終了です。
③インストールできたことを確認
VS Codeを起動させます。もしすでに開いている場合でも一度立ち下げて再起動しましょう。
ここから先はVS Codeでの作業です。
１．ターミナルを開ける
すると画面したにターミナルが開きます。
VS Codeのワークスペースにフォルダが登録されている場合はそのフォルダ下で開いてしまうので、ワークスペースからフォルダを削除してからターミナルを開くとよいでしょう。
２．Nodeがインストールできたことの確認
次のコマンドを打ち込んでバージョンが表示されればOKです。
>node -v ⇒nodeのバージョン表示（今回インストールした16.13.1が表示される）
>npm -v ⇒npmのバージョン表示
まとめ
以上無事にNode.jsのインストールが確認できたら作業終了ですが、非常に簡単ですよね。ターミナルとかコマンドを打ち込む作業に慣れていないと少々難度が高く感じてしまいますが、この程度なら問題ないでしょう。
もう一度作業の概要を紹介しておきましょう。
- Node.jsの公式ページからインストール用ファイルをダウンロード
- ダウンロードしたファイルを実行してインストール
- VS CodeのターミナルでNode.jsが無事インストールできたことを確認
次回はこの開発環境を使ってブロックの雛形を作成します。
