「0でもできるオブジェクト指向 with 出席管理マネージャー#4【開発中のTips(関数式とモダンなAjax)】」(2016/11/25)

2016.11.25

0でもできるオブジェクト指向 with 出席管理マネージャー#4【開発中のTips(関数式とモダンなAjax)】

オブジェクト指向の話からはちょっと横道に逸れるのですが、Tipsとして新たな知った有益な話をとりあげてみたいと思います。ちなみにjavascriptの話です。

・関数式


//サニタイズ用
sanitaize = {
  encode : function (str) {
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  },

  decode : function (str) {
    return str.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, ''').replace(/&amp;/g, '&');
  }
};

function validation(str){
	sanitaized_str=sanitaize.encode(str);
}

別にモダンな書き方とかじゃないんですけど、javascriptにおける関数の定義の仕方の一つに、こういうやり方があるってだけです。
つまりsanitaizeという変数から関数にアクセスできるってことです。

ちょっとわかりづらいので普段はあんまり使わないと思うのですが、このようにエンコードとデコードがセットになったような関数だと、関数式で定義した方が見やすいかなと思います。ちなみにセキュリティの観点から生で表示させることはなく、またデータの格納はエンコード前の値を保存するのでデコードは使わないんですけどね(笑)

まぁこれはおまけみたいなもんです。

・Ajax(非同期通信)

Ajaxに関してはAnonymousの時に触れましたね。

(関連記事)	:(2016/1/1)「0からはじめるPHP#67【Ajax#1-遅延ロードの仕組みを考える-】」
	:(2016/1/2)「0からはじめるPHP#68【Ajax#2-PHPファイルの遅延ロード-】」
	:(2016/1/5)「0からはじめるPHP#69【Ajax#3-Laravelの遅延ロード-」

普通に書いちゃってますが、遅延ロードです。今回は遅延ロード的な使い方はせず、単にPOST送信するためだけにAjaxを使おうと思ってるんですけどね。まぁそういう使い方であれば普通にフォーム生成してsubmitさせる方がテストしやすいかもですけどね。どう考えてもこの用途だとそっちの方がいいですね（）

ただ、知識としてあった方がいいなという話がありまして、上で挙げたようなAjaxの書き方、つまりsucessとか使うのって今時の書き方ではないそうなのです。(※参考ページ)


function group_add(){
	if(group_add_function()===false){return false;}
	
	$.ajax({
		type: "POST",
        url: "./group/new",
		data:{
			new_title:$('#group_new_form [name=title]').val(),
			no_join:$('#group_new_form [name=no_join]').prop('checked'),
			admin_name:$('#group_new_form [name=admin_name]').val()
			},
		beforeSend: function (xhr) {
			var token = $('meta[name="csrf_token"]').attr('content');
			if (token) {
				return xhr.setRequestHeader('X-CSRF-TOKEN', token);
			}
		}
    })
    .then(
        (data) => {
            //成功時リロードして更新
			location.reload(true);
        },
        () => {
            alert("通信に失敗しました。もう一度やり直して下さい。");
        }
	);
}

実際に書いたコードとしてはこんな感じですね。どうやらthenを使って書くのがモダンだそうで。
利点としては関数のネストが減るってとこですね。別にやってることは大して変わってないです。前半のオプション部分なんてほぼ一緒ですからね。

一応補足しておくと、beforeSendオプションはLaravelのシステム上、csrf_tokenが必要になるので送ってるだけです。まぁCSRF対策は大事です。パスワードは暗号化しますから盗まれてもまぁなんとかなりそうなものですが、暗号化する予定のないメールアドレスを盗まれたら、別に直接的な被害はないですけどだいぶ迷惑ですからね。

いやまぁ、検索してこのページにたどり着く人もいるかもなので。Laravelを使わないでCSRFトークンを実装する方法は私は知らないので触れません(笑)
セキュリティ対策なんて出来合いのものに投げたほうが安全です。仕事で自前で実装する必要に迫られたらググります笑

でもまぁ、送信後リダイレクトしてエラー表示をする必要がない(※)ので、Ajaxで実装しなくても普通にForm送信の方がデバックしやすいのでこのコードは今から消しますけどね(笑)
Ajaxで実装するメリットとしては、サーバー側でエラーが起きた場合ページ遷移を必要としないことぐらいですしね。

※送信前に確認モーダルを開くので、「普通の人は」そこで入力値を変更できないためエラー表示を実装しないことにしました。
不正な値を送信した場合はPHP側のバリデーションで弾いてトップページにリダイレクトします。

ということで、グループの追加まではできるようになりました。

当初の構想にはなかったものなのですが、管理者の名前をグループ固有のものに設定することができるようにしました。デフォルトでは画面に表示されている、ユーザー登録に使用している名前が入力されます。
どういうオーダーに対応しているかっていうと、オフ会とかですね。本名でユーザー登録していても、本名を見せたくないグループにはニックネームで登録することが可能になってます。

ちなみに、一つのグループに管理者自体は何人でも設定可能です。例えばメーリスなんかでも、送信する人は管理者以外にもいますよねと。
でも、困った時はこの人に連絡を！というデフォルトの設定値として、最高責任者というものが一人だけ必要になるので･･････。

・TipsのTips - モダンなページ非遷移更新

次回予告。(笑)

せっかくAjaxのコード書いたわけですし、これを活用できないかと考えたところ、利便性向上の手がかりとしてページ遷移をさせないということができます。
まぁ、更新させないってだけの意味なんですけど、Formで送信するとページを更新しなくてはいけないのですが、Ajaxで通信させると、実は返り値とか取得できるので、それを使って新しく所定の部分に要素を挿入すればいいわけですね。
こうすることで、ページを再読込させることなく、すぐに表示を更新できて便利そうですね。ちょっと手を抜きたい誘惑もありますけど、ほどよく難しそうなのでやってみましょう。

純粋に実装するだけなら、cloneNodeメソッドなるものとinsertBeforeメソッドなるものが存在するそうなので、それを駆使する形になりそうですね。
ただ、Bladeテンプレートとどのように絡ませていくかでちょっとハマりそうな予感はしますね･･････。後々デザインが変わっても容易に対応できるような形にしたいところですね。

とりあえず、テーブルにするかDivにするかで迷いましたが、Divでちょっとテーブルちっくなデザインに変えて実装してみましょう。

･･････ということで、こいつの続きは次回。(笑)

NEXT<< Index(Log) >>PREV