2021.01.25目次Nuxt.jsでローディング(Loading)画面を実装するNuxt.jsでローディングを表示するには独自のローディング処理を実装するコンポーネントのサンプルコードTypeScriptで書く場合のサンプルコード解説nuxt.config.jsを修正する動作確認する参考Nuxt.jsでローディング(Loading)画面を実装する掲示板アプリでローディング画面を作成しました。ローディングは通信中にユーザーに待機してもらうための画面になります。本記事ではローディング画面を使う方法と独自のローディング画面の実装方法について記載しています。Nuxt.jsでローディングを表示するにはNuxt.jsには標準でローディングを表示する機能が備わっています。これは画面上部に表示されるプログレスバーのようなものです。こんな感じで、画面上部に左から右にプログレスバーのようなものが動きます。任意の箇所で、下記を呼び出すと表示されます。this.$nuxt.$loading.start();処理を終わりたい箇所で、下記のように記載すると止まります。this.$nuxt.$loading.finish();標準だとわかりにくいため、わかりやすくするために独自のローディング処理を実装してみました。独自のローディング処理を実装する今回はグルグル回るローディングを実装してみました。Loadingコンポーネントを作成して、nuxt.config.jsに設定を入れると実装できます。コンポーネントのサンプルコードcomponents/Loading.vueを作成します。コードは下記のようになります。}}</style>TypeScriptで書く場合のサンプルコードscriptの箇所をtypescriptで書く場合は下記のようにします。}}</script>解説templateタグの箇所に表示される内容を記載します。ローディング画面のタグを記載しています。タグの最初の方にv-if="loading"という記述があり、loadingプロパティがtrueだったら表示されます。scriptタグにはコンポーネントの処理を書いています。finishならfalseとしています。startが呼ばれたらtrueになって表示される感じですね。styleタグにはLoadingを表示する画面のCSSとアニメーションするCSSを定義しています。nuxt.config.jsを修正するnuxtの設定ファイルの項目にloadingプロパティを用意して、作成したコンポーネントまでのパスを設定すればOKです。'./components/Loading.vue'あとは、同じようにthis.$nuxt.$loading.start();とthis.$nuxt.$loading.finish();を呼び出して使用できます。動作確認する今回実装したローディングの挙動ですが、こんな感じになります。公式のローディングプロパティについてです。ルート間遷移時にローディングプログレスバーを表示するコンポーネントを用意しています。このコンポーネントをカスタマイズしたり、無効にしたりできます。独自のコンポーネントの作成もできます。ja.nuxtjs.org実装してみたgithubのコードです。GitHub.github.comNuxt.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクPHPPHPで乱数を取得する方法!(mt_rand/rand)PHPで乱数(ランダムな値)を取得する方法について書いています。乱数を取得するには、下記の関数を使うことができます。・mt_rand・rand2つの関数を解説した後に、違いについて書いています。載せているサンプルコードはPHPのバージョン8...PHPPHPの配列の値を展開(アンパック)する...演算子についてPHPの配列の値を展開できる...演算子の使い方について書いています。スプレッド演算子と呼ばれることもあります。今回は...演算子を使って、下記の挙動を確かめます。resetの使い方について書いています。resetコマンドを使用すると、ステージエリアに追加された状態をリセットしてくれます。リポジトリにコミットされた任意の履歴まで、ソースコードを戻すことが可能です。sorted)Pythonのリストをソートする方法について書いています。ソートはリスト内の要素を、小さい順や大きい順などに並び替えることです。Pythonのリストをソートする時にはsorted関数を使うか、リストからsortメソッドを呼ぶことでソートする...JavaScriptJavaScriptのbreakの使い方!(ループを抜ける)JavaScriptのbreakの使い方について書いています。breakの使い方について解説した後に、下記の内容について説明しています。(追加・削除・含む)JavaScriptの集合(Set)の使い方について書いています。最初にSetの使い方を解説して、下記の操作について書きました。・要素を追加する・要素を含むか確認する・要素を削除する・全ての要素を削除する・配列の重複を削除する・要素数を取得...JavaScriptJavaScriptのfor...ofの使い方!繰り返しサンプル4選!JavaScriptのfor...ofの使い方について書いています。for...ofを使うことで、指定した要素でループ処理することができます。簡単に解説した後に、いろんな要素をループするサンプルコードを書いてみました。追加/取得/検索/削除など)PHPで連想配列を使う方法についてまとめました。連想配列の宣言から始まって、連想配列に対して、下記の操作をします。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。目次Nuxt.jsでローディング(Loading)画面を実装するNuxt.jsでローディングを表示するには独自のローディング処理を実装するコンポーネントのサンプルコードTypeScriptで書く場合のサンプルコード解説nuxt.config.jsを修正する動作確認する参考Vue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。