プログラミング日記【10ヶ月目第4週】デイトラ40代アラフォー初心者

カスタムフィールドとは👇

• WordPress制作で頻出機能
• オリジナルの入力フォーム（WordPressの管理画面から追加）
• 入力項目をあらかじめお客さんに指定してあげる
• WordPressに不慣れなお客さんも簡単に入力できる
• オーダーメイド形式でホームページを作るとき必ず使う技術

Advanced Custom Fields（通称ACF）」👉制作の現場でも非常によく使われている

プラグインでフィールドグループ設定👉VSCode Codeで single-work.php の該当部分を編集👉プラグインのテンプレートに修正

👇Advanced Custom Fields の Code Examples

ACF | Code Examples

Display a field Retrieving a field as a variable

www.advancedcustomfields.com

フィールドを表示させるだけなら👇でOK

<?php the_field('company'); ?></td>

会社名のフィールドが未記入ならブラウザ表示しない設定👇（if endif）

<?php if( get_field ('company')): ?>
<tr>
<th>会社名</th>
<td><?php the_field('company'); ?></td>
</tr>
<?php endif; ?>

ハプニング①

ハプニング②

実務編　DAY25

カスケーティング

カスケード、詳細度、継承 - ウェブ開発を学ぶ | MDN

このレッスンの目的は、CSS の最も基本的な概念であるカスケード、詳細度、継承について理解を深めることです。これらの概念は、CSS を HTML に適用する方法とスタイル宣言の間の競合を解決する方法を制御するものです。

developer.mozilla.org

広く取り入れられているCSS設計の考え方

CSS Architecture — Philip Walton

To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You do...

philipwalton.com

予測しやすい

• 予測可能なCSSとは、ルールが期待通りに動作する
• ルールを追加したり更新したりしても、意図しない部分に影響を与えない
• 滅多に変更しない小規模なサイトではそれほど重要ではない
• 何十、何百ページもある大規模なサイトでは、予測可能なCSSは必須

再利用しやすい

• CSSのルールは、既に解決したパターンや問題を再コード化しない
• 既存のパーツから新しいコンポーネントを素早く構築できるよう、抽象的かつ非連続的であるべき

保守しやすい

• サイトに新しいコンポーネントや機能を追加、更新、配置変更する必要がある場合、既存のCSSをリファクタリングする必要はない
• コンポーネントXをページに追加しても、その存在だけでコンポーネントYが壊れるのは❌

拡張しやすい

• サイトの規模や複雑さが増すと、通常、より多くの開発者がメンテナンスに必要
• スケーラブルCSSは、一人でも大規模なエンジニアリングチームでも簡単に管理できる
• サイトのCSSアーキテクチャは、膨大な学習曲線を必要としない
• 簡単にアプローチできる
• 現在、CSSに触れているのがあなただけでも、今後もずっとそうでとは言えない

FLOCSS

• FLOCSS広く使われており理解しやすい（日本人が開発したもの）まずはFLOCSSでCSS設計に慣れ始めると良い
• OOCSS、BEM、SMACSSのいいところどりしている感じのもの
• とくにコンポーネントが重要

👇このFLOCSSの開発者のREADMEを参照

GitHub - hiloki/flocss: CSS organization methodology.

CSS organization methodology. . Contribute to hiloki/flocss development by creating an account on GitHub.

github.com

コンポーネントを押さえることがCSSの第一歩といえる

実務編　DAY26 サマリー

コンポーネント

• Web制作はコンポーネント単位での制作が必須
• CSS設計ではコンポーネントが作れることが前提
• コンポーネントはBEMの概念を用いると作りやすくなる
• BEMはCSS設計の中でもかなりメジャー、多くのWeb制作の現場で使われている
• コンポーネントは使いまわしできることを前提に作られる
• コンポーネントに width height を固定数値で指定すると文字数が増えたときに表示が崩れる
• 余白( marginなど)についても同じ（使われる先のElementに余白はつける）

コンポーネントの大事なPOINT3点

1. 文字数が変わる可能性を考慮する
2. 使われる場所が変わることを考慮する
3. 要素セレクタが変わることを考慮する

BLOCK – ELEMENT（BLOCK があって ELEMENTがある）

bakushin

コンポーネントの集合という理解で、ここ👇を意識していくとHTMLも書きやすくなる

Atomic Design Methodology | Atomic Design by Brad Frost

Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent ...

atomicdesign.bradfrost.com

コンポーネントが集合した大きいコンポーネント(ATOMS以降の集合体)にも余白は設定しない

実務編　DAY27　サマリー

Foundation 👉10pointを超えないように作成すること

Layout 👉インナー幅など、ヘッダオーはこの変に置きますよとか

Component👉ボタンなど

bakushin

コンポーネントは一つのブロックに対して一つのコンポーネントファイルを作ると良い理由です👇

• 1ファイル内の記述量が減る
• どのファイルに何を書いているのかわかりやすい
• class名が被ることを防げる

project 👉ファイルの数がかなり多くなる

Utility 👉hiddec-spなどヘルパークラスを記述する（レイヤーの中で最後に読み込まれるので、最終的にどのレイヤーに対しても上書きした状態になる）

global 👉function.scss、mixins.scssなどをまとめる

演習👇

FLOCSSの読み込みは、@import ではなく @useに変更されている

_index.scss　_ を入れることで出力させない設定にする（コンパイルしたときに出力されるファイル👉 _index.scssではなくstyle.scssという設定になる）

npm init -y 　👈ターミナルに入力　（ -y は質問にすべてYES回答するという意味）

npm install --save-dev gulp gulp-sass sass gulp-postcss autoprefixer css-declaration-sorter gulp-merge-media-queries
(👆ターミナルに入力)