作ったやつ VM＝VueMaterialize はじめに かっちょいいデザインのウェブサイトを作りたかった 仕事で使っているのは、みんな大好きBootStrap でもやっぱり、ダサいなと（カスタムする力がないからかもしれないけど） 手軽にかっちょいいデザインに出来ないかなと思って調べてみた すると、マテリアルデザインというものを発見。 Googleが提唱した！Googleが提唱した！って色んな所に書いてあるので調べてみてください それで、Vueで出来ないかなと思って調べてみました Vue3でマテリアルデザイン Vue.jsで一番人気のマテリアルデザインフレームワークはVuetifyらしい ただ、これがVue3に対応しておらず（2021/3Qに対応予定） フレームワークに密結合してしまっているのも使いたくないなと思いました そこで、マテリアルデザイン単体のフレームワークを調べてみました google material design Googleが提唱しているって言うんで、さぞかし使いやすいんだろうなと思って サンプルコードを覗いてみましたが、ボタンを作るだけで6行くらい書かないと実装できず、これはないなと思いました Materialize これが使いやすそうだった、なんか有名らしいし class名でコンポーネントを紐付けるというのもBootStrapみたいで良いなと思ったのでこれに決定 実装 1.Materializeをインストール npm install materialize-css@next 2.main.ts(js)でCSSをImport typescript.main.ts import 'materialize-css/dist/css/materialize.min.css' これで、基本的なCSSは有効になります ただ、マテリアルデザインのボタンをタップしたときの波紋やら、ハンバーガーメニューを開いたりとか(javascriptを使う)動的な動作が有効になっていない状態です 3.javascrip有効化 公式にInitializeする必要があると書いてあるので、します 共通コンポーネントのApp.Vueでやります vue.App.vue import M from "materialize-css"; export default defineComponent({ name: "App", mounted() { M.AutoInit();//MaterializeのInitialize } }); ここまで来ると、Materializeの機能が全部使えるようになっています 4.内部実装 HostingはFirebaseDBはRealTimeDatabseを使いました 完成！ さすがマテリアルデザイン。 フォームをクリックしたとき、ボタンを押したとき、エフェクトが気持ちいい！ 参考文献 Proper MaterializeCSS initialization in VueJS Project Materialize

0. はじめに 本記事は、Vueのディレクティブであるv-bindとv-onとv-modelの役割と関係を整理することが目標です。 今回の説明で出てくるプログラムはVue CLIの<template>, <script>内に書くことを想定しています。 1. v-bindとv-onとv-modelの関係 1-1. v-bindについて v-bindは htmlの属性をVueインスタンスのプロパティによって束縛する役割があります。 文章だとわかりにくいのでサンプルプログラムです。 template <template> <div id="app"> <input type="text" v-bind:value="myName"> </div> </template> Vueインスタンス export default { name: 'App', data() { return { myName: 'MouMou' } } } inputタグのvalue属性の前にv-bind:がついています。そのあとに="myName"がついています。 これはvalue属性の値を「VueインスタンスのdataプロパティのmyName」によって束縛します。という意味です。 dataプロパティのmyNameの値が変更するとv-bind:valueの値もmyNameに依存して変更されます。 ただし逆は成り立ちません。図にすると以下のようになります。 dataプロパティのmyNameの値を「太郎」にすると、テキストボックスの中身(= value)は「太郎」になりますが、 テキストボックスの中身(= value)を「太郎」にしても、dataプロパティのmyNameの値は「太郎」になりません。 v-bind：Vueインスタンス内のデータ→html属性　の単方向のみ 1-2.v-onについて v-onはイベントのサブスクリプションを行います。 サブスクリプションとはイベントの起動を監視して、イベント発火時に指定したプログラムの実行を行う機能です。 サンプルプログラムは以下です。 template <template> <div id="app"> <input type="text" v-on:input="inputEvent"> </div> </template> Vueインスタンス export default { name: 'App', methods:{ inputEvent(event) { console.log(event.target.value); } } } inputタグ内にv-on:input="inputEvent"があります。 これは、テキストボックスに文字がinputされたらinputEventメソッドを起動する。という意味です。 なお、inputEventメソッドに引数があります。こうすることでDOMイベントを渡すことが可能です。 (event.target.valueはテキストボックスに入った値を受け取ります。) こちらも図にすると以下のようになります。 methodsプロパティからhtml属性にアクセスできませんが、 イベント（html属性）が発火することでmethodsプロパティのメソッドを実行することはできます。 v-on：html属性(イベント)→Vueインスタンス内のデータ　の単方向のみ 1-3. v-modelについて v-modelは双方向のデータバインディングを行います。 v-model=で定義された変数と、Vueインスタンスのデータプロパティの変数を紐づけ、 どちらかが変わるともう一方も変わる挙動をします。 template <template> <div id="app"> <input type="text" v-model="myName"> {{myName}} </div> </template> Vueインスタンス export default { name: 'App', data() { return { myName: 'MouMou' } } } <input type="text">の場合、 v-modelはvalue属性のバインディングとinputイベントのサブスクリプション両方の働きをしていることがわかります。 図にすると以下のようになります。 2. v-model = v-bind + v-on v-model は v-bind と v-on の組み合わせで実現できます。 言い換えると、v-modelは「v-bindとv-onの組み合わせの省略記法」とも言えますね。 1-3のv-modelサンプルをv-bindとv-onの組み合わせで実現すると以下になります。 template <template> <div id="app"> <input type="text" v-bind:value="myName" v-on:input="changeMyName"> {{myName}} </div> </template> Vueインスタンス export default { name: 'App', data() { return { myName: 'MouMou' } }, methods:{ changeMyName(event) { this.myName = event.target.value; } } } 1-3のv-modelのサンプルと比べて冗長でわかりにくいですが、同じ挙動をします。 v-modelを使用することで、双方向のバインディングがすっきりかけて、わかりやすくなりますね。 なお、Vue公式サイトには以下のような記載があります 内部的には、v-modelは異なる input 要素に対し異なるプロパティを使用し、異なるイベントを送出します。 text および textarea 要素には、valueプロパティとinputイベントを用います チェックボックスおよびラジオボタンには、checkedプロパティとchangeイベントを用います select フィールドには、valueプロパティとchangeイベントを用います 3. まとめ v-model は v-bind と v-onで実現できる 最後まで読んでいただきありがとうございました！ 参考

はじめに Vue.js初心者です。Vue.jsをインストールしたのでメモ 下記の記事を参考にさせていただいています。 Vue.jsのインストール 今回はnpmを使ってインストールしていきます。 まずnodeとnpmが入っているか確認します。 node -vとnpm -vを実行してみてください 入っていない場合はインストールを行なってください $ npm install -g vue-cli $ vue -V 2.9.6 $ vue init webpack test $ cd test $ npm run dev Your application is running here: http://localhost:8080 localhost:8080にアクセスしてみてくださいVueの初期ページが表示されていると思います。 以上です。

npm run serve 実行時に以下のようなエラーが表示される。 # Fatal error in , line 0 # Check failed: U_SUCCESS(status). # # # #FailureMessage Object: 0x7ffeefbfc060zsh: illegal hardware instruction npm run serve nodeのversionをv12.0.0からv14.0.0に上げたところエラーが解消される。 ✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️@MacBook-Pro vue-cli-test-project % npm run serve > vue-cli-test-project@0.1.0 serve /Users/✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️✖️/Vue.js-tutorial/vue-cli-test-project > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 1128ms 16:51:46 App running at: - Local: http://localhost:8080/ - Network: http://192.168.2.101:8080/ Note that the development build is not optimized. To create a production build, run yarn build. どうやらネットでググってみてもバージョンを変えたらなおったというケースは結構あったようです。

primevue prestige 他に情報がなかったので英語サイトを回りながら VUE3.0で構築したいがBUEFYが対応してくれなくなったので別のものを探す。 40$程度だったのでprestigeを購入してみた。 使い方自体は簡単。zipをダウンロード解凍して npm installすればOK。 ただ、他のプロジェクトにコンパクトに適応するのに困った。 必要なファイルがpublicフォルダにあるし、inde.htmlでcssの適応を変更しないとデザインが適応されない。 この情報がうまく見つけ切れてなかったので苦戦した。 vue用のsrcだけではなく、public側にcssファイルをコピーするのと、htmlもコピーする必要がある。

Vue.jsにてセレクトボックスで初期表示文字のみ色を変える <modal class="modal-inner" v-scroll-lock="open" name="edit" :width="1100" :height="720" > <div class="modal-header flex"> <h2 class="profile-tll flex">プロフィールを編集する</h2> <hr class="separate" /> </div> <div class="modal-body"> <div class="profile-inner flex"> <div class="profile-contens flex"> <div class="profile-img-inner flex"> <img :src="uploadedImage" width="200" height="200" class="profile-img" alt="プロフィール画像" /> <button class="profile-txt profile-update" @click="update"> プロフィール画像を編集する </button> </div> <div class="line"></div> <div class="profile-items flex"> <div class="profile-contens flex"> <input type="text" class="profile-item" placeholder="名前" v-model="name" /> </div> <div class="profile-contens flex"> <select class="profile-select" v-model="sex" :style="{ color: sex == '' ? 'gray' : 'white' }" > <option class="profile-item" value hidden>性別</option> <option v-for="sex in sexs" :value="sex.name" :key="sex.id" class="profile-item" style="color: white;" >{{ sex.name }}</option > </select> </div> ~省略~ </div> <button class="hide-btn flex" @click="hide">×</button> </div> <button @click="updateBtn" class="update-btn flex"> 更新 </button> </div> </div> </modal> export default { data() { return { name: "", sex: "", sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }], age: "", ages: [ { name: "10際未満" }, { name: "10 ~ 19歳" }, { name: "20 ~ 29歳" }, ~省略~ ], access: "", accesses: [ { name: "北海道" }, { name: "青森県" }, { name: "岩手県" }, ~省略~ ], profession: "", professions: [ { name: "公務員" }, { name: "会社員" }, { name: "自営業" }, ~省略~ ], selfpr: "", genre: "", genres: [ { id: 0, name: "ジャンル" }, { id: 1, name: "アクション" }, { id: 2, name: "ドラマ" }, { id: 3, name: "恋愛" }, ~省略~ ], favMovie: "", uploadedImage: "", profileData: {}, //配列にしないようにする。 open: false, }; }, components: { Header, }, methods: { // updateBtn()が押下されたら、dbインスタンスを初期化して"posts"という名前のコレクションへの参照 updateBtn() { firebase .firestore() .collection("users") .doc(this.$route.params.uid) //uidとは、routerの/mypage/:uidの[uid]のこと。 //コレクションのusersを参照して、ドキュメントのuidを参照。 .set( { name: this.name, sex: this.sex, age: this.age, access: this.access, selfpr: this.selfpr, profession: this.profession, uploadedImage: this.uploadedImage, genre: this.genre, favMovie: this.favMovie, time: firebase.firestore.FieldValue.serverTimestamp(), //サーバ側で値設定 }, { merge: true } //set()でmergeをtrueにすると、上書き。updetaと同様。 ); this.$swal({ title: "内容確認", text: "この内容で投稿しますか？", icon: "info", buttons: true, dangerMode: true, }).then((willDelete) => { if (willDelete) { this.$swal("投稿しました。", { icon: "success", }); this.$router.go({ path: `/mypage/${this.$route.params.uid}`, force: true }); //プロフィール編集されたらページをリロード } else { this.$swal("キャンセルしました。"); } }); }, 三項演算子:style="{ color: sex == '' ? 'gray' : 'white' }"を利用して色分けを実装しています。 selectタグに対して、sexに値が入っていれば「白色」、空の場合は「グレー」としています。 <select class="profile-select" v-model="sex" :style="{ color: sex == '' ? 'gray' : 'white' }"> 初期表示させるoptionタグには、一番上には項目名を初期表示として表示してhiddenで選択中は表示しないようにしてます。 <option class="profile-item" value hidden>性別</option> 選択するoptionタグには、リストを表示させてstyle="color: white;"を直接記述して色も持たせています。 <option v-for="sex in sexs" :value="sex.name" :key="sex.id" class="profile-item" style="color: white;" >{{ sex.name }}</option>

TL;DR Vue.jsでControl+EnterとCommand+Enter両方で関数を発火させ、 Enterで発火させないベストプラクティス。 WindowsとMacのControlキー アプリケーションにおいて投稿機能を開発する際、 Enterで改行、Control+Enterで送信を実装したいじゃないですか。 ただ、MacにはControlキーとは別にCommandキーというのがついていて、両方に同じ機能を割り当てたい。 そこで少しハマったのでアンチパターンと共に紹介します。 アンチパターン keydownをControl, Commandそれぞれについて割り当てる。 <textarea v-model="text" ... @keydown.enter.meta.exact="[function名]" @keydown.enter.control.exact="[function名]" /> これだとCommand+Enterは発火したがControl+Enterが効かず、Enterで発火してしまう。 同じkeydownがふたつ定義されている時点で気持ちが悪い。 ベストプラクティス Enterでイベントを発火させ、イベントオブジェクトからそのとき同時に押しているキーによって場合分けする <textarea v-model="text" ... @keydown.enter.meta.exact="[function名]" /> --- [function名](e: any) { // ControlキーまたはCommandキーが同時に押されているか if (e.ctrlKey || e.metaKey) // 処理 }, まとめ 同じイベントハンドラを複数定義するのはよくない。 KeyCodeは推奨されていないので、ctrlKey, metaKeyのプロパティで処理できてよかった。

vue-textarea-autosizeとは vue-textarea-autosizeは、改行に合わせて高さを変えてくれるテキストエリアが実装できるコンポーネントライブラリです。 最大の高さを設定するれば、それ以降はスクロールバーに切り替えてくれる機能もあります。 vue-js-modalの導入方法 以下のnpm、CDNを使ってインストールします。 npm npm i -S vue-textarea-autosize yarn yarn add vue-textarea-autosize CDN <script src="https://cdn.jsdelivr.net/npm/vue-textarea-autosize@1.1.1/dist/vue-textarea-autosize.umd.min.js"></script> 導入手順 1.ライブラリの取り込み import VueTextareaAutosize from 'vue-textarea-autosize' Vue.use(VueTextareaAutosize); 2.メソッドを設定 export default { data() { return { value: "", //任意名 }, }, } 3. テンプレートを準備 <div class="profile-contens flex"> <textarea-autosize name="text" cols="10" rows="1" v-model="selfpr" placeholder="自己紹介" :min-height="70" :max-height="70"></textarea-autosize> </div> 4.プロパティ Props Required Type Default Description v-model no String, Number '' 値のバインディング value no String, Number '' v-modelバインディングの一部 autosize no Boolean true 自動サイズ変更を動的に有効/無効にすることができます minHeight no Number null 最小テキストエリアの高さ（反応的な動作） maxHeight no Number null 最大テキストエリアの高さ（反応的な動作） important no Boolean, Array false http://cleanslatecss.com/!important　を使用する場合など、スタイルプロパティを強制します。許可される値：true、falseまたは下記のように配列で一部を設定['resize', 'overflow', 'height'] まとめ 改行に合わせて高さを変えてくれるテキストエリアが実装できるコンポーネントライブラリでした。