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…

3月メモ・リンク集

3月に調べたことのメモです。 Angular関連 React関連 CircleCI関連 2.0 Docs - CircleCI(オフィシャルドキュメント) Angular対応 その他 Rails関連 Android関連 その他 Angular関連 DESIGN DOC (Ivy): Separate Compilationを読む - らこらこブログ RxJS: …

Rails チュートリアル復習用メモ

以下を参考にした、Rails アプリを作成する手順の覚書です。 Ruby on Rails チュートリアル:実例を使って Rails を学ぼう GitHub - yasslab/sample_apps: Rails チュートリアルの各章が終わった状態を集めたリポジトリです。 モデルとコントローラーの基本…

2月メモ・リンク集

2月に調べたことのメモです。 リサイザー Show More/Less コンポーネント ドラッグアンドドロップ(dnd) Googleスプレッドシート的なスクロール AngularのDIに関して Ruby, Rails関連 VS CodeでRubyを書く その他 リサイザー angular-resizer - StackBlitz …

1月メモ・リンク集

1月に調べたことのメモです。 Angular関連 Date系ライブラリとIANA 複数のプロジェクタで共有したいロジックとコンポーネントをパッケージ化した 必要な前提知識 ReactのHOCs その他 Angular関連 AngularのCDK Tableのコードを読みながら、Viewの組み立て方…

AngularのCDK Tableのコードを読みながら、Viewの組み立て方について調べる

CDK Tableのドキュメント 0: 完成版 1: コンポーネントを動的にaddする 2: 対象のコンポーネント内にaddする 3: コンポーネントのaddからテンプレートを取得してaddする方式に変更 4: table.ts, row.ts, cell.tsを用意 5: 行定義を追加(RowDef) 6: ヘッダ…

12月メモ・リンク集

12月に調べたことのメモです。 Angular関連 View作成や再利用について Form関連 Dateライブラリ VSCode コードフォーマット Go環境用意 Reactチュートリアル Tutorial その他 Google Analytics コンポーネントを設計するときに Angular関連 View作成や再利用…

moment -> Luxon

Momentと比較してみて 気に入ったところ なるほどと思ったところ その他のmomentとの違い 準備 型定義ファイル インポート 基本的な書き方 作成 変更 出力 日本語にする タイムゾーンの変更 今後の懸念 デモ Refs Refs Momentと比較してみて 使ってみて1週間…

Parcelを利用してReact × Typescriptの環境を用意

ちょっとしたモック作成や動作確認をしたいときに使ってみようかと思います。 Parcel v1.2.0を利用。 準備 Parcelをインストール npm install -g parcel-bundler tsconfig.jsonを用意 { "compilerOptions": { "target": "es5", "module": "commonjs", "stric…

ローダーと通信エラーの実装

ローディング ローダーの種類 Aの実装方針 actionとstate stateをsubscribe Bの実装方針 利用例 stateをsubscribe BlockerComponent 通信エラー 実装方針 利用例 Angularアプリのローダーと通信時エラーの実装について。 (Angular 5.0.1を利用) ローディン…

(WIP) createEmbeddedViewとcreateComponen

templateを利用して動的にコンポーネントを生成する ViewContainerRef TemplateRef EmbeddedViewRef サンプル 参考 templateを利用して動的にコンポーネントを生成する this.viewContainer.createEmbeddedView(this.templateRef); 何が起きているか Angular…

ControlValueAccessorでRadioボタンを含むコンポーネントを実装するメモ

(change)を利用 ViewChildrenを利用 ref.nativeElement.checked = true;でViewを更新 RadioComponent import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angula…

11月メモ・リンク集

11月に調べたことのメモです。 ngrx関連 各Feature Module(Page Module)のステートを、画面遷移時にリセットする Angular関連 Component/Directive関連 アプリケーションに依存するデータを表示するコンポーネントのインターフェース(@Input)について Fo…