zprofileに自動で追記されますが下記にも追記



<pre class="wp-block-code"><code>export PATH="$VOLTA_HOME/bin:$PATH"</code></pre>



インストールコマンド



<pre class="wp-block-code"><code>volta install node@14</code></pre>



※使用するNodeバージョンを指定すると最新がインストールされます。



最新バージョンが適用されてしますので、使用するNodeバージョンを設定



<pre class="wp-block-code"><code> "volta": {
 "node": "14.16.1"
 },</code></pre>



基本が、npmコマンドを使用してpackage.jsonに記入のあるコマンドや純正のnpmコマンドを実行するだけで使用可能

Nodeパッケージ管理ツール Volta

下記サイトのような診断系アンケート機能の実装方法を簡単に解説します。



<a href="https://store.medulla.co.jp/questions?_ga=2.212619607.257598691.1623203044-1132281498.1618216955">https://store.medulla.co.jp/questions?_ga=2.212619607.257598691.1623203044-1132281498.1618216955</a>



データの保存方法はfirestoreを利用します。 firestoreのプロジェクト作成方法は省きます。



まず、htmlとcssを下記の感じで用意します。



<pre class="wp-block-code"><code>&lt;div class="c-firestore02 c-inner">
 &lt;h2 class="page-head">Ask three questions&lt;/h2>
 &lt;button class="c-button" id="js-start-button">START&lt;/button>
 
 &lt;div class="c-question01" id="js-question01">
 &lt;h2 class="page-head mt-40">1.髪の長さは？&lt;/h2>
 
 &lt;form class="input-area" id="form1" onsubmit="return false">
 &lt;div class="input-box">
 &lt;div class="radio-wrap">
 &lt;p class="input-wrap">&lt;input type="radio" name="hairLength" id="hairLength1" value="SHORT" required checked>&lt;label for="hairLength1">SHORT&lt;/label>&lt;/p>
 &lt;p class="input-wrap">&lt;input type="radio" name="hairLength" id="hairLength2" value="MEDIUM">&lt;label for="hairLength2">MEDIUM&lt;/label>&lt;/p>
 &lt;p class="input-wrap">&lt;input type="radio" name="hairLength" id="hairLength3" value="LONG">&lt;label for="hairLength3">LONG&lt;/label>&lt;/p>
 &lt;/div>
 &lt;/div>
 &lt;input class="c-button" type="submit" name="" id="js-next-button01" value="NEXT">
 &lt;button class="c-back-button mt-10" id="js-back-button01">BACK&lt;/button>
 &lt;/form>
 &lt;/div>
 
 &lt;div class="c-question02" id="js-question02">
 &lt;h2 class="page-head mt-40">2.頭皮の状態は？&lt;/h2>
 
 &lt;form class="input-area" id="form2" onsubmit="return false">
 &lt;div class="input-box">
 &lt;div class="radio-wrap">
 &lt;p class="input-wrap">&lt;input type="radio" name="hairStatus" id="hairStatus1" value="ノーマル" required checked>&lt;label for="hairStatus1">ノーマル&lt;/label>&lt;/p>
 &lt;p class="input-wrap">&lt;input type="radio" name="hairStatus" id="hairStatus2" value="乾燥・かゆみ">&lt;label for="hairStatus2">乾燥・かゆみ&lt;/label>&lt;/p>
 &lt;p class="input-wrap">&lt;input type="radio" name="hairStatus" id="hairStatus3" value="べたつき">&lt;label for="hairStatus3">べたつき&lt;/label>&lt;/p>
 &lt;/div>
 &lt;/div>
 &lt;input class="c-button" type="submit" name="" id="js-next-button02" value="NEXT">
 &lt;button class="c-back-button mt-10" id="js-back-button02">BACK&lt;/button>
 &lt;/form>
 &lt;/div>
 
 &lt;div class="c-question03" id="js-question03">
 &lt;h2 class="page-head mt-40">3.くせレベルは？&lt;/h2>
 
 &lt;form class="input-area" id="form3" onsubmit="return false">
 &lt;div class="input-box">
 &lt;div class="radio-wrap">
 &lt;p class="input-wrap">&lt;input type="radio" name="hairHabit" id="hairHabit1" value="直毛" required checked>&lt;label for="hairHabit1">直毛(縮毛矯正含む)&lt;/label>&lt;/p>
 &lt;p class="input-wrap">&lt;input type="radio" name="hairHabit" id="hairHabit2" value="うねり">&lt;label for="hairHabit2">うねり&lt;/label>&lt;/p>
 &lt;p class="input-wrap">&lt;input type="radio" name="hairHabit" id="hairHabit3" value="カール">&lt;label for="hairHabit3">カール(パーマ含む)&lt;/label>&lt;/p>
 &lt;/div>
 &lt;/div>
 &lt;input class="c-button" type="submit" name="" id="js-next-button03" value="NEXT">
 &lt;button class="c-back-button mt-10" id="js-back-button03">BACK&lt;/button>
 &lt;/form>
 &lt;/div>
 
 &lt;div class="c-result" id="js-result">
 &lt;h2 class="page-head mt-40">診断結果&lt;/h2>
 &lt;div class="result-box">
 &lt;p class="result-text" id="js-result-text">&lt;/p>
 &lt;/div>
 &lt;button class="c-button" id="js-end-button">閉じる&lt;/button>
 &lt;/div>
 &lt;/div></code></pre>







<pre class="wp-block-code"><code> .c-inner {
 width: 90%;
 max-width: 140rem;
 margin-right: auto;
 margin-left: auto;
 }
 
 .c-firestore02 {
 margin-top: 5rem;
 margin-bottom: 5rem;
 
 .page-head {
 margin-bottom: 10rem;
 font-size: 4.5rem;
 text-align: center;
 }
 
 .c-button {
 display: block;
 width: 80%;
 max-width: 35rem;
 padding: 1.7rem 0;
 margin: 0 auto;
 // font-family: 'Montserrat';
 font-size: 1.8rem;
 color: #fff;
 letter-spacing: 0.1em;
 cursor: pointer;
 background-color: #555;
 border: 1px solid #555;
 border-radius: 1rem;
 
 @include r.mq(mdover) {
 &amp;:hover {
 color: #555;
 background-color: #fff;
 }
 }
 
 &amp;:active {
 color: #fff !important;
 background-color: #444 !important;
 }
 }
 
 .c-back-button {
 display: block;
 min-width: 15rem;
 padding: 0.5rem 2rem;
 margin-right: auto;
 margin-left: auto;
 border: 1px solid #555;
 border-radius: 6px;
 }
 
 .c-question01,
 .c-question02,
 .c-question03,
 .c-result {
 position: fixed;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 text-align: center;
 background-color: #f0f0f0;
 opacity: 0;
 }
 
 .c-question01.is-view,
 .c-question02.is-view,
 .c-question03.is-view,
 .c-result.is-view {
 z-index: 10;
 opacity: 1;
 }
 
 .input-area {
 text-align: center;
 }
 
 .input-box {
 display: inline-block;
 margin: 0 auto 10rem;
 }
 
 .radio-wrap {
 display: flex;
 align-items: center;
 }
 
 .input-wrap {
 display: flex;
 align-items: center;
 margin: 0 1rem;
 
 label {
 margin-left: 0.5rem;
 }
 }
 
 .result-box {
 display: inline-block;
 width: 90%;
 max-width: 60rem;
 margin-bottom: 10rem;
 }
 }</code></pre>



cssで最低限重要なのは.c-question〇〇と.c-question〇〇.is-viewなので、それ以外のスタイルは自由に変更しても大丈夫です。







ここからJSでBACKボタンとNEXTボタンを押した際にフォームが動的に遷移するようにしていきます。 TypeScriptが少し入っていますが、JSで書く場合は不必要な型宣言などを適宜消してください。



