仮想DOMってなに？② DOMを更新するタイミング
〇DOMを更新するタイミング
vue.jsは、DOMと紐づいたデータを更新してもすぐにはDOMを更新しません。
仮想DOMからDOMへの反映は、vue.jsのリアクティブシステムによる描画処理のタイミングで自動的に行われます。
このため、データを更新した直後にDOMにアクセスしてもまだ反映前の状態になっています。
反映されたDOMにアクセスするためには、DOM更新を待ち受けるための仕組みを提供しているnextTickを使用する必要があります。
〇最適化によるDOMの再利用と副作用
vue.jsで仮想DOMを利用している目的の1つとして、描画処理の性能を向上させる狙いもあります。実際描画処理においては、仮想DOMの差分検出アルゴリズムで、描画処理前の仮想Nodeをもとに、描画対象となるDOMに対してNodeの新規追加・更新・削除といったDOM操作を行います。
このようにDOM操作を最小限にすることで、vue.jsでは描画処理の性能を向上させていますが、この副作用としてこちらが意図しない描画結果になることもあります。例えば、次のようなトグル形式の描画をみてみましょう。
```
<div v-if="toggle">
A<input type="text">
</div>
<div v-else>
B<input type="text">
</div>
```
このケースでは、toggleの更新によって描画が切り替わっても、もしinput要素に何か文字が入力された状態ならvalueの値は保持されたまま描画されます。これは、仮想DOMによる描画処理で更新の必要がないDOMを再利用しているためです。
このような副作用を防ぐには、更新が必要な要素、またはそれを包含する要素に対してkey属性を付与することで、区別させて要素を更新します。このケースでは、input要素に対してkeyを設定することで、トグルするたびに新規に描画されるようになります。
```
<div v-if="toggle">
A<input type="text" key="a">
</div>
<div v-else>
B<input type="text" key="b">
</div>
```
このように、Vue.jsは仮想DOMの採用によって描画処理は柔軟的になりましたが、それに伴う先の例のような副作用もあるので描画においては注意が必要です。
◯jQueryなどのDOM操作とライブラリとの併用
Vue.jsを使用すると、基本的にjQueryのようなDOM操作系ライブラリを併用することは減ります。マウントした要素内のDOMを直接操作しても、データが変わるわけではなく仮想DOMが更新されないためです。
DOMの更新はデータバインディングが基本になり、DOMにアクセスする必要がある場合は$elや$refs,カスタムディレクティブといった機能がVue.jsから提供されています。他のライブラリと併用する場合も、なるべくVue.jsが提供する機能を使用したり、イベントバスやVuexを使用してデータを操作するようにしましょう。
参考文献：基礎から学ぶVue.js mio著
WordPressカスタマイズ ②
前回の続きで、自分用のメモとして書いていきます。
6.【bloginfo('〇〇')】
ブログの各情報を表示するための関数
bloginfo('url') ブログのURLを表示
bloginfo('title') ブログのタイトルを表示
bloginfo('description') 説明文を表示
7.【the_〇〇】
個別記事の各情報を表示する関数
the_post() 記事情報の表示
the_title() タイトルの表示
the_content() 本文の表示
the_excerpt() 抜粋の表示
the_category() カテゴリーの表示
the_permalink() リンクの表示
the_date(),the_time() 投稿日時の表示
8.【is_〇〇】
現在表示中のページ(条件分岐に使う)
現在、ユーザーが表示しているページを示す関数で、ページによって処理を分けたいときに使用する。
is_home() ブログのトップページ
is_front_page() 基本的には「is_home()」と同じ
トップページの指定によっては変わる
is_single() 個別記事
is_page() 固定ページ
9.【include(〇〇)】
ファイルの読み込み関数
include(TEMPLATEPATH. '/myfile.php');
なら、テンプレートディレクトリ内の「myfile.php」を読み込む
<?php ?>で囲む
wordpress/wp-content/themes/twentyten<テーマ名>/
style.cssの記述
・Theme Name : テーマ名
・Description : テーマの説明
・Author : テーマの制作者
・Version : テーマのバージョン
WordPressカスタマイズ
学んだことを自分用のメモとして記事にしておきます。
WordPressのカスタマイズ
テーマ・テンプレート・ウィジットのカスタマイズ
カスタマイズするために必要な知識
・HTML
・CSS
・PHP
・WordPressのファイル構成
・各ファイルの役割
カスタマイズ前に初心者が理解しておくべきポイント
「テーマ・テンプレート」の基礎概念を理解
webページ → １つのHTMLファイルで構成
WordPressの場合 → いくつかの「PHPファイル」で構成
その構成されたものが「テーマ・テンプレート」になる。
WordPressは１つのwebページをいくつかのPHPファイルの集まりとして構成している。
大きく分けると、
「ヘッダー」
「コンテンツ(本文)」
「サイドバー」
「フッター」
で構成されている。
これらのテーマ・テンプレートを構成している部品はどのPHPファイルで構成されているか？
これらのテンプレートはテーマ・テンプレートのディレクトリに置かれている。
wordpress/wp-content/themes/twenty●●
WordPressの「テーマ・テンプレート」関数の一覧
WordPressでは、「テーマ・テンプレート」をカスタマイズする際に便利な関数がある。
知っておくべき関数
1.【get_header()】
ヘッダーファイル’header.php’を呼び出す
2.【get_footer()】
‘footer.php’を呼び出す
3.【get_sidebar()】
4.【get_template_part(‘〇〇’, ‘〇〇’)】
ファイルの呼び出し関数
「get_template_part(‘loop’, ‘index’)」の場合、’loop-index.php’が呼び出されます
5.【__(‘〇〇’, ‘〇〇’)】
翻訳関数
__(‘wordpress customize’, ‘twentyten’)の場合
“wordpress customize”という文字列を、「twentytenテーマ」の翻訳ファイル(POファイル)によって、日本語に翻訳します
「__e(‘〇〇’, ‘〇〇’)」という関数も、同様に翻訳関数です
仮想DOMってなに？
vue.jsを勉強していてわからないことだらけなので、メモとして調べたことを書いておこうと思います。
仮想DOMとは？
バインディングしたデータをもとに作られれます。
仮想 DOM は、インメモリに保持された「仮想の」UI 表現が、ライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。
リアルDOMのNodeと同じように「仮想Node(VNode)」と呼ばれる節で構成されたツリー構造になっています。
仮想DOMから実DOMが生成され、その内容が実DOMツリーとなって生成されています。
リアルDOMを操作するのではなく、オブジェクトを変更し差分があるところだけ更新するので一般的に速くなると言われています。
DOMツリーとノード
DOMって？
Document Object Model (DOM) は、— ウェブページを表す HTML のように — 文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。
つまりJavaScriptからHTMLドキュメントを操作するためのインターフェース、およびデータ構造のことです。JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMのAPIを使うことで操作できます。
DOMはHTMLドキュメントを「オブジェクトのツリー」として扱っています。これを「DOMツリー」と呼びます。
Nodeって？
ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。
さきほどのDOMツリーのひとつひとつの箱（オブジェクト）がNodeです。
参考文献： 基礎から学ぶvue.js mio著
参考サイト：
https://kuroeveryday.blogspot.com/2018/11/difference-between-dom-and-node-and-element.html
ruby 複数の文字を置換する
今日もまたアルゴリズム問題を解きました。
今日の問題はアルファベットと数字の置き換え規則があり、入力された文字列を規則に沿って置換して出力できるようにするというものです。
例
入力：FEG → 出力：356
これも初めは見当違いのことをしていて、hashを作って、入力された文字列を一文字ずつeach文で取り出して、その文字がhashのキーと一致しているかを確かめるという方向で考えていました。
しかし、hashのキーと文字が一致しているかを見ていく部分の書き方がわからず挫折しました。
調べていくと、rubyのgsubメソッドで正規表現を使って複数の文字を置換する方法がわかりました。置換する対象をハッシュで渡すことができるんですね。
```
s = gets
puts s.gsub(/S|D|F|P|E|G/, "S"=>1, "D"=>2, "F"=>3, "P"=>4, "E"=>5, "G"=>6)
```
ruby ordメソッドについて
rubyのアルゴリズム問題を解いていて、知らなかったメソッドに出会ったので自分用のメモとして記事を書こうと思います。
問題を解いていて、文字列から２つの文字a,bを取ってきて比較し、アルファベット順でaがbよりも先にくる場合はtrueを返すというアルゴリズムを作ることになりました。(あんまり問題の内容について言及してはいけないのかもですが…)
最初はどうやってaとbを比較すればいいのかがわかりませんでした。
sortメソッドで昇順に並べればいいのかと考えていましたが、調べていくうちにordメソッドを使うと解決できることがわかりました。
ordメソッドとは？
rubyのordメソッドは文字をその文字のコードポイントと呼ばれる数値に変換するメソッドです。
コードポイントとは？
文字集合では、個々の文字に対して、文字集合内での符号位置が決められているそうです。これをコードポイントといいます。
「文字集合を構成する文字を並べて、頭から順番に振った数値」をコードポイントといいます。
アルファベット文字にコンピュータが理解できるように数値がふってあるということだと認識しました。
例
```
string = ["A","G","H"]
puts string[0].ord <= string[2].ord
```
each_sliceとeach_consについて
アルゴリズム問題を解いていて、配列から隣り合う値を２つずつ取ってくるということをする必要が出てきました。
調べていくうちに、配列から複数の要素を取り出すにはeach_sliceやeach_consというメソッドを使うといいことがわかりました。
自分用のメモとして、each_sliceとeach_consについて調べたことを書いておこうと思います。
1.each_sliceとは？
each_sliceメソッドは、引数nで指定した数の要素を繰り返し取り出して、ブロックに渡します。
2.each_consとは？
each_consメソッドも引数nで指定した数の要素を繰り返し取り出して、ブロックに渡します。
each_sliceメソッドとは違い、[要素1, 要素2, 要素3, ...]、[要素2, 要素3, 要素4, ...]、[要素3, 要素4, 要素5, ...]、...のように取り出します。
