Posted on

PHPのちょっとしたパッケージを作ろうと思ったら「ちょっとした」規模にならなかった件

# 長すぎる前置き

LaravelなりCakePHPなり、バニラなものにいろいろと「これはどこでも使うやろ」という基本的な機能を追加したのを「アプリケーション側」に置いたような状態のリポジトリを引き出してから開発を始めてたんです。この長年のやり方に疑問を覚えるような出来事がありまして。

🤔

たとえば、Laravelで使っていた基礎ビューテンプレートがありました。したら、誰かがあるプロジェクトで「なんか埋め込んでたjsが思ったように動かん」ってなって、ビュー本体のほうに追記しちゃった。誰もそんなことすぐにわかるもんじゃないから、あちらが立てばこちらが立たぬ状況が訪れてしまい、基本機能を開発した私に「どうにかして」と話が回ってきたんです。

😱

その時は基礎ビューをもとに戻して、アプリケーション側に必要な変更は基礎ビューを継承する形で対処したんですが、構造的な限界を感じたんです。どこをいじったらどこにどんな影響が出るか、誰もはっきりわからないんです。そりゃそうです。基礎機能を置いた継承元ファイルがほぼプロジェクトで追加するファイルと同じ層にずらりですから、境界もあやふやになる。

😇

ここに「パッケージ」という天啓が降りるまで時間はかかりませんでした。境界がはっきりすれば、誰も「こっから先をいじると他に支障が出そう」ってわかるんじゃない?

🤯

最初は基本機能を丸ごと抜き取ってパッケージにできないかと思ってたんですが、これが異様なほど分量多いのと、「基本機能」と一口で言っても、実態として関係性が薄いいくつかの機能の集まりだったので、一度断念しました。とりあえず間に合わせに「このファイルいじるな」リストだけ書いて共有したんですが…

🙁

そんでもあきらめきれなくて、「とりあえずこの都道府県クラスだけ簡単に抜き出してみよう、練習にはちょうどいいよね」という気持ちで始めたのが…険しい道のりの始まりでした。

# 前置きここまで

今まで使ってた都道府県クラス(PrefDef)、やってることはとてもシンプルで、

  • 都道府県Enum的なもの
  • 地域区分Enum的なもの
  • 都道府県リストを地域区分でフィルタリングしたりしなかったりして配列返す

このぐらいのことだったんです。1クラス。
パッケージ化したらどうなったかって…本体10ファイル+単体テスト6ファイル+αにばらすことになりました。

🤣

パッケージ化するにあたってすぐ、単純かつ異様にめんどいことに気づいたんです。

「デフォルトで中部地方というひとまとまり区分を、甲信越と北陸と東海に分けるシステムがあるかもしれない」

アプリケーションに置きっぱなしのPrefDefなら、中の地域区分を勝手に書き換えてもらってよろしかったんです。
でもパッケージにするなら、さすがに都道府県までいじれるようにしておくのはよろしくない。都道府県だけだったらほぼ絶対変わらないし、もし万が一統廃合があったとして、それはもうパッケージ本体が責任持つべきことですから。
しかし地域区分に関してはそうもいかない。都道府県の変更を阻止しつつ、地域区分だけアプリケーションの都合に合わせられるようにするにはどうしたらいいんだろうってなったんです。

「地域区分だけ設定ファイルを公開して、それを読み込めるようにしよう」

というわけで、こんなのをrequireしてもらったら何とかなるかと思ったんです。

use Okushin\PrefDef\Core\PrefDefStatic as Core; //Core::都道府県という定数がずらりという感覚のクラスを使ってます
return [
    'regions' => [
        'Hokkaido' => [
            'name' => '北海道',
            'prefectures' => [
                Core::HOKKAIDO
            ]
        ],
        //云々
    ]
];

甘かった。実に甘かった。設定ファイルのひな形を作っているときにすら2~3か所”prefectures”を”prefecture”と単数形で書いていたことに気づかなかったから、この設定ファイルをシステムの都合に合わせて調整する人が同じ失敗をしないわけがない!

「そんな時に『やばいよやばいよ』と教えてくれる誰かが要る…」

というわけで、設定ファイルのバリデータもご用意。

use InvalidArgumentException;

