X

知識の倉庫の整理

はてなブログからワードプレスに引っ越しました。ここでは中小企業診断士の勉強記や経理、派遣社員として働いて気づいたこと、その他に技術関連や社会関連について思ったことを書いています。現在はAccessVBAを勉強中。

JavaScriptでWebページを操作できるがHTMLやCSSの知識も必要

当たり前といえば当たり前なのですが、JavaScriptというプログラミング言語だけを勉強してもあまり意味がないということに最近気づくようになってきました。

というのもJavaScriptで操作する対象はWebページやそれに伴う各オブジェクトになるのですが、それらは「HTML」や「CSS」などによって構成されています。このHTMLやCSSの知識がないと上手くJavaScriptが使えないわけです。

例えばVBAだけを勉強しても意味がないのと同じです。その操作対象となるExcel内の仕組み、例えばExcelにはセルというものがあってその中に文字列を入力できるとか、文字色を変えられたりします。

他にも、表に対して何らかの条件をつけたフィルターをかけられるとか、この列の数値をSUM関数を使って合計値を出す、といったことができます。

これらのExcel内のできることを全然知らずにVBAを知っていても、どの機能・動きがどのコードと紐づくかわからない、コードの実行によってどんな結果・メリットが得られるのかわからないので、ある程度複雑なシステムを作る事は難しいんじゃないか、と最近考えるようになりました。

どんな仕事でも上司から「現場を知らないのに何がわかる」と言われると思うのですが、まさにそんな感じですね。「現場主義」という言葉もありますし。

操作対象であるExcelを使ったことがない、インターネット・Webを使ったことがないような人がプログラミング言語だけを勉強してもたぶんあまり意味がないような気がします。

プログラミング言語を勉強したことによる具体的な結果やメリットをイメージできるようになるためには、やはりその操作対象を実際に自分でよく使ってみる必要があるでしょう。

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

HTMLのタグの種類がわからない

冒頭部分で「JavaScriptというプログラミング言語だけを勉強してもあまり意味がない」と書きましたが、そのことを強く感じたのが『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』を読んでいた時の次の文章です。

P.35

FAQの部分には、dlタグを用います。質問はdtタグ、回答はddタグで、質問・回答をペアを3組作成してます。

この文章を読んだ時に焦りました。なぜなら「dlタグ」「dtタグ」「ddタグ」の意味がわからないのはもちろん見たこともなかったからです。

自分は『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』を読むまでに次の2冊を読んでいました。

  • 『入門者のJavaScript 作りながら学ぶWebプログラミング』
  • 『JavaScriptの絵本』(2007年発行)

これらの本を読んでいたので、「基礎の基礎くらいはわかるようになっただろう」ぐらいに思っていました。にも関わらず「dlタグ」「dtタグ」「ddタグ」といったわからないタグが簡単に出てきてしまうということは完全に自分の勉強不足だなと感じました。

ちなみに「dlタグ」「dtタグ」「ddタグ」の意味として『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』では次のように書かれています。

P.315

・dl要素とdt要素とdd要素

用語説明型のリストの要素です。dl要素が用語説明型リスト全体、dt要素が用語、dd要素が説明を示します。

もう少し詳しく説明すると、次のような感じになります。

  • dl(DL)

definition list(定義)の略、定義リストを表すタグ

  • dt(DT)

definition teamの略。定義語を表すタグ

  • dd(DD)

definition descriptionの略。定義の説明を表すタグ

根本的に一から勉強し直さないと駄目だと思った

インターネットやWebは今や多くの人が使っています。例えばわからない言葉があったら調べ物に使ったり、動画を楽しんだり、業務用のシステムを使うために利用されたり、用途は様々ですし、自分も今までそれなりにインターネットやWebというものは使ってきていると思っていました。

他にも今まで、アメーバブログとかはてなブログを使ってきた経験がありますし、現在運営しているこの「知識の倉庫の整理」というブログはWordPressというオープンソースのブログソフトウェアを使っています。

こういったブログ運営の中でちょっとではありますがHTMLとかCSSを見たりいじったりしてきたことがあるので、先程書いた本も含めて「HTMLやCSSに対して全く知識がないことはないだろう」と思っていました。

例えばWebページのソースにある「<p>」はPタグと呼ばれ、Paragraphの略で「段落」を意味するHTMLタグというのはわかります。また、<br> は BReakの略で、改行に使われるというのもわかります。

他にもHTMLの特徴としてhead要素とかbody要素があって、web上にある程度整理された文章を表示するには、例えば見出しとして表示させたければ見出しとして表示されるタグで指定の文章を囲むなど、そういったルールなどは知っていました。

CSSは次の書式で表示するというのも何となく知っていました。

『JavaScriptのプログラミングのツボとコツがゼッタイにわかる本』

P.319

セレクタ{

プロパティ: 値;

}

また、色などは「#FFFFFF」といったコードを使うというのも知っていました。

けれども本書の今回の部分が理解できなかったことと、ちゃんとJavaScriptが使えるようになるためには「HTMLやCSSというものを根本的に勉強し直さないと駄目だな」と感じたわけです。

コードを知ることで「こんな機能があったんだ」ということを知ることもある

ここまではJavaScriptやVBAなどのプログラミング言語を勉強する上で、ExcelとかWebとかHTML・CSSといった操作対象を知らないといけないといったことを書いてきました。

それとは逆にコードを知ることで「こんな機能があったんだ」「こんなことができたんだ」ということに気づくこともJavaScriptやHTML・CSSであると思っています。

これはVBAを勉強していて気づいたことです。例えばこのブログでは以下のようなことも書いています。

上記の記事では、VBAを使うとExcelだけでなく、ExcelからAccess、AccessからWord、ExcelからOutlookなどを操作できることはもちろん、OLEオートメーションを使ってIEも操作できるといったことを書きました。VBAでPDFの操作もできます。

当時の自分にとって、そのようなことはとてつもなく画期的なことでVBAというものの可能性について非常に感動しました。「VBAってこんなこともできるんだ」と。

他にもクラスモジュールを理解することで、非常に多くのフォームを動的に一括で制御できたり、「WithEvents」というコードと組み合わせることで「イベントをつくる」ということもできるようになります。

だからたぶん、このようなことがJavaScriptやHTML・CSSにもあるんじゃないかとワクワクしています。日頃手作業でネットサーフィンしているだけでは絶対に気づけないようなことが、たぶんたくさんあるんだと思っています。

まとめ

JavaScriptを勉強してWeb上の操作を自動化しようと思ったが、そのためにはWebページを構成しているHTMLやCSSを理解しないといけなかった、というのが今回気づいた点です。

ExcelVBAを勉強していた時はこういった点は全然意識はしていませんでした。というのもExcelは、VBAを勉強するまでは自分の中では結構使い込んできた感覚があったからです。経理としての仕事の期間がそれなりにあったので、Excelの機能は幅広く使っていたと思います。

けれども今回のHTMLやCSSはExcelの時と比べると趣味やちょっとしたことに使っていたというレベルでしょう。業務のために使い込んでいたというわけではないので知識としては全然未熟だったということですね。

逆に全然未熟だからこそ期待している部分もあります。たぶんHTMLやCSSを一から勉強しなおすことで、たくさん「こんなことができたんだ」ということに気づけるのではないかと思っています。

そこからさらにJavaScriptを勉強することで、ExcelやVBAのようなローカルの特定のアプリケーションだけを操作する方法の時とは違ったもっと画期的な新しい何かに気づけるんじゃないかと期待しています。

あわせて読みたい

更新日 2019年11月10日 9:34 AM