kuntalog

頭の整理と書く練習。師匠募集中。

yarn addのwarningメッセージを読む

js書き始めて大体二ヶ月(コンスタントではないけど)、パッケージ回りの雰囲気がよくわからないまま素通りしてしまっているのでここらではっきりさせておきたい。特にwarningメッセージはよく出る割に理由が分からないものが多くもやもやしていました。とりあえず@webpack-cli/initのインストールの際に出るwarningメッセージを読んでみました。

$ yarn upgrade
yarn upgrade v1.13.0
[1/4] 🔍  Resolving packages...
warning @webpack-cli/init > jscodeshift > babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
warning @webpack-cli/init > jscodeshift > nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
warning @webpack-cli/init > @webpack-cli/utils > jest > jest-cli > prompts > kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@webpack-cli/init > @webpack-cli/generators > inquirer-autocomplete-prompt@1.0.1" has unmet peer dependency "inquirer@^5.0.0 || ^6.0.0".

1つ目 warning @webpack-cli/init > jscodeshift > babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

https://dackdive.hateblo.jp/entry/2018/01/18/100000(https://dackdive.hateblo.jp/entry/2018/01/18/100000)

このブログを参考にさせていただきました。

`babel-preset-es2015` とか `babel-preset-env` とか `@babel/preset-env` というのはES2015で書かれたコードをES5に変換するためのもの(ES2014、、じゃないよなぁ。。。)

https://babeljs.io/docs/en/next/babel-preset-env.html(https://babeljs.io/docs/en/next/babel-preset-env.html)

こちらを読むと要はjsコードのデプロイターゲットに応じて文法の対応具合が違うので、こいつが必要なパッケージをよしなに管理してくれるみたい。で今推奨(というか残っているというか?)なのが `@babel/preset-env` だそうです。

で、とりあえず `.babelrc` とかを書き換えればいいのねってなるんですが、なんで `jscodeshift` は未だに `babel-preset-es2015` を使っているのかと思って見てみたら全然アップデートされて `@babel/preset-env` を使ってた、あれ?なので`@webpack-cli/init` の方のpackage.jsonを見てみると `jscodeshift` のバージョンが0.5.1になってる。これが出たのが2018/06/05らしくそのときのpackage.jsonとか見るとまだ全然 `babel-preset-es2015` を使っている。。

https://github.com/facebook/jscodeshift/blob/595b15cda4f52673cad8fe3ae65c12e334966dbf/package.json(https://github.com/facebook/jscodeshift/blob/595b15cda4f52673cad8fe3ae65c12e334966dbf/package.json)

で `@babel/preset-env` に移ったのがこのコミットで

https://github.com/facebook/jscodeshift/commit/ac14f270f02208de3fbd576b9a2f27d96f55603b#diff-b9cfc7f2cdf78a7f4b91a753d10865a2(https://github.com/facebook/jscodeshift/commit/ac14f270f02208de3fbd576b9a2f27d96f55603b#diff-b9cfc7f2cdf78a7f4b91a753d10865a2)

それが入ったのが0.6.0らしいですね。0.6.0が出たのが去年の12/04なのでそこの移行がまだできてないのかな?見る限りまだ対応してる感じが全然ない。。

とか思っていろいろ見てたらなんだか動きづらい状況があるみたい

package.jsonのヒストリを見てたらこんなのが出てきた。 `jscodeshift`のバージョンを0.5.1で固定しようとしてるPRらしい。マージされてリバートされてる。CIが通らなかったらしい。

https://github.com/webpack/webpack-cli/pull/711(https://github.com/webpack/webpack-cli/pull/711)

なんで最新版入れないのかなってリンクをたどる

https://github.com/webpack/webpack-cli/issues/697(https://github.com/webpack/webpack-cli/issues/697)

Due to the recent problems happened to the npm world, I'd propose to lock all the versions of our dependencies and development dependencies

なんかあったっけなーと思いだしてみるとそういえばセキュリティ系の事件があったなと

https://qiita.com/mysticatea/items/aac027f9183ea9f0f9b1(https://qiita.com/mysticatea/items/aac027f9183ea9f0f9b1)

