- 投稿日：2022-01-19T23:13:31+09:00
Vue3対応！ Nuxt3のドキュメントを適当に読んで基本的な使い方を学ぶ
はじめに Nuxt3に関する日本語の情報が少ないため、公式ドキュメントを読みつつ基本的な使い方を書いていく。 良かったらLGTM押してください！ 目次 Getting started ルーティングとか importとか その他新機能 感想 参考文献 Getting started まずNode.js,VSCodeを入れて、VSCode拡張のVolar(Veturは不要)を入れる。 次に以下のコマンドでプロジェクト構築から開発サーバー起動まで npx nuxi init nuxt3-app code nuxt3-app yarn yarn dev -o http://localhost:3000 にアクセスできるか確認 Nuxt2と違ってディレクトリも生成されないので環境構築はちょっとめんどくさいかも。 この辺は方針が変わったのか今後実装されるのかは不明。 開発サーバーが立ち上がったところで公式のGetting Startedが終わってしまったけど、ここからどうすればいいのかな？ とりあえずDocsを見てみると左側にディレクトリ構成が書かれている。 ここにそれぞれのディレクトリの役割が書いてあるようなので読んでいく。 ルーティングとか app.vue,layouts,pagesの項に説明がある。この辺りはNuxt2とあまり変わらないかな。 app.vueを以下のように変えればpagesディレクトリ以下のコンポーネントが表示されるらしい。 Nuxt2と同様にディレクトリ構造がそのままルーティングになる。 app.vue <template> <div> <NuxtPage/> </div> </template> http://localhost:3000/ にアクセスすると以下のコンポーネントが表示される。 pages/index.vue <template> <div>Hoge</div> </template> http://localhost:3000/hoge/huga にアクセスすると以下のコンポーネントが表示される。 pages/hoge/huga/index.vue <template> <div>Hoge Huga</div> </template> 動的ルーティングも可能だがここでは割愛。 共通のレイアウトはlayouts/default.vueを作成し以下のようにする。 layouts/default.vue <template> <div> // ヘッダーとか <slot /> // フッターとか </div> </template> slotに各ページのルートコンポーネントが挿入されるようになっている。シンプル。 もちろんdefault以外のカスタムレイアウトの設定も可能だがここでは割愛。 importとか Nuxt3の新機能でコンポーネントおよびvueでよく使う関数等が暗黙にインポートされる機能がある。 例えば、componentsディレクトリ以下のコンポーネントがimport不要で使える。 やり方は簡単で、例えばcomponents/hoge.vueがあるとすると <template> ... <Hoge /> ... </template> だけでOK。インポートは要らない。 components/huga/hoge/Example.vueのようにディレクトリがネストされている場合は <template> ... <HugaHogeExample /> ... </template> と書くと読み込める。 これってコーディングルールで制限しないとクソ長い名前になり得るので、正直要らんのではないかと思っちゃう。 まあそういうオプションもあるよってだけ。 あと、Nuxt2にはなかったディレクトリとしてcomposablesがある Reactで言うカスタムフック的なやつ？React詳しくないけど composablesディレクトリ以下に以下のように定義する。 composables/useHoge.ts import { useState } from '#app' export const useHoge = () => { return useState('hoge', () => 'hogehoge') } ここでuseStateが出てきたが、これはReactのアレとは違い、SSRと相性の良いrefの代替らしい。 SSRには詳しくないためよく分からないが、Nuxtのドキュメントには以下のように書いてある 「＜script setup>またはsetup()の外ではref()を使うなよ。メモリリークするぜ。」 これを読む限りコンポーネント内のローカル状態に関しては普通にrefを使えばいいということかな。 話を戻すが、composables以下で宣言したuseHogeは例によってインポート無しで使える <script setup lang="ts"> const hoge = useHoge() </script> <template> <div> {{ hoge }} </div> </template> 下で説明するuseFetchとかもこれの一種らしい 補足だが、状態管理でVuexの代替となり得るライブラリにPiniaというものがある Pinia 僕の書いたPiniaの記事も良かったらぜひ読んでください。 Nuxt3での設定方法はplugins/ディレクトリにこれを置くだけ plugins/pinia.ts import { defineNuxtPlugin } from '#app' import { createPinia } from 'pinia' export default defineNuxtPlugin((nuxtApp) => { const pinia = createPinia() nuxtApp.vueApp.use(pinia) }) その他新機能 データフェッチング useFetchだけ押さえとけばOKかな？ API叩く時に使うやつで、そのままデータがリアクティブになる。 <script setup> const { data } = await useFetch('/api/hoge') </script> <template> <span> {{ data.hoge }} </span> </template> これは便利そう メタタグ title, base, script, style, meta, linkのようなタグはコンポーネントとしてtemplate内に書ける 以下は公式から引用 <template> <div> <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'"> <Head> <Title>{{ dynamic }} title</Title> <Meta name="description" :content="`My page's ${dynamic} description`" /> <Link rel="preload" href="/test.txt" as="script" /> </Head> </Html> ... </div> </template> 直感的でいいね 感想 一通り読んだけどよく使いそうなのはこのぐらいかな？ 他の記事だとかなりベタ褒めされていたのだが、個人的にはNuxt2と比較してすごく便利になった感じはしないかも。 まあそもそもNuxt自体とても便利だし、得に難しいこともないので使い得な感じはする。 正式リリースが楽しみ 参考文献 公式
- 投稿日：2022-01-19T23:09:59+09:00
Vue.js 入門（第２回） - 算出プロパティ（computed）と監視（watch） -
はじめに Vue.jsに少し触れてみたので、その内容を「Vue.js入門」として、数回にわけて書いていこうと思います。 今回の２回目では「算出プロパティ（computed）」と「監視（watch）」を紹介します。 １回目は「Vue.js 入門（第１回） - Vue.jsでHello World と双方向データバインディング（v-model） -」を参照してください。 ※ここではVue.jsの2.x系（2.6.14）を使用しています。3.x系では書き方が異なるので注意してください。 1. 算出プロパティ（computed） 算出プロパティとは、あるデータや別の算出プロパティから算出される新たなデータのことです。 computedオプションを指定することで、算出プロパティを定義することができます。 インスタンスのデータが更新されると、それに依存している算出プロパティも更新されます。 1.1. jsの作成 js/main.js var vm = new Vue({ el: '#app', data: { firstName: 'yasushi', lastName: 'jp' }, computed: { // （１） getName: function() { // （２） return this.firstName + ' ' + this.lastName; } } }); （１）computedで算出プロパティを定義します。 （２）算出プロパティの名称をgetNameとして、getNameが返す値をfunction内に定義します。ここではデータ：firstNameとデータ：lastNameをスペースを付けて連結した値を返します。 1.2. HTMLの作成 index.html <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Vue.js（computed）</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> </head> <body> <div id="app"> <p>Vue.jsのバージョンは {{ Vue.version }} です。</p> <p>firstName: <input type="text" v-model="firstName"></p> <!-- （１） --> <p>lastName: <input type="text" v-model="lastName"></p> <!-- （２） --> <p>Name: {{ getName }}</p> <!-- （３） --> </div> <script src="js/main.js"></script> </body> </html> （１）の入力値をfirstNameと紐付けます。 （２）の入力値をlastNameと紐付けます。 （３）でmain.jsの算出プロパティで定義したgetNameを表示します。 1.3. 動作確認 ブラウザでindex.htmlを開くと以下の通り表示されます。 firstNameやlastNameに入力すると、NameにfirstNameとlastNameを連結した値が表示されます。 2. 監視（watch） watchオプションを指定することで、データや算出プロパティの変更を監視することができます。 オプションのキーに変更を監視したいプロパティ名を設定すると、そのプロパティ名の値が更新された際に関数が実行されます。 実行される関数の第１引数に変更後の値、第２引数に変更前の値が渡されます。 2.1. jsの作成 js/main.js var vm = new Vue({ el: '#app', data: { firstName: 'yasushi', lastName: 'jp', oldName: '', // （１） newName: '' // （２） }, computed: { getName: function() { return this.firstName + ' ' + this.lastName; } }, watch: { // （３） getName: function(newVal, oldVal) { // （４） this.oldName = oldVal; // （５） this.newName = newVal; // （６） } } }); （１）（２）データにoldNameとnewNameのプロパティ名を定義します。 （３）watchを指定します。 （４）算出プロパティのgetNameを監視します。第１次引数のnewValには変更後のgetNameの値が、第２引数のoldValには変更前のgetNameの値が渡されます。 （５）oldNameに変更前の値を設定します。 （６）newNameに変更後の値を設定します。 2.2. HTMLの作成 index.html <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Vue.js（computed）</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> </head> <body> <div id="app"> <p>Vue.jsのバージョンは {{ Vue.version }} です。</p> <p>firstName: <input type="text" v-model="firstName"></p> <p>lastName: <input type="text" v-model="lastName"></p> <p>Name: {{ getName }}</p> <!-- （１） --> <p>Name(old): {{ oldName }}</p> <!-- （２） --> <p>Name(new): {{ newName }}</p> <!-- （３） --> </div> <script src="js/main.js"></script> </body> </html> （１）算出プロパティgetNameを表示します。getNameの値は入力項目の「firstName」と「lastName」をスペースを付けて連結した値となります。 （２）変更前の値のoldNameを表示します。 （３）変更後の値のnewNameを表示します。 2.3. 動作確認 ブラウザでindex.htmlを開くと以下の通り表示されます。 入力項目の「firstName」と「lastName」を変更すると、「Name」の値が変更され、変更前の「Name」（Name(old)）と変更後の「Name」（Name(new)）が表示されます。 参考 Vue.js とほほのVue.js入門 リンク Vue.js 入門（第１回） - Vue.jsでHello World と双方向データバインディング（v-model） -
- 投稿日：2022-01-19T21:34:58+09:00
Webpacker::Manifest::MissingEntryErrorでコンパイルはされているのに読み込まれない
はじめに 最近Railsの開発環境を作成しています。 こちらの記事で構築手順を載せています。 そこで、GitにリポジトリをあげたコードをCloneして起動したところうまく起動できない事態が発生したため手直しのさいに解決した方法をまとめます。 問題 WebpackerとRailsのDocker環境を作成して、起動したところ以下のようなエラーが発生します。 Webpackerのログをみたところコンパイルはされていそうでした。 webpacker_1 | js/main-aa1872663912a6956e52.js.map 756 KiB main [emitted] [dev] main webpacker_1 | manifest.json 654 bytes [emitted] webpacker_1 | ℹ ｢wdm｣: Compiled successfully. ネットでも調べましたが、自分の欲しい答えに行きつかず自力で解決しましたので紹介します。 解決方法 実はこのエラー2回遭遇しました。 1回目 タイプミス <%= javascript_pack_tag 'application' %> # ここでエラー <%= stylesheet_pack_tag 'application' %> エラーの場所がこのように特定されているので、インポート対象のファイルを確認したところ javascripts/packs/application.js import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" import "bootstrap" import '../javascripts/application.js' # applicationがapplocationになっていた import '../stylesheets/applocation.scss' Rails.start() Turbolinks.start() ActiveStorage.start() applicationがapplocationにタイプミスしておりました。 2回目 manifest.json問題 これが今回特定するのにかなり検証してつきとめた問題になります。 Webpackerではコンパイルをした際に/public/packs/manifest.jsonに情報の記録を行います。 このmanifest.jsonはWebpackerコンテナとRailsコンテナどちらにもある必要があります。 manifest.jsonを作成するのはcommand: webpack-dev-serverで起動しているwebpackerコンテナなのでRailsコンテナにはボリュームを共有する必要がありました。 初回起動はGit cloneしてきているのでpublic/packs/manifest.json自体はignoreされておりディレクトリにはありません。その状態で起動するとWebpackerコンテナのみにファイルがある状態になりエラーの原因となります。2回目以降の起動はローカルにできた/public/packs/manifest.jsonがマウントされて動くというメカニズムになっていました。 そこで、RailsとWebpackerコンテナ間で/publicを共有することで対応します。 docker-compose.yml version: "3.9" services: rails: build: . container_name: rails command: bundle exec puma -C config/puma.rb volumes: - .:/myapp - public-data:/myapp/public # 追加 - tmp-data:/myapp/tmp - log-data:/myapp/log - /myapp/node_modules env_file: - .env depends_on: - db environment: WEBPACKER_DEV_SERVER_HOST: webpacker webpacker: build: . volumes: - .:/myapp - /myapp/node_modules - public-data:/myapp/public # 追加 command: ./bin/webpack-dev-server environment: WEBPACKER_DEV_SERVER_HOST: 0.0.0.0 ports: - "3035:3035" user: root db: image: mysql:8.0.27 container_name: db environment: TZ: Asia/Tokyo MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} ports: - "3306:3306" volumes: - db:/var/lib/mysql web: build: context: containers/nginx volumes: - public-data:/myapp/public - tmp-data:/myapp/tmp ports: - 80:80 depends_on: - rails volumes: db: driver: local bundle: driver: local public-data: # 追加 tmp-data: log-data: 注意としてはpublic/packs/manifest.jsonが生成されて共有されるまで少し時間がかかるので、エラーがでてしまうかもしれないというところです。なんどかリロードすれば読み込まれるかと思います。 おわりに gitからクローンして手を加えないといけない環境になってしまったのでなんとか解決したくかなりの検証を行ってここまでたどり着きました。ネットにも記事がありませんでしたので誰かの助けになればと思います。 このような検証をすると深い理解ができるようになります
- 投稿日：2022-01-19T09:11:33+09:00
Firebase + Vue.js/Vue CLI/Vuex/Vuetify でSPAなメモ帳アプリを作ってみた
最近初めて Firebase + Nuxt.js を使ったプロジェクトにアサインしたのですが、 あまりにもちんぷんかんぷん。。。 勉強しなきゃ...と思っていたら最高のタイミングでUdemyのクリスマスセールが始まったので ここぞとばかりに色々な講座をまとめ買いしました✌️ まずは Vue.js の勉強から！ 参考にした講座 → Vue.js + Firebaseで作るシングルページアプリケーション 作ったもの メモ帳です。 講座ではアドレス帳アプリが作成できますが、少し変えてみました。 Googleアカウントでログインをすると使えるようになります。 メモを追加する日の日付が自動で反映されます。 追加・編集・削除ができます。講座では物理削除だったのを論理削除に変えています。 左上のハンバーガーメニューでログインしているGoogleアカウントの確認と、機能一覧が見れます(まだメモ帳しかありません...)。 こちらから実際に触れます → my-memo Githubはこちら → 福井のGithub 使用したライブラリやツールなど Vue CLI コマンドラインでVue.jsの開発環境をセットアップするためのツール Vue.jsの開発に必要なツール類を質問に答えるだけでまとめてインストールしてくれるので簡単にVue.jsの環境を構築することができる Vuex Vue.js上のコンポーネント間のデータ(状態)を管理するためのライブラリ Vue Router Webページのルーティングを実装してくれる公式のライブラリ SPAが構築できる Vuetify Vue.jsで使用できるマテリアルデザインのUIフレームワーク 勉強したこと Vue.jsの基礎(構文など) ライフサイクルについて コンポーネントについて Vue CLIによる環境構築の方法 Vue Routerの設定方法 Vuetifyの設定方法と構文 Vuexによる状態管理の方法 Firebaseの導入方法 Authenticationを使用したGoogleアカウント認証機能 Cloud Firestoreを使用したデータベースの機能 Hostingを使用したアプリケーションの公開 これからやりたいこと その日のタスクを忘れがちなのでTodoリストも追加したい！ Nuxt.jsの勉強 & アウトプットもしたい！ 以上...！ これで終わりではなく、Todoリストなども作成したり、使いやすいサイトにどんどん改修していけたらと思ってます。 Vue.js、Firebase以外にも勉強したいことがたくさんありすぎるので、 コツコツ積み上げ頑張りますm(_ _)m