Web制作学習で詰まったところ、AI解説などまとめ【JavaScript・PHP（WordPress）関連】
当サイトはアフィリエイト広告を利用していますこの記事は、オンラインプログラミングスクールの「デイトラ
」で、Web制作を学習していて、引っかかったところ、詰まったところで調べた、AIの回答などまとめです。
AIの「GeminiAdvance」の解説つけてる投稿は、Xの投稿の下の方にある「gemini」って文字含んでるリンククリックすると、ちょっと動作重いですが、AIの回答・解説に飛べます。
全部のネタに見出し付けてあるので、目次から見出しクリックで気になった項目にジャンプできます。
思った以上に数が多いので、目次で見てもみにくい？？かもです、ごめんなさい。
AIは、Googleの生成AIのGeminiに課金して利用。
デイトラは、メンターさんにディスコードで質問すると、ほんとすぐに、わかりやすい回答をくださります。
ただ、自分の場合は、独り立ちしてサポートがなくなってからのことを考えて、できるだけAIなども駆使して、自分で調べて解決するようにしています。
その、調べて「へ～」と、ためになったAI回答と、自分が学習を進めていて引っかかったところ、Xに投稿したものをまとめておきます。
まとめとかないと、確実に自分でも忘れる、、、
あなたの学習の参考や、忘れかけた知識を再確認するきっかけになる？？かも？？
この記事では主にJavaScript・PHP（WordPress）関連。
CSS関連は↓
今後も、順次新ネタがあれば、Xに投稿して、この記事にも追加していきます。
AIの回答と、その他小ネタは、それぞれ基本的に、時系列で、上の方に新しい投稿を重ねていってます。
目次
- 1 JavaScript
- 1.1 関数宣言 で定義した関数は巻き上げ可能
- 1.2 fadeIn();とかは、displayプロパティを強制的に書き換えてる
- 1.3 checkValidity() と validity.valid の違い
- 1.4 jQueryの、form.on(“submit”, …
- 1.5 preventDefault();当てる理由
- 1.6 findと、直接クラスで要素取得する違い
- 1.7 formのidで要素取得すると子要素含め全体取得される
- 1.8 jQueryとJavaScriptはそれぞれにメソッド
- 1.9 普通のJavaScriptとjQueryは入れ子など組み合わせ可
- 1.10 jQueryで、functionとアロー関数は挙動が違う場合あり
- 2 Gulp
- 3 PHP（WordPress）関連
- 3.1 スニペットに不必要な改行入ってない？？
- 3.2 PHPで、HTMLのタグのブロック丸ごとecho可能
- 3.3 動的要素読み込みとJavaScript実行のタイミング注意
- 3.4 WordPressのテーマのバージョン管理
- 3.5 サイト名（ルートディレクトリ）に「.」「_」は使わない方が無難
- 3.6 テンプレートファイル細分化して個別に
- 3.7 WordPressの移管によるユーザー・パスワード上書きについて
- 3.8 WordPressの親子テーマの関係
- 3.9 get_queried_object()をsingleページで使う時の注意
- 3.10 termだけでなく、taxonomy指定の重要性
- 3.11 WordPressでエラーがあったときの条件分岐
- 3.12 カテゴリーとタクソノミーの違い
- 3.13 サイドバー実装
- 3.14 WordPressdでお問い合わせページの作り方（テンプレートファイルの当て方）
- 3.15 ショートコードにおける$attrs変数の自動定義について
- 3.16 get_the_category();なんかで、中身が空かどうかの判定
- 3.17 get_the_category();で、配列の０番目を取得する理由
- 3.18 PHPファイルの自動フォーマット設定
- 3.19 WordPressの時間・日付取得のタグについて
- 3.20 HTMLタグの属性の中でもPHPタグを呼び出せるように
- 3.21 エラーログはVS Codeで開くと見やすい
- 3.22 require と require_once の違い
- 4 VS Codeでコードを書くのを楽にする小ネタまとめ記事リンク
- 5 CSS関連の記事リンク
- 6 僕がWeb制作を学んでいる【デイトラ】の紹介記事はこちら
JavaScript
関数宣言 で定義した関数は巻き上げ可能
関数宣言で定義した関数は、関数を定義するよりも上でその関数を使用することができる。
これは、 関数式 や アロー関数式 ではできないので注意。
それぞれの定義の書き方↓↓
関数宣言
function myFunction() {
// 処理内容
}
---
関数式
const myFunction = function() {
// 処理内容
};
---
アロー関数
const myFunction = () => {
// 処理内容
};fadeIn();とかは、displayプロパティを強制的に書き換えてる
checkValidity() と validity.valid の違い
jQueryの、form.on(“submit”, …
preventDefault();当てる理由
findと、直接クラスで要素取得する違い
formのidで要素取得すると子要素含め全体取得される
jQueryとJavaScriptはそれぞれにメソッド
普通のJavaScriptとjQueryは入れ子など組み合わせ可
jQueryで、functionとアロー関数は挙動が違う場合あり
Gulp
定義してない関数はexportsしちゃいかん
browserSync.init()で、指定のファイルを開きたいとき
Gulpで、ブラウザ立ち上げるときのファイル指定。
index:””,
を追加。
browserSync.init({
server: {
baseDir: "./public/",
index: "component.html",
...下の階層全部watchしたいとき
gulp. watch("./**/*.html", ...);
って書けばOK
ふたつ下の階層も見たいからって、↓
gulp. watch("./**/**/*.html", ...);
って書くとエラーになるので注意！ターミナルでの権限確認とディレクトリについて
Windowsなんかの、ファイルの書き込み権限の問題で引っかかって、ターミナルでの操作が受け付けられない場合あり。
あと、npm installなんか実行するとき、ターミナルでどのディレクトリに今いるか確認必須。
違うディレクトリにインストールしても動かんです。
Gulpで画像コピーするとぶっ壊れる問題
テキストファイルじゃないのに、初期設定だとエンコーディングで文字のように扱われることが原因。
↓の書き方で
srcに{encoding: false}をつけると改善。
参考サイト様↓
const assets = () => {
return src(developDir + 'static/**/*', {encoding: false})
.pipe(dest('./preview/'))
}Gulp設定時の注意
Browserslist の設定は一か所だけに記述。
PHP（WordPress）関連
スニペットに不必要な改行入ってない？？
スニペットに不必要な改行が入ってると、そこでコードの行が別の行として分割されるので、ガッツリエラーになりまする、、、
PHPで、HTMLのタグのブロック丸ごとecho可能
こんな感じ↓↓
詳しくはX投稿のリンクからGemini解説みてください。
<?php
$my_block = <<<HTML
<section class="my-section">
<h2>見出し</h2>
<p>これは、変数に格納されたHTMLブロックです。</p>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</section>
HTML;
echo $my_block;
?>動的要素読み込みとJavaScript実行のタイミング注意
HTMLの読み込み完了後にJavaScriptを実行する二つの方法、
「jQuery(document).ready(function () {」と、「<script>タグにdeferという属性を付与」の違い。
Gemini解説抜粋↓↓
どちらもHTMLの読み込み完了後にJavaScriptを実行するという点では同じですが、いくつかの違いがあります。
jQuery(document).ready(function(){ … });
- jQueryの関数
- HTMLの解析が完了した時点で実行される
- 画像などの外部リソースの読み込み完了は待たない
- スクリプトの実行順序は保証されない
<script defer>
- HTMLの属性
- HTMLの解析が完了した時点で実行される
- 画像などの外部リソースの読み込み完了も待つ
- スクリプトの実行順序は保証される（記述順に実行）
WordPressのテーマのバージョン管理
CSSファイルに↓記述
この Version の値は、WordPress の管理画面の「外観」>「テーマ」で確認することができます。
/*
Theme Name: My Theme
Version: 1.0.0
*/サイト名（ルートディレクトリ）に「.」「_」は使わない方が無難
テンプレートファイル細分化して個別に
基本的にテンプレートファイルにスラッグ（＝ハイフンつけてスラッグ名）追加して、個別にスタイル当てたいページを分類。
CSSファイルは、分け方一応調べたけど↓↓、あまり分ける意味ないかも、、、
CSSはstyle.cssにコンパイルして出力する前に、開発段階でdevフォルダの中なんかで、FLOCSSとかGulpとか使ってSassの段階で分割管理できるから。
WordPressの移管によるユーザー・パスワード上書きについて
プラグインなんかで、WordPressサイトを他から移管して持ってくると、移管先のサイトに登録してあったユーザー情報やパスワードは全部消えて、移管元のデータで丸っと上書きされます。
練習サイトだったからよかったけど、全部消えて焦りました、、、
WordPressの親子テーマの関係
phpやhtmlのファイルは、親子テーマ両方にあるものは、子テーマのものが優先して表示。
CSSやfunction.phpは、親テーマのものを読み込んだ後に、子テーマのものを追加で読み込み。
get_queried_object()をsingleページで使う時の注意
get_queried_object()（ = ページの情報を取得する関数）は、カスタム投稿のsingleページで動作しない可能性あり。
カスタム投稿が少し特殊な扱い？？だから？？（ちょっとまだ理解あいまいです）
termだけでなく、taxonomy指定の重要性
↑ざっくりいうと、カテゴリーやタグにおける「ニュース」「スポーツ」なんかの個々の項目。
WordPressでエラーがあったときの条件分岐
is_wp_error();の使い方。
カテゴリーとタクソノミーの違い
ざっくり抜粋↓↓、詳しくはXの投稿のリンクからGeminiの解説みてください。
タクソノミーは、広い意味での「分類」を指します。カテゴリーもタグも、カスタムタクソノミーも、すべてタクソノミーの一種です。
カテゴリーは、WordPressにデフォルトで用意されているタクソノミーの一つで、投稿を階層的に分類することができます。
一方、タグもWordPressにデフォルトで用意されているタクソノミーの一つですが、こちらは階層構造を持たず、投稿に複数のキーワードを付与するような形で分類します。
サイドバー実装
dynamic_sidebar(‘sidebar’);の使い方（Gemini解説）
WordPressdでお問い合わせページの作り方（テンプレートファイルの当て方）
page-contact.phpを作るだけでは反映されず、固定ページに設定して、メニューから追加する必要あり↓↓
固定ページを作成する
- WordPress の管理画面にログインします。
- 左側のメニューから「固定ページ」>「新規追加」を選択します。
- タイトルに「お問い合わせ」など、任意のタイトルを入力します。
- コンテンツエリアに、お問い合わせフォームなどを記述します。
- 必要に応じて、ページ属性で「テンプレート」を
page-contact.phpに設定します。 - 「公開」ボタンをクリックして、ページを公開します。
メニューに登録する
- 左側のメニューから「外観」>「メニュー」を選択します。
- 該当のメニューに「お問い合わせ」ページを追加します。
- 「メニューを保存」をクリックします。
ショートコードにおける$attrs変数の自動定義について
WordPressで使うショートコードの中で$attrsっていう変数は自動的に定義されてる。
基本的にショートコードの属性の値が配列として格納されてる。
忘れてると、急に出てきて、どこでこの変数定義したっけ？？と惑うことになる、、、
get_the_category();なんかで、中身が空かどうかの判定
もうひとつ配列空の時判定についての投稿
get_the_category();で、配列の０番目を取得する理由
一つの記事に、カテゴリーが複数指定されてるとき、その１番目（だいたいの場合メインとなるカテゴリー？）を取得してタグとかに表示する～、ってこと。
PHPファイルの自動フォーマット設定
WordPressの時間・日付取得のタグについて
HTMLタグの属性の中でもPHPタグを呼び出せるように
エラーログはVS Codeで開くと見やすい
require と require_once の違い
VS Codeでコードを書くのを楽にする小ネタまとめ記事リンク
この記事では、主にJavaScript・PHP関連の知識の小ネタをまとめてますが、
VS CodeやChromeの開発者ツールを使いながら「コードを書く」ってこと全般に関する小ネタは↓↓の記事にまとめてます。
コーディングや学習の息抜きにでも、どぞ、、、
CSS関連の記事リンク
僕がWeb制作を学んでいる【デイトラ】の紹介記事はこちら
2024年8月時点で、Web制作コースの中級最終課題取り組んでますが、ガチでレベル高いです。
まだ学習優先で、ポートフォリオ作ってないので、説得力ないのが痛い、、、
歯ごたえありすぎて、もし、メンターさんの素早い的確な回答がなく、全部自分で調べてやったとすると、奥歯が砕けるレベル。
実際は、デイトラではディスコードでメンターさんに質問すると、ほんと素早く的確に回答くださいます。
さすがに、このAI回答まとめ記事に、メンターさんに教わったことは書いてません。
自分が受講してるから言えるのですが、本気でWeb関連で仕事できるレベルになりたいなら、おすすめです。
