この記事の目的 Vue3 の開発環境を 30分以内に構築する！ 対象者 とりあえず Vue3 が動く環境が欲しい 素の Vue で開発したい（Nuxt.js などのフレームワークを使用しない） TypeScript で開発したい 条件 Docker, node は既に入っている それでは早速いきましょう? Step1. ローカルで適当にプロジェクト用のフォルダ掘る % mkdir vue-otameshi 名前は適当で OK です。とりあえず vue-otameshi （vue お試し）で。 Step2. docker-compose.yml 書く vue-otameshi % touch docker-compose.yml docker-compose.yml version: "3" services: setup: image: node:latest volumes: - .:/srv:cached - ~/.ssh/:/root/.ssh:ro - ~/.gitconfig:/root/.gitconfig working_dir: /srv command: yarn install app: image: node:latest ports: - 8080:8080 volumes: - .:/srv:cached working_dir: /srv command: yarn serve Step3. @vue/cli を install する vue-otameshi % docker-compose run --rm setup yarn add @vue/cli めちゃくちゃ時間かかりますが、少しの辛抱です。。 次のように出ていたら成功してます。 ├─ xtend@4.0.2 ├─ y18n@5.0.8 ├─ yallist@4.0.0 ├─ yaml-front-matter@3.4.1 ├─ yargs-parser@20.2.9 ├─ yargs@16.2.0 ├─ yauzl@2.10.0 ├─ zen-observable-ts@0.8.21 └─ zen-observable@0.8.15 Done in 691.11s. 691秒は長すぎる? Step4. vue プロジェクトを作成する vue-otameshi % docker-compose run --rm app ./node_modules/.bin/vue create . 諸々設定入ります〜 よくわからない方はとりあえず真似すれば問題なしです！ Vue CLI v4.5.13 ? Generate project in current directory? Yes Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart- sass) ? Pick a linter / formatter config: Standard ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No ? Pick the package manager to use when installing dependencies: Yarn Vue CLI v4.5.13 ✨ Creating project in /srv. ? Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... 成功したみたいです。 success Saved lockfile. Done in 314.19s. ⚓ Running completion hooks... ? Generating README.md... ? Successfully created project srv. ? Get started with the following commands: $ yarn serve WARN Skipped git commit due to missing username and email in git config, or failed to sign commit. You will need to perform the initial commit yourself. Step5. docker でサーバーを起動する vue-otameshi % docker-compose up app Starting vue-with-tailwind-css-practice_app_1 ... done Attaching to vue-with-tailwind-css-practice_app_1 app_1 | yarn run v1.22.4 app_1 | $ vue-cli-service serve app_1 | INFO Starting development server... . . . app_1 | DONE Compiled successfully in 22128ms1:49:35 PM app_1 | app_1 | <s> [webpack.Progress] 100% app_1 | app_1 | app_1 | App running at: app_1 | - Local: http://localhost:8080/ app_1 | app_1 | It seems you are running Vue CLI inside a container. app_1 | Access the dev server via http://localhost:<your container's external mapped port>/ app_1 | app_1 | Note that the development build is not optimized. app_1 | To create a production build, run yarn build. app_1 | app_1 | No issues found. 起動完了✨ localhost:8080 に例の画面が出てきたら OK です。 お疲れ様です。 見ていただきありがとうございました?‍♂️

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。

