Node.jsを活用した開発環境の構築。自動リロードでスタイルを適応させて開発を向上させましょう。#1/2

ローカル環境の構築

ローカル環境の構築では、Node.jsを活用した開発環境の構築。自動リロードでスタイルを適応させて開発を向上させましょう。#1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

Local（旧Local by Flywheel） まず、開発のためのローカル環境を構築しましょう。おすすめは「Local（旧Local by Flywheel）」です。煩雑な構築手順を省いて、簡単にローカル環境を構築できます。こちらの動画わかり易く説明してくれてます。Naomiさんありがとうございます。

ローカル環境の構築で押さえたいポイント

ローカル環境の構築は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

ローカル環境の構築の確認方法

実行前後のバージョンと設定値を控え、再起動後も同じ動作になるか確認します。チーム作業では、個人のパスや秘密情報を設定ファイルへ固定しないことも重要です。

Browser-Syncモジュール

Browser-Syncモジュールでは、Node.jsを活用した開発環境の構築。自動リロードでスタイルを適応させて開発を向上させましょう。#1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

まず、環境に合わせてNode.jsをインストールします。 公式サイトのリンクを添付します。※ドキュメントを熟読し、各環境に応じたバージョンでインストールしてください。Node.jsは繊細なコンポーネントを持つため、インストール時には慎重に進める必要があります。

npm init -y

npm add browser-sync --dev

"scripts": {
   "watch": "browser-sync start --proxy 'engress.local' --files './**/*'"
 },

子テーマのステイルを適応

子テーマのステイルを適応では、Node.jsを活用した開発環境の構築。自動リロードでスタイルを適応させて開発を向上させましょう。#1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

get_stylesheet_directory_uri()関数 get_template_directory_uri()は、themeまでのurlを取得する関数です。この関数を使用すると、親テーマのパスが取得されますが、子テーマのスタイルは適用されません。子テーマのスタイルを適応するget_stylesheet_directory_uri()を使用した値は次の通りです。 http://blog200.local/wp-content/themes/blog-childとなります。 ※なお、こちらのbrowser-syncでサイトを正常に表示されるためには、画像やページ遷移のパスにWordpressが提供している関数を適切に使用していることが条件になります。この関数は、アドレスが変更(local:3000)されても自動的に更新されるため、デザインの崩れを防ぐことができます。クラッシックエディタやグーテンベルクでは直接PHPのコードが記述できないため、ショートコードを使う必要があります。ショートコードについてはこちらを参照してください。

 

子テーマのステイルを適応で押さえたいポイント

子テーマのステイルを適応は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

子テーマのステイルを適応の確認方法

実行前後のバージョンと設定値を控え、再起動後も同じ動作になるか確認します。チーム作業では、個人のパスや秘密情報を設定ファイルへ固定しないことも重要です。

実装前に確認しておきたいこと

ここでは、Node.jsを活用した開発環境の構築。自動リロードでスタイルを適応させ…を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

使用するツールの役割、設定ファイルの場所、実行する順番を先に整理すると、環境差によるつまずきを減らせます。 サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

Node.jsを活用した開発環境の構築。自動リロードでスタイルを適応させ…が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

実行前後のバージョンと設定値を控え、再起動後も同じ動作になるか確認します。チーム作業では、個人のパスや秘密情報を設定ファイルへ固定しないことも重要です。

まとめ