D3の勉強会資料

1. WEBアプリ開発
実践Tips共有会

2. Spring Securityを使った一般的なログイン機構の実装
方法
今回のサンプルでは、Ajaxによってログイン処理を行い、認証
方法はデータベースに保存されているユーザーIDとパスワード
との突合によるものとします。

3. Spring Securityを使った一般的なログイン機構の実装
方法
ポイント
•@EnableWebSecurity
•フォーム認証を有効化
•デフォルトのログインフォームを抑制
•ログインの成功/失敗でJSONを返す
•DB or APIのユーザー情報で認証
•ユーザーの権限に応じた表示切り分け

4. Springでメールを送る方法
ポイント
•spring-boot-starter-mail（JavaMailSenderと
MimeMessageHelper）を利用してシンプルかつ日本語対応
•テンプレートエンジン（Thymeleaf）はBean定義の順序と
Bean定義名に気をつける
•開発環境のメール送信は、docker環境でmailcatcherを使う

5. 自動テストでデータベースにメモリDBを使う手順
データベース接続を伴うテストコードの実行時にメモリDB（
H2Database）を使うと、早くて安上がりですね。
H2DatabaseはMySQLモードやPostgreSQLモードなどを搭載して
いるので、テストコードで利用するのに最適。

6. 自動テストでデータベースにメモリDBを使う手順
ポイント
•テスト用の設定を作成（application-test.propertiesとか）
•テスト用の抽象クラスを用意して、プロファイルを固定
•テスト用のタイムゾーン設定を忘れずに。
•おまけ：MySQLもdocker使うと簡単

7. リソースファイルのキャッシュとバージョニングをい
い感じにする手順
検索エンジンが重要なファクターになるプロダクトだと
GoogleのPageSpeed Insightsとかで高得点を目指したい。
ポイント
•WebMvcConfigurerの実装を提供
•静的リソースをハンドリングする際に、キャッシュとバージ
ョニングの設定を追加
•Viewエンジンで静的リソースパスをバージョン付きパスにす
るためのフィルタを設定

8. コントローラーでのバリデーションエラーをハンドリ
ングする方法
ポイント
•フォーム送信の場合は、Controllerにformの@ModelAttribute
なメソッドを1つ（他に@ModelAttributeは付けない）
•formの変数名はクラス名に合わせるのが安定（Controller上も
Thymeleaf上も）
•API実装の場合は2パターンのいずれか
•フォーム送信と同様、メソッド内に閉じた処理
•@RestControllerAdviceでResponseEntityExceptionHandler
を継承して、グローバルに共通にハンドリングする

9. materialize-cssをwebpack環境で使う方法
ポイント
•expose-loaderでjQueryを解決してあげる（実行時エラー）
•MaterializeCssのフォントパス設定とWebpackのローダー設定
を組み合わせてフォントを解決してあげる（コンパイルエラ
ー）
•scssファイルを作って、materialize.scssをimportする
•xxx-cliで生成されたWebpack設定ファイルを理解せずに使い
続けると後で苦しむ

10. Vue.jsでChart.js使ってグラフを描画する手順
ポイント - Vue.jsのコンポーネント
•単一コンポーネントファイル(*.vue)で書いてvue-loaderを噛
ませる
•但し、scriptファイルは別ファイルにしてインポートしたほ
うがIDEフレンドリー
•babel-loaderを噛ませれば、vue-loaderが勝手にES6を解釈し
てくれる

11. Vue.jsでChart.js使ってグラフを描画する手順
ポイント - Vue.jsのコンポーネント(続き)
•クラススタイルで書く
•vue-class-componentを使う
•vue-loaderが勝手にやってるbabel-loaderの利用部分をカス
タムする必要がある

12. Vue.jsでChart.js使ってグラフを描画する手順
ポイント - Chart.jsを使う
•描画はvueのライフサイクルを意識（mounted以降でやる)
•描画対象の特定は、id指定ではなく、$refs経由でcanvasのコ
ンテキストを取得&指定する
•データ更新は、vueのwatchにてchat.jsのupdate()をコールす
る

13. セッション情報をRedisにJSON形式で格納する手順
ポイント
•@EnableRedisHttpSessionでSpring Session + Redisを有効化（
Redis保存期間を指定）
•設定ファイルでsessionのストア先を設定
•Redis：springSessionDefaultRedisSerializer
•Cookie：CookieSerializer
•確認はMedisが便利