概要 plunkerでvueやってみた。 phinaやってみた。 サンプルコード new Vue({ el: '#app', 　data: { //phina: phina, //scene:, }, beforeMount: function() { //mounted() { this.init() }, methods: { init() { phina.globalize(); phina.main(function() { var app = GameApp({ startLabel: 'splash', scenes: [{ className: 'SplashScene', label: 'splash', nextLabel: 'title', }, { className: 'TitleScene', label: 'title', nextLabel: 'count', }, { className: 'CountScene', label: 'count', nextLabel: 'pause', }, { className: 'PauseScene', label: 'pause', nextLabel: 'result', }, { className: 'ResultScene', label: 'result', nextLabel: 'title', }, ], }); app.run(); }); }, } }); 成果物 以上。

概要 Composition APIを用いて作成したVuex的なGlobal Stateを単体テストしようと思って色々調べた結果を小ネタとしてQiitaに共有しておきます。 今回のTipsが反映されたアプリケーションをGitHubにあげています。 ちなみに今回はComposition APIのライブラリはNuxt.jsを使っているので、@vue/composition-apiではなく、@nuxt/composition-apiを使っていますが、本記事の内容は@vue/composition-apiにも適応できる考え方だと思っています。 またテスト周りのツールはJest + @vue/test-utilsになります。 composition functionを単体テストする そもそもComposition APIで提供されているcomputed, watch, onMountedなどの機能はsetupコンポーネントオプション内で呼ばれることを想定しており1、@nuxt/composition-apiで提供されるuseContextも同様の思想で設計されています。 Composition API の使用を開始するには、初めに実際に使用できる場所が必要です。Vue コンポーネントでは、この場所を setup と呼びます。 ... オプション API に比べて Composition API の機能を完全にするには、ライフサイクルフックを setup の中に登録する必要があります。 https://v3.ja.vuejs.org/guide/composition-api-introduction.html より引用 なので例えば以下の様なcomposition functionをテストしたい場合は、useCounterをテストケースから直接呼び出すのではなく、setupコンポーネントオプション内で呼び出す必要があります。 counter.ts import { computed, reactive } from "@nuxtjs/composition-api" interface State { count: number } export function useCounter() { const state: State = reactive({ count: 0 }) const increment = (state: State) => () => state.count++ return { count: computed(() => state.count), increment: increment(state) } } しかし愚直に書くと、テストケースごとにVueコンポーネントのマウント処理を書いていく必要があり、手間はかかるし、テストコードの可読性も下がるし、結構しんどいところはあります。 counter.test.ts import { mount } from "@vue/test-utils" import { useCounter } from "./counter.ts" describe("Counter", () => { it("increment", () => { mount( Vue.extend({ setup() { const { count, increment } = useCounter() increment() expect(count.value).toBe(1) return {} }, template: "<div></div>" } ) }) }) なので少し面倒ですが、以下の様なヘルパーを定義することによって比較的スマートにテストコードを書くことができます。 testing.ts export const createSetupScope = (localVue: typeof Vue, done: jest.DoneCallback, mocks = {}) => { return (test: () => (unknown | Promise<unknown>)) => { const stub = Vue.extend({ setup() { const callable = test as any const result = callable.constructor.name === "AsyncFunction" ? callable() : new Promise((resolve, reject) => { try { resolve(callable()) } catch (e) { reject(e) } }) result.then(() => done()).catch((e: any) => done(e)) return {} }, template: "<div></div>" }) mount(stub, { localVue, mocks }) } } counter.test.ts import { createLocalVue } from "@vue/test-utils" import { useCounter } from "./counter.ts" import { createSetupScope } from "./testing.ts" const localVue = createLocalVue() describe("Counter", () => { it("increment", done => { const setup = createSetupScope(localVue, done) setup(() => { const { count, increment } = useCounter() increment() expect(count.value).toBe(1) }) }) }) 一応の注意点としては俯瞰してみるとexpectが実行されるのは、setupコンポーネントオプションの中で実行されるので、通常のテストとは違い非同期でテストが実行されるということです。 つまりitのコールバックの処理が最後まで到達しても、テストが完了していないことを意味します。 しかし幸いにもJestには非同期で実行されるテストに対応するために、itのコールバックの第一引数にDoneCallbackが渡されるように設計されています。 非同期で実行されるテストにおいて、ユーザー側でDoneCallbackを任意のタイミングで呼び出すことで、itの処理が終了したあとでも非同期な処理の実行が完了することを待つことができます。 今回の場合、そういった背景から個人的にはComposition APIを使った実装コードのテストをする場合、itのコールバックに渡されたDoneCallbackをcreateSetupScopeに渡すようにしていこうかなとは思っています。 といいつつも実は@nuxtjs/composition-api: ^0.24.6時点では記載されているテストコードはsetupコンポーネントオプションの中で実行せずとも成功しますので、今後はもしかすると、MVVMでいうところのModelを表現するcomposition functionを作る分には、setupコンポーネントオプション外で提供されるAPIが実行できる世界が実現するかもしれません。 ↩

Vue3.xで、moment.jsを使いたかった人のメモです。良い感じに日付整形したり演算できたりするようになるJSのライブラリですね。 ※後から気づいたのですが、Vueのライブラリでvue-momentなるものがあり、こちらも候補に入れたかったなぁと思っています。 install まずはインストールします。 $ npm install moment --save # ← npm $ yarn add moment # ← yarn usage たとえば、以下のように書けます。 Vue2.xのコードを参考にするとfiltersを使っていることがありますが、Vue3では使えないので、以下はmethodsに書いています。 <template> <div> <div> {{ moment(new Date, 'MMMM Do YYYY, h:mm:ss a') }} </div> </div> </template> <script> import moment from 'moment'; export default { methods: { moment(date, format) { return moment(date).format(format) } } } </script> マスタッシュが展開されると、view上は以下のようになります。※時間帯はご愛嬌です。 July 24th 2021, 3:08:28 am format例は公式はもちろん、「全61件！Moment.js日付フォーマット実例」なども参考にさせていただこうと思います。