<pre class="wp-block-code"><code> // firebaseのパッケージをインポート(予めパッケージはインストールしておいてください)
 import firebase from 'firebase/app'
 import 'firebase/analytics'
 import 'firebase/auth'
 import 'firebase/firestore'
 
 {
 // firebase初期化
 firebase.initializeApp({
 apiKey: '&lt;apiKey>',
 authDomain: '&lt;authDomain>',
 projectId: '&lt;projectId>',
 })
 const db = firebase.firestore()
 
 // 各ボタンを取得して変数化
 const startButton = document.querySelector('#js-start-button') as HTMLElemen
 const nextButton01 = document.querySelector(
 '#js-next-button01'
 ) as HTMLElement
 const nextButton02 = document.querySelector(
 '#js-next-button02'
 ) as HTMLElement
 const nextButton03 = document.querySelector(
 '#js-next-button03'
 ) as HTMLElement
 const backButton01 = document.querySelector(
 '#js-back-button01'
 ) as HTMLElement
 const backButton02 = document.querySelector(
 '#js-back-button02'
 ) as HTMLElement
 const backButton03 = document.querySelector(
 '#js-back-button03'
 ) as HTMLElement
 const endButton = document.querySelector('#js-end-button') as HTMLElement
 
 // 各フォームのブロックを取得して変数化
 const question01 = document.querySelector('#js-question01') as HTMLElement
 const question02 = document.querySelector('#js-question02') as HTMLElement
 const question03 = document.querySelector('#js-question03') as HTMLElement
 const result = document.querySelector('#js-result')
 
 // 各フォームを取得して変数化
 const form1 = document.getElementById('form1') as HTMLFormElement
 const form2 = document.getElementById('form2') as HTMLFormElement
 const form3 = document.getElementById('form3') as HTMLFormElement
 
 // 結果画面のテキスト
 const resultText = document.getElementById('js-result-text') as HTMLElement
 
 // 全ブロックからis-viewクラスを削除する処理を関数化しておく
 const removeViewClass = () => {
 question01?.classList.remove('is-view')
 question02?.classList.remove('is-view')
 question03?.classList.remove('is-view')
 result?.classList.remove('is-view')
 }
 
 // ボタンのクリックイベントを関数化しておく(第一引数にボタンの変数,第二引数に先頭に表示するブロックの変数(必要な場合))
 const clickButtonEvent = (trigger: HTMLElement, view: HTMLElement | null) => {
 trigger?.addEventListener('click', () => {
 removeViewClass()
 if (view) {
 view?.classList.add('is-view')
 }
 })
 }
 
 // ボタンのクリック処理
 clickButtonEvent(startButton, question01)
 clickButtonEvent(nextButton01, question02)
 clickButtonEvent(nextButton02, question03)
 
 clickButtonEvent(backButton01, null)
 clickButtonEvent(backButton02, question01)
 clickButtonEvent(backButton03, question02)
 
 // 最後のnextボタン
 nextButton03?.addEventListener('click', () => {
 removeViewClass()
 result?.classList.add('is-view')
 
 // 各フォームのラジオボタンで選択された値を取得
 const resultValue01 = form1.hairLength.value
 const resultValue02 = form2.hairStatus.value
 const resultValue03 = form3.hairHabit.value
 
 const execute = async () => {
 // 書き込み
 const write = () => {
 return new Promise((resolve: any) => {
 db.collection('&lt;コレクション名>')// コレクション名,フィールド名(field1,..)は自由に変更してください。
 .add({
 field1: resultValue01,
 field2: resultValue02,
 field3: resultValue03,
 timestamp: firebase.firestore.Timestamp.fromDate(new Date()),// 書き込み時にtimestampを設定すると追加順に並び替えられる
 })
 .then(() => {
 resolve()
 })
 .catch((error: any) => {
 console.log('Error adding document: ', error)
 alert('保存に失敗しました')
 })
 })
 }
 
 // フォームの値によって結果に表示するテキストを分岐する
 if (resultValue02 === 'ノーマル' &amp;&amp; resultValue03 === '直毛') {
 resultText.innerHTML = 'あなたはタイプAです。'
 } else if (
 resultValue02 === '乾燥・かゆみ' &amp;&amp;
 resultValue03 === 'カール'
 ) {
 resultText.innerHTML = 'あなたはタイプBです。'
 } else if (resultValue02 === 'べたつき' &amp;&amp; resultValue03 === 'うねり') {
 resultText.innerHTML = 'あなたはタイプCです。'
 } else {
 resultText.innerHTML = 'あなたはタイプDです。'
 }
 
 // write(firestoreに書き込む処理)を待ってからフォームの値をリセットする
 await write()
 form1.reset()
 form2.reset()
 form3.reset()
 }
 execute()
 })
 
 // 結果画面の閉じるボタン
 clickButtonEvent(endButton, null)
 }</code></pre>



必要な説明はコード中に書きました。 簡単に説明すると、NEXTボタンをクリックした時に次に表示するフォームのブロックにis-viewクラスを付けて、z-indexとopacityを操作して先頭に表示させてます。BACKボタンも同様です。 そして、最後のNEXTボタンを押した時だけにfirestoreに書き込む処理を行い、結果に表示するテキストを分岐して代入し、フォームをリセットさせてます。

診断系アンケート機能の実装方法 - firestore

書き込み



<pre class="wp-block-code"><code> import firebase from 'firebase/app'
 import 'firebase/analytics'
 import 'firebase/auth'
 import 'firebase/firestore'
 
 firebase.initializeApp({
 apiKey: '&lt;apiKey>',
 authDomain: '&lt;authDomain>',
 projectId: '&lt;projectId>',
 })
 const db = firebase.firestore()
 
 db.collection('&lt;コレクション名>')
 .doc('&lt;ドキュメント名>') //collection.add({})だとdocの指定はない
 .set({
 title: "タイトル1",
 category: "カテゴリ1",
 timestamp: firebase.firestore.Timestamp.fromDate(new Date()),// 追加日を登録する。追加順に並び替える際に必須
 })
 .then(() => {
 // 書き込み完了後のコード
 })
 .catch((error: any) => {
 console.error('Error adding document: ', error)
 alert('保存に失敗しました')
 })</code></pre>







読み込み(コードは書き込みの続き)



<pre class="wp-block-code"><code> db.collection('&lt;コレクション名>')
 .orderBy('timestamp', 'asc') // 追加日昇順に並び替え
 .get()
 .then((querySnapshot: any) => { 
 querySnapshot.forEach((doc: any) => {
 console.log(doc.get('title'),doc.get('category'))// (タイトル1,カテゴリ1)
 })
 })</code></pre>



timestampを設定しないと自動生成されたドキュメントIDの順番に並び替えられてしまいます。 ドキュメントを追加した順に並び替える方法を探すのに少々時間がかかったのでメモ程度に。

firestore ドキュメントを追加順に並び替える方法

CSSの詳細度は４つの値(0, 0, 0, 0)で計算され、左の値が高いほど詳細度が高くなっていきます。



一番右の列



要素セレクタ、擬似要素は一番右の列で計算される







詳細度(0, 0, 0, 1)の例



<pre class="wp-block-code"><code> p{~}
 p:after{~}</code></pre>



詳細度(0, 0, 0, 2)の例



<pre class="wp-block-code"><code>div p{~}</code></pre>



右から2番目の列



クラスセレクタ、属性セレクタ、擬似クラスは右から2列目で計算される











詳細度(0, 0, 1, 0)の例



<pre class="wp-block-code"><code> .text{~}
 &#91;class]{~}</code></pre>



細度(0, 0, 1, 1)の例



<pre class="wp-block-code"><code> a&#91;target="_blank"]{~} //要素セレクタと属性セレクタ
 .class p{~}</code></pre>



細度(0, 0, 2, 0)の例



<pre class="wp-block-code"><code> .class .text{~}</code></pre>







右から3番目の列



idセレクタは右から3列名で計算される



<pre class="wp-block-code"><code> #id{~}</code></pre>







右から4番目の列



<pre class="wp-block-code"><code> &lt;p style="color: #000;">テキスト&lt;/p></code></pre>











順序によるソート(カスケーディング)



詳細度の同じルールが複数ある場合、後から出てきた方のルールが適用される。



!important CSSの値に「!important」が指定されたスタイルは詳細度関係無しに最も優先して適用される。

