- 投稿日：2021-05-16T22:36:58+09:00
【Vue.js】Vueインスタンスのライフサイクル
はじめに 仕事で使う事になったので1からVue.jsについて学んだ。 ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。 Vueインスタンスのライフサイクル Vueインスタンスにはライフサイクルという概念があり、以下のようなライフサイクル（フェーズ）がある。 これが分かっていると、DOMの描画後に...などの柔軟な実装ができるようになる。 上記の図中の状態(プロパティ)名と書かれている部分がVueインスタンスが持つフェーズである。 各フェーズでconsole.log()を出力させるようにすると、以下の動画のように各フェーズに到達してconsole.log()が出力されているのが分かる。 動画のソースコードは以下。 sample.html <body> <div id="app"> <h1>こんにちは、{{name}}</h1> <button @click="name = '田中 太郎'">名前を変更</button> <button @click="destroy">インスタンスを破壊</button> </div> <script src=" https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script><script src="./vue.js"></script> <script> const vm = new Vue({ // el: '#app', data: { name: '山田 花子' }, beforeCreate: function () { console.log('beforeCreate'); }, created: function () { console.log('created'); }, beforeMount: function () { console.log('beforeMount'); }, mounted: function () { console.log('mounted'); }, beforeUpdate: function () { console.log('beforeUpdate'); }, updated: function () { console.log('updated'); }, beforeDestroy: function () { console.log('beforeDestroy'); }, destroyed: function () { console.log('destroyed'); }, methods: { destroy: function () { this.$destroy(); } } }) setTimeout(() => { vm.$mount('#app') }, 3000); </script> </body> ※destroyの動きについて destroyはVueインスタンスを破壊するものであるが、実際にdestroyを行うと以下の動画のようにVueの機能（ここではクリックイベントを発火しnameを書き換え、それがリアクティブに反映される）が動かない事が確認できる。 Vue.jsの勉強メモ一覧記事へのリンク Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。 https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4
- 投稿日：2021-05-16T22:23:04+09:00
$refs を使って親コンポーネントから子コンポーネント内の関数を触る
エンジニア見習いとして働き始め（2021年3月1日〜）て2ヶ月半が経ちました。 親コンポーネントでの操作をする際に、同時に子コンポーネント内の関数を呼びたいケースが業務でありまして。 具体的には親コンポーネントにあるプルダウンメニュー内の値を選択すると同時に、 子コンポーネントにあるフォームに入力された内容を自動で保存させる（子コンポーネントにフォーム内容を保存する処理があったのでそれを呼ぶ）ようにしたかったんです。 $refsを使って子コンポーネント内の関数を呼ぶことができました。 ①ref属性を使い、子コンポーネントにリファレンスIDを割り当てる 親コンポーネント <template> <child-Component ref="child"></child-Component> ・ ・ ・ </template> refとはreference（参照）の略。 まずは子コンポーネントにアクセスするためのIDをrefという属性を使って割り当てます。 ID名は自由です。 ②$refsを使って親コンポーネントから子コンポーネントにアクセス 親コンポーネント <script> // saveCommentは子コンポーネント内の関数 this.$refs.child.saveComment() </script> this.$refs.[参照ID].[参照先の関数] とすることで親から子の関数を実行させることができました。 参考 Vue.js 特別な問題に対処する
- 投稿日：2021-05-16T21:13:24+09:00
Vuetify Vue 確認ダイアログ
作りたいもの 「開く」ボタンをクリックすると以下のようなダイアログを出す。 「閉じる」ボタンでダイアログを消し、 確認ボタンを押すとメソッドを実行する。 サンプル my_dialogを初期はfalseにしておき、 「開く」ボタンをクリックすると、@click="my_dialog = true"でtrueになりダイアログを出す。 <template> <v-app> <v-btn @click="my_dialog = true">開く</v-btn> <v-dialog v-model="my_dialog" max-width="400"> <v-card> <v-card-title> <div>タイトル</div> </v-card-title> <v-card-text> <p>本文</p> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn @click="my_dialog = false">閉じる</v-btn> <v-btn @click="confirm">確認</v-btn> </v-card-actions> </v-card> </v-dialog> </v-app> </template> <script> export default { data() { return { my_dialog: false, } }, methods: { confirm() { alert('確認しました') this.my_dialog = false }, }, } </script>
- 投稿日：2021-05-16T17:49:07+09:00
浦島太郎のVue.js
前書き 数年ぶりにJavaScript触ったら結構変わってるな…！ と思ったので、私みたいな浦島太郎さんが他にもいたら役立てて欲しいなという記事です。 一応Vue3の想定で書いていますが、Vue2限定のものが混ざっていたらすみません。 想定読者層 だいたい下記レベル感を想定しています。 他の言語でプログラミング自体はできる 基礎的なLinuxコマンドが打ててアレルギーがない JavaScriptは昔ちょっとjQuery触ったことがある（一応DOMの概念はわかる） ブラウザ上で動くJavaScriptについては一応知ってる 最近イケてると噂のVue.jsを触ってみたい npmってなにさ？ webpackってなにさ？ 細かい部分はググればわかりそうだけど、前段階としてざっくり概念を知ったり、できることを簡単に知っておきたい 注意書き 私も学習しながらざっくり理解で進めたので、正確でない部分があるかもしれませんがご了承ください。 間違いがあれば教えて頂けると助かります。 Vue.jsってどういうもの？ そもそも問題ない人は公式を読んでもらうのが一番良いと思います。 というより問題なく読める人はここまでで回れ右してもらって大丈夫です。 しかし 公式ガイドは、HTML、CSS そして JavaScript の中レベルのフロントエンドの知識を前提にしています。フロントエンドの開発が初めてであるならば、最初のステップとして、フレームワークに直接入門するのは良いアイデアではないかもしれません。基礎を学んで戻ってきましょう！他のフレームワークでの以前の経験は役に立ちますが、必須ではありません。 こんなことが書いてあって、浦島太郎な私には敷居が高かったです。 実際一度読んだだけではわからないことも多々ありました。 私が現在理解している範囲でVue.jsでできることを簡単に書くと 任意の範囲のDOM定義をvueコンポーネントとして分割して定義しておける コンポーネントを呼び出す際には引数を与えることができ、それによって描画内容に幅を持たせられる 複数のコンポーネントを組み合わせて画面を構築していくことができる SPA（Single Page Application）やSSR（Server Side Rendering）を構築できる という感じのようです。 Vue.jsってどうやって動いているの？ 基本的なことですが、jQuery脳から入るとこの時点で少し疑問符が湧くので、理解を進めるため簡単に書いておきます。 表示されるWebページ（index.html）はファイルとして普通に用意されており、ユーザーはここにアクセスする index.html内にjsタグを埋め込んでおき、Vue.jsで作成され1ファイルに圧縮されたjsファイル（main.js）を読み込み、実行する。 main.jsではVueのアプリケーション・オブジェクトが作成され、ここでコンポーネントを読み込み、Vueで定義したDOMの描画を行う JavaScript初心者が躓きがちな記法や概念 JavaScriptには他の言語に慣れているとパッとわからない書き方や概念がいくつかあります。 そして、ググってもこのあたりの知識は前提として記事が書かれており、ググり方もよくわからず困ったりしました。 なので基礎知識として、よく見るなと思ったものについて最初に軽く触れておこうと思います。 ES2015（別名ES6） ECMAScriptの6th Edition、2015年に策定されたためES2015と呼ばれたりES6と呼ばれたりするようです。 現状最新のJavaScriptの言語仕様の名前、と覚えておけば概ね問題ないと思います。 JavaScriptはブラウザによって挙動が微妙に異なる部分があり、それでは困るため、共通仕様として決められたもののようです。 アロー関数 アローを使うことで、methodとかfuncとかのそれらしい英字なしに関数を定義することができます。 // 従来だとこう書く var fn = function (a, b) { return a + b; }; // アローで書く const fn2 = (a, b) => { return a + b; }; // 単一式の場合は色々省略できる const fn3 = (a, b) => a + b; // オブジェクトを返却する場合は少し書き方が変わる const fn4 = (a, b) => ({ sum: a + b }); スプレッド構文 これは他の言語にもあったりなかったり。 可変長で引数を受けたり渡したりできます。 function func (...r) { console.log(r[1]) } func(1, 2, 3, 4, 5); // => 2 通常の引数と併用も可能です function func (a, ...r) { console.log(r[1]) } func(1, 2, 3, 4, 5); // => 3 渡す時も同様です function func (a, b, c) { console.log(a + b + c) } const arr = [1, 3, 5] func(...arr); // 9 配列の中に展開も可能です const arr1 = [1, 2, 3] const arr2 = [...arr1, 4, 5, 6] console.log(arr2); // [1, 2, 3, 4, 5, 6] オブジェクト リテラルだと以下 a = { key1: value1, key2: value2, } オブジェクトのKeyValueのことはプロパティと呼びます。 プロパティにはドット区切りでも辞書形式でもアクセス可能です。 ドット区切りを使う方が一般的らしいですね。 a.key1 == a["key1"] == "value1" オブジェクトに関数の定義を入れる場合は省略記法があります。 let rgb = { r: 255, g: 128, b: 64, total1() { return this.r + this.g + this.b }, total2: function() { return this.r + this.g + this.b }, total3: () => { return this.r + this.g + this.b }, } クラス定義 constructor() は言語側で予約済。 Vue.jsを使う上ではあまり必要ないかもしれませんが、念の為。 class Hoge { constructor(args) { this.args = args // initial } method () { ... } } node.jsについて最低限 node.jsってサーバーサイドjsのことじゃなかったっけ？ たしかシングルスレッドで非常にレスポンスが早いけど設計に注意が必要なWebサーバーだったような… などと浦島さんは思いました。 どうもnode.jsが示す範囲はもう少し広いようでした。 フロントのWebページ用のjsコードであっても開発中はnode.jsで管理して作成し、完成したコードをコンパイルして最終的にはフロントで使う、という開発手順になっているみたいですね。 npmとは 簡単に書くと、JavaScriptのライブラリ等を管理するためのツール。 PHPでいうcomposerだったり、Pythonでいうpipやpoetryに近い概念だと思っておけばとりあえず大丈夫だと思います。 package.jsonの中に必要なライブラリのバージョンや、パッケージの名前、製作者や連絡先などの情報を入れておけます。 場合によっては利用するライブラリのオプション指定などもこのファイル内に書いておくケースもあるようです。 また、実行コマンドをpackage.jsonの中に定義しておいて、呼び出すこともできます。 よく使うビルドコマンドなどをオプション付きで書いておいて使う、などが主な用途になると思います。 package.json { "name": "hoge", "version": "0.0.1", ... "scripts": { "dev": "コマンド" npm run ***で実行したいコマンドを定義しておく }, "dependencies": { 実行に使うライブラリとバージョンの一覧。jqueryやvueなどを指定する。 }, "devDependencies": { 開発中のみ使うライブラリ。babel、eslint、webpackなどを指定する。 } } # dependenciesとdevDependenciesに定義しておいたライブラリをnode_modules以下にインストールする npm install # package.jsonのdevで定義しておいたコマンドを実行 npm run dev このあたりについて解説するとそれだけで1本書けるので、ここでは割愛します。 webpackとは 大量のJavaScriptを書いてWeb上で使用したい場合、開発者としてはある程度の単位でファイルを分けて管理したいです。 しかし、ファイルが増えるたびにそれを読み込む定義をhtml側に逐一追加していくのは非常に大変で、何よりアホらしいですよね。 こんな課題を見事に解決してくれるのがwebpackです。 複数のjsファイルや、sassや画像までもまとめ上げ、1ファイルに出力してくれます。 html側はまとめ上げた後の1ファイルだけを常に読み込むよう指定しておけば、js側の開発過程でファイルがどう増減しようが関係ないわけです。素晴らしい。 なお身近な範囲ではwebpackを使っている人が多かっただけで、複数ファイルを1ファイルにまとめ上げる方法は他にもあるそうです。 興味があれば探してみてもいいと思います。 Vue.jsについて Getting started的なものは公式にお任せするとして、ここでは学習前にざっと頭出ししたりする用のリストとして書いていきます。 .vueファイルに含まれるもの 大きく3種類、基本的には2個です。 <template> DOM要素 <script> JavaScriptコード <style> CSS template HTMLタグを基本として、vue特有の記法やjs変数の埋め込みをしながらDOMを定義していきます。 template配下のトップレベルにはタグを1つしか指定できないため、そうできる単位でコンポーネントを切り分けることを意識しましょう。 NG <template> <div> ... </div> <div> ... </div> </template> OK <template> <div> <div> ... </div> <div> ... </div> </div> </template> v-xxx v-から始まる属性は、およそ何らかの方向性で変数をDOMに紐付けるための指定方法となっているようです。 v-html 変数を直接HTMLとして使いたい場合に用いる。 <div v-html="editableHtml"></div> v-bind タグの属性値に変数を使いたい場合に使う。 <div v-bind:name="hoge"></div> これはname属性に変数hogeの値を指定した形になる。 なおv-bindは省略可能、というか省略することの方が多いらしいです。 <div :name="hoge"></div> オブジェクト構文 v-bindに辞書を指定し、辞書の値がtrueなら有効、falseなら無効として指定できます。 わかりやすい例としてはclass指定です。 <div :class="{ red: true, blue: false }">hoge</div> v-if ifの中身が真なら描画する。v-elseもあります。 これはわかりやすいので例は省略します。 v-for forループ。v-ifとは同時に指定できないようです。 <template v-for="i in 10"> <template v-for="item in array"> <template v-for="(item, index) in array"> <template v-for="(value, key) in object"> v-on クリック等のなんらかの条件で発火するイベントを処理したい場合に指定します。 methodsの中に定義したメソッドを指定して呼び出します。 例えばonclickならv-on:clickとして指定します。 <p v-on:click="doAction">...</p> 省略して@で書く方が一般的らしいです。 <p @click="doAction">...</p> ref属性 idやcssセレクタなどはビルド時に変換されてしまい想定通りの挙動にならない可能性があるため、特定のdomに対して何かしたい場合にはrefを使うことができます。 直接HTML要素に介入するため想定外の挙動を起こす可能性があり、利用は最小限にした方が良いそうです。 <p ref="hoge"> this.$refs.hoge templateタグ templateタグ自体は描画されません。 v-forやv-ifなどで一定の範囲を括りたい時などに有用です。 transitionタグ trasitionタグ自体は描画されません。 描画時や消滅時にcssを定義しておけるもの、らしいです。 script コンポーネントごとのjs部分を定義します。 だいたい以下2種類を記述することが多いけど、他にも色々と書く必要があるケースもあります。 import export default import 外部や別ファイルに定義してあるモジュール、コンポーネントをインポートして、このコンポーネント内で使えるようにします。 import AAA from 'XXX' import { A, B, C } from 'YYY' import D from '@path/to/module' export default 最初にこれを見た時に私は「export defaultってなんぞ？」と結構謎でしたが、これは外部からモジュールとして呼ばれた時にデフォルトで参照するものを指定しているそうです。 これ自体はVueでなくJSの記法らしいですね。 よくわからなければ「おまじない」と思っておいても問題ないと思います。 Vue.jsではだいたい以下のような形でオブジェクトを定義していくことが多いと思います。 export default { ... } components importして利用するコンポーネントを指定しておきます。 export default { components: { A, B }, } 指定したコンポーネントはタグのようにしてtemplate内で使用でき、引数を渡すことも可能です。 props モジュールとして外部から呼ばれた際に受け取れる引数について定義できます。 export default { props: { hoge: String, xyz: { type: Number, default: 0, }, percentage: { type: Number, required: true, validator: (value) => { return value == parseInt(value) && value >= 0 && value <= 100 }, }, f: { type: Function, required: true, } } } data コンポーネントが使う変数を定義できます。 computed 算術プロパティを定義できます。 概ねdataやpropsと同様に扱うことができます。 値は依存先の変数が更新された際に再計算されます。 直接関数を定義するとGetterとして扱われますが、Setterも定義できます。 computed: { calcProperty: function() { ... calc process return value }, canSetProperty: { get() { ... getter process return value }, set(val) { ... setter process } }, }, watch 常に値の変更を監視する旨について定義しておけます。 1つの値の影響範囲が広かったりする場合に使うことがあるけど、基本的にはcomputedで簡素に書けることが多そうです。 watch: { propertyName (newValue, oldValue) { ... process }, } methods 関数を定義しておけます。 v-onなどから呼び出すことが多い印象ですが、様々な使い道がありそうです。 created コンポーネントのオブジェクトが作成された直後、propsやdataの設定より後に実行される。 ローカルストレージから値を取り出したり、色々できそうですね。 よく聞くライブラリ 有名どころについて少し。 Vuex 様々なコンポーネントで共通して扱える、ストアと呼ばれる保管場所を用意できるライブラリ。 グローバル変数のようなものになるため、大きいアプリケーションになってくると扱いが難しくなりそうですね。 $storeというグローバルに使用できる値が用意され、そこから値を扱う形になります。 i18n 複数言語対応を簡単にしてくれるライブラリ。 $tというグローバルに使用できる値が用意され、そこから予め定義しておいた文字列を呼び出して描画に用いるような使い方になる。 多言語対応しない場合でも文言を各vueファイルに散らばらせずに一箇所で管理できるため、採用価値は高そうです。 ライブラリが用意する便利変数は頭に大体$がついているのかもしれませんね。 プラスαで知っておくと便利な概念 記事を漁っていると時々でてきて、なんだそりゃ？とならないための予習用です。 ググるにも知識が要りますよね。JS関係では特に苦労しました。 Flux Facebookの提唱するWebアプリケーションを開発する際に用いるアプリケーションアーキテクチャです。 アプリケーションをView、Store、Dispatcher、Actionの4部品に分けて扱います。 詳しくは公式へどうぞ。 個人的にはまだ有用性を咀嚼できていませんが、たぶん巨大なアプリケーションになってくると有用性が出てくるのだと想像しています。 Atomic Design Vueコンポーネントの設計手法の1つです。 Vueにも一応公式のスタイルガイドがありますが、Atomic Designではコンポーネントの分割単位について細かく定義しています。 コンポーネントを分ける単位に悩んだら参考にすると良さそうです。 最後に フロントの技術推移は早いとは噂で聞いていましたが、実際もう基礎知識がない状態に近いなと感じました。 推移の早さのせいか、検索してもサンプルコードが動かないケースもそれなり。 ともあれ久しぶりにJS触って色々と書いたのは楽しかったです。そのうち個人サイト作る過程とかも記事にしてみたいですね。
- 投稿日：2021-05-16T17:38:11+09:00
Vue.js開発で役に立つVSCode拡張機能
Vue.js開発でVsCodeに追加した拡張機能 最近、Vue.js開発でVsCodeを使用することが多いため、 便利に感じた拡張機能を紹介します。 追加した拡張機能8選 1.Live Server HTMLやCSSの修正で自動的にブラウザがリロードしてくれるツールです。 Live Serverを使うと効率良く開発ができるようになります。 2.Vetur Vue開発には必須のツールです。 Veturを使うと、Vueの開発に役立つ様々な機能が用意されているため非常に便利です。 スニペットやフォーマットチェックなどVueに特化した拡張機能です。 シンタックスハイライト スニペット Emmet コードチェック（linting/Erorr Check） オートコンプリート 3.Prettier ソースコードを自動で整形してくれるツールです。 自動で整形してくれるため、タブのサイズや位置、さらにセミコロンやシングルクォーテーションなども整形してくれます。 4.Auto rename tag 開きタグと閉じタグのセットを自動で整形してくれるツールです。 作業中の無駄なミスを減らすことができます。 divタグからaタグに変更したときに自動でaタグに変化してくれます。 5.Auto close tag VsCodeは自動でタグを閉じてくれるのですが、 閉じタグのタイミングというか場所が変更できなくてイライラします。 そんな時はこのツール。使いやすいタイミングで閉じるようにするとストレスなく作業できます。 6.brackets pair colorizer タグや色付けされる括弧を変更できるツールです。 初期設定では色付けされる括弧は「()」「[]」「{}」の3種類だけなので、「<>」などHTMLで使用するタグに変化がありませんので、追加すると見やすくなります。 7.beautify コードフォーマット(整形)してくれるツールです。 javascriptやJSON, CSS, Sass, HTMLコードを選択し、command palletからBeautifyを実行すると綺麗に整えてくれます。 8.Vue Peek 選択したコンポーネントやファイル名について、参照されるファイルにすばやくジャンプしたり、ファイルを覗いたりすることができます。 import先とかに素早く飛べるので便利です。 まとめ Vs Codeの拡張機能がすごく充実していて勉強になりました。 作業効率や色々と調べながら作業できたので楽しかったです。 以下のpackを参考にしています。 ◇VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定 https://iwb.jp/vscode-vuejs-extensions-install-settings/ 参考文献 ◇Live Server https://life-care.site/programming/liveserver_install_how_to_use ◇Vetur https://johobase.com/vue-js-visual-studio-code-vetur/ ◇Prettier https://ma-vericks.com/vscode-prettier/ ◇Auto rename tag https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/ ◇Auto close tag https://usagi-post.com/ja/archives/1091 ◇brackets pair colorizer https://blog.proglus.jp/4255/ ◇beautify https://capotast.co.jp/article/detail/8/
- 投稿日：2021-05-16T16:53:19+09:00
Vue.js勉強記録(第1回)
Vue.jsの勉強記録(第1回) 学習日：2021/5/16(日) 学習内容 Webアプリケーション開発の準備 開発を始めるにあたり下記項目を検討する必要がある。 ひとまず1. 開発環境の構築からスタートし、動くアプリケーションを先に作成した後で後続の要素について検討する。 開発環境 テスト コーディングガイドライン ビルド デザインパターン 国際化 データの永続化 1. 開発環境 参考文献「Vue.js入門 基礎から実践アプリケーション開発まで」の「8.3 アプリケーション開発環境構築」を参考にして開発環境を構築。 #Vue CLIと依存モジュールをインストール $npm install -g @vue/cli @vue/cli-service-global #プロジェクトを作成（アプリ名：sample_app） $vue init webpack sample_app 作成されたプロジェクトの改行コードがLFのため、PowershellでCRLFに変換 #プロジェクトのルートディレクトリに移動 $cd <プロジェクトのルートディレクトリ> #改行コードの変換（LF2CRLF) $ls -r -n -file | foreach{ (cat -encoding UTF8 $_) -join "`r`n" | set-content -encoding UTF8 $_ } 次にgitでレポジトリを作成する。git bashを起動して初期化する。 #repo作成 $git init #staged and commit $git add . $git commit #push $git push origin remote 作成されるProjectのフォルダ構成の説明 感想 ゴールであるWebアプリケーション開発を早く進めたいので、参考文献の「Vue.js入門 基礎から実践アプリケーション開発まで」を最初から読み始めるのでなく、実践的な内容の第8章からスタート。 これまで書籍を利用した学習で最初から読まずに途中から読んでスタートするのは初めてなので、この方法でうまくいくかは不明。思考錯誤しながらやっていこうと思う。 次の記事 作成中 前回の記事
- 投稿日：2021-05-16T16:14:36+09:00
【Vue2】 Vue Routerの機能の整理
Vue Routerを使う インストール npm i vue-router vue-routerの設定を行う（ルーティングとコンポーネントの紐づけ） ( /src/router.js ) import Vue from 'vue'; import Router from 'vue-router' import Home from '/views/Home.vue' import About from '/views/About.vue' Vue.use(Router) // プラグイン（どこでも使える機能）を適用するために記載 export default new Router({ routes:[ { path:'/', // URL component:'Home' // 上記URLのときに表示するコンポーネント }, { path: '/about', component:'About' } ] }) routerをVueのグロバルコンポーネントで適用する( /src/main.js ) import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount("app") 表示個所にrouter-viewを用意する (/src/App.vue) <template> <div> <router-view></router-view> </div> </template> さまざまな機能 URLの#を消す（mode:history) デフォルトはmode:hashで、＃がついている。mode: history とすることで、URLの＃を消すことができる。 ( /src/router.js 一部抜粋) export default new Router({ mode: 'history', routes:[ ... ] }) URLを切り替える (router-link to="/") <router-link to="リンク先">とすることで、指定したリンク先に遷移するリンクができる (/src/App.vue) <template> <div> <router-link to="/"> HOME </router-link> <router-link to="/about"> ABOUT </router-link> <router-view></router-view> </div> </template> to属性はv-bindでバインディングできる。 URLに応じてクラスを変える (active-class) active-class="クラス名"をすることでリンクを含むURLの時のみクラスが適用される。exactをつけることで完全一致するURLの時のみ適用されるクラスを設定できる。 (/src/App.vue) <template> <div> <router-link to="/" active-class="active" exact> HOME </router-link> <router-link to="/about" active-class="active"> ABOUT </router-link> <router-view></router-view> </div> </template> <style scoped> .active{ font-size: 30px; } </style> URLをJavaScriptから変更する($router.push) this.$router.push({path: '遷移先URL'})とすることで、JavaScriptから遷移させることができる(/src/App.vue) <template> <div> <button @click="toAbout">to About</button> <router-view></router-view> </div> </template> <script> export default { methods: { toAbout() { this.$router.push({path: 'about'}) } } } </script> 動的なURL（path: /xxx/:yyy, $route.params） path '/xxx/:yyy'のように、コロンを使ってパラメータ(yyy)を指定することで、動的なURLができる (/src/router.js 一部抜粋) export default new Router({ routes:[ { path:'/', component:'Home' }, { path: '/about/:id', // パラメータidを指定 component:'About' } ] }) $route.params.idで動的なURLのパラメータにアクセスできる (/src/views/About.vue) <template> <div> <!-- --> <p>No. {{$route.params.id}}</p> </div> </template> ※ 動的なURLはライフサイクルフックが呼ばれないので、URLの変更で何か処理をさせたい場合は、watchで$routeを監視する。 動的なURLのパラメータをpropsからアクセス (props: true) props: trueにすることで、動的パラメータをpropsでアクセスできる (/src/router.js 一部抜粋) export default new Router({ routes:[ { path:'/', component:'Home' }, { path: '/about/:id', component:'About', props: true // propsを追加 } ] }) $route.params.idで動的なURLのパラメータにアクセスできる (/src/views/About.vue) <template> <div> <p>ID: {{id}}</p> </div> </template> <script> export default{ props: ['id'] } </script> ※ 動的なURLはライフサイクルフックが呼ばれないので、URLの変更で何か処理をさせたい場合は、watchで$routeを監視する。 router-view のなかにrouter-view (children) childrenを追加することでネストされたrouter-viewを実現できる (/src/router.js) import Vue from 'vue'; import Router from 'vue-router' import Home from '/views/Home.vue' import About from '/views/About.vue' import AboutChild from '/views/AboutChild.vue' Vue.use(Router) export default new Router({ routes:[ { path:'/', component:'Home' }, { path: '/about', component:'About', children:: [ // childrenオプションでpath, componentを設定する {path: "child", component: AboutChild} // …/about/childでアクセス可 ] } ] }) 名前付きのルートを使う (name) nameを使ってルートに名前を設定する (/src/router.js 一部抜粋) export default new Router({ routes:[ { path: '/about:id', component:'About', children:: [{ path: "child", component: AboutChild, name: 'name-child' // ルートの名前を設定 }] } ] }) nameで指定したルートの名前を渡す。パラメータはparamsでオブジェクトで指定する (/src/views/App.js) <template> <div> <router-link :to= "{name:'name-child', params:{id:1}}"> ABOUT </router-link> <router-view></router-view> </div> </template> クエリにアクセス (query) (/src/router.js 一部抜粋) export default new Router({ routes:[ { path: '/about', component:'About', name: 'about' // 名前付きルートを設定 } ] }) クリックすると/about?id=1というURLになる (/src/App.vue) <template> <div> <!-- クリックすると /about?id=1&page=2というURLになる--> <router-link :to= "{name:'about', query:{id:1, page:2}}"> ABOUT </router-link> <!-- こちらでも可能 --> <router-link to="/about?id=1&page=2"></router-link> <router-view></router-view> </div> </template> クエリはthis.$route.query.idで取得できる。 リダイレクト機能 (redirect) redirectを使うことで、リダイレクトを実装できる (/src/router.js 一部抜粋) export default new Router({ routes:[ { path: '/about', component:'About' }, { path:'*', // アスタリスクを指定することで任意のURLという意味になる redirect:'/' // 遷移先のURLを指定 } ] }) router-viewにトランジション (transition) router-viewにもトランジションを適用させることができる (/src/App.vue) <template> <div> <transitin name="fade" mode="out-in"> <router-view></router-view> </transitin> </div> </template> <style scoped> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity .5s } </style> # idを指定する (hash) クリックすると/about#nextというURLになる (/src/App.vue) <template> <div> <!-- クリックすると /about#nextというURLになる--> <router-link :to= "{name:'about', hash: 'next'}"> ABOUT </router-link> <!-- こちらでも可能 --> <router-link to="/about#next"></router-link> <router-view></router-view> </div> </template> 指定IDにスクロールさせる (scrollBehavior) トランジションがない場合のみ使用できる。これは、transitionがあると、#nextが発生する前にscrollBehaviorが起動するためである (/src/router.js 一部抜粋) export default new Router({ routes:[ { path:'/', component:'Home' } ], scrollBehavior(to, from, savedPosition) { // 前回の位置に戻る if(savedPosition) { return savedPosition } // URLにhashが含んでいたらハッシュの位置まで移動 if(to.hash) { return { selector: to.hash } } // ページの先頭に移動 return {x: 0, y: 0} } }) すべてのページの遷移時に実行する (beforeEach) /src/main.js import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false // to:$route(次の遷移先の状態) from:$route(前の状態) next:次の遷移先に進む関数 router.beforeEach((to, from, next) => { console.log('before each!') // 引数も取れる // next(false):次に遷移させない // next('/'):'/'に遷移 next() }) new Vue({ router, render: h => h(App) }).$mount("#app") 特定のページの遷移時に実行する (beforeEnter) boforeEnterを使う (/src/router.js 一部抜粋) export default new Router({ routes:[ { path: '/about', component:'About', beforeEnter(to, from, next) { console.log('before enter!') // 引数も取れる // next(false):次に遷移させない // next('/'):'/'に遷移 next() } }, ] }) ナビゲーションガードをコンポーネントに指定 Vueコンポーネントに記載する <script> export default { beforeRouteEnter(to, from, next) { // コンポーネントを描画するルートが確立する前 next() }, beforeRouteUpdate(to, from, next) { // コンポーネントを描画するルートが変更されたとき next() }, boforeRouteLeave(to, from, next) { // コンポーネント終了後（ナビゲーションから離れていく時） const isLeave = window.confirm("このページを離れますか？") if(isLeave) { next() }else { next(false) } } } </script> 遅延ローディング (const xx = () => import("./xxx.vue")) router.jsのimport分の記載方法を変えることで遅延ローディング（後からjavascriptを取得する）が可能 （router.jsの一部を抜粋） // ● 今までの書き方 // import Home from './views/Home.vue' // ● 遅延ローディングの場合 const Home = () => import(/* webpackChunkName: "Home" */ "./views/Home.vue") 参考
- 投稿日：2021-05-16T12:05:53+09:00
【Vue】VueRouterでページ遷移時に、URL履歴を残さない方法
はじめに VueRouterでページ遷移時に、URL履歴が残ってしまうことで少し困ってしまったのでメモを残します。 経緯 先日、Vueを使ってSPAで開発中にページからページCに遷移させる間にローディングページBを挟んで、ローディングページBでいろいろ処理をさせる形で開発をしていました。 その中でページCで、ブラウザバックしたらローディングページBに遷移できてしまうと気付きました。 さらに、ブラウザバック時はクエリパラメータを維持しているURLのままブラウザバックできてしまう... 方法 結論：VueRouterのpushではなくreplaceを使用すること Example.vue <template> ... </template> <script> ... push () { // VueRouterのHistoryに追加して遷移する this.$router.push('Next') }, replace () { // VueRouterのHistoryに追加しないまま遷移する this.$router.replace('Next') } ... </script> 参照
- 投稿日：2021-05-16T02:32:13+09:00
Vue.jsとReact.jsのプロジェクト作成から公開準備（※コーディングは含みません。）
Vue.jsとReact.jsのプロジェクト作成から公開準備 Javascriptで使用できるフロントエンド側のフレームワーク、VueとReactのプロジェクト作成コマンドを忘れないためと、ビルドしてからの流れについての説明が見当たらず、せっかく個人開発でやってみても誰にもリリースすることがないように記す。 なお、今回はそれぞれポートフォリオをフロントエンド側でのみ、作成したという程で作成しました。 動作環境 MacBook Air (Retina, 13-inch, 2018) BicSur 11.3.1 1.6 GHz Dual-Core Intel Core i5 6 GB 2133 MHz LPDDR3 Node.js v13.8.0 @vue/cli 4.5.13 各プロジェクトの作成 Vue.js vue create vue-portfolio React.js npx create-react-app react-portfolio インストール確認 Vue.js ..省略.. ? Successfully created project vue-portfolio. ? Get started with the following commands: $ cd vue-portfolio $ npm run serve React.js ..省略.. Success! Created react-portfolio at XXXXXXX/react-portfolio Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd react-portfolio npm start Happy hacking! インストール後のnpmサーバーを起動して画面の確認 Vue.js ■実行 cd vue-portfolio npm run serve ■結果 DONE Compiled successfully in 5762ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.10.9:8080/ Note that the development build is not optimized. To create a production build, run npm run build. No issues found. ■画像 React.js ■実行 cd react-portfolio npm start ■結果 Compiled successfully! You can now view react-portfolio in the browser. Local: http://localhost:3000 On Your Network: http://192.168.10.9:3000 Note that the development build is not optimized. To create a production build, use npm run build. ■画像 いじる ※自分だけのポートフォリオを作成してください。 今回はわかりやすくトップページのみ日本語に変更をしていきます。 Vue.js .src/views/Home.vue <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> --> <HelloWorld msg="ようこそ。あなたのVue.jsとTypeScript App"/> //上からの変更点 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src export default defineComponent({ name: 'Home', components: { HelloWorld } }) </script> React.js .src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> {/* Edit <code>src/App.js</code> and save to reload. */} <code>src/App.js</code>を編集と保存して再読み込み。{/* 上の行を変更 */} </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; ポートフォリオ公開準備 自分だけのポートフォリオを作成したら公開するために、ビルドを行なっていきます。 Vue.js STEP1:作成したコードをビルド 以下のコマンドを実行する npm run build STEP2:ビルド結果の確認 ビルド結果 「.dist」配下にビルドしたファイルが作成 DONE Compiled successfully in 11164ms File Size Gzipped dist/js/chunk-vendors.506821c6.js 118.83 KiB 42.80 KiB dist/js/app.67acf451.js 6.65 KiB 2.39 KiB dist/js/about.2b8983e6.js 0.34 KiB 0.26 KiB dist/css/app.aaf04fac.css 0.42 KiB 0.26 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html React.js STEP1:作成したコードをビルド 以下のコマンドを実行する npm run build STEP2:ビルド結果の確認 ビルド結果 「.build」配下にビルドしたファイルが作成 Compiled successfully. File sizes after gzip: 41.34 KB build/static/js/2.a9157932.chunk.js 1.63 KB build/static/js/3.4db56475.chunk.js 1.17 KB build/static/js/runtime-main.e0b02365.js 631 B build/static/js/main.5d1e222e.chunk.js 574 B build/static/css/main.9d5b29c0.chunk.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: npm install -g serve serve -s build Find out more about deployment here: https://cra.link/deployment 作成したものをAWS S3へアップロードしてリリース ※AWSアカウントを持っている前提で記載しております。 共通 公式HPに公開方法が記載されております。 そのため掻い摘んで説明 STEP1:S3バケットの作成 サービス検索ボックスより「S3」と検索 右側オレンジボタンの「バケットを作成」をクリック STEP2:一般的な設定 バケット名は小文字英数字と半角記号のみで設定（※一意になるように命名） AWSリージョンについては今回はデフォルトのまま（アジアパシフィック（東京）ap-northeast-1） STEP3:このバケットのブロックパブリックアクセス設定 「パブリックアクセスをすべてブロック」のチェックを外す 「パブリックアクセスのブロックをすべてオフにすると、このバケットとバケット内のオブジェクトが公開される可能性があります。」の確認にチェックを入れる STEP4:バケットの作成 指定項目以外についてはデフォルトのまま 右下の「バケットを作成」をクリック STEP5:静的ウェブサイトホスティング設定 作成したバケットをクリック プロパティタブを選択 「静的ウェブサイトホスティング」の「編集」をクリック 「有効にする」にチェックを入れ「ホスティングタイプ」に「静的ウェブサイトをホストする」がチェック入っていること 「インデックスドキュメント」に「index.html」を入力 右下の「変更の保存」をクリック STEP6:バケットポリシー アクセス許可タブをクリック バケットポリシー欄の編集をクリック 以下の内容を入力し、["arn:aws:s3:::Bucket-Name/*"]部分の[Bucket-Name]をバケット名へ変更 右下の「変更の保存」をクリック { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::XXXXXXXXX/*" ] } ] } STEP7:ビルドしたファイルのアップロード オブジェクトタブから「アップロード」をクリック 以下のファイルに対して、アップロードを行う Vueの場合は「.dist」配下のファイルすべて Reactの場合は「.build」配下のファイルすべて STEP8:外部ネットワークで確認 プロパティタブの「静的ウェブサイトホスティング」にある「バケットウェブサイトエンドポイント」をクリック アップロードした内容が閲覧できること 以上。 Appendix ?ビルドしたプログラムをすぐ見れない? VueもReactも共通してだが、ビルドされた「index.html」についてはサブディレクトリのままでは閲覧することができない。理由はビルド時にファイル内に記載される読み込みファイルが絶対パスのドメイン直下（ルートフォルダ）で記載がされているため、初心者はAWS S3などにあげて確認するほうがよい。
- 投稿日：2021-05-16T01:32:28+09:00
Vue.js勉強記録(初回)
Vue.jsの勉強記録(初回) はじめに Vue.jsを利用したWebアプリケーションの開発することを目的に勉強を開始する。 出来る限り毎日の成果をQiitaの記事として残す。 本記事には利用技術や環境面などの情報を記載しているため、変更があった場合、随時更新する。 開始時期：2021/5/16(日)～2021/7/15(木) 予定 目的 簡単なVue.jsを利用したWebアプリケーションを1つ完成する 自分自身でWebアプリケーションのアーキテクチャーを検討してみる テスト自動化にチャレンジする（テストのターゲットは問わない） 環境面 利用技術（都度更新予定） Vue.js XXXX 開発環境 XXXX XXXX 成果物 GitHub URL 現時点では未作成 参考文献 Vue.js入門 基礎から実践アプリケーション開発まで 次の記事