Vuejs 追加と編集フォームを共通化する

課題 追加と編集フォームは同じデータを操作することが多い。そのため、各フォームを異なるコンポーネントとして作成するとほぼ同じ処理をするコンポーネントが2つできることになり、入力チェックやレイアウトの調整に2重のコストがかかる。そのため、追加と…

Makefile 動的な変数の使い分け

課題 Makefileのターゲット内で動的に変数を設定したい。 解決方法 変数がターゲット実行時に確定する場合 環境変数を利用する シェルのコマンド置換$(...)を利用する Makeのshell関数$(...)だと、ターゲット実行前に実行されるから 各行を;でつなげて、変数…

Vuejs formをサブミットするときのポイント

SPAの場合はformタグに任せてデータをサブミットすることは稀で、通常は自身で定義したハンドラを呼び出してAjax通信を行うことが多い。 課題 以下のように<button type="submit" @click="exec">を使ってボタン押下時のハンドラを実行するのは危ない。 <template> <form> <input type="text" placeholder="username" /> <input type="text" placeholder="password" /> <button type="submit" @click="exec">submit</button></form></template></button>

L7ロードバランサとL4ロードバランサ

ロードバランサとは DNSラウンドロビン DNSラウンドロビンでは対応できないこと L7ロードバランサ パケットの流れ L4ロードバランサ IPアドレス変換方式(NAT方式) パケットの流れ MACアドレス変換方式(DSR方式) パケットの流れ 構築してみる L7ロードバラン…

Vuejs APIアクセスはcreatedとmountedのどちらで行う?

created と mounted どちらもVuejsが提供するライフサイクルフック。たいていのサンプルでは、このライフサイクルフックのどちらかでAPIアクセスをするが、どんな違いがあるんだろう。 created インスタンスの初期化が済んで props や computed にアクセスで…

Docker-Compose の変数定義について

検証環境 docker-compose.ymlで利用できる変数 環境変数 .envファイル Dockerコンテナで利用できる変数 environment env_file docker-compose run -e XXX=YYY 変数の優先順位 コンテナ内の変数の優先順位 docker-compose.yml で参照するときの優先順位 動的…

RXJava 無限ストリームでdistinct使ったらどうなる?

検証バージョン Java 1.8.0_25 RxJava 2.1.14 distinct distinct はフィルタ系操作の一つで、重複要素を取り除くためのメソッドです。 重複要素を取り除くためにはどこかに比較対象が存在しないといけないわけで、じゃあ無限ストリームとかどうやって対応す…

Vuejs vue-tables-2 でテーブル表示

vue-tables-2とは サンプルコードについて 表示してみる 実装のポイント リンクを作る 実装のポイント カラムが多いとき データが多いとき カラムごとにフィルタを用意する 実装のポイント カラムごとに表示/非表示を切り替える 実装のポイント グルーピング…

Spring WebFlux の概要を理解する

Spring WebFluxに関する、いまの理解を整理する。 Spring WebFlux 以前の問題点 Javaスレッドでコンテキストスイッチ? Spring WebFluxで課題をどう解決するか? Spring MVC と Spring WebFlux を比較する 検証環境 シナリオ 実装の違い Spring MVC Spring W…

AWS Lambda と LINE Notify で毎朝のゴミ出しを促す

唐突ですが、我が家の課題に『ゴミ出しを忘れる』というのがあります。たまに、家に帰って扉開けたらやばいニオイがして、激しく後悔します。ということで、LINEへ毎朝のゴミ出しの通知をしてみました。という建前の AWS Lambda と LINE Notify 触ってみた系…

MyBatis 利用時に SQL で FULL OUTER JOIN するときの注意点