class ConfigValidator
{
    public static function validate(array $settings):void{

        //regions:配列必須
        if(!isset($settings['regions']) || !is_array($settings['regions'])){
            throw new InvalidArgumentException("'regions' を配列で指定してください");
        }

        foreach($settings['regions'] as $base_key => $region_settings){
            //name:文字列必須
            if(!isset($region_settings['name']) || !is_string($region_settings['name'])){
                throw new InvalidArgumentException("地域{$base_key}:'name' を文字列で指定してください");
            }
            //prefectures:配列必須
            if(!isset($region_settings['prefectures']) || !is_array($region_settings['prefectures'])){
                throw new InvalidArgumentException("地域{$base_key}:'prefectures' を配列で指定してください");
            }
            //prefecturesの中身:都道府県定数、かつ重複不可
            foreach($region_settings['prefectures'] as $pref_code){
                if(!in_array($pref_code,range(1,47))){
                    throw new InvalidArgumentException("地域{$base_key}:{$pref_code}は正しい都道府県コードではありません");
                }
            }
        }
    }
}

「このパッケージをLaravelだけで使うのもったいないな…素PHPレベルで動けばうれしい…うれしいね…」

Laravelのときは設定ファイルの内容をconfigに流して、それ以外の時はbootstrap.php的なもので設定ファイルを読み込んで、専用の設定掘り出し用クラスを使う…ような流れを考えることになります。

とあるAIに訊いたら、こういう時に『アダプタ』と『ファサード』を作るのだって言ってました。何が言いたいかというと、”設定用クラスのふりをしたもの(ファサード)”を用意して置いて、その実態には環境に応じて”configへの横流し屋(アダプタ)”か”専用の設定掘り出し用クラス”を埋め込んでもらう、みたいなやり口を使うってことです。

// laravelを使っている場合に使う、configへの横流し屋 ~pref_defを添えて~
class LaravelConfigAdapter
{
    public function __construct(){
        ConfigValidator::validate(\config('pref_def'));
    }

    public function get(string $key,$default=null){
        return \config("pref_def.{$key}",$default);
    }
}
//設定用クラスもどき(ファサード) 
namespace Okushin\PrefDef\Facades //ファサード階層にまとめてツッコむことにした
class Config
{
    protected static $instance;

    public static function set($instance):void
    {
        static::$instance = $instance;
    }

    public static function get(string $key, $default = null){
        if (!static::$instance) {
            throw new \RuntimeException('ConfigFacade instance not set.');
        }

        return static::$instance->get($key, $default);
    }
}

この「もどき」を都道府県パッケージ本体に飲ませて、同じget()ながら異なるルートから設定を使えるようにするわけです。

「で、この『もどき』の設定をどこですればええのん?」

サービスプロバイダでした。このパッケージにLaravel向けのサービスプロバイダ書いてあげたら、(そしてcomposer.jsonによしなに書いてあげたら)、
そこに書いてあることを初期化でやってくれるようなのです。(まだここよくわかってないので今後書きます)

//パッケージ側のcomposer.jsonに書くこと
{
    //云々
    "extra":{
        "laravel": {
            "providers": [
                "Okushin\\PrefDef\\Laravel\\PrefDefServiceProvider" //このサービスプロバイダ使えよォォォ!とアピールする
            ]
        }
    }
}
//肝心のサービスプロバイダ
use Okushin\PrefDef;
class PrefDefServiceProvider extends \Illuminate\Support\ServiceProvider
{
    public function boot()
    {
        //やってること1⃣:「artisan君、うちの設定ファイルここにあるねんけど、vendor:publishでここに持ってってくれん?」
        $this->publishes([
            __DIR__ . '/../Config/default.php' => config_path('pref_def.php'),
        ],'pref_def-config');

        //やってること2⃣:「pref_def.php」の内容をconfig()で読めるよう統合しなくちゃ
        $this->mergeConfigFrom(
            __DIR__.'/../../config/pref_def.php','pref_def'
        );

        //やってること3⃣:Configもどきに横流し屋をあてがっておく
        PrefDef\Facades\Config::set(new PrefDef\Config\LaravelConfigAdapter());
    }

    public function register(){

    }
}

素PHPの時は、プロジェクトごとに初期処理で走らすようなbootstrap.phpみたいなものを用意してもらってと

require 'vendor/autoload.php';

use Okushin\PrefDef\Facades\Config;
use Okushin\PrefDef\Config\Config as CoreConfig; //別名を使えばどってことない

$pref_def_config = require __DIR__."../config/pref_def.php"; //pref_def.phpを実際に置いたパスに合わせるべし
Config::set(new CoreConfig($pref_def_config));//Configもどきに実のConfigクラスを飲ませる

