v-modelを受け付けるカスタムコンポーネントの書き方の好み
Vue.js 2系を対象とします。
何がしたいかというと、
<my-great-text-input v-model="text" />
ということがしたい。
とりあえずドキュメントを見ると、以下のような方法が書いてある。
https://jp.vuejs.org/v2/guide/components.html#カスタムイベントを使用したフォーム入力コンポーネント
<template> <input type="text" :value="value" @input="updateText"> </template> <script> export default { props: ['value'], methods: { updateText(e) { this.$emit('input', e.target.value) } } } </script>
ただ、必ずしもこれしか方法がないわけではなくて
value
プロパティを受け入れる- 新しい値と共に
input
イベントを送出する
を満たしていればOK。なので色々なパターンが考えられる。自分は双方向算出プロパティがスッキリしているように見えるマンなので
<template> <input type="text" v-model="innerValue"> </template> <script> export default { props: ['value'], computed: { innerValue: { get() { return this.value }, set(val) { this.$emit('input', val) } } } } </script>
というのが好き。
OpenAPIの3.0.0が出てた
1週間くらい前にリリースされていた模様。semverになってる。
気になるとこ
レスポンス深い
https://github.com/OAI/OpenAPI-Specification/tree/master/examples/v3.0 などの例をちらっと見た程度だけど、以下のようにレスポンスの書き方がやや深くなって、content
とかレスポンス形式をキーに持つようになっていた。多くの場合はapplication/json
だと思うので省略したいように思うけど、どうやら省略することはできないっぽい。ちなみにapplication/json
キーの値にあたるものをMedia Type Objectと呼ぶ。
get: responses: 200: description: pet response content: application/json: schema: type: array
Components Object
Components Objectなるものが増えていた。
https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#componentsObject
これまで再利用したいオブジェクトはルートレベルにだらっと書かれていたけど、これらをまとめるような役割。
Server Object
https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#serverObject
servers: - url: https://sandbox.example.com/v1 description: Sandbox server - url: https://example.com/v1 description: Production server
これまではトップレベルあたりにhost
というキーでIPやホスト名を1個だけ書けるようになっていたけど、複数のホストが書けるようになっていた。このパスへのリクエストはこのサーバしか受け付けませんよ、みたいに書ける。
'/pets': get: ... servers: - url: https://example.com/v1 # $refが使えないように読めるのが気になる description: Production server
2.0からのコンバータとかは無いよね、ですよね。
追記
よくよく見たらCallback ObjectとLink Objectっていうよくわからないやつらも追加されていた。
https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#callback-object
https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md#link-object
Link Objectはクライアントに対して、「レスポンスのこのパラメータ使えばこっちのAPIこんな風に叩けるんすよ」っていうことを示すものっぽい。
Callback Objectは全く使い方がわからない。わからない。
カッコの周りの空白について
function foo() { ... }
ていうコードを書いたらlintに怒られた。space-before-function-paren
だそうで、
function foo () { .. }
なら許してくださるらしい。
ギュってなってて読みづらいとかいう理由から生まれたんじゃないかと思うのだけど、エディタのフォント変えたほうがいいんじゃないですかという気分…。
同じように、{}
や()
の内側にスペース入れる文化も、否定はしないけど、ちょっとなぁ。
こういう俺にとって見やすい見づらいみたいな水掛けになるルール、控えめに言って滅んでほしい。もうGitHubとかがまとめてlintしてください。