Webアプリ開発実践tips共有会

Webアプリ開発実践tips共有会

• 1.
  WEBアプリ開発 実践Tips共有会
• 2.
  Spring Securityを使った一般的なログイン機構の実装 方法 今回のサンプルでは、Ajaxによってログイン処理を行い、認証 方法はデータベースに保存されているユーザーIDとパスワード との突合によるものとします。
• 3.
  Spring Securityを使った一般的なログイン機構の実装 方法 ポイント •@EnableWebSecurity •フォーム認証を有効化 •デフォルトのログインフォームを抑制 •ログインの成功/失敗でJSONを返す •DB orAPIのユーザー情報で認証 •ユーザーの権限に応じた表示切り分け
• 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が便利