CSSの詳細度の値について

忘れがちなCSSセレクタ達を紹介していきます。



リンクで使用するセレクタ



<pre class="wp-block-code"><code>a:link{~}	未訪問のリンク
a:visited{~}	訪問済みのリンク
a:active{~}	クリック状態のリンク</code></pre>



コピペで再利用しやすいように載せます。



<pre class="wp-block-code"><code> //直下の子要素 1つ下の階層の子要素が対象
 div > p{~}
 
 //兄弟要素 指定した要素より後に出てくる同じ階層の要素が対象
 div ~ p{~}
 
 //隣接要素 その要素の直後にある要素が対象
 div + p{~}
 
 //偶数番目にある要素
 p:nth-of-type(even){~}
 
 //奇数番目にある要素
 p:nth-of-type(odd){~}
 
 //指定した属性を持つ要素が対象
 p&#91;class]{~}
 a&#91;target]{~}
 
 //指定した属性を持ち、値が一致する要素が対象
 a&#91;target="_blank"]{~}
 a&#91;href="https://paaaak.com/"]{~}
 
 //指定した属性を持ち、値の始まりが一致する要素が対象
 a&#91;href^="mailto:"]{~} //href属性が「mailto:」から始まる要素
 
 //指定した属性を持ち、値の終わりが一致する要素が対象
 a&#91;href$=".pdf"]{~} //href属性の拡張子が.pdfの要素
 
 //指定した属性の値が部分一致する要素が対象
 p&#91;class*="text"]{~} //.c-text,.c-intro-textなどクラス名に「text」を含む要素
 
 //文章の一行目が対象
 p::first-line{~}
 
 //文章の一文字目が対象
 p::first-letter{~}
 
 //〇〇以外の要素を対象
 p:not(.c-blue-text){~} //クラス名が「c-blue-text」以外のpタグを対象
 
 //空要素を対象
 div:empty{~} //&lt;div>&lt;/div>のような要素の中身が空のdivタグを対象
 
 //チェック状態のセレクタを対象(チェックボックスやラジオボタン)
 input&#91;type="checkbox"]:checked{~}
 input&#91;type="radio"]:checked{~} 
 
 //ページ内アンカーリンク
 #block:target{~} //&lt;a href="#block">&lt;/a>をクリックした時に#blockの要素に適用されるスタイル
</code></pre>











IEでは今の所使えないセレクタ(IE以外の主要なブラウザではサポートされている)



:is() --- 複数のセレクタを1つにまとめられる



<pre class="wp-block-code"><code> //Before
 .c-about .c-page-title:hover,.c-about .c-page-subtitle:hover{
 opacity: 1;
 }
 
 //After
 .c-about :is(.c-page-title,.c-page-subtitle):hover{
 opacity: 1;
 }</code></pre>



このように同じスタイルをあてる箇所でも分けて書く必要があった所が、:is()セレクタを使用することによって1つにまとめることができるので、コードが短くなり、可動性も向上する。 ただ、使えそうな場面は限られているので、必要に応じて使うと良い。



:where() --- 複数のセレクタを1つにまとめられる。:where()で指定した部分の詳細度を0にする 基本は:is()セレクタと全く同じ使い方だが、:where()で指定した部分の詳細度を0にするという点が違う。







<pre class="wp-block-code"><code> &lt;div class="c-about"&gt;
 &lt;h2 class="c-page-title"&gt;ページタイトル&lt;/h2&gt;
 &lt;/div&gt;</code></pre>



<pre class="wp-block-code"><code> .c-about :where(.c-page-title,h2){
 color: blue;
 }
 
 .c-about h2{
 color: yellow;
 }</code></pre>



上記の場合、color: yellow;が勝ちます。 上の詳細度は(0,0,1,0)となり、下の詳細度(0,0,1,1)に負けます。 .c-page-titleの詳細度は本来(0,0,1,0)ですが、:where()の中で指定しているので、詳細度は0になっています。

忘れられがちなCSSセレクタ集

v6の設定方法について



<pre class="wp-block-code"><code> npx husky-init &amp;&amp; npm install
 
 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'</code></pre>



commit時の設定の上記の様にする



pre-commitは初期設定時にありますので、必要に応じて実行内容を変更してください。



.huskyフォルダが生成され、その中にpre-commitファイルが備わりますので、







<pre class="wp-block-code"><code>npm run lint-staged</code></pre>



こちらのコマンドを追加し、







<pre class="wp-block-code"><code>"lint-staged": "lint-staged",</code></pre>



package.jsonにこちらのコマンドを記入し、pre-commitで実行されるようにします。 pre-commitは初期設定時にありますので、必要に応じて実行内容を変更してください。







<pre class="wp-block-code"><code>npx --no-install commitlint --edit ""</code></pre>



commit-msgは最初の設定時に追加していますので、commit-msgにこちらのコマンドを追加







<pre class="wp-block-code"><code>"prepare": "husky install",</code></pre>



上記がpackage.jsonに記入されます











<pre class="wp-block-code"><code> "commitlint": {
 "extends": &#91;
 "@commitlint/config-conventional"
 ],
 "rules": {
 "type-enum": &#91;
 2,
 "always",
 &#91;
 "init",
 "add",
 "update",
 "build",
 "chore",
 "ci",
 "docs",
 "feat",
 "fix",
 "perf",
 "refactor",
 "revert",
 "style",
 "test"
 ]
 ]
 }
 },
 "lint-staged": {
 "*.{js,ts}": &#91;
 "npx prettier --check --write"
 ],
 "*.{scss,json}": &#91;
 "npx prettier --check --write"
 ],
 "*.scss": &#91;
 "npx stylelint --fix",
 "npx stylelint --fix"
 ],
 "*.{ts}": &#91;
 "npx eslint --fix"
 ]
 },</code></pre>

husky セットアップ方法

基本的な型を載せていこうと思います。 型推論が大変優れているので、基本型はエディタがサポートしてくれます。 ですが、自分で書いていかないといけない時もあります。



下の方に載せている合併型や交差型、エイリアスは結構出現頻度高いです。



type-string



<pre class="wp-block-code"><code>const sampleString: string = "TypeScript"</code></pre>



type-number



<pre class="wp-block-code"><code>const sampleNumber: number = 1234</code></pre>



type-boolean



<pre class="wp-block-code"><code>const sampleBlooean: boolean = true</code></pre>



type-Array



<pre class="wp-block-code"><code>const sampleArray: number&#91;] = &#91;1,2,3]</code></pre>



type-Tuple



<pre class="wp-block-code"><code>let x:&#91;string, number]
x = &#91;"TypeScript", 1]</code></pre>



type-any



<pre class="wp-block-code"><code>const sampleAny: any = "TypeScript"</code></pre>



type-unknown anyに似ていますが、型安全なanyをしてしたい場合に使用します。 値の代入には寛容ですが、値の利用についてはエラーになります。



<pre class="wp-block-code"><code>const sampleUnknown00: string&#91;] = &#91;1,2,3] //error
const sampleUnknown01: any&#91;] = &#91;1,2,3]
const sampleUnknown02: unknown&#91;] = &#91;1,2,3]

sampleUnknown01&#91;0].toFixed(1)&lt;br>sampleUnknown02&#91;0].toFixed(1) //error
</code></pre>



type-void 戻り値がない時に利用します。



<pre class="wp-block-code"><code>function samplaeVoid(message: string):void{
　console.log(message)
}
samplaeVoid("TypeScript")</code></pre>



type-null/type-undefined



<pre class="wp-block-code"><code> let sampleUndefind = undefined
 let sampleNull = null
 // --strictNullChecks: true
 // 厳密なヌルチェックを有効にします</code></pre>



type-never 発生し得ない値の型



<pre class="wp-block-code"><code> function sampleNever(message: string): never {
 throw new Error(message)
 }
 
 sampleNever("TypeScript")</code></pre>



type-object 非プリミティブ型を表す {}の時はエラーにならない



