Nuxt.jsでWebSocketを使ってみる #nuxtjs #vuejs

Nuxt.jsでWebSocketを使ってみる。 バックエンドはexpress-templateを使ってExpressで用意する。(Nuxt.jsはWebSocketのクライアントとして使う) su-kun1899.hatenablog.com サーバ側 nuxt-expressテンプレートを使っていることを前提とする。 ExpressでWeb…

jestでVuexのmapMutationsがエラーになる #vuejs #nuxtjs #jest

jestでVuexのmapMutationが Unexpected token on mapMutations なエラーになってしまう。 ...mapMutations の ... がbabelによってエラーになってしまっているようだ。 ... はスプレッド演算子(object rest spread operator)というらしい。 解決方法 スプ…

jestでNuxt.jsの依存コンポーネントのパスがエラー #nuxtjs #vuejs #jest

Nuxt.jsはsrcディレクトリやrootディレクトリにエイリアスがついており、importなどではそれを使用する。 こんな感じで。 import child from '@/components/Child' しかしjestでテストを書こうとした場合に、パスが解決出来なくてエラーになってしまう。 Can…

期間の範囲を示すパラメータ名について考えてみた #programming

概要 APIのパラメータとして期間の範囲を表す命名について、職場でいい議論がなされたので自分なりにまとめておく。 期間の範囲というのは「開始日時」「終了日時」のようなものを想定。 start-end 扱いやすそうなのはこれ。 日時の場合は、終了側が排他的で…

nuxt-communityのexpress-templateを試してみる #nuxtjs #vuejs

概要 vue-cliから作れるNuxt.jsのテンプレートに、express-templateというのがある。 Nuxt.jsと同時にExpressを起動させて、バックエンドとして動かすことが可能。 Nuxt.js内でバックエンドのMockを作って動かせるので、フロントエンドとバックエンドの開発…

Nuxt.jsのプロジェクトにCircleCIを適用する #nuxtjs #circleci

概要 Nuxt.jsのプロジェクトをCircleCIで動かしてみる config.ymlの作成 Nodeプロジェクト用ののテンプレートを利用してconfig.ymlを作成する プロジェクトルートから .circleci/config.yml を作る。 $ mkdir .circleci $ touch .circleci/config.yml config…

Nuxt.jsでVuexを使ってみる #nuxtjs #vuejs

複数コンポーネントで状態管理をするのに便利らしいVuexを使ってみた。 Vuexストアに状態管理を任せて、各コンポーネントはストア経由で状態変更することで、状態変更を一元管理できるっぽい。 ja.nuxtjs.org ストアの作成 store/sample.js を作成する。 sto…

Requestパラメータを画面に表示する #nuxtjs #vuejs

概要 http://localhost:3000/sample?hoge=abc123 のようにRequestされた場合に、 abc123 を画面に表示してみる asyncDataを使う pageコンポーネントの場合、asyncDataというメソッドを使うと、Context経由でリクエストの情報を取得できる。 asyncDataはレン…

Nuxt.jsプロジェクトでjestにpower-assertを導入 #nuxtjs #powerassert

Nuxt.jsのテストをjestで書くというのを先日やってみたが、Assertionにpower-assertを使うようにする。 su-kun1899.hatenablog.com power-assertの導入 babel連携が必要になるので、 power-assertに加えてbabel-preset-power-assertをインストールする。 git…

nuxt generateで生成した静的ファイルをhttp-serverでホスティングする #nuxtjs

Nuxt.jsには静的ファイルの生成がサポートされており、成果物を静的ファイルとしてホスティングできるようになる。 開発中など、この静的ファイルをNuxt.jsに依存させないで確認したいときに、http-serverを使うと便利。 静的ファイルの生成 vue-cliから作成…

jestでNuxt.jsのテストを書く #jest #nuxtjs #vuejs

概要 Nuxt.jsで、jestというテスティングフレームワークを使って、コンポーネントのテストを書いてみました。 facebook.github.io 準備 ※vue-cli でNuxt.jsのプロジェクトは作成済とします。 jest-vue-preprocessorをインストールします。 たぶんVueとjestを…

VSCodeでVue.jsのフォーマットがうまくいかない #vscode #vuejs #nuxtjs

概要 とりあえずNuxt.jsはVSCodeで書いてみてるんだけど、フォーマットをかけるとエラーになってしまう。 前提 Veturというプラグインを入れています。 github.com 結論 Prettierプラグインを入れる。 github.com VSCodeの設定に下記を追加する。 "prettier.…

Nuxt.jsのディレクトリ構成 #nuxtjs #vuejs

vue-cliからテンプレートプロジェクトを作ると、ディレクトリがいくつも作られるのだが、それぞれの役割についてわかったこと。 基本的には↓に書いてあるけど。 ja.nuxtjs.org テンプレートプロジェクトを作る $ vue init nuxt-community/starter-template n…

Regional Scrum Gathering Tokyo 2018に行ってきた #RSGT2018 #ちら裏

RSGT2018に行ってきた。 別にレポートでもなんでもない。 参加して感じたことや考えたことが、自分の中で整理されて言葉になってきたものを、ただ書きなぐっただけのちら裏。 2018.scrumgatheringtokyo.org Scrumが好きだ いろんな話を聞いてやっぱり僕はScr…

npmを使ってみる #nodejs

npmってなんなのん? npmはNode.jsを使う時のパッケージ管理ツールっぽい。 mavenとかGradleに近いものと理解した。 使ってみる nodeが入っているなら一緒にインストールされているっぽい。 $ npm -v 5.6.0 package.json workspace的なところで npm init す…