こればっかりは自動的に作るわけにもいかんので、READMEにそういう記述を入れとくことにしました。

他にも単体テスト作って通したり、やっぱりPrefDef本体もファサードあるといいよね、みたいになったりしたけれど、本質的に「プラグインを作った」って話はこんなところです。
あとは、アプリケーション側からこのプラグインを取り込む、というところで composer.jsonにいろいろ書いて、composer updateするし、php artisan vendor:publishも忘れずに。

「長い道のりだった…」

もともと1ファイル1クラスだったものも、プラグインとして本気で組んでみると「ユーザーに公開する部分」と「しまい込んで置く部分」の切り分け、その連携についてより解像度を高くする必要がありました。
あと、composerの使い方も。プラグイン側とアプリケーション側、両方の情報がかみ合っていないとcomposerの力が使えないので、phpでパッケージ作るならしっかり書けるようにしたいですね。
とりあえずこの2点だけでも学んだだけ収穫です。

今後も分割できそうな部分プラグイン化して、知見を書いてみたいですが、今回は他の仕事もあるので、とりあえずここまで。

Posted on

Laravelの豪快な丸呑み:ルートモデル結合

ここ1年程、CakePHPからLaravelへの移行が進んでいってたとこだったんです。

私、先発隊としてLaravelの調査とかテンプレートシステムとか作成する命を受けてまして、色々作っていました。(CakePHP4の時もそうだったんですが。)その中で一つ感動したLaraveの仕組みが「ルートモデル結合」というものです。早い話が「そのid数値をテーブルのレコードidとみなしてEloquentモデルにしたやつ先に取ってきとくよ」という気の利いた仕組みです。

そりゃそうです。何かレコードのidを指定してアクションを組んでいるときに、そのアクションでそのidのレコードと関係ない作業しかしないはずはないわけで、取ってきて欲しいし、なかったら適当に404立てておいて欲しいわけです。ルーティングでは結構CakePHPがよしなにやってくれることに対してぶっきらぼうだったのに、こういうところで気が利くのが面白いところです。

ここでやることは

1:コントローラの引数にEloquentモデルのタイプヒントを付ける

namespace App\Http\Controllers;
use App\Models\User;

class UsersController extends Controller{
    //略
    /**
    * ユーザー編集
    */
    public function edit(User $user){
         //なんか処理、既に$user取得済
    }
    //略
}

…たったこれだけ!暗黙の結合とはいうものの、これだけでほとんどのパターンがカバーできてるのが偉すぎる!

これだけのことで、毎回idから今回の主題となるレコードとその関連レコードをむにゃむにゃ…ということを全部Laravelがやってくれてる状態からスタートするんです。urlの見た目は引き続きidと同じだから、今までのソースを邪魔することもあんまりない。
ルートに->missing()を追加すれば、ないときに404じゃなくてリダイレクト返すというのも簡単。idに対応するレコードが存在しているというだけでは不十分で、何らかの条件を満たしたレコードだけアクセスできるっていう条件が必要なら、それはポリシーの出番やね、というところです。もちろんポリシーにも既に手配したレコードが流れてきてくれてるので、チェックもしやすい。いいことづくめ。

「urlが整数値で入ってきてるから、コントローラも整数値だけを受け取っとるやろな」という常識が、職場でも早く覆ってほしい今日この頃です。

Posted on

イベントシステムについて今更勉強した件

CakePHP4の使い方をあれこれ探っているときに、上司から「論理削除したとき、deletedカラムにもタイムスタンプが立つようにして」と言われたのが事の発端でした。
CakePHPには前からsoftDeleteなるプラグインが存在していて、それがタイムスタンプを立てることは知ってたんです。そんでも、プラグインをやたら増やしたくないという方針もあったため、何とか今あるものだけでdeletedカラムにタイムスタンプを立てようとしておりました。そうなると、TimeStampBehaviorの出番だろうと思い至ったわけです。今まで既存のコールバック(beforeSave)に対してタイムスタンプを置いていたわけだから、どうやって他のタイムスタンプを立てるタイミングを決めるのやら結構勉強が必要でした。

逆に言うと、勉強の時間が大半で、数行いじったらすぐできてしまったことにびっくりしているんです。
イベントをTimeStampビヘイビアに発行するナニカが必要なだけだったというオチで、最初にイベントリスナから組む長い長い道のりを覚悟していて肩透かし。

イベント発行って、こんだけでいいんですね