<pre class="wp-block-code"><code> let sampleObject01:{}
 let sampleObject02: object
 sampleObject01 = true
 sampleObject01 = 0
 sampleObject01 = "TypeScript"
 sampleObject02 = false //error
 sampleObject02 = 0 //error
 sampleObject02 = "TypeScript" //error</code></pre>



type-enum 列挙型



<pre class="wp-block-code"><code> enum sampleEnum {
 RED = '#FF0000',
 WHITE = '#FFFFFF',
 GREEN = '#008000',
 BLUE = '#0000FF',
 YELLOW = '#FFFF00',
 BLACK = '#000000'
 }
 
 let green = sampleEnum.GREEN;
 console.log({ green });
 
 enum sampleEnum {
 YELLOW = '#FFFF00',
 GRAY = '#808080'
 }
 
 let newColor = sampleEnum.YELLOW
 
 console.log({ newColor });</code></pre>



type-aliases



<pre class="wp-block-code"><code> type sampleAliases01 = string
 
 const fooString:sampleAliases01 = 'TypeScript'
 
 type sampleAliases02 = {
 name: string;
 age: number;
 };
 
 const example1 = {
 name: 'TypeScript',
 age: 7
 };
 
 type Profile2 = typeof example1;
 
 const example2: sampleAliases02 = {
 name: 'TypeScript',
 age: 7
 };</code></pre>



type-assertions 型推論では追いつかない型を手動で示し、右辺に記載する



<pre class="wp-block-code"><code> const name01: any = 'TypeScript';
 const sampleAssertions = (name01 as string);</code></pre>



type-union 合併 和を指します。 パイプ(｜)で連結 複数の型のうち一つ成立させるような時



<pre class="wp-block-code"><code> let sampleUnion01: number | string;
 sampleUnion01 = 7;
 sampleUnion01 = "TypeScript";
 sampleUnion01 = false; // error
 
 let sampleUnion02: (number | string)&#91;];
 sampleUnion02 = &#91;7, "TypeScript"];
 sampleUnion02 = &#91;7, "TypeScript", false]; // error</code></pre>



type-intersection 交差 共通しているもの アンパサンド(＆)で連結



<pre class="wp-block-code"><code> type sampleInterSection01 = {
 name: string
 age: number
 }
 
 type sampleInterSection02 = {
 gender: string
 other: string
 }
 
 type sampleInterSection03 = sampleInterSection01 | sampleInterSection02 //union
 type sampleInterSection04 = sampleInterSection01 &amp; sampleInterSection02 //intersection
 
 const sampleInterSectionObject01:sampleInterSection03 = {
 name: "TypeScript",
 age: 7,
 gender: "male",
 other: "masaru",
 }
 
 const sampleInterSectionObject02:sampleInterSection04 = { //error
 name: "TypeScript",
 age: 7,
 gender: "male",
 }</code></pre>



Interface



<pre class="wp-block-code"><code> interface ObjectInterface {
 name: string;
 age: number;
 }</code></pre>



<pre class="wp-block-code"><code> let object: ObjectInterface = {
 name: 'Ham-san',
 age: 43
 };</code></pre>



<ul><li>合併型や交差型が必要な場合には<code>type</code>を使います</li><li><code>extend</code>や<code>implements</code>をしたいときは<code>interface</code>を使います</li></ul>

Basic type of TypeScript

Tailwind CSSとは、ユーティリティファーストのCSSライブラリです。



Bootstrapとは異なり、.btnや.cardなどのコンポーネント系のクラスは定義されていません。 代わりに、1つのスタイルのみを変更するユーティリティ系のクラスが多く用意されています。



Tailwind CSSを使うと、基本的にHTMLファイルを編集するだけでほぼ全てのスタイルを当てることができるくらいユーティリティ系のクラスが豊富です。例えば下記のように書けます。



<pre class="wp-block-code"><code> &lt;button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded select-none">
 Button
 &lt;/button></code></pre>



しかし、このようにクラスをやたらとつける方法は取らず、基本はcssでスタイルを当てていきます。



では、どのような時にTailwind CSSを使用するのでしょうか。 この記事では、Tailwind CSSを導入した理由とメリットをまとめます。



<pre class="wp-block-code"><code> &lt;div class="c-main-wrap">
 &lt;h3 class="c-main-title">タイトル&lt;/h3>
 &lt;p class="c-main-text">テキスト&lt;/p>
 &lt;/div></code></pre>



<pre class="wp-block-code"><code> .c-main-wrap{
 display: flex;
 align-items: center;
 }</code></pre>



例えば上記のようなコードは、Tailwind CSSを使えば下記のように書けます。



<pre class="wp-block-code"><code> &lt;div class="flex items-center">
 &lt;h3 class="c-main-title">タイトル&lt;/h3>
 &lt;p class="c-main-text">テキスト&lt;/p>
 &lt;/div> </code></pre>



上記のc-main-wrapのように、クラスをつけてスタイルを当てたが、スタイルシートに1,2行しか書かないなどの場合にTailwind CSSのクラスをユーティリティ的に使用します。flexboxはよく使います。



このメリットを書きに記します。



1.クラス名を考える手間が省ける 通常のコーディングでは、HTML構造を設計し、クラス名を考えて当てていきます。 ただ、このクラス名を考えるのに悩まされるてしまうことは度々あります。



TailwindCssを使えば、クラス名を考える時間と、クラス名をCSSファイルに記述する時間を省けます。



2.プロパティ変更によるミスを減らせる 通常のCSSでコーディングしている場合、複数のHTML要素に指定されたクラスのプロパティを変更した時に、意図しない場所で表示崩れを起こす可能性があります。



例えば、.c-main-wrapが他の場所で使われていたとし、それを忘れていた上で下記のように変更すると他の場所で意図しない表示となります。また、align-items一つの変更に別のクラスを作成しなくてはいけないのが少々手間に感じます。



<pre class="wp-block-code"><code> .c-main-wrap{
 display: flex;
 align-items: flex-end;
 }</code></pre>



一方、Tailwind CSSはインラインで記述する性質上、このようなミスが起こりにくくなっています。



長くなりましたが、導入の理由として、flexboxなどの1つのスタイルをユーティリティ的に使えるという俊敏性と即効性が大きいです。コンポーネント系のクラスが多く用意されているBootstrapではこのような使い方はできないですね。

Tailwind CSS

sassといってもコンパイル方法が3つに分かれます。



・Ruby Sass --- Ruby製。2019年3月にサポート終了。 ・LibSass(node-sass) --- C++製。2020年10月に非推奨。早くて2022年くらいにサポート終了している可能性がある。 ・Dart Sass --- Dart製です。現在、Sass公式が推奨しています。



Sassの公式ブログで、LibSassは非推奨宣言されていたので、まだ使われている方は早めに推奨されているDart Sassに移行した方が良さそうです。



<h2>Dart Sassで変わること</h2>



Dart Sassに変わったことで大きく変わることはグローバル変数が使えないということです。 今まで@importで書いていた記述を@useと@forwardに移行する必要があります。



@importは完全に廃止されることが決定しています。 なので、@importから@useへの乗り換えをスムーズにするために、早いうちにLibSassからDart Dassへの乗り換えをしておいた方が良さそうです。



<h2>利用方法</h2>



<h3>@use</h3>



@useルールはメンバー(変数、関数、Mixins)をカプセル化し、読み込んだスタイルシートのみに適用させます。 また@useで読み込んだファイル名が名前空間になり、その名前空間から各メンバーを参照できます。



<pre class="wp-block-code"><code> @use "variables";
 @use "mixins";
 
 .element {
 background-image: url(variables.$filePathStrawberry + 'assets/images/common/img_logo.jpg');
 
 @include mixins.mq(mdless) {
 	 background-image: none;
	 }
 }</code></pre>



名前空間はas節によって変更可能です。



<pre class="wp-block-code"><code> @use "variables" as v;
 @use "mixins" as r;
 
 .element {
 background-image: url(v.$filePathStrawberry + 'assets/images/common/img_logo.jpg');
 
 @include r.mq(mdless) {
 	 background-image: none;
	 }
 }</code></pre>



ディレクトリ名はちがうけど、名前が同じファイルを読み込む時、名前空間を変えないとエラーになります。