Nuxt.jsの環境構築 #nuxtjs

Next.js とか Nuxt.js とかって何よ Next.js: React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Nuxt.js: Vue.js アプリケーションをサーバーサイドレンダリングするためのフレームワーク サーバーサイドレンダリングって何よ q…

「UNIXという考え方」を読んだ

有名な本だけど、はじめて読んだ。 その名の通り、UNIXというOSの考え方の解説本なんだけど、その考え方が本当に素晴らしいと思う。 「Small is beautiful」に始まり、「できるだけ早い試作」「効率より移植性」など、プログラミング・エンジニアリング・そ…

reverse-proxyとforward-proxy

proxyって仲介屋さんくらいにしか認識してなくて、reverse-proxyとforward-proxyの理解があやふやだった。 少し理解できた気がするのでまとめておく。 forward-proxy クライアントが経由地として「意識する」Proxyがforward-proxy。 一般的にはただのProxyと…

SpringBootを環境毎にいい感じに起動する #SpringBoot

Intro SpringBootは設定をapplication.yml(properties)で管理するが、システムプロパティやコマンドライン引数で上書きすることができる。 もちろんprofileを用意して切り替える形でも良いと思うんだけど、環境依存系の設定の場合、環境変数を利用するなどし…

Maven Assembly Pluginを使って、特定のリソースをjar形式で配布する #Maven

概要 DDLなどのリソースがアプリケーションとリポジトリ(プロダクト)が別で管理されている場合に、別プロジェクトからそのリソースを参照したい場合があると思います。 例えば、UnitTest等の利用等が考えられます。 二重管理を避けるために、jar形式でリソ…

「採用基準」を読んだ

採用基準作者: 伊賀泰代出版社/メーカー: ダイヤモンド社発売日: 2012/11/09メディア: 単行本(ソフトカバー)購入: 24人 クリック: 392回この商品を含むブログ (63件) を見る 上司のすすめで読んでみた。 リーダーシップ論とかそういう類のものになるだろう…

CircleCI2.0で別コンテナのMySQLを使ったJavaアプリのCIを行う #CIrcleCI #docker

CircleCIは2.0は、docker imageベースになった。 JavaアプリをCIするときはCircleCIのJava用imageを使えばいいんだけど、テスト用DBとしてMySQLのコンテナを一緒に使うようにしてみた。 1.0のときはそのままMySQL使えたんだけどね。 config.yml 最終的にはこ…

「最短で達成する 全体最適のプロジェクトマネジメント」を読んだ

最短で達成する 全体最適のプロジェクトマネジメント作者: 岸良裕司出版社/メーカー: KADOKAWA/中経出版発売日: 2011/02/23メディア: 単行本この商品を含むブログを見る 上司の薦めで読んでみた。 プロジェクトマネジメントの本は久しぶり。 TOCを分かりやす…

IntelliJ IDEAでマルチスレッドのデバッグをする #IntelliJ #idea

IDEAはスレッド単位でのデバッグできる。 Breakpoint optionsでThreadを選択するだけ。 素晴らしい。便利。 Breakpoints - Help | IntelliJ IDEA 参考 stackoverflow.com

CircleCIでbatsによるbashのテストがエラー #Bash #CircleCI

概要 CircleCIでbatsによるBashのテストをしてたんだけど、特に改修していないのにCIがコケるようになってしまった。 どうもbatsがtputなるコマンドを使っているようで、 tput は $TERM という環境変数が必要なようだ。 CircleCIの使ってるビルド環境から $T…

JJUGで発表してきました #jjug_ccc #ccc_l1

JJUGで「SpringBootとMyBatisでデータベースを可視化する」というテーマで発表してきました。 speakerdeck.com CfPの書き方教えてくれたり、発表資料レビューしてくれた同僚たちには感謝しかない。 朝イチ・冬将軍・雨模様で果たして聞きに来てくれる人いる…

mysqlコマンドのエラー出力をログに吐く #mysql

mysqlコマンドは問題発生時はエラー出力にメッセージを吐くので、標準エラーをファイルにリダイレクトしてやればよい。 mysql -u root sample_db < test.sql >> result.log 2>> error.log この場合だと、test.sqlを実行した結果、result.logに標準出力が、er…

gitでremoteに同名のtagがいる場合、 fetchにtagsオプションが必要 #git

Git

概要 tagの向き先が意図しないコミットハッシュになっていて、調査したらローカルに同名のtagが存在していたのが原因だった。 詳細 tagの向き先を切り替える場合には、fetchしてからtagにチェックアウトするようにしていた。 $ git fetch $ git checkout v2.…

MavenでWebDriverの管理にはwebdriverextensionsが便利そう #geb #e2e

Geb

概要 Gebを使ったE2Eテストに挑戦しているのだけれど、WebDriverの管理にはwebdriverextensionsが便利そう。 Mavenプラグインが提供されているので、ドライバーを都度インストールしたり、バイナリファイルをプロジェクトで管理しなくて済むようになる。 git…

BATSでbashスクリプトのテストをする #bats #bash

概要 bashスクリプトのテストコードを書く方法がないか調べていたら、BATSというのが見つかって中々よかった。 github.com 下記の記事を鵜呑みにして試してみてたのだけれど、sstephensonが有名人であることが上司からの突っ込みで発覚した。 (GitHubちゃん…