echo("備忘録");

IT技術やプログラミング関連など、技術系の事を備忘録的にまとめています。

Vue,js

【Vue.js】Storybookでコンポーネント開発を便利にする

はじめに 今回もVue.jsネタを。(本当はもっとAWSやServerless Frameworkなどバックエンド的なネタを書きたい。てか仕事でもそうしたい...) 最近、フロント側を触る機会があるのですが、コンポーネントベースでの開発(いわゆる「コンポーネント駆動開発(CDD)…

【Vue.js】v-forループでduplicated key警告が出る場合の対処法

※ 2021/12/10 19:00 一部内容を訂正しました はじめに 前回に続き、今回もVue.jsネタを。 配列などの値を<template>内で表示する場合、v-forなどのループを用いることは多いと思います。 そしてその際、配列のキーとなる値(≒key)が重複している値があると「duplicated </template>…

【Vue.js】data変数の値の変更が画面に反映されない場合の対処

はじめに Vue.jsでは、data()関数の戻り値に設定したオブジェクトのキー(以下「data変数」と記載)について、method内の各関数などで値を変更すると、それが画面に即座に反映されます。 <script> export default { data() { return { hoge: 'aaa' } }, methods: { exa</script>…

【AWS】CloudFrontを用いてサーバーレスSPAを独自ドメインで公開する

概要 Vue.jsによるサーバーレスSPAをCloudFront(AWSのCDNサービス)を用いて、独自ドメインで公開する方法です。 ※必要最低限しか書いてないので、後日追加するかもしれません。 ※2019/7/29 画像&一部説明を追加しました。 前提条件 Vue.jsのサービスをデプ…

【Vue.js】子コンポーネントの埋め込み方法+各種プロパティ設定方法(2021/12/03:一部加筆修正)

経緯 最近、仕事でVue.jsを触っており(AWSによるサーバーレスSPA)、何とか一週間で他のメンバが開発をできる土台(フレームワーク的なもの)をVue.jsで作成する...程度はできるようになりました。 その中で、コンポーネント(*.vue)の扱いでよく使いそうな、子…