これの影響をさけるためにバージョンの固定をしようとしてるらしい、なるほど。メンテナって大変だなぁ。。(いつになったら0.6.2になるんだろ

2つ目 warning @webpack-cli/init > jscodeshift > nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.

一個目と同じ。もうjscodeshift側では治ってるからはよ!

3つ目 warning @webpack-cli/init > @webpack-cli/utils > jest > jest-cli > prompts > kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit https://github.com/lukeed/kleur/releases/tag/v3.0.0\ for migration path(s).

jestのissue

https://github.com/facebook/jest/issues/7430(https://github.com/facebook/jest/issues/7430)

現行のJest 23ではアップグレードは多分しないとのこと、Jest24を待つべし。

4つ目 warning "@webpack-cli/init > @webpack-cli/generators > inquirer-autocomplete-prompt@1.0.1" has unmet peer dependency "inquirer@^5.0.0 || ^6.0.0".

これな。いつも見るやつ。 `hogehoge has unmet peer dependency hugahuga@1.2.3` 的なやつ。peerDependency分かってなしということでちゃんと調べた。

この辺読んだ

https://stackoverflow.com/questions/46928390/what-does-has-unmet-peer-dependency-mean-when-installing-a-package-with-yarn(https://stackoverflow.com/questions/46928390/what-does-has-unmet-peer-dependency-mean-when-installing-a-package-with-yarn)

https://yarnpkg.com/en/docs/dependency-types(https://yarnpkg.com/en/docs/dependency-types)

これを読むとあるパッケージAの依存先となるBに関して、Bがユーザー自身のコードの依存先でもある場合、複数のBが存在してしまうのを防ぐためにBをpeer dependencyにするらしい。で、このへんは自動でうまくやってほしいよねってことなんだけどAとユーザーコードでBのバージョンのコンフリクトとかいろいろ起きるよねということで今はwarningを出してるんだってさ。
なのでやることとしてはメッセージを見つつコンフリクトがないように必要なパッケージを入れることっぽい。

まとめ

しんどい。そしてwarningは調べてもどうしようもないというか無視してもいいのかという気持ちになる。。。
yarn upgradeをちゃんとやっていこうという気持ち。

Firebase AuthenticationとVuexの合わせ技バグでハマった

TL;DR

  • Vuexのstoreにobjectを渡すときは気を付けよう。
  • Vuexのstoreにはできるだけ即値(って呼び方でいいのか?)を入れる。

内容

Firebase authenticationとVuexを使ってこういうのを書いてた。

export default {
  // ...
  created() {
    firebase.auth().onAuthStateChanged((user) => {
      this.$store.commit('setCurrentUser', { user });
    });
  },
  // ...
};

するとChromeのdevtoolが真っ赤になった。

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

しかもこのエラーメッセージ無限に出続ける。
内容はmutationsハンドラ以外からstateをいじるんじゃないとのこと、それはそう。それはそうなんだけど上のコードを見ると分かる通りこれはちゃんとハンドラを通して(commitを使って)stateをいじっている。このcommitの行を消すとエラーも出ないのでこいつが原因らしい。これに結構ハマった。

やったこととか

strictモード外すと消えるけどすげーもにょるのでなんとか考えてた。
似たような問題を調べてて `v-model` だと元のstateが書き換わってそれが問題だとか、取得したstateをそのまま書き換えてるとかはあったけど全然関係ない。

結局エラーログをちゃんと読もうって気持ちになって読むとスタックトレースが `auth.esm.js` とかから始まっている、あれ?
しかもその上の方で `Vue.store._vm.$watch.deep` で死んでるっぽいと言うのが分かる。つまりこれってobjectを渡してるのが原因なのではと気づいてコードを変えてみた。

export default {
  // ...
  created() {
    firebase.auth().onAuthStateChanged((user) => {
      const { uid, displayName } = user;
      this.$store.commit('setCurrentUser', { uid, displayName });
    });
  },
  // ...
};

要はobjectを直接渡さないようにしてる。これで直った。
つまりはFirebaseのUserオブジェクトってのにいろいろListenerやらObserverとかが生えてて、値が勝手に変わってしまっていたことが原因っぽい、多分。詳しいことはソース読まんと分からん。

これにつきっきりだったわけでもないけど、これのせいで一時間近く進まなかった。

学び

  • 認知負荷高めのときは簡単なものにも気づけないので自分を疑う(850394598310239474502938457回目)
  • エラーログをちゃんと読もうな。
    • とは言いつつエラーメッセージで調べたほうが早い場合もあるので難しい。)
  • エラー箇所の特定をちゃんとやる
    • エラーログをちゃんと読めば分かったこと
    • とはいえ経験の浅いものを組み合わせて使っているので仕方ないかなとも思う。そういうときのエラー対処に時間かかるのはいつものことなのでうまいルーティンがほしいところ。勘に頼ってちゃだめだ。慣れてるならいいけどね。

開発合宿行ってきた

開発合宿

ゴールデンウィークの前半に開発合宿に行ってきました。最高でした。

mokumoku-onsen.connpass.com

 

きっかけとしては、フロントを全くやったことがなく、ちょっとずつやるにも億劫な感じがあり、まとまった時間使って多少の強制力というか圧がある環境で出来ればなと思っていたというのがあります。

最初は一般枠で参加するつもりだったのですが、 ゴールデンスポンサーの皆さんのご厚意で費用は出して頂けました。かっこいい大人はかっこいい。本当にありがとうございます!!

合宿での自分の目標

上2つは知らないとは言え見たことはあるのでできるだけ速く済まし、Reactにどれだけ時間を使えるかの勝負。

様子

集合は9:30に東京駅。そこから目の前に来るバスに乗り続けていると勝手に例の宿に到着しました。(大体12:00)

土善旅館[弓道合宿・開発合宿]

