近状

気がつけば転職してから半年が経とうとしている。早いもんだ。
仕事は、そりゃそうなのだけど入社以来変わらずフロントエンドを担当していて、Vue.js 製プロダクトのチームで日々 JS/HTML/CSS を書いている。

結果そんなに複雑な要件でなければ Vue 周りで困ることはなくなったのだけど、本当に大丈夫なのかが不安だったり、ある程度知識がついた今改めて基礎を振り返るのも良かろうということで最近は Vue.js Up & Running を読んでいる。

一方で CSS には未だ手を焼くことが多くて、HTML5/CSS3モダンコーディングを読んで写経したりCSS設計の教科書を読むべきかと唸ったりしている。いやー CSS 難しい！
あと仕事で使っているライブラリに欲しい仕様があったのでプルリクを出したところ御マージいただいて、JavaScript のプロダクトへのコントリビュート実績を解除したりも。やったぜ。

Add a feature to adding only click event on mobile devices by ravelll · Pull Request #29 · ndelvalle/v-click-outside · GitHub

働き方というところでは、勤め先はコーポレートサイトにもあるとおり特別な理由がなくてもリモートワークが可能で、自身も最近は週に2~3日は自宅で仕事をしている。
在宅勤務は休憩がてらコーヒーメーカーで☕️作れたりお昼に快適なベッドで寝転がれたり家事できたりして良いのだけど、通勤時間さえ短ければオフィスで働く方が楽しいかな〜と感じている。ちょっとした（声帯を使った）雑談が恋しくなる。

仕事以外だと、Gopher 道場に参加していた。

#1 Gopher道場 - connpass

Gopher 道場はメルペイの @tenntenn さん主催の初級者〜中級者向けの Go の勉強会で、@tenntenn さんの講義と課題を通じて*1 Go の標準機能をやや深めに学ぶというもの。1回2時間、全4回。
"実践的なGoを体系的に学べる場" とあるように、多くの機能が現実の問題や現場での使われ方とセットで説明され、具体的な利用イメージを持ちつつ学べて最高だった。本当にありがとうございました！
おかげさまで最近はこれまで Ruby で書いていたようなちょっとしたツールを Go で書くようになって*2、今は CI フレンドリーな typo チェッカーを作っている。
Go は世間でよく言われるように並行処理がシュッとかけたりクロスコンパイルが容易だったり成果物がワンバイナリだったりするところももちろん良いと思っているのだけど、個人的には何かプロダクトを作る中で必要になったちょっとした便利機能を別パッケージとして書いておけばシュッと個別のライブラリとして公開できるシームレスさがとても良いな〜と感じている。

それとネットワークスペシャリスト試験を受けようと思って勉強している。
ネットワークは以前から疎いなと感じていた分野で、今後5年10年と引き続きネットワークを利用するプロダクトの開発に従事するなら基礎教養として習熟しておくべきだろう、そしてネスペを取るべく学習するのはそう悪い学習方法ではないのでは、という背景があっての選択でした。
進捗は芳しくないのだけど、目的は資格でなく知識なのでひとまずは受験日まで勉強を続けようと思う。ちなみに教材は午前対策にこれ、午後対策にこれを使ってます。

その他の生活は至って平常通りで、幸い僕も妻も大きな病気をすることなく暮らしており最高。あ、会社の Mac にコーンスープこぼして病院送りにする失態があった(本当にすみませんでした…)。最近飲んだビールだと、びあマ神田で買ってきた Bear Republic の CAFE RACER 15 が超ホッピーかつアロマで美味しかった。

*1:TAが大学の同期で面白かった。世間の狭さよ。

*2:https://github.com/ravelll/timepro-xg-kintai とか

Vue.js アプリの webpack のバージョンを 4 系に上げた

会社で担当してる Vue.js のプロダクトの webpack のバージョンを 3.8.1 から 4.8.3 に上げた。
どこか1つのドキュメントやエントリを見ただけで完了するものでもなかったので、手順をまとめてみる。誰かの助けになったら嬉しいですね！

手順

1. package.json の "webpack" を含むパッケージのバージョンを上げる
2. 各環境の webpack の設定に mode プロパティを追加
3. webpack-cli を devDependencies に追加
4. UglifyJsPlugin の設定を消し optimization プロパティの minimize を設定
5. *-loader パッケージのバージョンを上げる
6. VueLoaderPlugin を plugins プロパティに追加
7. .vue と .scss の loader 設定を分離する

各項目の詳細を書いていきます。

1. package.json の "webpack" を含むパッケージのバージョンを上げる

package.json のバージョン指定を雑に "*" にして yarn install した。

...
...
-    "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.9.4",
-    "webpack-merge": "^4.1.1"
+    "webpack": "*",
+    "webpack-dev-server": "*",
+    "webpack-merge": "*"
...
...

2. 各環境の webpack の設定に mode プロパティを追加

webpack 4 から最適化の戦略を mode プロパティ、もしくは webpack コマンドに --mode オプションを付けて選択(development もしくは production)する必要がある。
設定ファイルに書くなら以下のような感じに。

module.exports = {
+  mode: "development",
...

3. webpack-cli を devDependencies に追加

cli コマンドを使うためには webpack-cli パッケージが必要になったので入れる。

$ yarn add -D webpack-cil

4. UglifyJsPlugin の設定を消し optimization プロパティの minimize を設定

webpack.optimize.UglifyJsPlugin は has been removed となり代わりに use config.optimization.minimize とのこと。

  plugins: [
-   new webpack.optimize.UglifyJsPlugin({
-     compress: {
-       warnings: false
-     },
-     sourceMap: true,
-     parallel: true
-   })
- ]
...
...
+ optimization: {
+   minimize: true
+ }

5. *-loader パッケージのバージョンを上げる

ビルドしたところ一部のローダーでエラーが出たのでバージョンを上げる。手順 1. と同様にバージョンを "*" にして yarn install した。

6. VueLoaderPlugin を plugins プロパティに追加

vue-loader v15 からプラグインクラスのインスタンスを plugins プロパティに書く必要がある。(参考)

+const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
...
...
+  plugins: [
+    new VueLoaderPlugin()
+  ],
...
...

7. .vue と .scss の loader 設定を分離する

これも vue-loader v15 からの仕様で、.vue と SFC の中で使う CSS のメタ言語を別々の言語として webpack の設定を書くようになった。
これによって SFC のファイルに直接書いたコードと外部から import したコードに同一の設定を適用することができるようになった。
scss を使っている場合は以下のようになる。（というか、した。）

-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
-            scss: [
-              'vue-style-loader',
-              'css-loader',
-              'sass-loader',
-              {
-                loader: 'sass-resources-loader',
-                options: {
-                  resources: path.resolve(__dirname, '../src/styles/_variables.scss')
-                }
-              }
-            ]
-          }
-        }
-      }
+      {
+        test: /\.vue$/,
+        use: [
+          'vue-loader'
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader',
+          {
+            loader: 'sass-resources-loader',
+            options: {
+              resources: path.resolve(__dirname, '../src/styles/_variables.scss')
+            }
+          }
+        ]
+      },

以上で各環境でビルドしたり webpack-dev-server で開発環境を動かしたりできるようになりました🎉
もし僕と同様に package.json のバージョン指定を * にした人はちゃんと新たなバージョンを入れるのをお忘れなく。
気になるパフォーマンスについては後に別途まとめようと思います。

参考

• 🚀webpack 4 beta — try it today!🚀 – webpack – Medium
• webpack 4.0.0-alpha.5 feedback · Issue #6357 · webpack/webpack
• Moving from Webpack 3 to Webpack 4 – WeAreBrain
• Vue Loader | Migrating from v14

vim-go で補完が動かなくなったときの対処法

先日から Vim で Go を書いているときに autocomplete できなくなって困っていた。同様のことが過去に何度かあったので対処法をメモしておく。
この記事を書く時点での手元の Vim は 8.0.1800、Go 関係の Vim プラグインは fatih/vim-go のみ。

1. gocode close する
2. go get -u github.com/nsf/gocode する

これだけで解決した。
gocode close は補完に利用される gocode のデーモンプロセスを殺すためのコマンドで、もしかしたらこれだけでも解消していたのかもしれない。

気になって確認してみたのだけど、go get -u github.com/nsf/gocode したり Vim から :GoUpdateBinaries してもデーモンプロセスは死なないようだった。
起動は Vim 上で補完が行われるタイミング（例えば `fmt.` のドットを入力したタイミング）で自動的に、かつ非常に短時間に行われるので、定期的にデーモンプロセスを殺す設定を入れておくと良いのかもしれない。

参考

• goを1.7に上げてから、gocodeが動かなくなったりもしました - podhmo's diary