<pre class="wp-block-code"><code> @use 'variables/main';//エラー
 @use 'functions/main';//エラー</code></pre>



さらに



<pre class="wp-block-code"><code> @use 'variables/main' as variables;//名前空間を変える
 @use 'functions/main' as functions;//名前空間を変える</code></pre>



カプセル化の影響によって、変数はグローバルに適用されなくなりました。 変数を外部から変更する場合は、with節を使います。!defaultフラグが使用されている変数のみを変更できます。



<pre class="wp-block-code"><code> $inner-width: 140rem !default; // ここだけ変更可能;</code></pre>



<pre class="wp-block-code"><code> @use "base" with (//widthで変更
 $inner-width: 160rem
 );</code></pre>



@useで読み込むと変数やMixinsといったメンバーは、読み込んだファイル以外は、参照できません。 孫の変数を出力しようとしている下記のコードはエラーとなります。



<pre class="wp-block-code"><code>_color.scss

$main-color: #f00;</code></pre>



<pre class="wp-block-code"><code>_base.scss
 
 @use 'color';
 @use 'animation';
 @use 'button';</code></pre>



<pre class="wp-block-code"><code>_styles.scss
 
 @use 'base';
 
 .c-text{
 color: base.color.$main-color;//エラーになります
 }</code></pre>



<h3>@forward</h3>



@forwardは上記のような場合にハブとなるファイル(_base.scss)に使用します。



<pre class="wp-block-code"><code>_color.scss

$main-color: #f00;</code></pre>



<pre class="wp-block-code"><code>_base.scss
 
 @forward 'color';
 @forward 'animation';
 @forward 'button';</code></pre>



<pre class="wp-block-code"><code>_styles.scss
 
 @use 'base';
 
 .c-text{
 color: base.color.$main-color;//#f00
 }</code></pre>



このように、ハブとなるファイルで@useの代わりに@forwardを使用すると、エラーが出ることなく変数を呼び出せます。



@forwardにはもう一つ特徴があります。それは、読み込み元からはアクセスできないという点です。 例えば下記の場合にエラーが起こります。



<pre class="wp-block-code"><code>_color.scss

$main-color: #f00;</code></pre>



<pre class="wp-block-code"><code>_base.scss

@forward 'color';
 
body{
 color: color.$main-color;//エラーになります
}</code></pre>



@forwardはスコープを転送しているので、_base.scssからはアクセスできません。



なので、変数ファイルを外に出し、_base.scssからもアクセスしたい場合は、 @forwardと@useを併記します。



<pre id="block-ab109635-136d-46b0-bb0d-660f0233c660" class="wp-block-code"><code>_color.scss $main-color: #f00;</code></pre>



<pre class="wp-block-code"><code>_base.scss
 
 @forward 'color';
 @use 'color';
 
 body{
 color: color.$main-color;//エラーになります
 }</code></pre>



これで_base.scssからも元ファイルの変数にアクセスできます。



<h2>まとめ</h2>



@useで読み込むと、変数やMixinsといったメンバーは、読み込んだファイル以外は参照できないです。 なので、さらに他のファイルから読まれることを前提とする場合は、@forwardと併記して上手に使い分けましょう また、@forwardはスコープを転送しているので、読み込み元からはアクセスできないという特徴があります。

Dart-sass @useと@forward

カスタム投稿タイプ名・・・item タクソノミー 名・・・item_category, item_member item_categoryのタームの例：FOOD, DRINK, FASHION,OTHER… item_memberのタームの例：Aさん, Bさん, Cさん…



上記のカスタム投稿タイプの設定を想定します。タームはあくまでもイメージを付きやすくするための一例です。



ターム一覧ページのパスは、 http://〇〇.com/[タクソノミー名]/[ターム名] です。 例えば、こんな感じです。 http://〇〇.com/item_category/food http://〇〇.com/item_member/a



item_categoryとitem_memberではテンプレートファイルが基本的に別になります。 他のカスタム投稿タイプのターム一覧ページが存在しなければ、taxonomy.phpとして一緒にしても問題ないです。



テンプレートファイルを分けるが、同じコードを使用する場合、下記のように片方からは読み込むだけでOKです。



<pre class="wp-block-code"><code> &lt;?php get_template_part( 'taxonomy-item_category' ); ?></code></pre>



では、taxonomy-item_category.phpを解説していきます。



・ターム一覧をループで取得し、メニューとして使いたい ・タームで絞った記事一覧を表示したい



この2パターンについて解説します。



とりあえず、下記をファイル上部に記述します。



<pre class="wp-block-code"><code>taxonomy-item_category.php
 
&lt;?php 
 $taxonomy = get_query_var('taxonomy');//現在ページのタクソノミー取得
 ?>
 ...</code></pre>



・ターム一覧をループで取得し、メニューとして使いたい場合



<pre class="wp-block-code"><code>taxonomy-item_category.php
 
&lt;ul>
 &lt;li>&lt;a href="&lt;?php echo home_url(); ?>/item">ALL&lt;/a>&lt;/li>
 &lt;?php 
 $categories = array(
 'post_type' => 'item',//カスタム投稿タイプ名
 'taxonomy' => 'item_category'//取得したいタクソノミー名
 );
 $categories = get_categories( $categories );//上で指定した配列を条件にターム一覧を取得
 if($categories):
 foreach($categories as $cat):
 if($term === $cat->slug)://$termはグローバル変数で現在ページのタームが自動で入る
 ?>
 &lt;li class="isActive">&lt;a href="javascript:void(0);">&lt;?php echo $cat->name ?>&lt;/a>&lt;/li>
 &lt;?php else: ?>
 &lt;li>&lt;a href="&lt;?php echo home_url(); ?>/item_category/&lt;?php echo $cat->slug ?>">&lt;?php echo $cat->name ?>&lt;/a>&lt;/li>
 &lt;?php
 endif;
 endforeach;
 wp_reset_postdata();
 endif;
 ?>
 &lt;/ul></code></pre>



別のタクソノミーのターム一覧を取得したい場合は、「item_category」の部分を任意で変更してください。 $termに現在ページのタームが入っているのがミソです。これを利用してif文で分岐することで、現在ページのタームにclass名を付けれます。



・タームで絞った記事一覧を表示したい場合



<pre class="wp-block-code"><code>taxonomy-item_category.php
 
&lt;ul>
 &lt;?php 
 $args = array(
 'post_type' => 'item',
 'posts_per_page' => -1,
 'tax_query' => array(
 array(
 'taxonomy' => $taxonomy,//現在ページのタクソノミー
 'field' => 'slug',
 'terms' => $term,//現在ページのターム
 ),
 ),
 );
 $the_query = get_posts( $args );
 if ( $the_query ) :
 foreach ( $the_query as $post ) : setup_postdata( $post );//上の配列で指定した通り、現在ページのタームの記事一覧をループ
 $item_category = get_the_terms($post->ID, 'item_category');//記事のitem_categoryのタームを取得
 $item_member = get_the_terms($post->ID, 'item_member');//記事のitem_memberのタームを取得
 ?>
 &lt;li>
 &lt;h3>&lt;?php the_title() ?>&lt;/h3>
 &lt;p>&lt;?php echo $item_category&#91;0]->name; ?>&lt;/p>//ターム名を表示 タームが複数ある場合はループで表示する
 &lt;p>&lt;?php echo $item_member&#91;0]->name; ?>&lt;/p>//ターム名を表示
 &lt;p>&lt;?php echo get_the_excerpt() ?>&lt;/p>
 &lt;/li>
 &lt;?php
 endforeach;
 wp_reset_postdata();
 endif;
 ?>
 &lt;/ul></code></pre>



上記コードで現在ページのタームに絞った記事一覧が表示されます。 配列で取得する記事を指定する際に、変数で現在ページのタクソノミーとタームを指定することで、 別のタクソノミーのテンプレート(taxonomy-item_category.php)で読み込んだ場合も変更点がないというのがミソです。

WordPress カスタム投稿タイプのターム一覧ページ

