Vue コンポーネントにおけるロジック再利用のサンプル。Mixins から Composition API まで。

サンプル まずは普通に Mixins Higher-Order Components (HOCs) Scoped Slots Composition API ^3.0.0-rc.1 で動作確認しています。Composition API パターン以外は 2 系でも基本的には動くと思います。 サンプル マウスカーソルのポジションを表示するコン…

AST に変換して HTML の構造を変形する

小ネタです。例えば以下のような HTML の <h3> ではじまるコンテンツを <section> で囲みたい時、正規表現だとちょっとやりづらかったりします。 <h2>H2</h2> <p>...</p> <h3>H3</h3> <p>...</p> <h3>H3</h3> <p>...</p> <h2>H2</h2> <p>...</p> <section> <h3>H3</h3> <p>...</p> </section> <section> <h3>H3</h3> <p>...</p> </section> そんな時は AST に変換する Parser を利用すると簡単に構造変形をするこ…</section></h3>

シンプルな Web サイト用の webpack スターターキット

これは何 使い方 メモ webpack で 複数 HTML ページ コミット時に Lint チェックしたい Babel + TypeScript の設定 browserslist ESLint + prettier の設定 stylelint の設定 Jest の設定 CSS 読み込み ビルド時のファイル名をどうするか パスの解決 環境変…

npm のコマンド `docs` `repo` `view`

npm docs npm repo npm view パッケージのドキュメントやソースコードを簡単に確認するために npm docs や npm repo コマンドをよく使います。(最近知りました) 例えば @storybook/addon-docs のドキュメントやリポジトリを確認したい場合、以下のコマンド…

AtCoder を JavaScript で

GitHub - ryotah/atcoder-js AtCoder の問題を JavaScript (Node.js v5.12.0) で解くための環境を作ってみました。 Node のバージョン nodenv で Node のバージョンを v5.12.0 に指定しています。これで、自分の環境では正解しているのに提出したらライタイ…

ESLint ルール追加したいお気持ち

今のルール 追加検討したルール レビュー max-lines-per-function max-statements max-depth 追加ルール no-else-return 結論 その他 既存の Nuxt プロジェクトに ESLint のルールを追加した時に調べたことを整理しました。 Lint の設定ファイルを秘伝のタレ…

<template> に存在していない Vue コンポーネントを動的に追加

