0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

2025年3-4月の学習記録

Posted at

WordPress

実務で「WordPress .com 」(≠ WordPress)に初めて触れた。
アカウントの管理方法・UIにクセがあり、何度も原因不明のエラーに襲われた。今回はお客様からの希望だったので「.com」を使うよりなかったが、できれば今後は使いたくない。
個別のサーバーに「WordPress」を別々にインストールするほうが、スムーズに管理できると思う。

<.com 限定の注意点>

  • デフォルトで入っている「Jetpack」プラグインが、勝手にソーシャルボタンや関連記事を追加表示する場合がある。OFFに設定する必要あり。

<WP全般の注意点>

  • 移行前、移行先のプラグインを揃えてから Export / Import したほうがよい。
    (Migration でデータ移行したとき、プラグインは「置換」ではなく「足し算」になる。)
  • プラグインを無効化してから Export / Import することで、エラーを回避できる場合もある。

CSS

相変わらず、CSS は仕様変化の波が激しい。

新しい機能を解説してくれる技術ブログ・𝕏アカウントが数多くあり、ありがたい。ありがたい、のだが...。ごく一部のブラウザでしかサポートされていない(Limited availability)本当に最先端の機能を紹介している場合が多い。勉強したところで結局、実務で使うのはかなり先(ものによっては数年後?)になってしまう。

標準的な全ブラウザで使用可能な機能(Baseline)にしぼって、新しい機能を紹介してくれる日本語サイトはないものだろうか。

[#1]

実務でモーダルを作る機会があったので、「top-layer」という新しい機能を使ってみた。

過去にモーダルを作ったとき、ハンバーガーメニューと z-index が干渉して再修正が必要なことがあった。「top-layer」を使えば、そうした「思わぬバグ」「再修正」は減らせるだろう。

新しい CSS を使うのは「カッコイイから」ではない。
新しい CSS のほうが、後々思わぬバグが発生することを防げる、優秀な設定方法であることが多いのだ。

[#2]

SCSS変数($example)と、CSS変数(--example)の違い。
 → CSS変数は、ネストの内側からネストの外側を上書きできる。
   SCSS変数は、スコープ制限が厳格で、内側から外側を上書きできない。

従って、基本クラスから派生した modifier クラスを(ネストの内側に)作りたい場合、SCSS変数よりもCSS変数を使うほうがスムーズに管理できると思われる。

.baseClass {
  --color: red; // 派生クラスで上書きしたい箇所だけ変数として定義しておくと、コードの意図が分かりやすくなる
  --fontSize: 14px;

  color: var(--color);
  font-size: var(--fontSize);
  text-decoration: underline;

  &--modifierClass {
      --color: blue; // ネストの内側からでも上書きできる
      --fontSize: 20px;
  }
}

[#3]
@layer@scope など、画期的な機能が続々と標準ブラウザで使用できるようになっている。
@layer は使い道がピンと来なかったが、@scope は実務ですぐに活かせそうだ。近いうちに使ってみたい。

mix

弊社は、フロントエンジニアの作業環境で mix を使って SCSS などのコンパイルを行っている。
大量の SCSS・JS を常に watch しており、数行のSCSSを修正するたびに、それらを全てコンパイルし直している。そのため歴史の長い案件では、数行のSCSSを修正するたびに20秒程度(!)の待ち時間が発生することもある
長すぎる...。作業が分断されて、なんの作業をしたかったのか段々忘れてしまう。

先日、新しい案件で一から環境構築をする機会があった。
ライブラリを(npm で管理せず)CDN で読み込むことで、mix のコンパイルの対象となる SCSS や JS の量を極力減らすようにした。

Bootstrap ライブラリを CDN で読み込んでいいものかどうかは悩んだ。というのも、Bootstrap を SCSS としてワークディレクトリ内に用意しておくと、変数($hogehoge)の上書きによるカスタマイズが容易になるからだ。
しかし、SCSS の変数機能を利用しなくとも、Bootstrap のデフォルト設定を(素のCSSで)上書きすることはできる。やや愚直な設定方法になってしまうが、コンパイル時間が短く済むメリットのほうが大きいと判断し、こちらの方法を採用した。

VSCode

  • 小ネタ: // MARK: とコメントすると、ミニマップでコメントした位置が強調表示できる。// TODO: よりも便利そうだ。

見積もり

今の会社に入って1年半経つが、未だに見積もりをどうすればいいのか分からない。
上記の記事を読む。
「2時間刻み」で考えればよい、というのをひとまず取り入れたい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?