JavaScriptはVBAと違ってコードでコードを操作する感覚に近いかもしれない

最近は『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』の本を読みながらJavaScriptについて勉強していました。勉強しながら気づいた、もしくはこういうことなんじゃないかと考えたことがあります。それは、

 

「VBAと違ってJavaScriptはコードでコードを操作する感覚に近い」のではないか、ということです。

 

今回は、このことについて考えたことを書いていってみます。

VBAにおけるコードでコードを操作する領域にまで至った時のレベル感

冒頭部分で「VBAと違ってJavaScriptはコードでコードを操作する感覚に近い」という風に書きましたが、これは「初心者がプログラミング言語を勉強する最初の言語としては難しいんじゃないか」ということです。

 

JavaScriptを勉強する前にHTMLやCSSをしっかり勉強していればまた話は変わってきますが、このことについて自分の考えを説明していきます。

 

自分は今までこのブログでも書いてきたようにずっとVBAを勉強してきました。しかし、ある時からより業務の自動化できる範囲を広げたいと思って、「IEの操作の自動化」について勉強するようになりました。

 

この時に読んだ本が『Excel VBAでIEを思いのままに操作できるプログラミング術 Excel 2013/2010/2007/2003対応』です。以前にこのブログで書いたかもしれませんが、本書を読むことに対して一度挫折しています。

 

理由は、それまで勉強してきたVBAとは違った文法や表記のコードが出てきたからです。本書では例えば以下のようなコードが書かれています。

P.138

For Each anchor In htdoc_frame.getElementsByTagName(“A”)

   If anchor.innerText=”新着情報” Then

      anchor.Click

      Exit For

   End If

Next

引用したコードには一部JavaScriptでも使われるコードが使われており、他にもVBAで使われるIf文が使われています。このように色々と混在していることが、当時の自分にとって理解を難しくする原因になったのかもしれません。

 

その話は置いておくとして、JavaScriptで実際に使われるIf文は『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』には一例として次のように書かれています。

P.163

function toggleAnswer(){

   var answers=document.getElementsByTagName(‘dd’);

   if(answers.item(0).className===’open’){

      answers.item(0).className=’close’;

   } else {

      answers.item(0).className=’open’;

   }

}

基本的な構造は同じなんですけど、表記は全然違います。

 

当時挫折した理由は、ある時点まではJavaScriptがVBAとは「違うプログラミング言語である」ということを明確に区別できていなかった、からだと思っていました。今だからこそわかりますが、挫折した理由はおそらくそれだけではないです。

 

もっと根本的な問題として、JavaScriptを理解するためには、例えばExcelVBAでの「操作する対象」は「セル」とかそのセル内にある「文字列」になります。しかしJavaScriptの場合、JavaScriptを勉強する前に「HTMLやCSS」という「コード」を理解する必要があったということです。

 

Webページにおける「HTMLやCSS」というもののルールをちゃんと勉強していなかったから、『Excel VBAでIEを思いのままに操作できるプログラミング術 Excel 2013/2010/2007/2003対応』を読み通せなかったんじゃないかと今では思っています。

 

もう少し言うと、これは「コードでコードを操作する」感覚に近いのではないかと思いました。この点に関して、このブログでは以下のような過去記事を書いています。

 

VBAはVBAを記述するためのVBEという専用のエディターがあるのですが、実はそこに記述したVBAを直接操作できるコードがあるということに驚いた、といったことを書いた記事になります。

 

当時の自分は「コードでコードを操作する」という概念が全くなかったので「こんな世界もあるんだ」と純粋に感心したことを覚えています。その領域に至るまでに自分も多少はVBAを勉強してきた感覚があったのですが、「コードでコードを操作する」という知識のレベル感は初心者という感じではないと思います。

 

というのも自分はここまで以下の2冊に関する資格について勉強してきています。VBAを勉強するのであれば、必要とされる基本的な知識が網羅されている本です。

  • 『VBAエキスパート公式テキスト Excel VBA ベーシック』
  • 『VBAエキスパート公式テキスト Excel VBA スタンダード』

この2冊にはコードでコードを操作するというページはありませんでした。

 

JavaScriptというプログラミング言語もこのように直接JavaScriptでJavaScriptのコードを操作するのが通常というわけではありませんが、JavaScriptでHTMLやCSSというコードを操作する必要があります。

 

つまり、これは自分の感覚なのですが、最初からコードでコードを操作することが前提であるJavaScriptというプログラミング言語は結構難しいんじゃないか、ということです。

コードでコードを操作するためのもう少し具体的な事例

ここまででJavaScriptはVBAとは違ってコードでコードを操作する感覚に近いのではないかといったことを書いてきましたが、そのことについてもう少し理解を深めるために具体的な事例を書いていってみます。

 

例えばExcel上の処理の自動化をしようとする場合、VBAでコードを書く時の考え方は以下のような感じになるかと思います。

  • ExcelVBAの場合

ExcelVBAで指定のコードを記述し実行

セルの番地を取得

セルの文字列を操作

 