$event = new Event('Model.beforeDelFlag',$this,['entity' => $entity]);
$this->getEventManager()->dispatch($event);

TimeStampは内部的にイベントを全部観測していて、イベント名が設定のキーと同じ名前のものが発行されたとき、その下に設定されたタイムスタンプに適切に現在時刻を立てる…こういうことだったんだなと。

イベント名の命名規則は、層.(クラス.)イベント という具合だとか、リスナの書き方とか、まだイベントシステムを完全に理解したわけではないけれど、これを論理削除メソッドに埋め込んだらタイムスタンプ押してくれるようになった、という具合。これを他でどう使うかはまだイベントリスナ含め思いついていないですけれども、もしかしたらこれがまた仕事場の常識を塗り替えるような改善を生み出す可能性は無きにしも非ず…。

とりあえず今のところは、イベントの発行方法だけでも分かったことでよし、と思ってます。

ディスパッチという言い方がわかりにくいのねん…「発行」とか「発令」と訳語を当ててくれたらええのに…。

Posted on

Hashはいいぞ Hash::map編

気が付いたら前の記事から1年半以上空いてしまいました。それだけみんな忙しかったといえばそうなのですが、ようやっと時間ができたので、何を書こうかなと思ったとき、そういえば近くの人にHash::map教えてないなって思い出したんです。

これ、最初のうちはかなり読みにくい印象あると思うんです。ラムダ関数慣れが要るという感じで…

ここまでくるとforeachと大差ないっちゃ大差ないところもあります。
Hash::reduceともなるとさらに差がなくて、正直どっちで書けばいいか自分でも迷います。

それでも、配列を「ループで一つ一つ確認する」というforeachの見え方と、
配列を「各要素にまとめて適用する」というmapの見え方ってやっぱり違うと思うんです。

// Model->find('all') したときありがちな配列
$data = [
    o => [
        'Color' => [
            'id'=>'1',
            'name'=>ゴールド',
            'red'=>'255',
            'green'=>'215',
            'blue'=>'0',
        ]
    ],
    1 => [
        'Color'=>[
            'id'=>'2',
            'name'=>'シルバー',
            'red'=>'192',
            'green'=>'192',
            'blue'=>'192',
        ]
    ],
    2 => [
        'Color'=>[
            'id'=>'3',
            'name'=>'ブロンズ',
            'red'=>'154',
            'green'=>'98',
            'blue'=>'41',
        ]
    ]
];

//色名と16進コードの配列を作る
$result = Hash::map($data,'{n}.Color',function($item){
    return [ 
        'name' => $item['name'],
        'hex_code' => sprintf("#%02x%02x%02x",$item['red'],$item['green'],$item['blue'])
    ];
});

/**

$result = [
    0 => [
        'name' => 'ゴールド',
        'hex_code' => '#ffd700',
    ],
    1 => [
       'name' => 'シルバー',
       'hex_code' => '#c0c0c0',
    ],
    2 => [
       'name' => 'ブロンズ',
       'hex_code' => '#9a6229',
    ],
];

*/

//やってることは以下のforeachとあんまり差はない
$result_foreach = [];
foreach($data as $color){
    $result_foreach[] = [
        'name' => $color['Color']['name'],
        'hex_code' =>  sprintf("#%02x%02x%02x",$item['Color']['red'],$item['Color']['green'],$item['Color']['blue'])
    ];
}

foreachとあんまり変わらないなら、なぜこういう書き方をするかと考察したとき、いくつか強みっぽいところはあります

深い階層からもパスで引っ張ってきてくれる
深い深い配列の奥にあっても、Hashのパス記法を使えば、何重foreachを使わずとも。
引っ張ってくる個数と結果の配列は要素個数が同じで、キーは0始まり連番
foreachだとソースを読まないとそういう結果の予想は付かない
ラムダ関数の中は独自スコープ
外側と変数名がかぶることを気にしなくていい。外側の変数を使いたいときはfunction($item)use($outside_var)みたいな感じで

なんだかんだ、使ってると手になじんでくるものです。

Posted on

Hashはいいぞ Hash::combine編

去年からだいぶHash::なんとかを使い続けて、だいぶ手に馴染んできました。foreachのほうが分かりやすい場合は、素直にforeachを回したらいいんですが、select用のリストをfind結果の複数のカラムから作る、みたいなことにHash::combineを使えると非常に見通しが良いです。なんてったって「配列のこれをキーとして、これを値とする配列を作る」ですもの。