functions.phpに下記を記述で実装できる。下記をデフォルトとする。



<pre class="wp-block-code"><code> // カスタム投稿タイプ item
 function item_custom_post_type(){
 $labels = array(//管理画面での表示
 'name' => _x('アイテム', 'post type general name'),
 'singular_name' => _x('アイテム', 'post type singular name'),
 'add_new' => _x('新規追加', 'item'),
 'add_new_item' => __('アイテム'),
 'edit_item' => __('編集'),
 'new_item' => __('新規アイテム'),
 'view_item' => __('表示'),
 'search_items' => __('項目検索'),
 'not_found' => __('記事が見つかりません'),
 'not_found_in_trash' => __('ゴミ箱に記事はありません'),
 'parent_item_colon' => ''
 );
 $args = array(
 'labels' => $labels,
 'public' => true,//falseで個別ページを事実上なくす。管理画面にURLが出なくなり、検索エンジンからもヒットしない。ただURLは存在する。&#91;1]
 'publicly_queryable' => true,
 'show_ui' => true,
 'query_var' => true,
 'capability_type' => 'post',
 'hierarchical' => false,//階層構造の有無
 'menu_position' => 4,//管理画面メニューの位置
 'has_archive' => true,//アーカイブがあるかどうか
 'rewrite' => array( 'slug' => 'item'),
 'supports' => array('title','editor','thumbnail')//編集ページの順番
 );
 register_post_type('item',$args);//itemはカスタム投稿のスラッグ名
 
 $args = array(//タクソノミー追加
 'label' => 'カテゴリー',//管理画面で表示される文字
 'public' => true,
 'show_ui' => true,
 'show_in_menu' => true,//管理画面のメニューで一覧を表示するか
 'show_in_nav_menus' => true,
 'show_admin_column' => true,
 'hierarchical' => false,//ページ階層の指定
 'query_var' => true
 );
 register_taxonomy('item_category','item',$args);//タクソノミー追加(item_categoryはタクソノミーのslug)
 }
 add_action('init', 'item_custom_post_type');</code></pre>



個別ページを404にしたい時に下記を記述する。上記コードの「'public' => false」と併用をおすすめします。



<h2>出力方法</h2>



メインループとサブループの2パターンを載せておきます。



メインループ



<pre class="wp-block-code"><code> &lt;div>
 &lt;?php 
 if ( have_posts() ):
 while ( have_posts() ):the_post();
 $category = get_the_terms($post->ID, 'item_category');//記事のitem_categoryのタームを取得
 ?>
 &lt;h2>&lt;?php the_title(); ?>&lt;/h2>
 &lt;p>&lt;?php echo $category&#91;0]->name ?>&lt;/p>//ターム名表示 複数ある場合はループすれば良い
 &lt;?php endwhile; endif; ?>
 &lt;/div> </code></pre>



サブループ



<pre class="wp-block-code"><code> &lt;div>
 &lt;?php 
 $args = array(
 'post_type' => 'item',//カスタム投稿タイプ名
 'posts_per_page' => -1//表示投稿数(-1は全て)
 );
 $the_query = get_posts( $args );
 if ( $the_query ): 
 foreach ( $the_query as $post ): setup_postdata( $post );
 $item_category = get_the_terms($post->ID, 'item_category');//記事のitem_memberのタームを取得
 ?>
 &lt;h2>&lt;?php the_title() ?>&lt;/h2>
 &lt;p>&lt;?php echo $item_category&#91;0]->name; ?>&lt;/p>//ターム名を表示
 &lt;?php
 endforeach;
 wp_reset_postdata();
 endif;
 ?>
 &lt;/div></code></pre>



サブループは$argsで色々制限できるので、自由度が高い。

WordPress カスタム投稿タイプ

ループとは、ページ内に投稿データを表示する繰り返し処理のことです。







WordPressにはメインループ とサブループがある。 要求されたURLに基づき自動的に取得された投稿データを出力するのがメインループであり、任意で指定した条件に基づき投稿データを取得・出力するのがサブループです。



例えば、ニュース一覧ページでは、記事をメインループ で呼び出せるのに対し、 トップページでは記事をメインループ で呼び出せない。なので、サブループを使用して記事を呼び出す必要がある。 このようにテンプレートファイルによって、メインループ で呼び出せるデータが変わる。



<h2>メインループ</h2>



メインループの基本的な書き方 



<pre class="wp-block-code"><code> &lt;?php if(have_posts()): while(have_posts()): the_post(); ?>
 //ループ内処理
 &lt;?php the_permalink();?> //URL表示
 &lt;?php the_title();?> //タイトル表示
 &lt;?php echo get_the_excerpt() ?> //抜粋を表示
 &lt;?php the_content();?>　//内容を表示
 &lt;?php the_post_thumbnail();?>　//アイキャッチを表示
 &lt;?php the_time();?> //投稿時間を表示
 &lt;?php the_category();?> //カテゴリーを表示
 &lt;?php the_tags();?> //タグを表示
 
 &lt;?php endwhile; endif; ?>
 &lt;?php else: ?>
 //投稿データが取得できない場合の処理
 &lt;?php endif; ?></code></pre>



get_the_excerpt() the_excerpt()の場合、抜粋がpタグで囲まれて出力される。基本的にpタグは不要なので、 echo get_the_excerpt()を使用すると良い。



また、下記のコードで抜粋する文字数の指定と末尾の記号の変更ができる。functions.phpで一括設定する方法もある。



<pre class="wp-block-code"><code> &lt;?php echo mb_strimwidth(get_the_excerpt(), 0, {文字数}, "…", "UTF-8"); ?></code></pre>



the_content() この中は基本的にWYSIWYG対応となる。そのままだとpタグで囲まれるので、不要な場合、下記を記述する。



<pre class="wp-block-code"><code> &lt;?php remove_filter ('the_content', 'wpautop'); the_content(); ?></code></pre>



the_time() the_date()の場合、ループ内で前の記事と日付が同じ時、日付が表示されない仕様になっている。the_time()を使用することで解決できる。 また、下記のようにフォーマットの指定が可能。



<pre class="wp-block-code"><code> &lt;?php the_time('Y/m/d'); ?>//2021/04/28</code></pre>



<h2>サブループ</h2>



サブループの基本的な書き方



トップページなどで投稿一覧を取得する場合を想定してます



<pre class="wp-block-code"><code> &lt;?php 
 $args = array(
 'post_type' => 'post',//投稿タイプを指定 postは通常投稿
 'posts_per_page' => 8//表示件数
 );
 $the_query = get_posts( $args );
 if ( $the_query ) :
 foreach ( $the_query as $post ) : setup_postdata( $post );
 ?>
 //ループ内処理
 &lt;?php
 endforeach;
 wp_reset_postdata();
 endif;
 ?></code></pre>



ループ内処理の基本的なタグの書き方はメインループと同じです。

WordPress メインループとサブループ

プラグインを使用する場合、反映されるソースが下記と決まっている。なので、予め静的コーディングする際にこのクラス名でコーディングする必要がある。



WP-PageNaviの場合



<pre class="wp-block-code"><code> &lt;div class="wp-pagenavi">
 &lt;span class="pages">2 / 4&lt;/span>
 &lt;a class="previouspostslink" rel="prev" href="/example.com/news/">«&lt;/a>
 &lt;a class="page smaller" title="Page 1" href="/example.com/news/">1&lt;/a>
 &lt;span class="current">2&lt;/span>
 &lt;a class="page larger" title="Page 3" href="/example.com/news/page/3/">3&lt;/a>
 &lt;a class="page larger" title="Page 4" href="/example.com/news/page/4/">4&lt;/a>
 &lt;a class="nextpostslink" rel="next" href="/example.com/news/page/3/">»&lt;/a>
 &lt;/div></code></pre>



コンポーネントのクラス名を使用していたり、html構造を変更しないと実装できない場合などは、下記のようにプラグインなしで実装する方法もある。



<pre class="wp-block-code"><code>index.php
 
//ループ文の上に記述しておく。
 $paged = get_query_var('paged')? get_query_var('paged') : 1;//現在のページ番号</code></pre>



