著者アーカイブ 杉浦

著者:杉浦

万能クラスや数珠つなぎの継承を作らずにコードの共有を行うトレイト

PHP: トレイト – Manual

トレイトは、PHP のような単一継承言語でコードを再利用するための仕組みのひとつです。 トレイトは、単一継承の制約を減らすために作られたもので、 いくつかのメソッド群を異なるクラス階層にある独立したクラスで再利用できるようにします。 トレイトとクラスを組み合わせた構文は複雑さを軽減させてくれ、 多重継承や Mixin に関連するありがちな問題を回避することもできます。

 トレイトはtraitと書き、次の様にclassと同じ書き方をし、useで読み込みます。関数などの名前が衝突した際にはinsteadofでどちらを使うか決定する、asで別名として扱う対応を行います。

<?php
trait A {
    public function smallTalk() {
        echo 'a';
    }
    public function bigTalk() {
        echo 'A';
    }
    public function moreBigTalk() {
        echo 'X';
    }
}

trait B {
    public function smallTalk() {
        echo 'b';
    }
    public function bigTalk() {
        echo 'B';
    }
}

class Talker {
    use A, B {
        B::smallTalk insteadof A;
        A::bigTalk insteadof B;
    }
}

class Aliased_Talker {
    use A, B {
        B::smallTalk insteadof A;
        A::bigTalk insteadof B;
        B::bigTalk as talk;
    }
    $this->moreBigTalk();
}

 いまのところ使ったことはないですが可視性の変更も可能です。
 トレイトの特に強力で扱いやすい部分が名前の扱いです。トレイトなしでコードを再利用する場合、共通のクラスを継承する、ユーティリティクラスを作る、別ファイルにしてincludeかrequireしてグローバル領域に配置するといった手法が考えられます。それらの手法の複雑さの原因になりうるという危うい点を、継承を行わず、グローバルを汚染せず、区分をtraitの名前につけてコードの再利用を可能にすることでトレイトは回避しています。
 IDEは画像の様に内部に何が入っているのかアイコンで表示してくれるのでその点でもありがたいです。

著者:杉浦

DRYの原則と抽象化

 DRYの原則はコーディングの原則の一つでDon’t Repeat Your Selfの略語です。これは同じことを繰り返し書かないでください、という意味で、Andrew Hunt, David Thomasが達人プログラマの中で提唱した原則です。ある一つのことを何度もコーディングした場合、そのことの変化に合わせて繰り返した分に合わせて何度もコーディングを変更する必要があります。これは無駄です。そして変更の漏れはバグになります。この無駄とバグをあらかじめ防ぐために同じことを繰り返し書くべきでない、という原則が提唱されました。
 同じことを繰り返し書くな、という言葉の”同じこと”という部分は重要です。単に同じ記述をしていることを理由に全てをfor、関数、クラスなどにまとめるべきではありません。ある同じ記述がそれぞれ違うことを表現している記述であった場合、片方だけ変化する事態は少なくないのです。同じことであるかそうでないのかを判断する時の基準として抽象化を用いられます。コーディングしたいもの(ソースコードそのものでなく)を抽象化した時、共通点が現れたならばその共通点はまさしく同じことであり、繰り返さずまとめて記述するべき部分です。

著者:杉浦

flexbox学習用のフリーゲームの紹介

 CSSのflexboxは便利ですがプロパティはあまりに多彩であり、覚えきるのは手間です。また、flexboxの理解が程ほどでも力業で望んだデザインに近いものを作ることは可能です。flexboxの内容は覚えずに適宜調べることが解決法のひとつですが、その場合flexboxでは何ができるかを知っておくことが重要です。ここで紹介するflexbox学習ゲームはflexboxの各プロパティを用いて工夫することを強いてくれます。学習ゲームを通すことでflexboxのできることを一通り知ることができます。
 Flexbox Froggy – CSS flexbox学習ゲーム
 Flexbox Defense
 Flexbox Froggyはflexboxに従って動く蛙を同じ色の蓮の葉に配置するゲーム、Flexbox Defenseはflexboxに従って配置されるタワーを用いたタワーディフェンスゲームです。どちらも高難易度になってくるとプロパティの豊富な組み合わせが必要になりなかなか一筋縄ではいきません。

著者:杉浦