// Model->find('all') したときありがちな配列
$data = [
    o => [
        'Color'=>[
            'id'=>'960018',
            'name'=>'カーマイン',
            'red'=>'150',
            'green'=>'2',
            'blue'=>'24',
        ]
    ],
    1 => [
        'Color'=>[
            'id'=>'00896B',
            'name'=>'ビリジアン',
            'red'=>'0',
            'green'=>'136',
            'blue'=>'53',
        ]
    ],
    2 => [
        'Color'=>[
            'id'=>'434DA2',
            'name'=>'ウルトラマリン',
            'red'=>'67',
            'green'=>'77',
            'blue'=>'162',
        ]
    ]
];

// [id => 色名]
$result_1 = Hash::combine($data,'{n}.Color.id','{n}.Color.name');
/**
$result_1 = [
    '960018'=>'カーマイン',
    '00896B'=>'ビリジアン',
    '434DA2'=>'ウルトラマリン',
];
*/

// [id => 'Rスペース詰め3桁,Gスペース詰め3桁,Bスペース詰め3桁']
$result_2 = Hash::combine($data,'{n}.Color.id',['%3d,%3d,%3d','{n}.Color.red','{n}.Color.green','{n}.Color.blue']);
/**
$result_2 = [
    '960018'=>'150,  2, 24',
    '00896B'=>'  0,136, 53',
    '434DA2'=>' 67, 77,162',
];
※ 配列のキー側引数も配列でsprintf記法指定できる
*/

どっちも、フォームの選択肢を作るとき凄い役に立ちます。
パス記法に慣れると、いくつも組み合わせてprintfの指定をすれば配列のキーも値も自在に組めます。
もうforeachでぐるぐる検索結果を回しては文字列をこねくり回して…みたいなことはしなくていい!

単純に「これとこれとこれを取り出して配列を作りたい!」とき、使ってください。

Posted on

jQuery UI Datepickerにクリアボタンを追加してスマホでも使いやすくする

jQueryUIのDatepickerを使っているのですが、スマホなどで使用する場合は入力させる時にスマホのIMEがせり出てきてスマホの表示領域を圧迫して入力しづらい場面がやや出てきます。

そのinput要素をスマホの場合はreadonlyにする事で、IMEが出てくる事を回避する事はできるのですが、今度は入力した値を消したい場合はどうすればいいかという問題が出てきました。

Datepickerにクリアボタンを追加したらいいんじゃないかと思いその対応について記述したいと思います。


HTMLではdatepickerにする要素にreadonly属性を付与します。

   var setCalsClearButton = function(year,month,elem){

        var afterShow = function(){
            var d = new $.Deferred();
            var cnt = 0;
            setTimeout(function(){
                if(elem.dpDiv[0].style.display === "block"){
                    d.resolve();
                }
                if(cnt >= 500){
                    d.reject("datepicker show timeout");
                }
                cnt++;
            },10);
            return d.promise();
        }();

        afterShow.done(function(){

            // datepickerのz-indexを指定
            $('.ui-datepicker').css('z-index', 2000);

            var buttonPane = $( elem ).datepicker( "widget" ).find( ".ui-datepicker-buttonpane" );

            var btn = $('');
            btn.off("click").on("click", function () {
                    $.datepicker._clearDate( elem.input[0] );
                });
            btn.appendTo( buttonPane );
        });
   }

datepickerには開いた後のイベントがないため、開く前のイベントにウインドウとなる要素がdisplay:block;になったかどうかをpromiseで判定します。

要素が作られるまで待つのですが、inputを選択して5秒待ってまだ開かなかったらpromiseを辞めるというコードも書いています。その場合はおそらく内部エラーくらいだと思いますが、待ち続けているのも良くないので終了させるよう書いています。

要素が作られたら、ボタンを追加するコードを入れています。


  $(".datepicker").datepicker({
      showButtonPanel: true,
      changeMonth:true,
      changeYear:true,
      beforeShow : function(inst,elem){
              setCalsClearButton(null,null,elem);
      },
      onChangeMonthYear:setCalsClearButton
  })

datepickerを呼び出す所optionに、beforeshowに上記関数を指定します。

onChangeMonthYearにもオブジェクト関数を指定しています。これは月を変更した場合、再描画が走ってクリアボタンも消えてしまうので、月の変更時にイベントにボタンを追加するコードを走らせて都度生成するようにしています。