もうそこからはほぼ全てにおいて自由です。ご飯の時間は8:00, 13:00, 19:00にみんなで食べると決まっているもののそれ以外は完全に自由でした。(この合宿のポリシーというかがそういう感じらしいです)

開発部屋にはお菓子と日本酒とレッドブルとソフドリを用意して、それらを好きに摂取しながら開発ができます。あとこの土善旅館さん、聞いたことはあったけどやばかったです。ディスプレイにプロジェクタ、なんか敷くと椅子がいい感じになるやつ、人をダメにするクッション、猫などなどが貸してもらえます。開発中はなんの不自由もなかったです。

f:id:iamkuntao:20180501215849j:plain

後ろのでかいプロジェクタではシュタゲやらゆるきゃんを流していたのでそれを見たり、日本酒を無限に飲んだり、VRゴーグル被ってアクションゲームしたり、がっつり集中して作業する人もいればゆっくりと休みなが進める人もいて、いい塩梅の緊張感でもりもりと作業が進みました。流していたものの中では「russian car crash」とぐぐると出て来る動画がめっちゃ好きでした。

f:id:iamkuntao:20180501215548j:plain

他にも24時間温泉入れるし、開発部屋と就寝部屋がちゃんと分かれているのでそこも自分の好きなようにできるのはストレスフリーですごいよかったです。散歩がてら近くの海に行った人もいるみたいでした。

自分の勉強内容に関してかなりの初心者だったので進め方に不安があったのですが、ご飯食べてるときとかに聞いたりとかできるのがすごく助かりました。集まってやる強みですね。代わりに自分は最近得たCFnの苦しみの話をしました。温泉とかでも他の人と技術書展や出版の話を聞いたりわいわい感があってとても良かった。。

(ここまで良かったしか言ってないですけど実際そうだったのだから仕方がない、それと猫な。やっちょるかー?みたいな感じで見回りにやってくる)

f:id:iamkuntao:20180501215637j:plainf:id:iamkuntao:20180501215717j:plain

そんなこんなで自分は7:00~24:00みたいな生活をして結局progateというサイトでhtml/cssの講座を2つと、この本を全部読んだのとreactのチュートリアルを終わらせたので一定の進捗ありという感じでした。裏目標として設定していたjQueryとかの歴史からReactとかVueの設計思想を知るみたいな部分に踏み込めなかったのだけが悔しいですが、とりあえずは今まで抱えていた様子が分からなくてめんどくさい感じは抜けられたので良しとします。

あとはやたらと長時間続けるときの脳みそとか精神のコントロールをもっとうまくやりたいですね。。。

おわりに

開発合宿に参加するのは初めてだったのですが、まじで最高でした。なかなか手を出せないでモヤモヤしたものを抱えている人は一度日々の仕事を忘れて集中できる開発合宿に参加してみてはいかがでしょうか。最後にうまかったものと癒やしの写真を乗せて終わります。

f:id:iamkuntao:20180501220101j:plain

f:id:iamkuntao:20180501215932j:plainf:id:iamkuntao:20180501215956j:plain

f:id:iamkuntao:20180501220025j:plainf:id:iamkuntao:20180501220044j:plain

オブジェクト指向のこころ(3)

前の章で書いてた手順を具体例で試すっぽい

エキスパートシステム : 外的に依存しないといけないものをまとめてこう呼ぶっぽい。高度な制御、処理を行っているようなもの。

あれ?終わった。。

オブジェクト指向のこころ(2)

UML

Unified Modeling Languageですね。

分析工程

  • システムとやり取りを行う 実体 を洗い出す。(???)
  • プログラムのロジックフローではなく、 問題領域ドメイン領域とかの同義語?)のフローを考える。

なんかこの辺は前の章で言ってた機能分解をやめようってのと似てるように見える。

オブジェクトの相互関係を洗い出す

洗い出す

クラスに落とし込む

まだ実装には入らずインターフェースの実装をする。

クラス間の関係の種類

  • is-a : 継承で表されるやつ
  • has-a
    • あるオブジェクトが別のオブジェクトの一部、構成要素となっている場合(e.g. 車とエンジン) コンポジション と呼ぶ。
    • 独立した別のオブジェクトを持っている場合(e.g. 空港と飛行機) 集約(aggregation) と呼ぶ。
  • uses-a
    • e.g. 車はガソリンスタンドが必要(依存)
  • 他のクラスを生成している( ファクトリ

usesが依存って言葉遣い的にピンとこないな。構成要素って方を依存と呼ばないのはそれが可換ということを表しているからか? 相互作用図もよく分からん。「オブジェクトの寿命」とかキーワードっぽいものは出てるけど図のどういう要素がなんの指標になるかとかが全く見えてこない。

オブジェクト単位で

状態遷移を考える

配置図

この本では解説を行っていません。配置ってなんや。

おまけ

和訳の技術書、頼むから固有の使い回しをする単語は原文も載せてくれ、全然英語文献を調べられない。。