HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

MOS Excel 2016 Expert に合格しました

  この教材を会社に買ってもらってひたすら模試。 これで多少は転職に有利になるかなぁ。

Microsoft Office Specialist Microsoft Excel 2016 Expert 対策テキスト&問題集 (よくわかるマスター)

Microsoft Office Specialist Microsoft Excel 2016 Expert 対策テキスト&問題集 (よくわかるマスター)

  • 作者: 富士通エフ・オー・エム株式会社(FOM出版)
  • 出版社/メーカー: FOM出版 富士通エフ・オー・エム
  • 発売日: 2017/10/20
  • メディア: 大型本
  • この商品を含むブログを見る

まぁエキスパートとは言ってもVBAなんてまったく出てこない内容だったし 実際会社にインパクト与えるほど劇的な生産性向上をもたらすにはVBAでの業務自動化が必須。

これからも精進します。

【正規表現とは 超入門】何が出来て何が良いのか、ゆるい説明と使用例を交えてまとめてみた

f:id:maru0014:20180202001432p:plain

最近会社の同僚に正規表現について教える機会が何度かあったがいまいち上手に説明できず、悔しい思いをしたので思考を整理してもっと上手に伝えてあげられるようになるためにも記事にしてみる。 どんなことが出来るのか実用例も記載しつつ説明するので参考までに御覧ください。


この記事でできるようになること

  • 正規表現で何ができるかなんとなくわかる
  • 正規表現パターンを全て憶える必要は無いということを憶える
  • 面倒くさそうな置換には正規表現がつかえるかも ということだけ憶えておく


正規表現とは

Wikipediaさんにはこうある

正規表現(せいきひょうげん、英: regular expression)とは、文字列の集合を一つの文字列で表現する方法の一つである。 正則表現(せいそくひょうげん)とも呼ばれ、形式言語理論の分野では比較的こちらの訳語の方が使われる。

正規表現 - Wikipedia

こんなん読んでも何のこっちゃですよね。

続きを読む

ExcelVBAでセルの文字列の折り返しを解除する方法.WrapText = False

この記事でできるようになること

  • セル内改行を含むエクセルのシートをVBAで折り返し解除する

セル内改行があると勝手にセルの文字列が折り返される

f:id:maru0014:20171128034043p:plain

VBAで商品ページデータなどを処理することが最近多いんですが、このようなHTMLを含むセルはCSVを読み込んだ段階で画像のように文字の折り返しが勝手に有効化されてしまいます。

これを読み込んだ直後にシート全体の文字の折り返しを解除するマクロがこれ

.WrapText = False

Sub Macro1
  Cells.WrapText = False
End Sub

これを実行すると以下のように文字列の折り返しが解除されます。

f:id:maru0014:20171128040957p:plain

ちなみに折り返し解除するだけでは手動でセルを編集すると、再度折り返しが有効化されて行の高さが変わってしまいます。

行の高さを固定するには直接シート全体の行の高さを指定します。

Sub Macro2
  Rows.RowHeight = 18
End Sub

たったこれだけのことですが、毎回手で高さ指定するのが面倒ならVBAでやってしまえば便利ですね。

【脱jQuery?】jQueryみたいなセレクタが使えるdocument.querySelectorが便利

この記事でできるようになること

ちょっとしたjavascriptを書くだけなのにCSSっぽいセレクタを使って楽したいがためにjQueryライブラリを読ませるのは面倒。

document.getElementById('aaa').getElementsByClassName('bbb')[0]

なんて書くの長すぎ。

jQuery使わずにもっと短い書き方無いんかい!

と思って調べたところありました。

 

document.querySelector

概要

与えられた CSS セレクタにマッチする文書中の最初の要素(※深さ優先の先行順走査によるもの)を返します。

構文

element = document.querySelector( selectors );

引用元:document.querySelector - Web API インターフェイス | MDN

つまり、jQuery読み込まずにjQueryと同じセレクタが使える。これです。探していたやつ。

 

使用例

See the Pen querySelector by maru (@maru0014) on CodePen.

 

複雑なセレクタじゃないならgetElementsByClassNameの方が早い?

MDNの例を見てみるとクラス名で単一の要素を取得する場合は.getElementsByClassNameの方が処理速度が早いとあります。 document.querySelectorでクラス名指定する場合は複雑なセレクタになるときだけ使うのが良さそうです。2階層以上指定のときとかでしょうか

element = document.getElementsByClassName('aaa')[0].getElementsByClassName('bbb')[0]

element = document.querySelector('.aaa > .bbb');

これくらい差があればquerySelectorの方がいいですね。状況に応じて使い分けるか、速度はそこまで求めないから全部querySelectorでやっちゃうかってとこです。

 