さらに



<pre class="wp-block-code"><code>index.php

 &lt;?php 
 $pages = $wp_query->max_num_pages;//ページ数
 ?>
 &lt;div class="c-navigation" role="navigation">
 &lt;?php if($paged != 1): ?>
 &lt;a class="c-navigation-page" href="&lt;?php echo home_url(); ?>/news/page/1/">&lt;&lt;&lt;/a>//最初のページ
 &lt;?php endif; ?>
 &lt;?php if($paged - 1 > 0): ?>
 &lt;a class="c-navigation-page" href="&lt;?php echo home_url(); ?>/news/page/&lt;?php echo $paged - 1 ?>/">&lt;?php echo $paged - 1 ?>&lt;/a>//前のページ
 &lt;?php endif; ?>
 &lt;span class="c-navigation-page current">&lt;?php echo $paged ?>&lt;/span>//現在のページ
 &lt;?php if($paged + 1 &lt;= $pages): ?>
 &lt;a class="c-navigation-page" href="&lt;?php echo home_url(); ?>/news/page/&lt;?php echo $paged + 1 ?>/">&lt;?php echo $paged + 1 ?>&lt;/a>//次のページ
 &lt;?php endif; ?>
 &lt;?php if($paged != $pages): ?>
 &lt;a class="c-navigation-page" href="&lt;?php echo home_url(); ?>/news/page/&lt;?php echo $pages ?>/">>>&lt;/a>//最後のページ
 &lt;?php endif; ?></code></pre>



<h2>投稿個別ページ編</h2>



ついでに個別投稿のページネーションもまとめておきます。 下記で前後の投稿のページネーションを実装できます。



<pre class="wp-block-code"><code>shingle.php

&lt;div class="c-detail-navigation" role="navigation">
 &lt;?php 
 $prev_post = get_previous_post();
 $next_post = get_next_post();
 if( !empty( $prev_post ) ):
 $url_prev = get_permalink( $prev_post->ID );//前投稿のパーマリンク取得
 ?>
 &lt;a class="c-detail-navigation-btn c-detail-navigation-btn-prev" rel="prev" href="&lt;?php echo $url_prev ?>">PREV&lt;/a>
 &lt;?php 
 endif;
 if( !empty( $next_post ) ):
 $url_next = get_permalink( $next_post->ID );//次投稿のパーマリンク取得
 ?>
 &lt;a class="c-detail-navigation-btn c-detail-navigation-btn-next" rel="next" href="&lt;?php echo $url_next ?>">NEXT&lt;/a>
 &lt;?php endif; ?>
 &lt;/div></code></pre>

WordPressでページネーションを作る

<h2>出力方法</h2>



下記で登録したカスタムフィールドを呼び出せる



<pre class="wp-block-code"><code>get_field($selector, &#91;$post_id], &#91;$format_value]);</code></pre>



<figure class="wp-block-table"><table><tbody><tr><td>$selector</td><td>string</td><td>必須</td><td>フィールド名</td></tr><tr><td>$post_id</td><td>mixed</td><td>オプション</td><td>投稿ID。デフォルトで現在の投稿ID</td></tr><tr><td>$format_value</td><td>bool</td><td>オプション</td><td>フォーマットロジックを適用するかどうか。デフォルトはtrue</td></tr></tbody></table></figure>



下記でスラッグから投稿のIDを取得できる。別のページのカスタムフィールドを呼び出したい時に使用できる。



<pre class="wp-block-code"><code> $get_page_id = get_page_by_path("top");//topは固定ページのスラッグ名
 $get_page_id = $get_page_id->ID;</code></pre>



<h2>アイキャッチ画像を任意の複数個を指定できるようにする方法</h2>



catching1,catching2,catching3…のようなフィールド名でフィールドを作成した場合。



<pre class="wp-block-code"><code> &lt;?php $i = 1; while($catching = get_field('catching' . $i)): ?>
 &lt;div class="swiper-slide">
 &lt;img src="&lt;?php echo $catching&#91;'url'] ?>" alt="&lt;?php echo $catching&#91;'title'] ?>">
 &lt;/div>
 &lt;?php $i++; endwhile; ?></code></pre>

カスタムフィールド(Advanced Custom Fields)

投稿更新後github actionsに通知され、自動ビルドとデプロイを行う方法のgithubの設定の方を紹介します。 .github/workflows/main.ymlに以下を設定



<pre class="wp-block-code"><code>name: post save wordpress
 
 on:
 repository_dispatch:
 type: post_save_wordpress
 
 env:
 BASE: "main" // stepsの${{ env.BASE }}に設定
 
 jobs:
 build:
 runs-on: ubuntu-latest
 
 steps:
 - name: Checkout "${{ env.BASE }}" // チェックアウトするブランチを設定
 uses: actions/checkout@v2.3.2
 with:
 ref: "${{ env.BASE }}"
 
 - name: Use Node.js 14.16.0 // Node.jsのバージョン14.16.0をセットアップ
 uses: actions/setup-node@v1
 with:
 node-version: '14.16.0'
 
 - name: Build Site　// node_modulesのinstallとビルドを実行
 run: |
 npm install
 npm run build
 
 - name: FTP-Deploy-Action
 uses: SamKirkland/FTP-Deploy-Action@2.0.0
 env:
 FTP_SERVER: ${{ secrets.FTP_SERVER }}　// デプロイ先のサーバーURL
 FTP_USERNAME: ${{ secrets.FTP_USERNAME }} // デプロイ先のユーザー名
 FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }} // デプロイ先のパスワード
 port: ${{ secrets.FTP_PORT }} // デプロイ先のポート番号 21 or 22
 LOCAL_DIR: out/ // デプロイする対象のフォルダ
 REMOTE_DIR: ${{ secrets.REMOTE_DIR }} // デプロイ先のディレクトリ</code></pre>



今回は、SamKirkland/FTP-Deploy-Action@2.0.0を使用します。 大変便利で使い勝手も良いので採用しました。



env以下に設定する際は、githubのSecretsに設定するのがセオリーです。 Settings &gt; Secrets &gt; Add a new secretで設定できます。 こうすることで上記のような記法で呼び出すことができます。



以下をgithubのsettingページで設定し、wordpressのfunctions.phpの$headerと$urlに設定します。 Developer settings &gt; Personal access tokens &gt; Generate new token &gt; repo,workflowをチェック

WPとGithub Actionsで自動デプロイ  Github Actionsに設定編

投稿更新後github actionsに通知され、自動ビルドとデプロイを行う方法のwordpressの設定の方を紹介します。



curl使用方法はお決まりな感じではありますが、以下に記入しています。 urlやtokenはgithubの方で生成されますのでそちらを記入します。



wordpressのfunctions.phpに以下を追記



<pre class="wp-block-code"><code> 
 function post_save_wordpress($post_id, $post)
 {
 	if ($post-&gt;post_status === 'publish') {
 		$url = 'https://api.github.com/repos/user/repo/dispatches';　// user/repoosは変更する必要があります。
 		$headers = &#91;
 			'Authorization: bearer token',
 			'Accept: application/vnd.github.v3+json',
 			'User-Agent: post_save_wordpress'
 		];
 		$data = &#91;
 			'event_type' =&gt; 'post_save_wordpress',
 		];
 
 		$ch = curl_init();
 		curl_setopt($ch, CURLOPT_URL, $url);
 		curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
 		curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
 		curl_setopt($ch, CURLOPT_HEADER, true);
 		curl_setopt($ch, CURLOPT_POST, true);
 		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 		$output = curl_exec($ch);
 		curl_close($ch);
 		return true;
 	}
 	return false;
 }
 
 add_action('publish_post', 'post_save_wordpress', 10, 2);
 add_action('delete_post', 'post_save_wordpress', 10, 2);
 add_action('trashed_post', 'post_save_wordpress', 10, 2);</code></pre>



複数投稿箇所がある場合



