最近会社の同僚に正規表現について教える機会が何度かあったがいまいち上手に説明できず、悔しい思いをしたので思考を整理してもっと上手に伝えてあげられるようになるためにも記事にしてみる。 どんなことが出来るのか実用例も記載しつつ説明するので参考までに御覧ください。
この記事でできるようになること
Wikipediaさんにはこうある
正規表現（せいきひょうげん、英: regular expression）とは、文字列の集合を一つの文字列で表現する方法の一つである。 正則表現（せいそくひょうげん）とも呼ばれ、形式言語理論の分野では比較的こちらの訳語の方が使われる。
こんなん読んでも何のこっちゃですよね。
続きを読む
VBAで商品ページデータなどを処理することが最近多いんですが、このようなHTMLを含むセルはCSVを読み込んだ段階で画像のように文字の折り返しが勝手に有効化されてしまいます。
これを読み込んだ直後にシート全体の文字の折り返しを解除するマクロがこれ
Sub Macro1 Cells.WrapText = False End Sub
これを実行すると以下のように文字列の折り返しが解除されます。
ちなみに折り返し解除するだけでは手動でセルを編集すると、再度折り返しが有効化されて行の高さが変わってしまいます。
行の高さを固定するには直接シート全体の行の高さを指定します。
Sub Macro2 Rows.RowHeight = 18 End Sub
たったこれだけのことですが、毎回手で高さ指定するのが面倒ならVBAでやってしまえば便利ですね。
この記事でできるようになること
#myID .myClassみたいなセレクタが使えるようになるちょっとしたjavascriptを書くだけなのにCSSっぽいセレクタを使って楽したいがためにjQueryライブラリを読ませるのは面倒。
document.getElementById('aaa').getElementsByClassName('bbb')[0]
なんて書くの長すぎ。
jQuery使わずにもっと短い書き方無いんかい！
と思って調べたところありました。
概要
与えられた CSS セレクタにマッチする文書中の最初の要素（※深さ優先の先行順走査によるもの）を返します。
構文
element = document.querySelector( selectors );
引用元：document.querySelector() - Web API インターフェイス | MDN
つまり、jQuery読み込まずにjQueryと同じセレクタが使える。これです。探していたやつ。
See the Pen querySelector by maru (@maru0014) on CodePen.
MDNの例を見てみるとクラス名で単一の要素を取得する場合は.getElementsByClassNameの方が処理速度が早いとあります。
document.querySelectorでクラス名指定する場合は複雑なセレクタになるときだけ使うのが良さそうです。2階層以上指定のときとかでしょうか
element = document.getElementsByClassName('aaa')[0].getElementsByClassName('bbb')[0]
↓
element = document.querySelector('.aaa > .bbb');
これくらい差があればquerySelectorの方がいいですね。状況に応じて使い分けるか、速度はそこまで求めないから全部querySelectorでやっちゃうかってとこです。
document.querySelectorはクラス名で指定した時も最初にマッチした単一の要素を取ってきます。
対してdocument.querySelectorAllはセレクタにマッチした要素を全て配列として格納してくれる。
.getElementsByClassName('bbb')と同じ挙動ですね。
これもおそらく.querySelectorAllよりも.getElementsByClassNameが速度的には早いのかもしれませんが、セレクタが複雑な場合は.querySelectorAllを使うことになるでしょう。
See the Pen querySelectorAll by maru (@maru0014) on CodePen.
上記は.collection > .collection-item > spanというセレクタで配列にしています。
もし.getElementsByClassNameなどを用いて書くなら
//CLASSでセレクトして配列に格納 var list = document.getElementsByClassName('collection')[0].getElementsByClassName('collection-item'); //listの数だけ繰り返し for(var i = 0; i < list.length; i++) { //連番を付ける list[i].getElementsByTagName('span')[0].textContent = [i+1] + '.' + list[i].getElementsByTagName('span')[0].innerText; }
となります。長いいいいい。 いや、まぁ連番付けるのjavascriptでやんなよって話は置いといて。
とにかく短く、簡単に書ける。
でもjQuery使っていい状況ならjQuery使ったほうが結局楽なんですがね。ちょっとしたプログラムのためにjQuery読ませるの重すぎてやだってときにquerySelectorを使うことにします。
getElementの使い方はこちら code-life.hatenablog.com
去年（2016年）くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout（フレキシブルボックスレイアウト）。通称flexbox。 そろそろ使っても良いんじゃないでしょうか。
参考: Can I use... Support tables for HTML5, CSS3, etc
See the Pen flexbox by maru (@maru0014) on CodePen.
キレイにdiv要素が横並びになってますね。6つの子要素が横並びになっていますが、width（幅）指定は100%です。
width:calc(100%/6);でもなく、width:16.666667%;でもありません。これもFlexboxのすごいところ。
display:flex;が指定された親要素を持つ子要素は6等分のサイズを指定しなくてもいいかんじに等分してくれます。
7つ目の子要素を足そうが、8つ目を足そうが、改行されることなく横並びに。
そしてfloat:left;と違ってclearfix不要です。素晴らしい。
.row { display: flex;/*これを入れるだけで横並び*/ background: #ccc; }
前述した実装例でもdisplay: flex;をCSSに追記してあります。
超絶楽です。
flexbox化した親要素の属性にflex-wrap:wrap;を追記すると回り込み（改行）が有効化されます。
.row { display: flex; flex-wrap:wrap;/*回り込み有効化*/ background: #ccc; }
そしてfloat:left;の時のように子要素のサイズを指定
.col { width: calc(100% / 3);/*3等分*/ }
See the Pen flexbox-wrap by maru (@maru0014) on CodePen.
いかがでしょうか。
今までfloat:left;で横並びにして、サイズ指定して、clearfixして、という作り方だったものが3つのプロパティだけで実装できてしまいました。
See the Pen flow-root by maru (@maru0014) on CodePen.
float:left;でdiv要素を横並びにしましたが、clearfixを行っていないため外枠の.rowが上の方でちっちゃくなってしまいました。
現状で最もスマートな、短いclearfixとしては以下のような書き方でしょうか。
.row:after { content: ""; display: table; clear: both; }
Googleが作り上げたフレームワーク「マテリアライズ（Documentation - Materialize）」においても上記のような記述となっていたため、これが現時点での最も正解に近い書き方なのかもしれません。
しかし、今後は新しい属性値flow-rootによって更に簡単に実装できそうです。
参考: CSS Display Module Level 3
See the Pen flow-root-on by maru (@maru0014) on CodePen.
変更点は一行のみ親要素div.rowにdisplay:flow-root;を追記しただけです。
これは超簡単！
参考: Can I use... Support tables for HTML5, CSS3, etc
Chrome、Firefox、operaは対応しているようですが、Edgeやsafariは未対応。 AndroidはOK、iPhoneは✕という状況です。（IEは知らん）
ゆくゆくはsafariも対応するでしょうが、それまでは前述したafter要素によるclearfixが最適かと思います。 対応するまではこれを使いましょう。
.row:after { content: ""; display: table; clear: both; }
他の手段としてはflexboxを使うという方法もありますね。
