うしろのこの本ください

なんでもかきます

テクノロジー

computedはどうやって読み取り専用オブジェクトを返すか

最近他でブログを書く事が増えてこちらが寂しいので最近vue-nextのコード読んで得た知見をメモする。正直読んだらわかることをブログにするのも微妙なんだけど、なんとなく書いてる。そのうち ref や reactive がどう動いているのかも書くつもり。 今回は co…

Vueのmixinsはなぜ辛かったのか

TL;DR ES6 modules(import/export)が優秀なのでこれで良いと思う。むりに難しくする必要はない。 Vue3 からはcomposition apiを使えるけどこれもES6 modulesベースで使っていくことになる。ReactのContext的なことがしたいならinject/provideを使おう。 自分…

vue3のprovide,injectで型安全なストアを作る

vue3が本格的に使われるようになってくるとvue2系では影が薄かったprovideとinjectも流行ってくると思います。(願望) こいつらがいい感じに型で補強してあげるとより使いやすくなるので紹介します。 provide/injectって何 そもそもこいつらが何かという話…

Vueのテンプレートの型補完をキーボードショートカットでトグルできるようにする

Vueを触っていてVSCodeを使っているユーザーはもれなくVeturという拡張機能を入れている。 marketplace.visualstudio.com VeturはVueのオプション(methods, computedなど)の補完やスニペット、thisの型検査など開発に必要な機能の詰め合わせお得パックみた…

Vue3のinject/provideでミニマルなストアを作る

ストアの型はサボった。 github.com Vue3からinjectとprovideという関数が提供されており、(機能的にはVue2のものと同じだが)コンポネ間の状態共有が簡単にできるようになった。 ドキュメント https://composition-api.vuejs.org/api.html#dependency-inje…

Vueコンポーネントのmethodsだけテストする

VueはReactと違いコンポーネントからロジックを剥がそうとするモチベーションがあまり起きない作りだなーと感じている。SFCファイルに全部閉じ込めてしまった方が気持ち良い。しかしテストをmethodsやcomputedの入出力に対して行いたいものの、外出ししよう…

lernaコマンドの標準出力が微妙な時はstreamオプションをつける

TL;DR タイトル lernaはモノレポ管理下にあるpackage.jsonのコマンドを同時に実行することができる。 lerna run --scope s-* lint とするとpackage.jsonのnameがs-で始まるすべてのワークスペースでnpm run lintが実行される。(s-はオレオレパッケージのプレ…

lerna link convertを理解する

最近案件でモノレポ化が盛んになっていて、自分はフロントエンド周りを少しずつ進めています。 構成はlerna + yarn workspaceの基本的なものですが社内ライブラリをパブリッシュしない方向で進めることになり、モノレポ内ですべて完結させる方針です。 で、…

Nuxtのpwa-moduleでプッシュ通知令和版

直近プッシュ通知の実装が必要になったためハマったところ中心に結果をメモる。 受け取り側 pwa-moduleはOneSignalをサポートしているため、Nuxtでプッシュ通知をやりたい場合これを使うのが一番簡単。 pwa.nuxtjs.org とりあえずpwa moduleとone signal mod…

NuxtとComposition APIとtsxで素振り

した github.com setupとtsxを紐づけるため別途プラグインが必要だが、普通にかける。 以下の流れで環境を作れる。 プロジェクト生成 npx create-nuxt-app 必要なモジュールのインストール yarn add @nuxt/typescript-runtime @vue/composition-api yarn add…

NuxtMeetUpに登壇してきました

これに株式会社ROXX枠でLTしてきました。Composition APIについて、Nuxtと合わせて素振りした感想みたいな感じ。 nuxt-meetup.connpass.com スライド slides.com 初LTの割にはうまくやれたかなと思います。poaroファンとしてアナ尻遵守を心がけましたが15秒…

Svelte3のストアを触ってみる

自分が書いたタイミングがv3リリース後すぐだったので今のSvelteと差異があるかも。 svelte.dev つくったやつリポジトリ github.com つくったやつ ushironoko-svelte-sample.netlify.com つくったってほどでもないけど一応netlifyに投げた。 消えるフレーム…

Role-Based Access Control (RBAC) をVue.jsで表現する

元ネタ auth0.com 最近仕事で権限ごとに表示できるコンポーネントを制御する必要がでてきて、さてどうするかというタイミングでチームメンバーがRBACのことを教えてくれた。 Roleは1つ以上の権限を持ち、権限はコンポーネントの表示を制御する。まあ難しい考…