<pre class="wp-block-code"><code> add_action('publish_news', 'post_save_wordpress', 10, 2);
 add_action('delete_new', 'post_save_wordpress', 10, 2);
 add_action('trashed_news', 'post_save_wordpress', 10, 2);
 add_action('publish_blog', 'post_save_wordpress', 10, 2);
 add_action('delete_blog', 'post_save_wordpress', 10, 2);
 add_action('trashed_blog', 'post_save_wordpress', 10, 2);</code></pre>



delete_*** 投稿またはページが削除されようとする際に実行されます。



publish_*** 投稿が公開された際や編集されてステータスが「公開済み」に変わった際に実行されます。



trashed_*** 投稿またはページがゴミ箱に移動された後に実行されます。

WPとGithub Actionsで自動デプロイ WordPressに設定編

functions.phpに下記を記述で実装できる。下記をデフォルトとする。



<pre class="wp-block-code"><code>// カスタム投稿タイプ item
 function item_custom_post_type(){
 $labels = array(//管理画面での表示
 'name' => _x('アイテム', 'post type general name'),
 'singular_name' => _x('アイテム', 'post type singular name'),
 'add_new' => _x('新規追加', 'item'),
 'add_new_item' => __('アイテム'),
 'edit_item' => __('編集'),
 'new_item' => __('新規アイテム'),
 'view_item' => __('表示'),
 'search_items' => __('項目検索'),
 'not_found' => __('記事が見つかりません'),
 'not_found_in_trash' => __('ゴミ箱に記事はありません'),
 'parent_item_colon' => ''
 );
 $args = array(
 'labels' => $labels,
 'public' => true,//falseで個別ページを事実上なくす。管理画面にURLが出なくなり、検索エンジンからもヒットしない。ただURLは存在する。&#91;1]
 'publicly_queryable' => true,
 'show_ui' => true,
 'query_var' => true,
 'capability_type' => 'post',
 'hierarchical' => false,//階層構造の有無
 'menu_position' => 4,//管理画面メニューの位置
 'has_archive' => true,//アーカイブがあるかどうか
 'rewrite' => array( 'slug' => 'item'),
 'supports' => array('title','editor','thumbnail')//編集ページの順番
 );
 register_post_type('item',$args);//itemはカスタム投稿のスラッグ名
 
 $args = array(//タクソノミー追加
 'label' => 'カテゴリー',//管理画面で表示される文字
 'public' => true,
 'show_ui' => true,
 'show_in_menu' => true,//管理画面のメニューで一覧を表示するか
 'show_in_nav_menus' => true,
 'show_admin_column' => true,
 'hierarchical' => false,//ページ階層の指定
 'query_var' => true
 );
 register_taxonomy('item_category','item',$args);//タクソノミー追加(item_categoryはタクソノミーのslug)
 }
 add_action('init', 'item_custom_post_type');</code></pre>



個別ページを404にしたい時に下記を記述する。上記コードの「'public' => false」と併用を推奨。



<pre class="wp-block-code"><code> add_filter( '&#91;slug]_rewrite_rules', '__return_empty_array' );//&#91;slug]はカスタム投稿タイプのスラッグに書き換える</code></pre>



出力方法 メインループとサブループの2パターンを載せておきます。



メインループ



<pre class="wp-block-code"><code> &lt;div>
 &lt;?php 
 if ( have_posts() ):
 while ( have_posts() ):the_post();
 $category = get_the_terms($post->ID, 'item_category');//記事のitem_categoryのタームを取得
 ?>
 &lt;h2>&lt;?php the_title(); ?>&lt;/h2>
 &lt;p>&lt;?php echo $category&#91;0]->name ?>&lt;/p>//ターム名表示 複数ある場合はループすれば良い
 &lt;?php endwhile; endif; ?>
 &lt;/div> </code></pre>



サブループ



<pre class="wp-block-code"><code> &lt;div>
 &lt;?php 
 $args = array(
 'post_type' => 'item',//カスタム投稿タイプ名
 'posts_per_page' => -1//表示投稿数(-1は全て)
 );
 $the_query = get_posts( $args );
 if ( $the_query ): 
 foreach ( $the_query as $post ): setup_postdata( $post );
 $item_category = get_the_terms($post->ID, 'item_category');//記事のitem_memberのタームを取得
 ?>
 &lt;h2>&lt;?php the_title() ?>&lt;/h2>
 &lt;p>&lt;?php echo $item_category&#91;0]->name; ?>&lt;/p>//ターム名を表示
 &lt;?php
 endforeach;
 wp_reset_postdata();
 endif;
 ?>
 &lt;/div></code></pre>



サブループは$argsで色々制限できるので、自由度が高い。

カスタム投稿タイプについて

シンプルに差分抽出



<pre class="wp-block-code"><code>git archive コミット02 `git diff --name-only コミット01 コミット02 --diff-filter=ACMR` -o archive.zip</code></pre>



特定のフォルダを指定しれ差分抽出



<pre class="wp-block-code"><code>git archive --format=zip --prefix=root/ HEAD `git diff --diff-filter=d --name-only コミット01 コミット02 -- フォルダ` -o archive.zip</code></pre>

差分抽出方法

普通、プラグラムは上から順にコードが実行され、実行が完了するまで次の行には進みません。 一方、Javascriptは非同期処理です。



非同期処理は、ある関数が呼び出されたとき、戻り値として本来渡したい結果を返すのではなく、一度関数としては終了し（＝呼び出し元に戻る）、後で『本来渡したかった値』を返せる状態になったときに、呼び出し元にその値を通知するという仕組みです。



非同期処理



<pre class="wp-block-code"><code>const aaa = () =&gt; {
 setTimeout(() =&gt; {
 console.log("aaa");
 }, 1000)
 }
 const bbb = () =&gt; {
 console.log("bbb");
 }
 const ccc = () =&gt; {
 console.log("ccc");
 }
 aaa();
 bbb();
 ccc();
 
 //結果
 //bbb
 //ccc
 //aaa</code></pre>







同期処理



<pre class="wp-block-code"><code> const execute = async() =&gt; {
 const aaa = () =&gt; {
 return new Promise((resolve,reject)=&gt;{
 setTimeout(() =&gt; {
 console.log("aaa");
 resolve();
 }, 1000)
 });
 }
 const bbb = () =&gt; {
 return new Promise((resolve,reject)=&gt;{
 console.log("bbb");
 resolve();
 });
 }
 const ccc = () =&gt; {
 console.log("ccc");
 }
 
 await aaa();//ここで順番が決められる
 await bbb();
 ccc();
 }
 execute();
 
 //結果
 //aaa
 //bbb
 //ccc</code></pre>

同期処理　async/await

wpの各関数を使って取得していきます。カテゴリーも取得する方法も記入します。 また、カスタム投稿タイプを利用し任意のエンドポイントを構築。さらにそこに取得したいデータたちを格納していきます。



<pre class="wp-block-code"><code>　add_action('rest_api_init', 'add_custom_endpoint');
 
 function add_custom_endpoint()
 {
 register_rest_route('custom/v1', '/name', array(
 'methods' => 'GET',
 'callback' => 'name_api',
 ));
 }
 
 function name_api(WP_REST_Request $request)
 {
 
 $args = array(
 'post_type' => 'post name',
 'post_status' => 'publish',
 );
 
 $the_query = get_posts($args);
 
 foreach ($the_query as $post) {
 $news_category = get_the_terms($post->ID, 'category name');
 }
 
 $the_query = new WP_Query($args);
 $data = array();
 
 while ($the_query->have_posts()) {
 $the_query->the_post();
 
 $data&#91;] = array(
 'id' => get_the_ID(),
 'date' => get_the_date('Y/m/d', get_the_ID()),
 'title' => get_the_title(),
 'categories' => $news_category,
 'tags' => get_the_tags(),
 'thumbnail' => get_the_post_thumbnail_url(get_the_ID(), 'full'),
 'content' => get_the_content(),
 );
 }
 
 $response = new WP_REST_Response($data); // HTTPステータスやリクエストヘッダーを変更
 $response->set_status(200);
 return $response;
 }</code></pre>



ANY-URL/wp-json/custom/v1/name/ 上記の設定では↑のURLでエンドポイントが作成され取得することができます。