検証環境 mybatis 3.4.5 java 1.8.0.25 ハマったこと DBに以下のようなデータが入っているときに SQL で FULL OUTER JOIN すると、以下のようになる。 これに対応するJavaのBeanを用意して、 @Data public class Shelf { private Long id; private String na…

Jenkins Multibranch Pipeline の成果物の保存数を指定する

問題点 Muitibranch Pipeline のプロジェクトを利用すると、ブランチごとにジョブが作成される。 このとき、デフォルトだと、各ブランチごとの成果物の保存数は上限がない。 そのため、成果物がどんどん溜まってしまい、ディスクフルを起こす可能性がある。 …

Vuejs vue-router クエリパラメータの一部だけを取り除く

課題 Vuejs利用時に、以下のようにクエリパラメータを一部のみ取り除きたい 検索したらURLにクエリパラメータが付与される ボタンを押したら対応するクエリパラメータだけURLから削除される 検証環境 "dependencies": { "vue": "^2.5.2", "vue-router": "^3.…

Vuejs Axiosで共通的な例外をあつかう

課題 Vuejs利用時に、HTTPレスポンスの例外処理を共通化したい。 各画面の各リクエストごとに、例外処理を実装するのは避けたい。 解決方法 HTTPクライアントライブラリのAxiosの、interceptorsの仕組みを利用する。 検証環境 package.json "dependencies": …

Vuejs vue-router利用時にはアクティブなリンクに自動でクラスを振ってくれる

環境 package.json "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }, 課題 vue-router利用時に、アクティブなリンクにcssのスタイルを適用したい。 このとき、Vuejsだけの知識で解決しようとすると、以下のように書ける。 <template> <div> <ul> <li :class="{ active : this.$route.path.match(/articles\/stark/) }"> </li></ul></div></template>

Vuejs <button type="reset"> の併用はアブナイ

<button type="reset">とは? HTMLのButtonのひとつで、Formを自動でクリアできる。 参考: button 要素 - HTML | MDN <html> <body> <form> <input type="text" placeholder="username" /> <input type="password" placeholder="password" /> <button type="reset">reset</button> </form> </body> </html> resetボタンをクリックするとFormが自動で…</button>

今年のふりかえり(ブログの運営について)

年の瀬でやる気もでないので、2017年をふりかえろうと思います。技術要素はゼロです。面白さもゼロです。 アクセス数 2016年から始めたブログですが、1年前と比べると2倍強のアクセス数になりました。 日本の総人口は1億2670万人らしいので、このペース(1年…

Tomcat リソース設定(maxThreads,maxConnections,acceptCount)のちがい

maxThreads リクエストを処理するスレッド数(workerスレッド)の上限 1リクエストを処理するために1workerスレッドを消費する コネクタ(HTTP1.1, AJPなど)ごとの上限 ただしスレッドプールをexecutorプロパティで指定した場合、この上限は無視される maxConne…

Vuejs vue-router コンポーネントインスタンスの再利用について

はじめに 検証環境 検証 プロパティが変更された場合 ソースコード 実行結果 いったん別のコンポーネントに切り替えた場合 ソースコード 実行結果 別URLに同一コンポーネントを割り当てた場合 ソースコード 実行結果 ネストしたビューでプロパティが切り替わ…

Spring Securityで特定ヘッダーがついてるときだけ認証をパスさせる方法

以下、Basic認証を例に取り上げる。 何をしたいか? アプリケーションに認証をかける。 $ curl -i -u 'user:pass' localhost:8080/api/sample HTTP/1.1 200 X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block Cache-Control: no-cache, no-s…

こわれたHTML構造でもEnter押下時のimplicit submissionをサポートする方法

implicit submission とは formタグ内でEnterを押したらformがサブミットされるという仕様。 以下のように、formタグ内に input type="submit" 要素があると、 <html> <body> <form> <input type="text" name="id" /> <input type="text" name="password" /> <button type="submit">submit</button> </form> </body> </html> Enterを押下したらサブミットされる。 課題 やむ…

docker-compose を複数起動する

docker-composeとは? docker-composeは複数のコンテナを手軽に扱うためのツール。 yml形式でコンテナに関する設定ができ、 sample]$ ls docker-compose.yml docker-compose.yml version: "3" services: ap: image: "centos:7" command: ["tail","-f","/dev/…

Spring Boot なぜ Tomcat のログをアプリケーションから管理できるのか?

疑問点 Tomcatにwarをデプロイする方式では、Tomcatのログはconf/logging.properties で設定し、アプリケーションからはTomcatのログ設定を変更することができない。 参考 tomcat ロギング リファレンス しかし組み込みTomcatを利用する方式では、アプリケー…

Javaアプリケーション ログ出力パターン

はじめに アプリケーションレベルのログ 実現方法 注意点 ミドルウェアレベルのログ 起動スクリプトや終了スクリプトのログ 最近の流行り はじめに Javaでアプリケーションを構築する時に考慮すべきログは、3つに分類できると考えている。 アプリケーション…

Javaのビルドの基礎知識

Javaのビルド関連の知識については、Java学習初期にこんなコード書いて終わり、あとは便利なビルドツール(mavenやらgradle)に任せようって感じで知識が薄かった。 $ cat Sample.java public class Sample { public static void main(String[] args) { System…

Vuejs ポーリングする時の注意点

setIntervalとは 一定の遅延間隔を置いて関数を繰り返し実行したいときに利用する関数。 ポーリングで利用することが多い。 参考 setInterval 1秒ごとにコンソール出力する例。 <html lang="ja"> <script> window.setInterval(function(){ console.log("polling"); }, 1000); </script> <body> </body> </html> se…

Spring 抽象クラスに設定したアノテーションは引き継がれるか?

結論 以下のコードの実行結果からわかるように、引き継がれる。 @EnableAsync //非同期処理を有効化する @SpringBootApplication public class InheritApplication { public static void main(String[] args) { new SpringApplicationBuilder(InheritApplica…

Spring 非同期タスクの同時実行数を制限する

課題 Springには、非同期に処理を実行するための@Asyncアノテーションがある。 参考 7. Task Execution and Scheduling www.kimullaa.com デフォルトだとスレッド管理(TaskExecutor)にSimpleAsyncTaskExecutorが使われる。 このクラスは@Asyncの呼び出しごと…

Maven 「mvn checkstyle:checkstyle」みたいなコマンドと「mvn test」みたいなコマンドのちがい

疑問点 「:」でつないで実行するコマンドと、 $ mvn checkstyle:checkstyle 「:」なしで実行できるコマンドがある。 $ mvn test この差は何か? 結論 「mvn checkstyle:checkstyle」は「ゴール」 「mvn test」は「フェーズ」 ゴールとは? mavenのpluginそ…

Vuejs dataプロパティに動的に値を追加する方法(とJSの基本を理解してなかったという話)

Vuejsのdataプロパティとは {{ }}形式で記載したときに、リアクティブに扱われる値。つまり、dataオブジェクトのプロパティの値が書き換わったタイミングで、DOMが書き換わる。 サンプル 以下のような単一コンポーネントを作成する。 ... "dependencies": { …