テーマの無いテスト用サイトを作る 普通はthemesDIRに任意のテーマをインストールすることで、サイトの基礎になる最低限の見た目が表示されるのだが、Hugo のレイアウトの仕組みを理解するためにわざと既存のテーマをインストールせずに進めてみる。 新しい …

設定ファイルのデータ config.tomlにはデフォルトでbaseURL(サイトのURL)、languageCode(使用する言語)、title(サイトのタイトル)の３つが定義されている. 他に使用するテーマをthemeで指定する.他の項目はテーマによっても違うのでテーマのドキュメントを読…

Hugoが書き出すサイトのディレクトリやファイル hugo new site サイト名コマンドで書き出されるサイトのディレクトリやファイルの構成

記事の作成 hugo new 記事へのパスでcontentDIR配下に新しい記事が作成される.「記事へのパス」は直接ファイル名のみならcontent直下に、フォルダ名/ファイル名などとするとcontent/フォルダ名/ファイル名の形で作成される.content内にフォルダ名のDIRが無い…

Hugoを試してみた感想 Jekyll はもう古くなってきていると一部では言われている。ただ静的サイトジェネレータとして老舗なのでユーザもまだ多く、使いやすい仕組みが沢山盛り込まれている。問題は記事レンダリングのスピードが遅くなってきていること。Ruby …

テスト結果 図がSVGファイルの場合は表示されない。画像としてアップロードされた図は表示できる（PNG,JPEG） 数式ブロックで行揃えのための & を使っているとエラーになる。おそらく他にもエラーになる構文はあるだろう。 除算アルゴリズム ◎ 任意の整数 $a…

テスト結果 こちらはVSCodeでMarkdownで書き、マークダウン拡張（Markdown Preview Enhanced）でプレビュー確認したものを、CDNでMathJaxを読み込むように設定したHTMLで書き出し（プレビュー画面から右クリックメニューでできる）、そのBODYタグの内部のみ…

最近 npmで何らかのアプリをインストールする時に通信エラーというか、ダウンロード先のアドレスが認識できないエラーが発生する. 例えば、Nuxtプロジェクトのインストール時 $ npx create-nuxt-app プロジェクト名 のコマンドで以下のエラー エラー：getadd…

ネストされたルート定義をすると、より複雑な画面遷移をすることができる。 これまでの「Product」のコンポーネントは、商品詳細と商品レヴューを表示させるためのベースとし、その中に３つのコンポーネントを定義する。 フォルダ構成としては、viewsの中にH…

フッターにMathJaxを読み込む設定をして使う フッターに次のコードを埋め込んでMathJaxを使えるようにしてみた。 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script> <script> MathJax = { tex: { inlineMath: [['$', '$…

記事に数式が使えるかテストしてみる。まず、はてなに搭載された数式の記法でやってみた。 はてなブログ標準の数式記法で ただし、はてブ標準の数式記法では[tex: 数式 ] と書いて、さらに<div>で囲んでやる必要があるので、やや面倒。 レンダリングの際に、数式</div>…

簡単な商品一覧ページのサンプルを作る。 src/views/Home.vueとsrc/main.js、src/App.vueは前回と同じ。 まず商品一覧ページと商品詳細ページのコンポーネントを作る。

Vue Router を導入してごく単純なSPAを構築するまで。

ストアの状態監視 Vuexで定義されたアプリケーションレベルのウォッチャは、コンポーネントより先に呼び出される。

モジュールの機能を使って、ストアを名前空間で分割し管理することができる。

ゲッターやミューテーションを使うロジックを、コンポーネントの算出プロパティやメソッドに全て記述するのは冗長になる。そういう場合にヘルパーが用意されている。 あらかじめ必要なヘルパーを読み込む。

コンポーネントでストアを使う 親子間コンポーネントで状態管理する例 まずsrc/store.jsを定義

Vuex は Vueアプリケーションで使うデータとその状態を一元管理する「状態管理」のための拡張ライブラリ。 深くネストされたコンポーネント構造では、コンポーネント間でpropsと$emitを使って各コンポーネントどうしのやり取りをする必要があるが、Vuex を使…

Vue CLI のインストール Node.js と npm はインスト済みとする。 次のコマンドで Vue CLI をグローバルインストール $ npm install -g vue-cli

SVGのトランジション SVGでマークアップされた要素にトランジション。 図形が入れ替わる。

リストの要素をグループ化して、追加、削除、移動のアニメーションを行う。 <transition-group>タグを使いtag属性でタグ名を指定する。tag属性を省略するとspan要素でラップされる。リストトランジションではキーの設定が必須。</transition-group>

<transition>タグの中に１つだけ存在する要素に対し使用するものを「単一要素トランジション」と呼ぶ。</transition>

トランジション用クラスの適用 トランジション効果を適用したい要素を<transition>タグで囲むことで、トランジション用のクラスが適用される。</transition>

関数型コンポーネント functionalオプションを付けることで、関数型コンポーネント（状態とインスタンスを持たない）を定義できる。

テンプレートの種類 templateオプション 今まで出てきた書き方。ES2015が使えるなら、テンプレートリテラルが便利 Vue.component('my-calendar', { template: `<div> <p>..........</p> </div>` }); 単一ファイルコンポーネントを使わない場合は、このtemplateオプションが推奨…

親子間でデータを受け渡ししたい場合、親から子へはpropsを介して渡す、子から親へはイベントを$emitするという決まりになっていた。 $emitを介さずに子からpropsで渡された値を更新しようとするとエラーになった。これは親のデータを子から簡単に変更できて…

スロットという機能を使って、親コンポーネントから子コンポーネントにテンプレートの一部を差し込むことができる。 これによって子コンポーネントの一部分をカスタマイズしたりできる。

$refsを使って、親から子のメソッドを使ったり、イベントを発火させたりできる。

カスタムイベントと$emit 子コンポーネントの状態に対応して親コンポーネントに何らかのアクションを起こさせるとか、子コンポーネントが持つデータを親に渡すなどの場合、カスタムイベントとインスタンスメソッドの$emitを使う。

propsで受け取るデータのデータ型を指定する propsで受け取るデータのデータ型を指定しておくことができる。受け取るデータ名にStringなどのデータ型を指定しておく。