Vue CarouselをNuxtで使おうとするときに、少し戸惑ったのでメモ。 カルーセルをComponentとして公式に書いてあるのを参考に、以下のように用意した。 <template> <carousel> <slide>abc</slide> <slide>xyz</slide> <slide>123</slide> </carousel> </template> <script lang="ts"> import { Vue, Component } from 'vue-property-decorator'; import { Carousel, Slide…

3ヶ月ぶりくらいのQiita投稿は、本業でまだ使ったことがないVue/NuxtのTips。 個人的に請け負ってるお店のホームページを勉強ついでにVue/Nuxtで作っているのですが、デザインも自分で作ってるので、無駄にコンポーネント思考に作ったりしています。 そんな…

nodenv で Node.js のバージョンを管理していたが、どうやって最新のバージョン反映させるのかを調べていたら行き着いた記事。 中身で何しているのかを知っておいた方が良さそうな気もしつつ、とりあえずメモ。 Nodenv環境のインストール可能バージョンを更…

今月、WeWorkで非エンジニア向けにLTをしました。 建物を建てるというモチーフに、ざっくりと5分で話せる内容にまとめました。 speakerdeck.com

https://ja.nuxtjs.org/guide/typescript/ Nuxt.jsがTypeScript対応をしている。 対応する前に nuxt-ts を利用したTypeScript対応の記事が多かったので、割とさまよったけど、結局、公式ドキュメントがほぼそのままな感じだった。 結構時間かかって調べたの…

同一コンポーネントにはできないものの、パターンが似ていて、1 つの場所にロジックを定義し、多数のコンポーネントを横断してロジックを共有可能にするような抽象化するときに、 Higher Order Components が有効。 https://ja.reactjs.org/docs/higher-orde…

リポジトリをcloneしてきて、npm installすると、package-lock.jsonに差分が出ることがある。 package-lock.jsonは、package.jsonでパッケージをキャレット指定するなどで、最新版が出る度に各パッケージの依存関係による差分が発生するのを防ぐ目的で作られ…

2019/02/19(火)に、関西フロントエンドUG ( @frontkansai )が主催する「Webデザイン・Web制作に関する勉強会 #4」に参加してきました。 kfug.connpass.com 会場は、株式会社タンバリンさん大阪オフィス (https://www.tam-bourine.co.jp/) の1F。 初めてお邪…

コンポーネントに分割していくときに、例えば何かのリストを表示する場合に要素を渡すということが発生するが、 変数名にあたる属性部分に「title」を使いたくなる場面がある。 // hoge-list <hoge-list> <hoge title="ほげタイトル1" text="ほげほげほげ" /> <hoge title="ほげタイトル2" text="ほげほげほげ" /> <hoge title="ほげタイトル3" text="ほげほげほげ" /> </hoge-list> // hoge <hoge> <h1>{opts.title}</h1> <div>{opts.text}</div>…</hoge>