一発で配列化できるdocument.querySelectorAll

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

HTML要素を超簡単に横並びにできるCSSの書き方 Flexbox

この記事でできるようになること

  • divやliの表示をキレイに簡単に横並びにできる

去年(2016年)くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout(フレキシブルボックスレイアウト)。通称flexbox。 そろそろ使っても良いんじゃないでしょうか。

Flexboxのブラウザ対応状況

f:id:maru0014:20171119175621p:plain

参考: Can I use... Support tables for HTML5, CSS3, etc

 

(例)Flexboxで要素を横並びに

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に追記してあります。 超絶楽です。

 

3つごとに改行(3等分)にしたい場合はflex-wrap:wrap;を追記

flexbox化した親要素の属性にflex-wrap:wrap;を追記すると回り込み(改行)が有効化されます。

.row {
  display: flex;
  flex-wrap:wrap;/*回り込み有効化*/
  background: #ccc;
}

そしてfloat:left;の時のように子要素のサイズを指定

.col {
  width: calc(100% / 3);/*3等分*/
}

(例)子要素をキレイに3列で表示

See the Pen flexbox-wrap by maru (@maru0014) on CodePen.

いかがでしょうか。 今までfloat:left;で横並びにして、サイズ指定して、clearfixして、という作り方だったものが3つのプロパティだけで実装できてしまいました。

【2017年最新】clearfix一番短い書き方は親要素にdisplay:flow-root;を書き加えるだけ

clearfixが適用されていない状態

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

display:flow-root;を書き加えた

See the Pen flow-root-on by maru (@maru0014) on CodePen.

変更点は一行のみ親要素div.rowdisplay:flow-root;を追記しただけです。 これは超簡単!

ただし、Safari未対応

f:id:maru0014:20171119160554p:plain 参考: Can I use... Support tables for HTML5, CSS3, etc

ChromeFirefoxoperaは対応しているようですが、Edgeやsafariは未対応。 AndroidはOK、iPhoneは✕という状況です。(IEは知らん)

結局まだclearfixは必要かな

ゆくゆくはsafariも対応するでしょうが、それまでは前述したafter要素によるclearfixが最適かと思います。 対応するまではこれを使いましょう。

.row:after {
    content: "";
    display: table;
    clear: both;
}

他の手段としてはflexboxを使うという方法もありますね。

code-life.hatenablog.com

jQueryを使わないjavascriptでの要素取得方法とテキストの書き換え

今までなんとなーくで書いて、動くからまぁいいか。でやってきてたjavascriptをきちんと勉強しようと思うので、少しずつメモ書きをためていきます。 今回はhtmlドキュメントツリー内の「id」、「class」、「name」を指定して要素取得します。

IDでテキストを取得

getElementById

var test = document.getElementById('aaa').textContent;

idを指定して単一の要素を取得.textContentで要素内のテキストを抽出しています。

テキストを書き換え

document.getElementById('aaa').textContent = '書き換えしました';

=の左右を入れ替えることで要素内のテキストを書き換えることができます。

 

CLASSでテキストを取得

getElementsByClassName

var test = document.getElementsByClassName('bbb')[0].textContent;

classを指定して要素のコレクションを取得し、[0]で何番目の要素かを指定し、.textContentで要素内のテキストを抽出しています。 getElementsというふうに複数形になっているため、何番目の要素を取ってくるのかを指定する必要があるわけです。 プログラミングにおいては[0]から順にカウントしていくので、[0]で上から1番目の要素となり、[1]なら上から2番目の要素となります。

テキストを書き換え

document.getElementsByClassName('bbb')[0].textContent = '書き換えしました';

 

タグの名前を指定してテキストを取得

getElementsByTagName

var test = document.getElementsByTagName('a')[0].textContent;

タグ名で取得する場合もClassNameと同様にコレクションを取得するので、[0]で何番目かを指定します。

テキストを書き換え

document.getElementById('ccc').getElementsByTagName('a')[0].textContent = '書き換えしました';

 

親要素を指定して子要素のテキストを取得

getElementById.getElementsByTagName

var test = document.getElementById('ccc').getElementsByTagName('a')[0].textContent;

まず親要素を指定、さらにその中に含まれている子要素を取得します。

テキストを書き換え

document.getElementById('ccc').getElementsByTagName('a')[0].textContent = '書き換えしました';

 

nameでテキストを取得

getElementsByName

document.getElementsByName("ddd")[0].textContent;

テキストを書き換え

document.getElementsByName("ddd")[0].textContent = '書き換えしました';
↓この本で勉強中!

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

あくまで自分用のメモ書きのつもりですが、使えそうだったらコピペで使ってやってください。 なにか間違ってたりもっと良い方法があったら教えてくださいな。