(Now More Than Ever) You Might Not Need jQueryの紹介

 (Now More Than Ever) You Might Not Need jQuery | CSS-TricksはjQueryなしのJavaScriptコード集です。
 jQueryは2006年に発表され、現在も更新がなされ続けているJavaScriptのライブラリです。jQueryは古い時代のブラウザによる拙いDOM操作を大きくカバーしてきました。このDOM操作はとても強力でcdnとしてもよく引っ張りまわされています。Most copied libraries on cdnjs.com by @thomasdavis – Listiumによれば2015年6月~2017年6月の間、2位に大差をつけてcdnjs.com内で最もcdnのリンクがコピーされたとのことです。
 2013年にYou Might Not Need jQueryという記事が公開されました。これはほんのjQueryなしでちょっとしたDOM操作をするサンプルコードの集まりです。ブラウザの発展やフロントエンドライブラリの充実により少なくない状況でjQueryは必要でなくなったという背景があります。(Now More Than Ever) You Might Not Need jQuery | CSS-Tricksは2017/7/12に公開されたjQueryなしのJavaScriptコードの集まりです。(これまで以上に)の名が示す通り、You Might Not Need jQueryより洗練され、時にはjQuery以上の柔軟性を持った簡単な記述が載っています。
 ReactやVueの様なテンプレートを用いるフロントエンドライブラリによってwebページを作成した場合、DOM操作はほとんど必要なくなり、DOM操作のためにファイルの大部分を費やしているjQueryはむしろ邪魔になります。またjQueryを使わないことによってアンチパターンであるNodelistとjQueryオブジェクトの混在から完全に解放されます。jQueryのオブジェクトとChrome、FirefoxのNodelistには.append()が存在するがIEには存在しない為jQueryオブジェクトでないものにつないでしまった.append()はIEでのみこける、というバグには苦戦しました。

著者:杉浦

phpのロギングライブラリ規定PSR-3

 webアプリケーションにおいてはそのアプリケーション上で起きた動作のログを取る事が望まれます。これは障害や攻撃が起きた際、それがいつどこで起きたのか知るため、また障害や攻撃が起きていると知るための強い助けになります。単に思うがままにログを取るのみでは可読性が悪く肝心な情報が抜けているログを生む確率が大きいです。PSR-3はphpで用いられるロギングライブラリの規格を統一する事でログの可読性、生産性を上げています。
PSR-3: Logger Interface – PHP-FIG
【PHP】PSR-3 Logger Interface(ロガーインタフェース)
 PSR-3はRFC 5424のメッセージプロトコルに沿ったログレベルとそれに合わせたロギングライブラリの実装を規定しています。RFC 5424はログメッセージをIPネットワーク上で転送するための標準規格であるsyslogについて説明しています。
 ロギングライブラリを使う側として特に重要になるのが3. Psr\Log\LoggerInterfaceです。この中にはログレベルの規定と使用例が記述されており、これに従うことによって程よい粒度で他の多くwebアプリケーションのログから大きく外れないログを作れます。PSR-3においてログの文面までは規定されていないのでそこはまた別のことを学ぶ必要があります。

著者:杉浦

変数の値で変数名を呼び出す可変変数

PHP: 可変変数 – Manual
 phpには可変変数という機能がついています。これは変数名が可変の変数という意味の言葉です。具体的に何をするかというと、次の画像の様な動作です。
 
 可変変数によって式の評価結果などを用いて変数名を動的に変更できます。他言語でも似たようなことを実現する機能はままありますが、ここまで自由な振る舞いはちょっと珍しい印象です。可変変数を雑に扱うとIDEで追いかけることが難しかったり、不意に値が現れたりすることで混乱のもとになります。逆に混乱を抑えられる場合、有効です。例えばコーディング規約を作成し、規約に従う方法です。
 多くのフレームワークや大規模なライブラリなどには可変変数の様なを利用して実現している機能があります。例えばLaravelのEloquentモデルは特定の関数名ならば特定の種類の動作をするという機能(クエリビルダ、アクセサ、ミューテタ)を備えており、これはこの可変変数を用いることで簡単に実現できます。フレームワークに備わった可変変数を用いた機能は漫然と使っていてはなかなか気づきません。公式ドキュメント、リファレンス、といった説明書に書かれた可変名に関する説明を読むことが重要になります。

著者:杉浦

IDEのローカル・ヒストリー機能

 IDE(統合開発環境)にはローカル・ヒストリー機能がついています。これはローカルでコードのバージョン管理を自動で行ってくれるような仕組みです。git等の複数人で共有することが目的のバージョン管理と異なり、ローカル・ヒストリーは多くの場合でプロジェクト内のコードに加えられた全ての変更を絶えず自動的に保存します。もちろん、各ヒストリーにラベル、メッセージを付けることもできます。最近自分がよく使っているPhpStormでは次のような画面で使えます。
 Alt+Shift+cでフォルダ構造の変化を見出しにした最近の変更を次の様な画面で見られます。

 また、ファイル単位、クラス単位、メソッド単位、任意の選択範囲でも差分を次の様に見られます。

 ローカル・ヒストリー機能のおかげでコードを汚さないまま巻き戻すこと、過去何をしていたか知ることができます。