これで、入力しやすくなりましたね。

Posted on

Hashはいいぞ

誰もが言っていました。配列をいじるならHashを使えと。

Hash::get()だけは結構使っていました。配列に存在しない引数を引いてもnotice出さずにnullを返してくれる。
それでも、勉強するのは面倒で、ついついforeachをぶん回していろいろやっていました。

この冬、ふとHash::insertを使おうと思い立ったんです。
「たったこれだけのためにforeach書くのめんどい」という状況が増えていたのです。

誰もが言っていた通り、Hashは良いものでした。

親子関係のあるテーブルを想像してください。
parentsテーブルがあって、childrenテーブルにparent_idを持っている、よくある parents has many childrenという関係です。
都合によりモデルにリレーションを固定していないので、毎回保存のたびに親子関係idをくっつけておく必要がある、という前提で…

//トランザクション中
if(!$this->Parent->save($parent_data)){
    $this->Parent->rollback();
    return false;
}
$parent_id=$this->Parent->getID();

//childrenにとにかくparent_idだけ付けなおす
foreach($children as $key=>$child){
    $children[$key]['parent_id']=$parent_id;
}
//(後略)

この、ID付与の為だけのforeachを見飽きたんです。
Hashを使えるとここが…

    //整数キー直下の配列全部に”parent_id”を追加する
    Hash::insert($children,'{n}.parent_id',$parent_id);

一行。何よりもやってることがすっきり見える。任意の整数とマッチする{n}という書き方が強い。
foreachが出ると読み手はループを身構えるから、「任意の~全部に操作」という話が見えにくい。

やっていることは同じなのに、配列的バッチ操作として書けるのは本当に助かる。
他にもHashには非常に強力な機能はあるけれど、勉強が追い付いていない…。
また今度、追加します。

Posted on

「Effective JavaScript」かいつまみ -基礎編-

翔泳社の「Effective JavaScript」(David Herman著 / 吉川邦夫訳)の一章から、
重要そうな部分をピックアップして箇条書きで要約しました。
太字の部分は要約者の勝手な感想(?)です。
普段開発で使用しているPHPに関して主に追記しています。

第一章 JavaScriptに慣れ親しむ

項目2 JavaScriptの浮動小数点数を理解しよう

・JavaScriptでは、すべての数が倍精度浮動小数点数(いわゆるdouble)である。
・-9,007,199,254,740,992~9,007,199,254,740,992までの整数は全てdoubleで表現する事が可能。
・当然のように、浮動小数点数演算特有の問題が存在。

console.log(0.1 + 0.2); //0.30000000000000004

・少数を扱う際は一度整数にしてから演算して、結果を調整するほうがよさそう。

console.log((0.1 * 10 + 0.2 * 10)/10); //0.3

項目3 暗黙の型変換に注意しよう

・JavaScriptはほとんどの型エラーをスルーして実行してしまう。
・数値演算地の-、*、/、%は、計算を行う前に引数を数値に変換しようとする。
・ただ+だけは例外的な動きをする。
・以下例

console.log(3 + true); //4
console.log("2" + 3); //"23"

・真偽値の型強制。
・ifや||や&&のような演算子は、受け取った値を真偽値に型変換して解釈する。
・JavaScriptでは偽となる値は、false 0 -0 “” NaN null undefined の7つだけ。
・PHPの場合は、”0″ や [] もfalseになるので要注意。

項目5 型が異なるときに==を使わない

・==で値を比較する場合、項目3で既出の暗黙の強制によって両者が数値に変換されて比較される。
・===は型を考慮して比較。
・==のほうが便利な場合もあるのでついつい使ってしまう事もありますが、基本的には===で統一したほうがよさそう。
特にPHPの場合 var_dump(“hoge” == 0)  //結果:true などと直感に反するケースがある(最初が数字でない文字列は0に変換されるため)ので要注意。

項目7 文字列は16ビットの符号単位を並べたシーケンスとして考えよう

・Unicodeが16ビット内でおさまると考えられていた時代にJavaScriptは生まれたため、JavaScriptの文字列の要素は16ビットの符号単位である。(UTF-16形式)
・実際にはUnicodeには16ビットを超える文字も存在し(例えば辰吉じょう一郎のじょう・丈の右上に点)、それらは16ビットの要素2つで表現される。
・そのためUnicodeで16ビットを超える文字の場合は、length や charAt などで文字数と結果が一致しないことになる。

Posted on