利用ケース メモ $el new Bar() or new Vue() ? 生成した Vue インスタンス内で Router などが使えない Vue インスタンスを作成して $mount すればおk。 add() { const instance = new Bar({ propsData: { date: new Date().valueOf() } }) .$on("click", da…

TypeScript お試し環境をお手軽コピペコマンドで

小ネタです。コピペでおk。Mac なら動くと思います。 VS Code と VS Code ESLint extension をインストールしておくと ESLint の自動修正も動くので快適です。 echo mkdir mkdir ts-`date '+%Y%m%d%H%M%S'` && cd $_ echo typescript npm init -y && npm i -…

コンポーネントの横断的関心事を処理する方法 Mixins, HOCs, Render Props, Hooks を振り返る

これは何か キーワード 横断的関心事とは Higher-Order Components Vue と Higher-Order Components Render Props Vue の Scoped Slots Render Props と Higher-Order Components Mixins Mixins => HOCs => Render Props => Hooks Vue Composition API Compo…

ESLint の設定 (Nuxt TypeScript)

Nuxt で開発する時の ESLint の設定ファイルです。Nuxt のバージョンは 2.10 です。 前提 設定ファイル ESLint の設定ファイルを読む 基本知識 実際に適用されるルールを確認 設定ファイルを拡張する extends 命名規則 @nuxtjs/eslint-config-typescript い…

Date と Timezone

ちょっとしたメモです。でてくるサンプルコードは JavaScript です。 ISO 8601とは 日付と時刻の表記に関するISOの国際規格 2010-10-10T00:00:00.000+09:00 みたいなやつ ISO 形式 (ISO 8601) の文字列判定 - ryotah’s blog 1888年以前は東京のオフセットは …

Nuxt のモジュールをテストする

モジュール本体 テストの方針 (WIP) テストファイル 参考 以下のような構成のモジュールをつくったとして、テストをどのように書くことができるか整理します。 . ├── README.md ├── __tests__ │ ├── fixtures │ │ ├── nuxt.config.js │ │ └── pages │ │ └── …

Nuxt のライフサイクルの中でページの状態をいつリセットするか

詳細は以下のレポジトリの README の中に。 GitHub - ryotah/When-Should-a-Page-State-is-Reset-in-Nuxt-Lifecycle

コンポーネント単体テストについてつらつらと

書きます。 何をテストするのか なぜ書くのか 入力と出力とは何か テストを書く前に調べること 一般的なコンポーネントのテストシナリオ Vue 単体テストのサンプル props と emit のテスト nuxt-link (router-link) を利用しているコンポーネントのテスト Ro…

Vue SSR 環境構築メモ

Vue SSR ガイド, vuejs/vue-hackernews-2.0 を参考に環境構築を試してみた時のメモです。 サーバサイドで Vue をコンパイルする クライアントとサーバのコードをわける (Webpack) ルーティング プリフェッチを実現 サーバとクライアント、それぞれをビルドす…

10月メモ・リンク集

10月に調べたことのメモです。 Vue, Nuxt 関連 Migrate to Nuxt 2.0 Nuxt の options.ignore を利用して pages 内にコンテナやストアを配置 ページ遷移時に権限確認 不要なビルド処理を削減 文字コード・正規表現 Unicode Property Escapes 文字コードの変換…

VeeValidate メモ

Vue のバリデーションライブラリ VeeValidate の使い方をまとめたもの。(VeeValidate 2.1.0-beta.11, Vue 2.5.17) 基本的な使い方 バリデーションルールのシンタックス カスタムルール さらに詳しく エラーメッセージ エラーメッセージを変更/追加する 入力…

9月メモ・リンク集

9月に調べたことのメモです。 Vue 関連 ルーティング関連 i18n 言語データの整理方法メモ その他 Vue 関連 What is the best way to access this.$router.push() / router.push() inside the Vuex? · Issue #1384 · nuxt/nuxt.js · GitHub v-on to bind dom …

Vue.js vue-router Nuxt.js の各フック (など) がいつ実行されるかメモ

続編のようなものを書きました。 ryotah.hatenablog.com GitHub - ryotah/vue-vue-router-nuxt-hooks ログに表示される内容: [INFO] vue: [page] / [hook] Vue.js のライフサイクルフック created, beforeUpdate, destroyed, etc. [INFO] vue-router: [page]…

8月メモ・リンク集

8月に調べたことのメモです。 Vue 関連 基礎 ちょっと応用 Angular 関連 JavaScript その他 その他 Vue 関連 基礎 Vue.js 学習メモ - ryotah’s blog Vuex 学習メモ - ryotah’s blog Nuxt.js 学習メモ - ryotah’s blog How to redirect with vue-router? · Is…

ISO 形式 (ISO 8601) の文字列判定

ISO 8601 - Wikipedia ISO 8601は日付と時刻の表記に関する国際規格。 // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString new Date().toISOString() // => "2018-08-31T04:56:23.130Z" const ISO8601_DAT…

Vue のリアクティブシステム

vue

勉強会で発表した資料です。 Vue のリアクティブシステム、その中でも依存関係のある関数の収集と再実行をどのように実現しているのかについて解説しています。Object.defineProperty, Dep Class and Watcher. --- # 話すこと - Vue のリアクティブシステム…

Nuxt.js 学習メモ(公式ドキュメントの雑な抜粋)

これは何か Nuxt.js ガイド プロローグ はじめる インストール ディレクトリ構造 設定 ルーティング ビュー 非同期なデータ アセット プラグイン モジュール Vuex ストア コマンド 開発ツール その他 これは何か Nuxt.js の公式ドキュメントを読んだときのメ…

Vuex 学習メモ

これは何か Vuex ガイド Vuex とは何か? Vuex 入門 コアコンセプト ステート ゲッター ミューテーション アクション 実践的な例として、ショッピングカートをチェックアウトするアクション モジュール アプリケーションの構造 プラグイン 厳格モード フォー…

Vue.js 学習メモ

vue

これは何か Vue.js ガイド 基本的な使い方 Components In-Depth トランジションとアニメーション 再利用と構成 ツール スケールアップ 内部 移行 その他 その他のドキュメントへのリンク これは何か Vue.js の公式ドキュメントを読んだときのメモです。 気に…

(WIP) Learn Angular

これは何か 始める前に 最初に 基礎 基礎(適宜) 応用 RxJS ngrx TypeScript VS Code エクステンション for Angular for TypeScript for Lint and Code format Util これは何か Angular を習得するために必要な情報をまとめてみようとしたもの Angular の …

(WIP) Angular Testing メモ

これは何か 前提知識 Jasmine 用語 Service Tests Testing without beforeEach() Testing HTTP services Component Test Basics Component DOM testing コンポーネントを生成するテストコード nativeElement DebugElement Component Test Scenarios Componen…

6月メモ・リンク集

6月に調べたことのメモです。 Angular 関連 ngrx 関連 ngrx 実装メモ 結果 Actions Reducers Effects Container CSS 関連 Angular 関連 (WIP) Angular Testing メモ - ryotah’s blog Angular のドキュメント + テストに関する前提知識(用語、Jasmine使い方…

5月メモ・リンク集

5 月に調べたことのメモです。 Angular 関連 third party lib Testing in ngrx Version 6 Rx 関連 catchError Rails 関連 その他 Angular 関連 third party lib stories global scripts · angular/angular-cli Wiki · GitHub 例えばグローバルに jQuery を i…

4月メモ・リンク集

4 月に調べたことのメモです。 Angular 関連 Angular 6 モーダルの状態を ngrx で管理する ngrx の状態管理を Router (URL) 起点にする Rails 関連 マイグレーション Active Record クエリインターフェイス Active Record コールバック JSのテスト 関連 Dock…