WordPress のコードを見ているとよく似た言語翻訳関数があったので,調べてみました.
__() : 変数に代入する
_e() : 直接出力する
if ($var), isset, empty, is_null など,変数の値のセット状況を判定する方法がある.
それぞれの違いについて調べてみた.
参考: PHP isset, empty, is_null の違い早見表
「if ($var) / empty」と「isset / is_null」は判定結果が逆となっていますね.
設定済みの判定は,if (!empty($var)) がいいのかな?
Follow @redwing1300他のプログラミング経験者が PHP のコードを見て,「PHPってこうやるんだなぁー」と感じたところをメモしておきます.
list( $activate_path ) = explode( ‘?’, wp_unslash( $_SERVER[‘REQUEST_URI’] ) );
if ( file_exists( ABSPATH . ‘wp-config.php’ ) ) {
型演算子 instanceof を使用する.
version_compare( phpversion(), ‘7.0.16’, ‘>=’ )
require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
if ( ‘POST’ != $_SERVER[‘REQUEST_METHOD’] ) {
if ( 0 === strpos( $_SERVER[‘REQUEST_URI’], ‘http’ ) ) {
WordPress には,セキュリティーに配慮した,以下の記述のみの index.php が配置されているディレクトリがある.
1 2 | <?php // Silence is golden. |
1 2 3 4 5 6 | <?php if ( ! empty( $input_id ) ) : ?> <script type="text/javascript"> try{document.getElementById('<?php echo $input_id; ?>').focus();}catch(e){} if(typeof wpOnload=='function')wpOnload(); </script> <?php endif; ?> |
「PHP はエラー制御演算子(@)をサポートしています。PHP の式の前に付けた場合、 その式により生成されたエラーメッセージは無視されます。」
とのこと.あまり使用しない方が良い気がしますね.
参考: エラー制御演算子
if文などで,本来「{」があるべき箇所に「:」があったので調べてみた.
php では,コロン構文といい,HTMLタグとPHPの処理が混在する箇所で使用されているらしい.
判定処理が複数のタグに渡る場合などは使用せざるを得ないですね.
PHP の独自言語仕様と思える箇所もあるので,global キーワードなど最初にチェックしておいた方が良いと思います.
参考: PHP $GLOBALS(グローバル変数)のすべて!【初心者向け基本】
クラス外で定数を定義する場合,define,クラス内で定数を定義場合,const.という使い分けで良いと思います.
PEAR (PHP Extension and Application Repository) : PHPで記述されたPHP拡張ライブラリ
PECL (PHP Extension Community Library) : C言語で記述されたPHP拡張ライブラリ
VCS – Enable Version Control Integration …
処理時にアナライズ処理?が入るため,大量にコミットする場合は,SourceTree の方がいいかも?
参考: Gitリポジトリを設定する
参考: JetBrains IDE(IntelliJ IDEAなど)を使う時のgitignoreについて
設計手法については幾つかあるらしいですが,なんとなく主流は BEM と呼ばれるものらしい.
3つの要素を元に名前を設定する.
Block, Element, Modifier
Block__Element–Modifier
Block–Modifier
div タグの class 属性などは以下のように記述する.
| class | セレクタの始まりを「.」にする |
| id | セレクタの始まりを「#」にする |
以下の html と main.scss をビルドすると添付のような文字色で表示される.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./dist/css/main.css"> <title>Document</title> </head> <body> <p>赤い文字</p> <p class="green">緑文字</p> <p><span class="blue">青い文字</span></p> </body> </html> |
1 2 3 4 5 6 7 8 9 | /* main.scss */
p {
color: red;
&.green {
color: green;
}
.blue {
color: blue;
} |

@mixin で定義して,@include で適用する.
変数の参照
参考:
今更ながらBEMについてと、それに対応するSassについてまとめてみる
BEMをSassで快適に書く方法
記法のことを指していることが多く,scss 記法が CSS に近いルールで記述できる.
主流はこちらになっている.
いまさらながらですが,ちゃんとHTML,CSS3とか見たことがなかったので,体系立てて少し見てみました.
用語,仕様が複雑ですね… ベンダープレフィックスとか…
1. テーブルレイアウト
2. float
3. Flexbox
4. Grid Layout
レイアウトには流行廃りがあって,上記のような感じらしい.
プログラマであれば,今後は bootstrap4 あたりをチェックすれば良いと思う.
でも結局なんとなく全部把握しておく必要があるかも…
参考: CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門
html 各要素のブラウザ毎に異なる差異をなくしてスタイルをリセットするスタイルシートを適用すれば良い.
sanitize.css
リセットCSS,ノーマライズCSS,サニタイズCSSなど初心者には区別が付けにくい言葉があったので,ついでに調べておく.
1 | <link href="css/base.css" rel="stylesheet" type="text/css"> |
より後から読み込まれたスタイルが適用される.
・要素の状態によって適用できるセレクタに擬似クラスがある.
・全ての要素に適用する「*」.
・擬似要素 :first-letter / :before / :after
参考: CSS 複数のセレクタを指定する/絞り込むサンプル
参考: CSSのセレクタとは?覚えておきたい25種類と書き方
参考: cssを書く人がブクマしておきたいジェネレーターサイト8選
margin プロパティなどの数字の指定方法は以下の通り.
| 1つ | 4辺とも同じ値 |
| 2つ | 上下,左右 |
| 3つ | 上,左右,下 |
| 4つ | 上,右,下,左 |
指定しない場合,デフォルトになる
参考: 余白については以下の記事が良かった.
1 2 3 4 5 |   ノーブレークスペース(前後で自動改行しないスペース) " " " クォーテーション(引用符) & & & アンパサンド < < < 小なり > > > 大なり |
&#以降はUnicodeのコード番号
css で以下のようにメディアクエリを記述し,スクリーンサイズで処理を分岐する.
1 2 3 4 5 6 7 8 | @media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */ |
【概要】
Emmet とは HTML,CSS コーディングをサポートするプラグイン.
【使い方】
タグ入力後,「Tab」キーを押下
【例】
・ html の雛形を入力する
「!」入力後,「Tab」キーを押下
・ 「要素.class名」の指定
div.box と入力し,「Tab」キーを押下
1 | <div class="box"></div> |
・ 「>」でネストを指定
div>p と入力し,「Tab」キーを押下
1 2 3 | <div> <p></p> </div> |
参考: EMMETの使い方
command + shift + f
「ファイルまたはディレクトリのパターン」を指定しないと検索できないことに注意.

“atom-beautify”プラグインで整形することができる.
エディタ上で右クリック > Beautify editor contentsをクリック
ショートカットキーは,control + option + b(eautify)
“split-diff”プラグインを使用する.
Follow @redwing1300API 開発時にレスポンス内容を確認したり,テスト実行したり,環境変数に応じて URL を変更したりできる.
便利ツールの個人的なメモ.
クライアントアプリは以下からダウンロードできる.
Postman
アプリの使い方,何ができるか?は以下の良記事を読めば把握できる.
参考:API開発・テスト便利ツール Postmanの使い方メモ
参考:APIの開発がむちゃくちゃ捗る「Postman」の使い方
参考:RESTサービスを触る際の必須ツールPostmanを使ってみました
参考:[ツール] Postmanを利用したAPIの試験 [機能の紹介]
先日,PHPの header 関数でリダイレクトする処理を記述したのですが,どうしてもリダイレクトしてくれなくて,色々試した結果,PHPの終了タグ「?>」が記述されているとリダイレクトしないという現象に遭遇しました.
私の認識では,PHPの終了タグはあっても,なくても,どちらでも良いものという認識であったため,少し驚きました.
(いかなる場合においても,あった方が良いくらいの認識でした.)
リダイレクトしない理由として,直前にHTML出力があるとリダイレクトしないというのは,なんとなく出力バッファなどの理由により,問題があるような気がするのですが,終了タグというのは想像できませんでした.…というわけで,メモしておきます.
参考:PHPの最後の終了タグ ?> は付けないでおこうねというお話
Follow @redwing1300PhpStorm のデバッグでなんとなく必要なのだろうと Chrome に2つの機能拡張をインストールしていたが機能を把握していなかったので,調べてみた.
結果,PhpStorm のデバッグ作業では,Xdebug helper だけでよいようだ.
日本語のPhpStorm 2019.1 ヘルプには以下の記述がある.
IntelliJ IDEAでアプリケーションをデバッグするために、ChromeのJetBrains IDEサポート拡張をインストールして使用する必要はありません。

JetBrains Chrome拡張機能を使用したデバッグセッション中、HTML、CSS、およびJavaScriptのライブ編集を使用できます。また、DOM ツリーと実際のページのソースコードを表示することもできます。

Xdebugヘルパー拡張
PHP デバッグ接続のリッスンを開始
IDE key 設定などができる.
以前はブックマークレットでIDE key設定を行ったりしていた記憶がありますが,この機能拡張からも出来るのですね.
個人的には少し頭の整理が出来ました.笑