jQueryプラグインSweetAlert2を使っていいカンジのconfirmをサクッと呼べるラッパー作りました

案件でよくユーザーに処理の実行を問いかけたい時にJavaScriptの標準機能のconfirmを使ったり、情報を表示する際にAlertを使いますが、どこか味気ないし、ブラウザによっても表示がまちまちなので、もうちょっとイイ感じにしたい…そんな時はSweetAlert2を使ってみましょう。

こんなconfirmがサクッと作れます!

SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes

CSSとJSの読み込みです。sweetalert2はES6のPromiseを使って書かれているようなので、IE11以下や古いAndroidに対応するためにpolyfillを先に読んでおきましょう。

今回はCDNを使用しました。







SweetAlert2は便利なのですが、呼び出す構文にオブジェクトを作ったりする必要がありますが、標準のconfirmのように引数で呼び出せたらラクなんだけどなぁと思ったので、ラッパーを作ってみました。

See the Pen
SweetAlert2 wrapper
by koka (@kokaben)
on CodePen.

ボタン色はBootstrap4のクラスを指定しています。

以下コードをコピーしてページに貼るか、alertmessage.js等のファイルで保存してscriptタグで呼び出してください。

(function (ns) {

// Sweet Alert 2が読み込まれてなければ抜ける
if (typeof Swal === "undefined") {
console.error("プラグイン「SweetAlert2」が読み込まれていません。先にscriptタグで読み込んでください");
return false;
}

var AlertMessage = function () {

// インスタンスがあるかどうかチェック
if (typeof AlertMessage.instance === "object") {
return AlertMessage.instance;
}

// 無ければキャッシュする
AlertMessage.instance = this;
return this;
};

/**
* confirmラッパー
* @param _text String 表示したい内容テキスト
* @param _title String 表示したいタイトルテキスト
* @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク )
* @param _callback function アラートの結果を受けて関数を呼び出す。引数に成否を渡す
* @param _array [] コールバックに渡したいもの配列
* @constructor
*/
AlertMessage.prototype.confirm = function (_text, _title, _mode, _callback,_array) {

var dispTitle = _title;
if (typeof dispTitle === "undefined") {
dispTitle = "確認";
}

var o = {
allowOutSideClick: false,
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: "キャンセル",
customClass: {
cancelButton: 'btn btn-gray', //bootstrap4のクラス
},
title: dispTitle,
html: _text
};

if (_mode === "success" ||
_mode === "error" ||
_mode === "warning" ||
_mode === "info" ||
_mode === "question") {
o["type"] = _mode;
};

Swal.fire(o).then(function (result) {
var retBool = false;
if (typeof result.value !== "undefined" && result.value === true) {
retBool = true;
}
if(typeof _callback === "function"){
_callback.call(this, retBool,_array);
}
});

};

/**
* Alertラッパー
* @param _text String 表示したい内容テキスト
* @param _title String 表示したいタイトルテキスト
* @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク )
* @constructor
*/
AlertMessage.prototype.alert = function (_text, _title, _mode) {

var o = {
allowOutSideClick: false,
type: _mode,
title: _title,
html: _text
}
Swal.fire(o);
};

ns.AlertMessage = new AlertMessage();

})(window);

使い方

htmlでボタンを作成します。

削除ボタン 

基本の呼び出し方は以下となります。文言が長いので引数1つずつに改行を入れていますが、横に並べて書いても大丈夫です。

// ボタン押下のイベント
$(document).on("click", "#deleteUserButton", function (e) {
      e.preventDefault(); // 本来のボタン押下の処理のキャンセル
      
      AlertMessage.confirm(
          "ユーザーのデータを削除します。よろしいですか?", // confirm本文
          "ユーザーの削除の確認", // confirmタイトル
          "info", // アラートの種類
          function (_enter) { // コールバック
            if (_enter) {
              // OKが押された時の処理
            }
          });
    });

ボタンを押下するとこんな感じで表示されます。

SweetAlert2のconfirmをいつでもどこでもAlertMessage.confirm()引数で呼べるようになりました。

アラートの種類というのは、表示するアイコンの種類になります。
bootstrapの”success”, “error”, “warning”, “info”で指定できるので慣れている人は直感的に書けます。それに加えて”question”も指定できるのでユーザーに問いかけたい時は非常に便利です。

