ここ最近は『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版』を読んでいました。
やっと一通り1週読めたので、ITやプログラミングについて初心者の自分の視点から気づいたことを簡単にまとめていってみたいと思います。
『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版』の内容というよりは、本書を理解するための前提知識を得るための手段として、ブログを書いてきてよかったといった内容です。
HTML・CSSを理解するための前提知識としてやっておいて良かったこと
「HTML・CSSを理解するための前提知識としてやっておいて良かったこと」という見出しを使っていますが、それは何でしょうか。
今の時点、今の自分の知識・経験からやっておいて良かったことは、この「知識の倉庫の整理」というブログを約５年間書き続けてきたことです。
このブログは今はWordPressで書いていますが、最初は「はてなブログ」から始めています。はてなブログが嫌になったというわけではなく、自分がイメージするブログを作るにはどうしても制限が多かったと感じたためです。
今はどうかわかりませんが、自分が移行する前のはてなブログでは例えば全てのページの指定の文字列を一括で別の文字列に置換するといったことができませんでした。
他にもこういったことがしたいけどはてなブログではどうしても手間がかかる、でもWordPressでは簡単にできてしまうらしいといった状態だったので、スイッチングコストを鑑みても将来の拡張性や安全性を考えても、やはりWordPressに移行せざるを得ないと判断し移行しました。
はてなブログの時より全然開発者寄りの知識(例えばHTMLとかCSS、WordPressの使い方などの知識)が必要になって、最初は四苦八苦しましたが、今ではそれほど問題なくこうやってブログを書くことができています。
今の状況を考えると、ブログを始めたのもWordPressに移行したのも、今の自分にとっては良い判断でした。なぜならブログに限った話ではありませんが、
「Webという場所に対して、能動的に入力や出力などの何らかの操作をした経験がないとHTMLやCSSに直接的に触れる機会をなかなか得られない」
と感じるからです。
HTML・CSSに触れる機会が少ない、もしくは全くないということだと、このタグを使うとWeb上では実際にどう表示されるのかということがなかなかイメージするのが難しいのではないでしょうか。タグや要素がわからなければ属性という概念や使い方も理解するのが難しくなってくるでしょう。
ブログを書いて、実際にHTMLやCSSをいじったりしてWeb上での表示のされ方を確認していないと、操作と表示のされ方がどう繋がってくるのかがわかりません。つまり『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版』(これ以降「本書」と書きます)を読む・理解するための「前提知識」が得られないということです。
ブログを始めた時はHTML・CSS・JavaScriptを勉強するためにすごく役立つなんて全く夢にも思っていなかったです。何もしないよりかは、何か新しいことを始めておけば何かに繋がるんじゃないかぐらいにしか考えていませんでした。
だからWebという世界を理解するための前提知識として、このブログを書いてきて本当に良かったと本書を読みながら感じていました。
約10年前に挫折した時の状態について
話が少しとびますが、今から約10年ぐらい前、自分がまだ大学3年か4年ぐらいの時だったでしょうか、その頃にHTMLとCSSの講義を受けた時がありました。
当時の自分はIT業界で働きたいと考えていたのですが、HTMLやCSSの知識は何となく必要だろうと感じていたのと伴に「IT業界に入るための入門者に必要な知識」ぐらいのイメージしかありませんでした。
この講義を受ける前に初級シスアド(ITパスポートの前身とされる資格)や他にもいくつかITに関する勉強はしてはましたが、今の自分だからわかりますが当時の自分はITに対して舐めていた感があったと思います。
当時の自分はそのような意識だったので、実際にHTMLやCSSのコードを見せられた時は愕然としました。なぜなら文字通り「全く意味が分からなかった」からです。
まず単純にコードの意味がわからなかったですし、そもそもそれが実際にWeb上で使われる「HTMLのコード」である、ということすらわかっていなかったと思います。とにかくとてつもなく難しそうな暗号文ぐらいにしか見えていませんでした。
その時点でわからないということは、Web上ではどう表示されるのか、という発想も出てくるはずがありません。この時現実として強烈に「自分はIT業界で働くには能力が低い」ということを痛感させられ、目の前が真っ暗になったのを覚えています。
この経験から言いたいことは、ITの概念的な知識ではなくてブログを書くこと(ある程度の文章量の蓄積とそれに伴ってHTMLやCSS、JavaScriptを多少いじるくらい使い込む)などを通して
「コードなどの実際に現場で使われる知識」を多少なりとも知っている、使ったことがあるといった「ある程度の前提知識がある」状態じゃないと本書を読み通すのは難しいんじゃないかと思いました。
なぜなら
「これはどういったコード、タグなのか」
「なぜこのコードが必要なのか、このコードを使うと画面上でどう表示されるのか」
といったことがなかなか理解するのが難しくなってくると思うからです。10年前の自分やVBAを勉強した時のことを考えると、プログラミングを学ぶ上でブログやExcelなど、やはり「操作対象」を実際に使ってみるというのは大事だなと感じます。
１つの文章、1つのキーワードに使われる「属性」の種類とその多さについて
本書を読んでいくつか驚いた中のひとつとして「タグに入れられる属性というものの種類やその多さ」があります。「あぁ、こんなにあったんだな」と今は感じています。
「要素」というものについてはこのブログを書いてきた中で「pタグ」とか「liタグ」などたくさん見てきたので、「いろんな種類の要素というものがある」というはわかってはいました。
驚いたのは、その要素の各タグ内で使われる「属性」です。そもそもITとかプログラミングについてあまり知識がない人にとっては「属性」という所で躓いてしまうのではないでしょうか。
自分はこの勉強を始めるまでに、VBAの勉強をしてきましたし、JavaScriptについてもちょっとだけ勉強はしてたので、その甲斐あって何となくイメージはできていました。
わかりやすく説明するとRPGなどのキャラクターなどに対して、特技や技、魔法を覚えさせるみたいなイメージです。このキャラクターは水属性を持っているとか、この魔法は火属性みたいな感じです。
とにかく何らかの対象が「何か持っている、何かできる、何かの機能がある」みたいなイメージです。こういった「属性」をHTMLで使われる各タグで使える、さらに使える属性がタグごとに決まっているということです。例えば「audio要素」の属性について本書には以下のように書かれています。
P.87
表1-9-5：audio要素に指定できる属性
属性名 値の示すもの 指定可能な値 src データのアドレス URL(空文字は不可) controls 再生・停止ボタンなどを含むコントローラを表示させる 論理属性(属性名だけで指定可) autoplay ページが読み込まれたら自動的に再生を開始する 論理属性(属性名だけで指定可) loop ループ再生する(再生を繰り返す) 論理属性(属性名だけで指定可) muted デフォルトで音量が0の状態いする 論理属性(属性名だけで指定可) preload 音声・動画データのプリロード(バッファリング)に関する指示 preload=”none”または
preload=”metadata”または
preload=”auto”
crossorigin 元文書とは異なるオリジンからデータを取得する際の認証に関する設定 crossorigin=”anonyumous”
crossorigin=”use-credentials”
上記のような属性をaudio要素に入れて使うというのがルールになっています。本書を読んで驚いたのは要素の数はもちろん、そのたくさんの要素ごとに多くの属性があるということです。
ここまで書いて思うのは、ブログやWebを使った何かを経験していないとタグ内の属性というものを理解するのは難しいんじゃないかと思います。
なぜならそういった経験がないと、HTMLにおける属性とは何なのか、なぜ属性というものがあるのか、属性というものの使いどころはどういった場合なのか、がイメージできなくてなかなか理解が進まないと思うからです。
ここでもやはりある程度の前提知識は必要なんじゃないかと思いました。
動画や音声もHTMLで操作できる件について
下にパソコンで音楽などを聞こうとする時などに使われるコントロールが表示されています。
別にクリックしたからといって何か聞けるようにはなってはいませんが、HTMLのaudio要素やvideo要素を使うと音声や動画も操作できるようなのです。
最初この事実を知ったときは非常に驚きました。VBAが使えるのはExcelだけじゃなく、AccessやOutlookなどMicrosoftのOfficesoft全てに加えてIEも操作できるという事実を知った時ぐらい驚きました。
具体的にどのレベルまで操作できるのかはまだわかりませんが、今までHTMLはWeb上の文章しか操作できないと思っていたので、これはめちゃくちゃ驚きました。
今はYoutubeなど動画の世界が盛り上がっていますが、HTMLを勉強すれば場合によってはすごいことができるようになるのではないかとすごく期待しています。
レスポンシブWebデザイン、Web広告やSEO的な知識も必要とされる
本書を読んで驚いたのは「レスポンシブWebデザイン、Web広告やSEO的な知識」もHTMLやCSSの分野に入るという点です。この部分もブログを書いてこなかったらたぶん理解できなかったと思います。
もしブログを書いてこなかったら絶対「？？？」になってたでしょう。特にレスポンシブとかSEOとか。ブログなどを書かずに普通に生活しているだけでは、レスポンシブとかSEOとせいぜいちょっと目にするぐらいで、そこまで深い知識は得られないでしょう。そういった知識を得るための必要性を得られないですからね。
消費者ではなく生産者の立場で行動してきたからこそ、自分が書いた記事が見る人の画面にどう表示されるのか考えられるようになったんだと思います。もし、ブログを書くということをしてこなかったら、
「他の人が持っているモニターには様々な大きさがあって、そのモニターの大きさごとに見やすいように表示させる」
なんてまず考えないでしょうし。
他にもSEOという言葉ありますが、これはWikipediaには次のように書かれています。
検索エンジン最適化（けんさくエンジンさいてきか、英: Search Engine Optimization, SEO、サーチ・エンジン・オプティマイゼーション）とは、検索エンジンのオーガニックな検索結果において特定のウェブサイトが上位に表示されるようウェブサイトの構成などを調整すること[1]。また、その手法の総称[2]。
平たく言うと、SEOとはWeb上、検索上で上位表示させるための手法といったところでしょうか。まぁいろんな細かいテクニックはあるようなのですが、現在の王道は「ユーザーにとって役立つ記事」と言われているようです。
このSEOという分野はブログを長いこと書いていれば嫌でも目にするキーワードの1つであり、たくさんの書籍も出版されるほどです。なぜこれほど注目されるかと言えば、自分のブログやサイトへのユーザーの訪問・アクセスが増えれば、それだけ自社の商品やサービスを買ってくれる人も増えるからです。
これはWeb広告とも密接に関係しています。あまり踏み込むと話が長くなってしまうのでここら辺にしておきますが、ブログをここまで書いてこなかったらこういった分野も「？」になっていたでしょう。
まとめ
本書を読むことを通してブログを書いてきて非常に良かったと実感したのと、今回書いた部分以外でも「HTML・CSSってこんなことできるの？」(デバイスアクセスAPIなど詳しくは本書を参照されると良いです)と感じることをたくさん学ぶことができました。
物事には「一足飛びにはいかない」なんて言葉もありますが、今だからこそわかりますが、10年前の自分では仮にIT業界とかWebに関する会社に就職できたとしても絶対上手くいかなかったと断言できます。
自分は今まで外食→経理→VBAと来て、VBAでのツール作成と限界からJavaScriptの知識の必要性を感じました。さらにその前段階としてHTML・CSSの知識の必要性に迫られました。
HTML・CSSを学ぶ上でブログが非常に役立ったということは色々書いてきましたが、その知識・感覚に辿り着くまでに社会人になってから約10年かかりました。
自分は派遣社員としていろんな会社で働いてきていろんな人に会ってきており、その中にIT業界に入ったのに経理や別の世界に来た人も結構いたのですが、その時の自分は「なんでそんなもったいないことを・・・？」と思ったりもしました。
自分があれ程憧れていた業界をなぜこれ程やめてしまう人がいるのか。今だからこそ何となくわかりますが、理由の一つとしては、その業務をするための「前提となる知識」や「準備」が浅かったんじゃないかと思います。
日々の業務をしながら勉強するのも大事ですが、それもなかなか大変です。理想的なのは、自分のイメージする業務や生活がどういったものなのかを整理して、それを実現するために必要なことを事前に学んでおくことです。
たとえそれがはっきりとイメージできなくても「これはきっと何かに繋がるはず」という良い感覚があれば、それを始めておくべきではないでしょうか。
コメント