金沢旅行
1泊2日で金沢に行ってきた。出身は新潟なんだけど、金沢も行き来に通った富山も行ったことがなかった。
宿が和倉温泉で金沢駅からは少し離れていたので少し忙しい旅程になるかなと思っていたのだけど、フルに自由時間を観光に当てられるほどの体力が僕にも妻にもなく幸い（？）落ち着いた旅になった。
金沢駅といえば、ということでまずは鼓門。近代的なドーム（もてなしドームという名前だった）との対比が良かった。
兼六園へ。バスがめちゃ混みだったのでタクシーで行った。地図を見た感じ歩いてもいけるんではとも思ったけどそれなりに遠かったので止めといてよかった。夏休みのピークからはズレた平日だったからか人入りは疎らで、のんびりと回れた。
日本最古と言われている噴水。
内橋亭。池の上に建てられている部分がムーミン谷の桟橋っぽいと直感的に思ったのだけど改めて見ると全然雰囲気が違ってた。
唐崎松。池と松がドーンとあるといい気持ちになる気がする。
眺望台側から撮った霞ヶ池。
すぐとなりの金沢城公園へ。城見るぞって気持ちで行ったら名前の通り公園色強めだった。
石垣の石に印が掘られている場所があった。何なんだろう？🤔
三十間長屋。横幅が三十間あるからなのかと思ったら、縦幅も合わせて約三十間（29.5間とかだった気がする）とのことだった。
というあたりで1日目は時間切れ、和倉温泉へ。和倉温泉駅は金沢駅から特急で1時間ほど。鈍行だと2時間以上かかるのと特急は2時間に1本くらいなので事前に乗る電車を決めておかないと危ない。
宿は十番館というところにお世話になった。*1素朴な宿だったけど貸し切りの露天風呂からは夕焼けの海がゆっくり見れて最高だったし、ご飯も美味しく*2、快適に過ごせて大満足だった。写真は石川ということで天狗舞を飲む場面です。美味かった。
翌日は13時頃の特急で金沢に戻る予定だったのだけどそれを館長さんに伝えたところ「この近辺なんっっっも無いですよ」と言われたので10時過ぎの特急で金沢へ。「それが大正解です」とのご評価。
金沢駅に着いてからはバスで近江町市場へ。市場の通りには氷の乗った台が点々と置かれていた。こういうサイズの氷があることからも暑さ対策の手法に氷を道に設置する案を採るダイナミックさからも市場の雰囲気を感じた。
少しふらついてから、いちば館内のひら井というお店でランチ。金沢で金箔だけは食べまいとしていたのがここで敗北。それはさておき、とても美味しかった。
その後は1日目に行けなかった21世紀美術館へ。外壁はぐるりと1周ガラス張りで中の雰囲気が伺えたり、中にも外にも座るところがたくさんあったりと美術館だからと肩肘張らずに気軽に、と開かれている雰囲気を感じた。
そのまま県立美術館を見に行くべく本多公園を抜けようとしたところ道を間違えて鈴木大拙館に着いた。*3これが本当にきれいで落ち着く場所だった。東京も1区に5箇所くらいこういう場所あったらいいと思う。
そのまま隣の松風閣庭園へ。ここも人がほぼいなく、静かで落ち着く庭園だった。
ここまでで結構歩き疲れたので香林坊アトリオまで歩いてカフェで休憩。屋上のプレイランドで全く人のいない乗り物や懐かしのじゃんけんゲームを眺めて金沢駅に戻った。
疲れが色濃かったので新幹線の時間まで近くをふらついて、お土産に加賀鶴の生酒と宿の館長に激推しされた中田屋のきんつばを買って帰宅。きんつば、美味しかったです。良い旅行でした。
近状
気がつけば転職してから半年が経とうとしている。早いもんだ。
仕事は、そりゃそうなのだけど入社以来変わらずフロントエンドを担当していて、Vue.js 製プロダクトのチームで日々 JS/HTML/CSS を書いている。
結果そんなに複雑な要件でなければ Vue 周りで困ることはなくなったのだけど、本当に大丈夫なのかが不安だったり、ある程度知識がついた今改めて基礎を振り返るのも良かろうということで最近は Vue.js Up & Running を読んでいる。
一方で CSS には未だ手を焼くことが多くて、HTML5/CSS3モダンコーディングを読んで写経したりCSS設計の教科書を読むべきかと唸ったりしている。いやー CSS 難しい！
あと仕事で使っているライブラリに欲しい仕様があったのでプルリクを出したところ御マージいただいて、JavaScript のプロダクトへのコントリビュート実績を解除したりも。やったぜ。
働き方というところでは、勤め先はコーポレートサイトにもあるとおり特別な理由がなくてもリモートワークが可能で、自身も最近は週に2~3日は自宅で仕事をしている。
在宅勤務は休憩がてらコーヒーメーカーで☕️作れたりお昼に快適なベッドで寝転がれたり家事できたりして良いのだけど、通勤時間さえ短ければオフィスで働く方が楽しいかな〜と感じている。ちょっとした（声帯を使った）雑談が恋しくなる。
仕事以外だと、Gopher 道場に参加していた。
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が大学の同期で面白かった。世間の狭さよ。
Vue.js アプリの webpack のバージョンを 4 系に上げた
会社で担当してる Vue.js のプロダクトの webpack のバージョンを 3.8.1 から 4.8.3 に上げた。
どこか1つのドキュメントやエントリを見ただけで完了するものでもなかったので、手順をまとめてみる。誰かの助けになったら嬉しいですね！
手順
- package.json の "webpack" を含むパッケージのバージョンを上げる
- 各環境の webpack の設定に mode プロパティを追加
- webpack-cli を devDependencies に追加
- UglifyJsPlugin の設定を消し optimization プロパティの minimize を設定
- *-loader パッケージのバージョンを上げる
- VueLoaderPlugin を plugins プロパティに追加
- .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 のバージョン指定を * にした人はちゃんと新たなバージョンを入れるのをお忘れなく。
気になるパフォーマンスについては後に別途まとめようと思います。
