学んだこと – ページ 2

『リファクタリング』のサンプルコード（テストコード付き）をPHPで実装した

『リファクタリング』の第1章では、実際のコードのリファクタリングを体験することができます。本には詳細な手順が載っていますが、やはり手を動かして学びたい、という方も多いのではないでしょうか。

しかし、本書のサンプルコードには、「テストコード」という、リファクタリングを行う前提条件となるものが欠けています。そこで、テストコードを含んだものはないかなと探したところ、tobyweston/Refactoring-Chapter-1というリポジトリに、テストコード込みのものがありました。

ただ、テストコード込みでやるなら慣れ親しんだPHPの方がやりやすいよな、ということで、同様のもののPHP版を実装しました。ryo-utsunomiya/refactoring_php5で公開しています。

上のリポジトリの、masterおよびbefore_refactoringブランチが、リファクタリング前の状態です。ブランチをgit cloneするなりDownload ZIPするなりしてローカルに持ってきて使ってください。

phpunit.pharを同梱しているので、PHP実行環境さえあればテストコードを実行できます。PHPUnitのバージョンの関係で、PHP 5.6以上が必要です。また、テストのカバレッジを出したい場合は、XDebugというPHP拡張をインストールしてください。

リファクタリング前のテストコードのカバレッジは100%になっていますが、リファクタリングを進めていくと100%でなくなる場面が出てきます。その場合、独自にテストを追加していってください。

『リファクタリング』を参考にリファクタリングを行った結果はafter_refactoringブランチに含めています。リファクタリング後の実装はおおむねオリジナルに準拠していますが、集計処理にarray_sumを使う等、「PHPらしい」コードにもなっています。

『Java言語で学ぶデザインパターン入門』をPHPで実習する State

本記事に掲載したサンプルコードは、https://github.com/ryo-utsunomiya/design_patternでも公開中です。

Stateとは

「状態」をクラスとして表現する方法です。複雑な条件文をリファクタリングする際などに使用されます。

ここでは、「昼」「夜」という状態を実装し、状態に応じて表示されるメッセージが変わるアプリケーションを実装します。

まずは、Stateのインタフェース。

<?php

namespace Statemy;

interface StateInterface

