思ったことを「メモ」にとっておく

主に読んだ本の備忘録として「本の抜き書き」と「思ったこと」を書きつづり、さらに本以外のことでも「メモしたこと」、「考えたこと」についてつづっているブログ

WEBエンジニアへの第1歩:HTML+JavaScript(なんちゃってSEでした12)@人生の棚卸し


スポンサードリンク

 

2回目の転職で、やっとWEB系エンジニアの仕事に就けた。ボクにとっては3社目となる会社で、Javaでのプログラミング研修が行われた。一応、プログラミング経験はゼロではなかったので、Javaの研修は2週間ぐらいで終了した。ここまでが前回の書いたことだ。

strengths.hateblo.jp

 

 

Java研修の次は「WEBサイト制作」研修

 

Javaのプログラミング研修が終わり、その次に言われたのが、HTML+cssJavaScriptの研修だった。

 

そこでは、「HTMLとJavaScript」を使ったコーディングが作業の大半を占めていたからだ。ボクが入社したときは全員がその仕事を難しそうにやっていた。楽々やっている感はまったくなかった。

 

それでも、言われたときは、プログラミングというよりも「ホームページ制作か。それなら簡単じゃん」と思い込んでいた。

 

なぜなら、20年ほど前のサイトの大半はテキストベースで画像がちょこっとあるのサイトが多く、ときどき、JavaScriptを使って動きのある風のサイトもあったりした。

 

ボクも当時、自分の「ホームページ」をHTMLとJavaScriptを少々使って作っていたので、そんなもんだろうと思い込んでいたからだ。

 

 

■みたことのないWEBページ

 

実際にその研修がはじまると、それが大きな誤りであることがすぐに気づいた。

 

研修の課題は、あるWEBページを作成するもので、すでにWEBページの基本雛形があって、その雛形ページをオーダー通りにカスタマイズしていくという内容だった。

 

そのWEBページは画面上に地図があり、地図にはカメラアイコンが置いてあって、それをクリックすると、そのカメラの画像が画面の一部に表示されるというものだった。さらにこのアイコンのカメラを実際に左右上下に制御できるというのだ。

 

こんなサイトは、それを閲覧するパソコン側にも負荷がかかるし、画像が見えるとなると、ネット回線も太くないと難しいだろうと思った。まだ当時は、ISDN回線の128kbpsが最速だったと思う(今は携帯でも5Mbpsぐらいあるので、携帯ですら、当時の最速ネット環境よりも40倍近く速くなっている)。

 

 

 

■WEBページの構造・仕組みを知る

 

この研修を担当してくれたのは同い歳の方だった。ここではKさんとしておく。Kさんから言われたのは、「この雛形ページの構造を自分なりに調べて、どこをどう変えればいいのかを理解するということ。コードをトレースしてみて」だった。

 

f:id:mitsu1973:20210209110316j:plain

Photo by Hal Gatewood on Unsplash

 

ボクはさっそく、HTMLを見たのだが、最上位のHTMLファイルは10行程度しか書いていない。よくみたら、他のHTMLファイルをそのファイルが読み込んでいた。

 

その読み込んでいるHTMLファイルの中身をみると、そのファイルも100行程度もかいてなくて、シンプルなものだった。

 

ただ、そのファイルの中で、JavaScripiファイルをかなり多く読み込んでいた。そのJavaScriptファイルを開いてみてみると、数十行のものから数百行になるものもあった。

 

これを解析するのか……。

一番最初の会社でのCOBOL案件のときのことを思い起こした。

 

ともかく、自分がこれまで触れてきた個人のホームページレベルとは雲泥の差があった。ボクがそのときわかっただけでも、WEBページの構造が3~4階層化されていて、ほぼJavaScriptだけで動いているようなものだった。

 

 

■やはり、まずは要件定義書、システム設計書

 

ともかく、まずは、このWEBサイトの要件定義やシステム設計を知らなければと思い、その資料を見せてもらった。

 

ボクにとっては見たことのない驚愕のWEBシステムだった。構造がめっちゃ重層的だけど、考え方はシンプル。

 

要件定義に書かれていた、使用環境はインターネットではなく「イントラネット」で回線は高速専用回線。利用できるパソコンのスペックがかなり高め。そして、またしても官庁系の案件であった。

 

そして、よく見ると、一部Javaアプリケーションが使われていた。サーバー側にも、クライアント側(PC側)にもJavaアプリケーションが使われているのだ。

 

どうやら、そのJavaアプリケーションでカメラの制御や、映像の制御をしているようだった。特にJavaのプログラムを書き換えたりすることはなく、ただ部品として使用されていた。

 

 

JavaScriptオブジェクト指向

 

さらに驚いたのは、クライアント側、つまりパソコンパソコン側に表示されるWEBページの作りだった。詳細は省くけど、JavaScriptをまるでJavaの如く使っているのだ。

 

JavaScriptスクリプト言語で軽い感じで使われるものだと思っていた。でもしっかり階層化されていて、あとでわかったことだが、プログラミングがオブジェクト指向のように記述されていたのだ。

 

当時、JavaScriptの技術書はいろいろあったけど、こういった使い方を書いている本はボクの知る限りなかった。ただ、オライリーの『JavaScript』(サイ本)にはオブジェクト指向としても使えるようなことを書いているのをみかけたぐらい。興味のある方はどうぞ。

JavaScript 第6版

JavaScript 第6版

 

 

いまでは、こんな素晴らしいサイトがある。あの当時に出会いたかった。

developer.mozilla.org

 

 

■どこの誰がつくったのか?

 

こんなものを誰が考えてつくったのだろう???って思ってKさんに聞いてみたら、これはこのシステムの製造元であるT社であった。こういったシステムをゼロから作り上げる人って、どんな人なんだろう……。

 

そのT社から資材として提供されたものを、オーダーごとにカスタイズしてつくって、T社に納品するのがメインの仕事であることもわかった。

 

さらに、この研修用でやっていたオーダーが実は実際の案件で、ボクが担当する初案件でもあった。終わるのに1か月ぐらいかかっただろうか。途中、高度の抽象化されたつくりを理解できなくて、心が折れそうになったが、Kさんたちのお導きもあって、最終的には終えることができた。

 

 

■この研修で得たこと

 

これをきっけけに、WEBサービスの仕組みそのものや、HTML、CSSJavaScriptの使い方。そして、JavaScriptの奥深さをしった。WEBページの設計の仕方でいろんなことがWEBでは可能になることもよくわかった。

 

ますます、これからWEBの可能性はもっと広がり、それに備えてもっともっと勉強して技術を磨いていこうと思った。

 

まずは、この会社で、WEBの基本的なことを徹底気に学びつくすことを心に強く決めた。