さらにconfirmのコールバックにさらに配列を渡せるようにしました。使いたい値がある場合は、便利かもしれません。

 var infoArray = ["タンタン", "パンダ", "神戸"];
    
      AlertMessage.confirm(
          "情報を追加してもよろしいですか?", // confirm本文
          "確認", // confirmタイトル
          "question", // アラートの種類
          function (_enter, _array) { // コールバック
            if (_enter) {
              // OKが押された時の処理
              var _text = "";
              $(_array).each(function(i){
                _text += this;
                if(i < _array.length -1){
                _text += ",";
                }
              });
              $("#output").html(_text); //タンタン,パンダ,神戸
            }
          },
          infoArray // コールバックに渡したい配列
          );
    });

ついでにAlertMessage.alert()も作りました。シンプルにアラートが出せます。

AlertMessage.alert(
          "処理を中断します。", // alert本文
          "エラー!", // alertタイトル
          "warning", // アラートの種類
         );

jQueryのプラグインはとても便利ですので、そのプラグインをもっと簡潔に使えるような工夫をすればもっともっと手っ取り早くコーディングができるようになりますよ。

Posted on

EAVをなんとかし隊

これは平成最後の月。
CakePHP2.x系。入力チェックが通らないたび、フォームの内容が編集前に戻ってしまう不具合を直したときの話。

単純にまず、DBがイケてなかったんです。


INT id
INT type
VARCHAR(255) value

どこからどう見てもEAV。Entity Attribute Value。
何故よくないかのDB設計理論的な難しい説明は置いとく。
DB構造はその時動かす権限がなかった。(もし権限があったらその根本原因から直してしまいたかった)

で、その不具合が発生している画面を見て。

・DBから持ってきたデータ構造
・フォームへ渡すときのデータ構造
・フォームの初期値を表示するとき

これらが全部バラバラで往生した…。

DBからとってきたときの配列:

[
    0=> ['Model'=> [id => 1, type => 1, value => 5]],
    1=> ['Model'=> [id => 2, type => 2, value => "someaddress@example.com"]],
    2=> ['Model'=> [id => 3, type => 2, value => "anotheraddress@example.com"]]
]

これを加工して,typeをキーにしてビューに渡すけれど:

[
    1=> [
        0=> ['id'=>1, 'value'=>5]
    ],
    2=> [
        0=> ['id'=>2, 'value"=>"someaddress@example.com"],
        1=> ['id'=>3, 'value'=>"anotheraddress@example.com"]
    ]
]

ビューでさらに取り出す:
(Formヘルパに’value’で渡している)

$this->Form->input('Model.type_1.value',['type'=>'text', 'value'=> $this->request->data[1][0]['value']);
$this->Form->input('Model.type_2.0.value,['type'=>'text', 'value'=>$this->request->data[2][0]['value']]);
$this->Form->input('Model.type_2.1.value,['type'=>'text', 'value'=>$this->request->data[2][1]['value']]);

(あと、idをそれぞれhiddenフォームで送っていたりする)

フォームを送信すると、入ってくるのは…

[
    'Model'=> [
        'type_1'=> ['id'=> 1, 'value'=>5],
        'type_2'=> [
            0=> ['id'=> 2, 'value'=> 'someaddress@example.com],
            1=> ['id'=> 3, 'value'=> 'anotheraddress@example.com]]
	]
    ]
]

当然、DBからデータを取ってきたときとも最初フォームに渡したときとも違う構造。
このままではフォームの次の値が取れないから、前のコードではリクエスト関係なくDBからその都度データ読み込んで来ていた。
エラー値ならエラー値のままフォームに残しておく仕様なのに…。

とりあえず、その時はビューに渡すときの構造と受け取る時のデータ構造をそろえた。
(そうでないと変換が双方向に必要になるんで)
そろえれば使えなくはない。
Formヘルパに渡すvalue要素も要らなくなるし、入力チェックが通らないときフォームの初期値を作るためだけにDBを読みに行かなくていい。

でも、それでもやっぱりEAVはイケてない…。

この構造の時、まず絶対に1つしかないパラメータをこう…ひとつテーブルにして

INT model_id
INT type1_val

で、複数登録する必要がありそうな情報だけテーブルを分けてこう…。

INT model_mail_id
VARCHAR type2_mail

そしたら、DBからとってきた構造をパースしてフォームに渡す必要って本来それほどないはずなんです…。

僕がDB設計するときには、後輩に同じような愚痴を語らせないためにも、
あと、DB設計理論以上にそもそもコーディングがめちゃくちゃ往生するので、できることならEAVは避けていきたいという話でした。