{

/**

* @param ContextInterface $context

* @param int $hour

* @return void

public function doClock(ContextInterface $context, $hour);

/**

* @return string

public function __toString();

}

doClockメソッドで使用しているContextInterfaceは、状態に応じた振る舞い（この例では、メッセージ出力）を行うオブジェクトのインタフェースです。定義は以下のようになります。

<?php

namespace Statemy;

interface ContextInterface

{

/**

* @param int $hour

* @return void

public function setClock($hour);

/**

* @param StateInterface $state

* @return void

public function changeState(StateInterface $state);

}

次に、昼を表すDayState。

<?php

namespace Statemy;

class DayState implements StateInterface

{

/**

* @var DayState

private static $singleton;

private function __construct()

{

}

/**

* @return DayState

public static function getInstance()

{

if (is_null(self::$singleton)) {

self::$singleton = new self();

}

return self::$singleton;

}

/**

* @param int $hour

* @return bool

public static function isDay($hour)

{

return 9 <= $hour && $hour < 17;

}

/**

* @param ContextInterface $context

* @param int $hour

public function doClock(ContextInterface $context, $hour)

{

if (!self::isDay($hour)) {

$context->changeState(NightState::getInstance());

}

/**

* @return string

public function __toString()

{

return '[day]';

}

DayStateはSingletonで実装しています。これは、状態が変わる度に新しいインスタンスが生成されることを防ぐためです。また、isDayというメソッドを持っていて、渡された時刻が昼か夜かを判別します。

昼か夜かを判別する役割をどのクラスに持たせるかは悩みましたが、DayStateに持たせました。今回はオリジナルに準拠してStateをインタフェースにしていますが、抽象クラスを作って、これに昼か夜かを判別するメソッドを持たせるのが良いかもしれません。

次に、夜を表すNightState。

<?php

namespace Statemy;

class NightState implements StateInterface

{

/**

* @var NightState

private static $singleton;

private function __construct()

{

}

/**

* @return NightState

public static function getInstance()

{

if (is_null(self::$singleton)) {

self::$singleton = new self();

}

return self::$singleton;

}

/**

* @param ContextInterface $context

* @param int $hour

public function doClock(ContextInterface $context, $hour)

{

if (DayState::isDay($hour)) {

$context->changeState(DayState::getInstance());

}

/**

* @return string

public function __toString()

{

return '[night]';

}

次に、DayState・NightStateを使うSafe（金庫）クラスです（オリジナルではGUIを含んでいますが、PHPでGUIを作るのは大変なので割愛します）。

<?php

namespace Statemy;

class Safe implements ContextInterface

{

/**

* @var StateInterface

private $state;

/**

* @param int $hour

public function __construct($hour)

{

if (DayState::isDay($hour)) {

$this->state = DayState::getInstance();

} else {

$this->state = NightState::getInstance();

}

/**

* @param int $hour

* @return void

public function setClock($hour)

{

$clockMessage = 'Now:';

if ($hour < 10) {

$clockMessage .= '0' . $hour . ':00';

} else {

$clockMessage .= $hour . ':00';

}

echo $clockMessage . $this->state . PHP_EOL;

$this->state->doClock($this, $hour);

}

/**

* @param StateInterface $state

* @return void

public function changeState(StateInterface $state)

{

echo 'State is changed from ' . $this->state . ' to ' . $state . PHP_EOL;

$this->state = $state;

}

最後に、これらのクラスを使用するmain.phpです。

<?php

namespace Statemy;

require_once __DIR__ . '/../autoload.php';

$hour = 0;

$safe = new Safe($hour);

while (true) {

if ($hour === 24) {

$hour = 0;

} else {

$hour++;

}

$safe->setClock($hour);

sleep(1);

}

現在時刻の変化に応じて、Stateが自動的に切り替わります。状態が2つだけだと、ありがたみがわかりづらいですが、Stateパターンの強みは新しい状態の追加のような仕様変更に柔軟に対応できる、という点にあります。

『AngularJS: Up and Running』読書メモ第10章 ngRouteによるルーティング

AngularJSはngRouteというモジュールをオプションで提供している。これを使うと、AngularJSアプリケーションでルーティング（URLに応じた画面遷移）を実装することができる。

※本書が執筆された当時はngRouteが唯一の公式ルーターだったが、2015年にNew Routerというルーターが導入されている。このルーターはAngularJS の1.4以上と2系のいずれでも使えるという特徴がある。

シングルページアプリケーションのルーティング

シングルページアプリケーションにおけるルーティングにおいては、URLとは通常のURLではなく、シバンの追加されたURLである。通常のURLは以下のようなスタイルである。

http://example.com/first/page

これに対して、シングルページアプリケーションのURLは以下のようになる。

http://example.com/#/first/page
http://example.com/#!/first/page

このようになる理由は、ブラウザはハッシュを含むURLを、含まないURLとは違った形で解釈するからである。ブラウザは、#の後ろにある部分をサーバへのリクエストの際に無視する。そのため、#の後ろの部分が変化しても、サーバへのリクエストは行われない。

ngRouteを使う

AngularJSのルーティングモジュールを使う手順は以下のとおり。

1 モジュールのソースコードを読み込む

1 2	<script type="text/javascript" src="/PATH/TO/angular-route.min.js">

2 モジュールの依存関係を定義する

1 2	angular.module("myApp", ["ngRoute"]);

3 ページ内のどの部分をAngularJSが変更すべきか印をつける。ngRouteを使う場合、ng-viewディレクティブをHTML内で使う。

4 $routeProviderサービスを使ってconfigセクションでルーティングを定義する

<a href="#/">Default route</a>

<a href="#/second">Second route</a>

</body>

angular.module('routingApp', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {

$routeProvider.when('/', {

})

.when('/second', {

})

.otherwise({redirectTo: '/');

}]);

$routeProviderを使うことで、各ルートをwhen()メソッドで定義できる。when()メソッドは、2つの引数をとる。

第1引数はURL、またはこのルートを適用すべきURLの正規表現
第2引数は設定オブジェクトで、そのルートで何が起きるべきかを指定する

otherwize()関数を使うことで、未定義のルートにユーザが遷移しようとした時の振る舞いを決めることができる。

ルーティングオプション

$routeProvider.whenメソッドの第2引数には以下のような形でオプションを渡すことができる。

$routeProvider.when(rul, {

templateUrl: string,

controller: string/function/array,

controllerAs: string,

redirectTo: string,

resolve: object<key, function>

});

url: URLまたはURLの正規表現。/user/:userId のようにプレースホルダーを設定することも可能
template: HTML文字列
templateUrl: テンプレートへのパス
controller: コントローラー名の文字列又はコントローラーを定義する関数・配列
controllerAs: テンプレート内でアクセスするためのコントローラーの別名
redirectTo: 別のルートにリダイレクトする
resolve: ルートが実行される前に実行される非同期の処理を記述する（認可、認証等に使う）

resolveによるルート実行前のチェック

resolveによって、ルートが読み込まれる前に実行される非同期の処理を定義することができる。

angular.module('resolveApp', ['ngRoute'])

.value('Constant', {MAGIC_NUMBER: 42})

.config(['$routeProvider', function($routeProvider) {

$routeProvider.when('/', {

}).when('/protected', {

resolve: {

immediate: ['Constant', function(Constant) {

return Constant.MAGIC_NUMBER * 4;

}],

async: ['$http', function($http) {

return $http.get('/api/hasAccess');

}]

controller: ['$log', 'immediate', 'async',

function($log, immediate, async) {

$log.log('Immediate is ', immediate);

$log.log('Server returned for async', async);

}]

});

}]);

2番目のルート/protectedには、resolveが定義されている。連想配列にimmediateとasyncというキーが定義されているが、キーには任意の値を使用できる(myKey1, myKey2でも何でもいい)。連想配列の値は、AngularJSのDIのシンタックスの配列になる。

ルーティングのresolveについて、AngularJSは以下を保証する。

resolveが値を返した場合、AngularJSはこの関数の実行を完了し、成功したresolveとして扱う
resolveがpromiseオブジェクトを返した場合、AngularJSはpromiseが値を返すのを待って、promiseの結果に応じて成功／失敗として扱う
全てのresolve関数が完了するまで、ルートは読み込まれない
全てのresolveは並列に実行される
いずれかのresolveがエラーに遭遇するか、promiseがrejectされたら、AngularJSはそのルートを読み込まない

上のサンプルコードでは、immediateのresolveは、定数を返すだけなので、毎回成功する。asyncはサーバとの通信を行い、成功すれば、ルートが読み込まれる。失敗すると、コントローラーは読み込まれず、対応するHTMLも表示されない。この場合、ユーザーは最後に表示されたページに留まる。

もう一点重要なことは、それぞれのresolveの戻り値は、それぞれのキーによってコントローラーに注入される、ということだ。上のサンプルコードでは、immediateは数値、asyncはpromiseオブジェクトになる。

`$routeParams`サービスを使う

Single Page Application(SPA)では、ルートのコンテキストが必要になることが多い。たとえば、/users/1に対して、id=1のユーザの情報を表示する、といった処理が必要になる。

理想的には、コントローラーとルートは、独立してアクセス可能であるべきである。これらのURLパラメータには、$routeParamsサービスを使ってアクセスできる。

$routeProvider.when('/detail/:detId', {

' and query String is {{myCtrl.qStr}}</h2>',

controller: ['$routeParams', function($routeParams) {

this.detailId = $routeParams.detId;

this.qStr = $routeParams.q;

}],

controllerAs: 'myCtrl'

});

このルートにおける、:detIdはプレースホルダーである。ここにある値は$routeParams.detIdで取得できる。

※ngRouteにはURLに制約を付ける機能がないため、/detail/1だけでなく/detail/fooでもアクセスできる。後者の場合、detIdは’foo’になる。

また、URLに含まれるクエリストリングも取得できる。/detail/1?q=fooにアクセスすると、以下のようなデータが取得できる。

{

detId: '1',

q: 'foo'

}

注意すべきこと

空のテンプレート

ngRouteは、それぞれのルートが空ではないtemplateまたはtemplateUrlに関連付けられていることを要求する。テンプレートが存在しない場合、ngRouteはこのルートを無視する。空文字列のtemplateも、テンプレートが存在しないとみなされるので注意が必要である。

`resolve`によるコントローラーへの注入

resolveを使ってコントローラーに値を注入する際は、ng-controllerディレクティブを使用せず、ルーティング定義の一部としてコントローラーを定義すること。そうしないと、AngularJSは依存している値が取得できない。

`$routeParams`の値の型

$routeParamsから取得した値は、デフォルトでは全て文字列になる。

1つのアプリケーションに`ng-view`は１つだけ

ngRouteでは、ng-viewは１つだけ使用可能である。複数のng-viewや、ネストしたng-viewは使用できない。

追加の設定

HTML5モード

ハッシュの含まれるURLはSPAでは一般的なものであるが、ハッシュが含まれない「普通の」URLを使うこともできる。

AngularJSのHTML5モードは、ブラウザのpushState APIを使用する。http://example.com/#/user/1というURLは、HTML5モードではhttp://example.com/user/1となる。

HTML5モードを有効化するには、サーバ側のサポートも必要である。ユーザがhttp://example.com/user/1にアクセスしたとき、サーバのドキュメントルート配下の/user/1ではなく、index.htmlが返るようにする必要がある。

HTML5モードを有効化するには、以下の３つが必要である。

(1) AngularJSの`config`でHTML5モードを有効化する

angular.module('app')

.config(['$locationProvider', function($locationProvider]) {

$locationProvider.html5Mode(true);

$locationProvider.hashPrefix('!');

});

HTML5モードを有効化するには、$locationProviderを使用する。hashPrefixに’!’を設定することが、SEO上の観点からは推奨される。

(2) `<base />`タグ

index.htmlの<head>の中に、href属性を含んだ<base />タグを追加する必要がある。これによって、ブラウザに、画像やCSS等の静的リソースをどこから取得すべきかを教える。

たとえば、アプリケーションがhttp://example.com/appというURLで提供されていてる場合、HTML5モードが有効になっていると、URLはhttp://example.com/app/user/1といった形になる。このとき、サーバはindex.htmlを返すが、ブラウザのパスは/app/user/1なので、相対パスではファイルを取得できない。以下のように設定されていれば、この問題を解決できる。

<html>

<head>

</head>

</html>

これによって、URLに関わらず、相対パスが/appを起点として解決されるようになる。

(3) サーバサイド

/first/pageや/second/pageといったルートに対するアクセスの場合にも、index.htmlが返されるようにする必要がある。

以下はNodeJSの場合の実装例。

var express = require('express'),

url = require('url');

var app = express();

// express configuration here

var INDEX_HTML = fs.readFileSync(

__dirname + '/index.html', 'utf-8');

var ACCEPTABLE_URLS = ['/first/page', '/second/page'];

app.use(function(req, res, next) {

var parts = url.parse(req.url);

for (var i = 0; i < ACCEPTABLE_URLS.length; i++) {

if (parts.pathname.indexOf(ACCEPTABLE_URLS[i]) === 0) {

// We found a match to one of our

// client-side routes

return res.send(200, INDEX_HTML);

}

return next();

});

// Other routes here

AngularJSとSEO

検索エンジンについて気に留めておくべき点は以下のとおり。

GoogleやBingのような検索エンジンは、SPAに対応したパターンを有している。これらは、hashbangを使用したURLの使用を前提にしている（#ではなく、#!を使用したURL）
検索エンジンがクロールする際、#!を?escaped_fragment=に置き換えて、サーバにリクエストを送る

さらに、サーバーが検索エンジンからのリクエストを判別して、以下のような手段を使用してレスポンスを返す必要がある。

HTMLのスナップショットを作成して返す: AngularJSのドキュメントはこの方法を使用している
HTMLをリアルタイムにレンダリングして返す: PhantomJSのようなヘッドレスブラウザをサーバで使用してHTMLをレンダリングする

angular-seoのようなツールの使用も検討すべきである。

AngularJSと分析サービス

Google Analyticsのような分析サービスは、SPAでは簡単には動かない。分析サービスは、ページの読み込み時のイベントにフックして処理を行っているからである。SPAでは、Google Analyticsを手動で呼び出してルートの変更を教える必要がある。これには、Angularyticsのようなライブラリが使用できる。

代替となるルーター

ngRouteで、70-80%のニーズは満たすことができる。SPAのURLは一般的にシンプルなものになるからである。

しかし、URLに複雑な要求があったり、URLに応じてUIを細かに制御したいような場合には、ngRouteの機能では対応が難しい。

このような場合には、ui-routerの使用を検討すべきである。

※2016年３月現在では、New Routerも代替候補の１つになる。

『Java言語で学ぶデザインパターン入門』をPHPで実習する第7章Builder

本記事に掲載したサンプルコードは、https://github.com/ryo-utsunomiya/design_patternでも公開中です。

Builderとは

Builderとは、構造を持ったインスタンスを組み上げるパターンです。

ここでは、文書を構成するためのBuilderクラスと、Builderクラスを使って文書を組み上げるDirectoryクラスを実装します。

まず、Builderの挙動を定めたインタフェースを作成します。

<?php

namespace my;

interface Builder

{

/**

* @param string $title

public function makeTitle($title);

/**

* @param string $str

public function makeString($str);

/**

* @param array $items

public function makeItems(array $items);

public function close();

}

次に、Directorを実装します。Directoryは、Builderインタフェースのメソッドだけを実行します（「抽象に依存せよ」）。

<?php

namespace my;

class Director

{

/**

* @var Builder

private $builder;

/**

* @param Builder $builder

public function __construct(Builder $builder)

{

$this->builder = $builder;

}

public function construct()

{

$this->builder->makeTitle('Greeting');

$this->builder->makeString('From morning to noon');

$this->builder->makeItems(

[

'Good Morning',

'Hello',

]

);

$this->builder->makeString('At night');

$this->builder->makeItems(

[

'Good evening',

'Good night',

'Good bye',

]

);

$this->builder->close();

}

これで、「文書を構成する仕組みの骨組み」と、「文書を実際に作成する処理」が出来ました。次に、実際に文書を作成する処理を実装します。

<?php

namespace my;

class TextBuilder implements Builder

{

/**

* @var string

private $string = '';

/**

* @param string $title

public function makeTitle($title)

{

$this->drawLine();

$this->string .= '# ' . $title . PHP_EOL;

$this->string .= PHP_EOL;

}

/**

* @param string $str

public function makeString($str)

{

$this->string .= '## ' . $str . PHP_EOL;

$this->string .= PHP_EOL;

}

/**

* @param array $items

public function makeItems(array $items)

{

foreach ($items as $item) {

$this->string .= '* ' . $item . PHP_EOL;

}

$this->string .= PHP_EOL;

}

public function close()

{

$this->drawLine();

}

/**

* @return string

public function getResult()

{

return $this->string;

}

private function drawLine()

{

$this->string .= str_repeat('=', 25) . PHP_EOL;

}

ここで実装した、TextBuilderクラスは、単純な文字列を組み立てるクラスです。Builderはインタフェースが定義されているので、必要に応じて、HtmlBuilderなどのクラスを実装することもできます。

TextBuilderを使用したコードは以下のようになります。

$textBuilder = new TextBuilder();

(new Director($textBuilder))->construct();

echo $textBuilder->getResult(), PHP_EOL;

『Java言語で学ぶデザインパターン入門』をPHPで実習する第6章Prototype

本記事に掲載したサンプルコードは、https://github.com/ryo-utsunomiya/design_patternでも公開中です。

Prototypeとは

クラスからインスタンスを生成するのではなく、インスタンスから別のインスタンスを作り出すことを、Prototypeパターンと呼びます。

Prototypeパターンの例として、Productという文字列を表示するインタフェースと、Productインスタンスの生成及び管理を行うManagerというクラスが存在するとします。

<?php

namespace myframework;

interface Product {

/**

* @param string $s

public function display($s);

}

<?php

namespace myframework;

class Manager

{

/**

* @var Product[]

private $showCase;

/**

* @param string $name

* @param Product $proto

public function register($name, Product $proto)

{

$this->showCase[$name] = $proto;

}

/**

* @param string $protoName

* @return Product

public function create($protoName)

{

if (isset($this->showCase[$protoName])) {

return clone $this->showCase[$protoName];

} else {

throw new InvalidArgumentException();

}

次に、Productインタフェースを実装したUnderlinePenクラスを作成します。このクラスは、与えられた文字列を使用して下線を引きます。

<?php

namespace my;

use myframeworkProduct;

class UnderlinePen implements Product

{

/**

* @var string

private $ulChar;

/**

* @param $ulChar

public function __construct($ulChar)

{

$ulChar = (string)$ulChar;

$this->ulChar = $ulChar[0];

}

/**

* @param string $s

public function display($s)

{

$length = strlen($s);

echo '"' . $s . '"' . PHP_EOL;

echo ' ';

for ($i = 0; $i < $length; $i++) {

echo $this->ulChar;

}

echo PHP_EOL;

}

以下が、これらのクラスの使用例です。

< ?php

namespace my;

use myframeworkManager;

require_once __DIR__ . '/../autoload.php';

$manager = new Manager();

$manager->register('strong message', new UnderlinePen('~'));

$manager->create('strong message')->display('Hello, World');

これを実行すると、以下のように表示されます。

"Hello, World"

~~~~~~~~~~~~

このコードだとありがたみが分かりづらいですが、UnderlinePenのインスタンスを生成するのが難しい場合などには、一度インスタンスを生成しておいて、後で再利用できるようになっていると便利そうですね。

Stateとは

シングルページアプリケーションのルーティング

ngRouteを使う

ルーティングオプション

resolveによるルート実行前のチェック

$routeParamsサービスを使う

注意すべきこと

空のテンプレート

resolveによるコントローラーへの注入

$routeParamsの値の型

1つのアプリケーションにng-viewは１つだけ

追加の設定

HTML5モード

(1) AngularJSのconfigでHTML5モードを有効化する

(2) <base />タグ

(3) サーバサイド

AngularJSとSEO

AngularJSと分析サービス

代替となるルーター

Builderとは

Prototypeとは

`$routeParams`サービスを使う

`resolve`によるコントローラーへの注入

`$routeParams`の値の型

1つのアプリケーションに`ng-view`は１つだけ

(1) AngularJSの`config`でHTML5モードを有効化する

(2) `<base />`タグ