shu_web
← ブログ一覧へ
記事2024.10.13

Web制作学習で詰まったところ、AI解説などまとめ【JavaScript・PHP（WordPress）関連】

Web制作学習で詰まったところ、AI解説などまとめ【JavaScript・PHP（WordPress）関連】

この記事は、オンラインプログラミングスクールの「デイトラ」で、Web制作を学習していて、引っかかったところ、詰まったところで調べた、AIの回答などまとめです。

AIの「GeminiAdvance」の解説つけてる投稿は、Xの投稿の下の方にある「gemini」って文字含んでるリンククリックすると、ちょっと動作重いですが、AIの回答・解説に飛べます。

全部のネタに見出し付けてあるので、目次から見出しクリックで気になった項目にジャンプできます。

思った以上に数が多いので、目次で見てもみにくい？？かもです、ごめんなさい。

AIは、Googleの生成AIのGeminiに課金して利用。

デイトラは、メンターさんにディスコードで質問すると、ほんとすぐに、わかりやすい回答をくださります。

ただ、自分の場合は、独り立ちしてサポートがなくなってからのことを考えて、できるだけAIなども駆使して、自分で調べて解決するようにしています。

その、調べて「へ～」と、ためになったAI回答と、自分が学習を進めていて引っかかったところ、Xに投稿したものをまとめておきます。

まとめとかないと、確実に自分でも忘れる、、、

あなたの学習の参考や、忘れかけた知識を再確認するきっかけになる？？かも？？

この記事では主にJavaScript・PHP（WordPress）関連。

CSS関連は↓

Web制作学習で詰まったところ、AI解説などまとめ【主にCSS関連】

今後も、順次新ネタがあれば、Xに投稿して、この記事にも追加していきます。

AIの回答と、その他小ネタは、それぞれ基本的に、時系列で、上の方に新しい投稿を重ねていってます。

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕が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}をつけると改善。

参考サイト様↓

（調査メモ）gulp5で画像ファイルが壊れた場合の対処

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指定の重要性

termって何？？（Gemini解説）

↑ざっくりいうと、カテゴリーやタグにおける「ニュース」「スポーツ」なんかの個々の項目。

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 の違い

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

VS Codeでコードを書くのを楽にする小ネタまとめ記事リンク

この記事では、主にJavaScript・PHP関連の知識の小ネタをまとめてますが、

VS CodeやChromeの開発者ツールを使いながら「コードを書く」ってこと全般に関する小ネタは↓↓の記事にまとめてます。

コーディングや学習の息抜きにでも、どぞ、、、

【VS Code】でコードを書いてて「ムキィ！！」ってならないための知識まとめ：【X】に投稿したものまとめてます

CSS関連の記事リンク

Web制作学習で詰まったところ、AI解説などまとめ【主にCSS関連】

僕がWeb制作を学んでいる【デイトラ】の紹介記事はこちら

2024年8月時点で、Web制作コースの中級最終課題取り組んでますが、ガチでレベル高いです。

まだ学習優先で、ポートフォリオ作ってないので、説得力ないのが痛い、、、

歯ごたえありすぎて、もし、メンターさんの素早い的確な回答がなく、全部自分で調べてやったとすると、奥歯が砕けるレベル。

実際は、デイトラではディスコードでメンターさんに質問すると、ほんと素早く的確に回答くださいます。

さすがに、このAI回答まとめ記事に、メンターさんに教わったことは書いてません。

自分が受講してるから言えるのですが、本気でWeb関連で仕事できるレベルになりたいなら、おすすめです。

キャリアに不安を感じている方へ！デイトラで新しいスキルを身につけ、Web業界で活躍しよう！

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます