著者アーカイブ 杉浦

著者:杉浦

メール機能テストサービスmailtrapの紹介

Mailtrap.io — Fake smtp testing server. Dummy smtp email testing
 Mailtrapはメールにトラップを仕掛けることでメールテストを行うことのできるサービスです。送られるはずのメールをmailtrapで止めることで安全お手軽にメール機能のテストができます。
 アカウント登録が必要ですがgoogleアカウント、githubアカウントを使用することが可能なので登録は楽です。登録するとメールボックスとメールサーバが渡されます。
 
 
 メーラとサーバの情報のみならず、上の画像の赤丸の部分から各種フレームワークに対応したメール設定スニペットが用意されています。このサーバの情報に従ってメールを送ると次の様になります。

 実際には送られず、mailtrapでメールが止まり、送られたメールがどういう風になるか見ることができます。無料版は50通までしかメールを保存できませんが、あふれ次第消してもらえる仕様になっているため受信ボックス詰まって困ることはありません。mailtrapを使うことでテスト用のメールアドレスを作る必要もテストで送られてきた余分なメールを消す必要もありません。mailtrapは実に便利です。

著者:杉浦

IDEの外部連携機能

 IDE(統合開発環境)はプログラム開発を支えてくれる多機能なエディタです。web関連の開発ではネットワーク越しの環境にコードを逐一アップロードする必要がある時があります。IDEはネットワーク越しの対象と連携することもできます。
 
 自分の使っているphpstormはFTP、SFTP、FTPSで同期を行えます。このおかげでショートカットキーからアップロード、ダウンロード、自動同期などができ、いちいちファイル操作のみを目的としたアプリケーションを開く必要がなくなり、楽ができます。上の画像のアイコンにあるようにgitとの連携もそろっています。

 DBと接続する必要もあります。DBもリモートのファイルと同じ様にIDEから簡単にアクセスでき、操作のための便利な機能が揃っています。

 ローカルで表らしく任意の編集ができ、まとめてその編集を実行するクエリを送る、という仕組みです。TSVの文字とダウンロードアイコンから連想できるように任意の形式でダンプできます。もちろんinsert等のSQL命令としてもダンプできます。多機能なIDEになるほどコーディングとその周りの環境へのアクセスをIDEの操作のみで完結できます。

著者:杉浦

laravelのエラー画面

 laravelのエラー画面は単なるエラーメッセージのみならず、詳細にエラーが起こるまでの実行過程と実行環境を示してくれます。この記事ではこのエラー画面の説明をします。
 エラーを起こした画面が次です。左上のエラーメッセージと右側のエラーが起きたコードが目につきます。どういうエラーかもわからないニッチなエラーが出たときは左上の赤丸で囲ってある部分の出番です。ここをクリックするとgoogleなどでエラーメッセージをググってくれます。

 手作業でエラーの内容を調べる際には次の画像の赤丸で囲ってある部分、Application framesとAll framesを使い分けるとよいです。通常laravelプロジェクトのフォルダ構成で/vendor以下の内容を改変する事はありません。All frameは/vedor以下も含んだスタックトレース、Application framesは/vendor以下を含まないスタックトレースです。Application framesで異常な値になった部分を大雑把に見つけ出し、All frameでより詳細に絞りこむ方法はよくとります。

 値を見つけ、追っていくと先に述べました。エラー画面で値の中身を追うには下の画像の赤丸部です。次の関数に値を渡すコードの行部分と引数の中身を見ることが出来ます。

 GET、POSTなどの通信に用いた値も右下部に格納されています。あまり見せるべき情報でないので隠してありますが、更に下の方にはサーバの情報も記述されてあります。

著者:杉浦

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

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でフォルダ構造の変化を見出しにした最近の変更を次の様な画面で見られます。

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

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