VBAとJavaScriptの操作対象を相対的に取得する方法と言語の特徴の違い

最近は『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本 』を読んでいました。以前はVBAを勉強していたのですが、それに慣れてからはもっと新しいことができるようにと、ちょっとずつ他のプログラミング言語も見るようにはしていました。

 

それで気づいていったことは、他のプログラミング言語もVBAと同様に変数とか条件分岐があるということです。新しい言語を始める時に一から全て勉強し直すのではなく、たぶん何か元となる言語を勉強しさえすれば他の言語を勉強するときにぐっと楽になるんじゃないかと思います。

 

このようなことが感じ取れたことは、新しい言語を勉強する時の心理的ハードルを大きく下げてくれました。けれどもやはり、言語ごとに微妙な違いはあるものです。その中の一つで大きく印象に残ったのが「操作対象を相対的に取得する方法」です。

 

JavaScriptもVBAと同様に相対的位置の違いで操作対象を取得する方法があります。それはJavaScriptでもいくつかあるのですが、その中の一つに「nextSiblingプロパティ」と呼ばれるコードがあります。

 

おそらく、VBAでnextSiblingプロパティに対応する、もしくは似ているのが「offsetプロパティ」というコードになるかと思いますが、ちょっと感覚が違ってきます。

 

過去記事にも書きましたが、JavaScriptの操作対象は基本的には「HTMLやCSS」というコードになるので、JavaScriptを使うことはコードでコードを操作するとも言えます。

 

そのうえでさらに、「コードの中から、ある箇所の相対的位置からのコードの取得」という手法がnextSiblingプロパティになります。ExcelVBAのoffsetプロパティとは、機能としては似ているのですが微妙に違ってきます。

 

JavaScriptを勉強してきて

「あぁ、こういったコードもあるんだな」

「JavaScriptってこういう考え方をするんだな」

と、VBAと比較しての視点の違いというか、そういった部分も含めて理解できないとJavaScriptを理解するのは難しいかもしれないと感じました。

 

ここ最近はJavaScriptについて、VBAと比較した場合どういった感じで違うのかついて書いてきました。ですから、JavaScriptでこういったコードでこういったことができます、といった内容ではなくVBAと比較した場合だとこういった感じで考え方が違いますよ、といった形で書いています。

 

そのため、今までVBAを勉強してきた人が、次にどんなプログラミング言語を勉強するか考えた時のひとつの参考資料として読んでもらえればと思います。

ExcelVBAのoffsetプロパティについて

JavaScriptのnextSiblingプロパティやJavaScript自体の特徴を理解するためにも、まずExcelなどで使うVBAのoffsetプロパティから見ていきます。以下は、ExcelのシートでC4セルが黄色で塗られて数値の1が入っています。また、E4セルが赤色で塗られて数値の2が入っています。

VBAのoffsetプロパティを説明するシート

例えば上記の画像でC4セルを基準にE4セルの値を取得する、という方法がVBAのOffsetプロパティというコードでできます。基本的な書式は以下の形になります。

 Rangeオブジェクト.Offset(行方向, 列方向)

Offsetプロパティの最初の引数(行方向)に例えば1という数値を入れると、基準にしたセルから1つ下のセルを選択します。-1の場合、1つ上のセルを選択します。

 

2つ目の引数(列方向)に例えば1を入れると、基準にしたセルから1つ右のセルを選択します。-1の場合、1つ左のセルを選択します。

 

このOffsetプロパティを使って上記の処理をする場合、以下のようなコードになります。

Dim num As Integer
num = Sheets("Sheet1").Range("C4").Offset(0, 2).Value
MsgBox num

上記のコードを実行すると、C4セルの2つ右隣りのE4セルに入った「2」がメッセージボックスに入った状態で表示されます。これがVBAのOffsetプロパティの基本的な機能になります。

JavaScriptのnextSiblingプロパティについて

ここまではVBAのOffsetプロパティについて書いてきました。次はJavaScriptのnextSiblingプロパティになります。その前に次の2つの画像を入れました。

 

以下の画像は次の過去記事の一部分の画像を切り取ったものです。

JavaScriptのnextSiblingプロパティを説明するための画像1

以下は、上記の画像部分をWordPressのエディターでHTMLも含めて表示したときの画像になります。

JavaScriptのnextSiblingプロパティを説明するための画像2

赤枠の「h2」タグで囲まれた箇所が見出しで、緑枠の「p」タグで囲まれた箇所が本文になります。JavaScriptを使った相対的な操作対象の取得とは、VBAのExcelのように直感的に「上」とか「右」の値を取得する、というわけではありません。

 

上記の画像でいうと、1つ目のpタグ(「このブログでは2019年に・・・」と書かれた箇所)を基準として次のpタグ(「 」と書かれた箇所)を取得する場合「nextSiblingプロパティ」が使われます。さらにここに「階層」という概念が入ってきます。

 

JavaScript的にいうと、「親ノード」とか「子ノード」、「兄ノード」といった言葉を使います。ノードとはHTMLの要素、属性、テキスト、コメントのことを指すとされています。

 

この各ノードに対応するJavaScriptのコードの一覧表として『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』には次のように書かれています。

P.232

表2 親/子/兄弟ノードを取得するプロパティ

プロパティ取得するノード
parentNode親ノード
childNodes子ノードの集合(NodeList)
firstChild最初の子ノード
lastChild最後の子ノード
previousSibling兄ノード
nextSibling弟ノード

 

これらのコードの機能や実際にどのように使うのかについては、他に詳しいサイトや書籍があるのでそちらに譲ります。今回の記事ではVBAとJavaScriptの特徴や考え方の違いについて書くことを目的としているので詳細までは触れません。

まとめ

ここまで書いたことをまとめると、過去記事で何度も触れていますがJavaScriptの理解にはHTML・CSSの構造に関する理解が必要になってくるということです。

 

JavaScriptのコードの「相対的位置の取得」とか「階層構造」というのは、その操作対象であるHTMLの構造を理解していないとそもそもよくわからないかと思います。

 

『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本 』を読んでいて驚いたのは、nextSiblingプロパティのように「コード上での相対的な位置からの操作対象の取得」です。

 

Excelにも

Workbookオブジェクト━Worksheetオブジェクト━Rangeオブジェクト

みたいな階層構造があり、オブジェクトモデルとも言われます。

 

「プログラミング言語にはこういった階層構造がある」と事前に知っていれば特に難しくもないのかもしれません。しかし、JavaScriptが一番最初に勉強するプログラミング言語だった場合、もしくはVBAを勉強した人がこれからJavaScriptを勉強する場合、

  • コードでコードを操作する

そのうえでさらに

  • 操作対象(HTML)には階層構造がある

といったことがイメージできると理解しやすいかと思います。

あわせて読みたい

こんな記事も読まれています

コメント