とりあえず自分が今の状態まで勉強してきた範囲でJavaScriptを使う場合、以下のような考え方になるかと思います。

  • JavaScriptの場合

JavaScriptで指定のコードを記述し実行

HTMLで文字列が表示されるタグ(Pタグなど)を取得

文字列を操作

 

具体的なコードで表すと以下のような感じになります。

  • ExcelVBA

Sheets(“Sheet1”).Range(“A1″).Value=”AAA”

上記のコードは、Sheet1シートのA1セルに「AAA」という文字列を代入するという意味になります。

  • JavaScript

Document.getElementById(‘test’).innerHTML=”AAA”

上記のコードは、Webページの「test」idが含まれたオブジェクトの文字列に「AAA」という文字列を代入するという意味になります。

 

コードを見比べるとExcelVBAで使われるコードもJavaScriptのコードも両方とも構造は同じように見えます。元になるオブジェクトを取得して指定の文字列を代入するというものです。

 

けれどもこの2つは微妙に違います。

 

ExceVBAの場合、セル番地はExcelの画面上で「ここ」という風に視覚的に確認できます。例えばA1セルだったら「ここ」という風に指さしして確認することができます。

 

JavaScriptでWebページの文字列を操作する場合は、そのWebページの指定のオブジェクトを取得する必要があります。しかしこの時に、例えば先ほど記述したコードでは、Webページ上のどこに「test」idが含まれたオブジェクトがあるのかぱっと見はわかりません。

 

JavaScriptには「デベロッパーツール」というものがあります。InternetExplorerやGoogleCromeなどのブラウザを使ってWebページを表示した状態で「F12」を押すと、そのWebページのHTML構造や操作するためのツールが入った画面が表示されます。

 

もしくはWebページの任意の場所で右クリックするとメニューが表示されます。その中に「ページのソースを表示」という項目があり、その部分をクリックするとそのWebページのHTMLが表示されます。

 

このようにHTMLを確認しながらでないと、直接的にWebページの操作は難しいと思います。

 

ブログなどでエディタなどを使えば、直感的にUPする記事の文字列を変更したり文字列に色をつけたりすることはできます。しかし、実際にUPされた後の文字列の抽出などは、そのページのHTMLを確認しながらでなければできないんじゃないかと思います。

 

ExcelVBAの場合、コードと操作する対象(セル上の文字列など)を直感的に直接紐づけることができます。しかしJavaScriptの場合、コードと操作する対象(Webページ上の文字列など)を直感的に直接紐づけることができません。

 

WordVBAを考えるとわかりやすいかもしれません。この分野に『最速攻略 Word マクロ / VBA徹底入門 〔Word 2013/2010/2007対応版〕』という本があるのですが、例えばWordの文書上の文字列を操作する場合、WordVBAでは次のようなコードを使います。

P.124

Sub WMacro050701()

   Selection.Copy

   ActiveDocument.Range(Start:=19, End:=19).Paste

End Sub

コードの意味としては、Wordの文書上の任意で選択した箇所をコピーして19文字目と20文字目に貼り付けする、というものです。

 

文書で「どの位置」にどの文字があるか考える場合、人間の感覚だと上記のコードのように「何行目の何文字目」みたいになるかと思います。

 

これがJavaScriptだとWebページ上の何行目の何文字目ではなく、HTMLの構造で「3つ目」の「pタグ」に記述されている文字列を操作する、みたいな感じになるということです。

 

これが自分が言いたかったJavaScriptにおける「コードでコードを操作する」という感覚です。また別の表現をすると、コードと操作する対象を直感的に紐づけることが難しいことから、JavaScriptを使う場合はVBAと違ってコード(JavaScript)と操作する対象の間にもうひとつコード(HTMLやCSS)が入ることから「一段階工程が増える」とも言えるかと思います。

まとめ

一般的にインターネット上などで「JavaScriptは初心者には優しい」という言葉をよく見かける一方で、「プログラミング言語を勉強しても挫折する人は〇割もいる」みたいな言葉もよく見かけます。

 

今の自分の感覚では「JavaScriptはそれほど初心者には優しくはない」んじゃないかと思いますし、プログラミング言語を勉強しても挫折する人が多いというのは理解できます。

 

自分もVBAを勉強することに対して一度挫折しています。その時は「なぜVBAを勉強するのか?VBAができるようになると具体的に業務がどう変わるのか、どう楽になるのか?」の具体的なイメージができていませんでした。

 

これと同様にJavaScriptを挫折せずに勉強するには、今回書いたような予備知識も必要かもしれないということです。じゃないと「えっ、これ何?なんでこんなコードが必要なの?」と考えてしまうからです。

 

なぜ「こんなコードが必要なのか」に対する答えは、JavaScriptはHTMLやCSSを操作するためのコードであり、HTMLのタグなどを取得しないとWebページを動的に操作できない、そのため「こんなコード」が必要になる、ということです。

 

そしてこの時の感覚やイメージというのが「コードでコードを操作する」というものであり、この感覚が理解・識別・区別できないとJavaScriptを理解するのは難しいかもしれないということです。

あわせて読みたい

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

コメント