著者:杉浦

チートシートとしてのresources/lang/ja/validation.php

 laravelには多彩なバリデーションルールが用意されています。記述も次の様に|区切りで羅列されたルールを持つ配列と同じキーを持つ配列を二つ使うのみで簡単です。

$rules = [
    'title' => 'required|unique:posts|max:255',
    'body' => 'required',
];
//Request $request Requestはlaravel内でarrayをラッピングした高級クラス
$validatedData = $request->validate($rules);
//もしくは単に配列で
$input = [
    'title' => 'hoge'
    'body' => 'hogehoge'
];
Validator::make($input, $rules);

 ここまで簡単な記述だと適したバリデーションルールをなるべく使いたいものです。しかしrequiredやmaxの様に頻繁に使うもののみならず全てのバリデーションルールを覚えようとした場合、それは一苦労です。バリデーションルール一覧の日本語訳は丁寧に正確にしてあるのですが詳細すぎるのか長大すぎるのかあまりやりたいことではありません。
 laravelには言語設定というものがあります。これはresources/lang/以下に配置するもので、設定されたlocalに合った言語設定が適宜読み込まれます。この言語設定にはテンプレートが出回っており日本語もご多分に漏れません。次のリンクはバリデーションに用いる日本語版言語設定ファイルへのリンクです。
validation.php言語ファイル 5.6 Laravel
 このファイルにはバリデーションのエラーメッセージが含まれています。例えば次です。

'digits_between' => ':attributeは:min桁から:max桁の間で指定してください。',

 これと同様にルール名=>日本語のエラーメッセージの配列の形で様々なルールとその対応が羅列されています。エラーメッセージはユーザに伝えるためのメッセージだけあってルールの内容を簡潔に教えてくれます。このためvalidation.php言語ファイル 5.6 Laravelでざっくりバリデーションルールを読んで詳細をバリデーション 5.6 Laravelで確認するというやり方がバリデーションの処理をコーディングする際に有効です。

著者:杉浦

様々なHTMLショートコードを公開しているdCodesの紹介

dCodes is a comprehensive HTML framework with over 1500+ template shortcodes.
Build next generation, feature rich websites rapidly! Just copy ‘n’ paste hosted codes!

引用元:Template Shortcodes – dCodes Framework v2
 dCodesは様々なテンプレートショートコードを含むHTMLフレームワークです。Template Shortcodes – dCodes Framework v2には1500以上のコード例が載っており、これらの例をコピペしていい感じに配置するだけで、豊富な機能を持ったwebページを簡単に早く作れます。

 上の画像はショートコードが載っているページの一つです。赤丸の部分からコードを持ってきてコピペでページに用いるパーツを増やします。CSS、JS部は主にCDNを用います。このCDNは月間トラフィック1000万まで無料で使えます。個人で使う分にはよっぽどな使い方をしない限り無料枠に収まるでしょう。dCodesは単にデザインや機能の参考としても十分有用です。

著者:杉浦

YAGNIの原則

 YAGNIは”You aren’t gonna need it”の略でコーディングの方針になる原則です。コーディングの原則にはDRY(Don’t repeat yourself)、KISS(Keep it simple, stupid)、の様に言い聞かせるような言い方がたびたび現れます。YAGNIの、それは必要にならないだろう、という言葉は転じて、必要になるまで書かないという意味です。YAGNIの原則の目的は、余分なものを作る資源(時間、PCの容量など)は無駄だから必要なものがわかるまでその周りを作らない、そうすることで消費されるはずだった資源を節約する、という点にあります。
 YAGNIの原則を用いた場合のデメリットは完成像が歪なものになりがちということです。これは完成像をあまり予想しないまま突き進むコーディングになるからです。このデメリットは多くのタイミングでコードの修正が容易な場合、歪さが許容できる場合、総じて規模の小さなプログラムを作る際に最小限になります。またYAGNIの原則は必要なものが何度も突然現れる際に、必要になってから作るという方針がキレイに当てはまります。YAGNIの原則が特に上手く働く場合は規模が小さく、要望が流動的なものを作る場合です。一方で、規模が大きなものを作る際にYAGNIの原則用いた場合、デメリットは膨れ上がり見事なスパゲティコードの山ができあがるでしょう。