【新卒研修】HTMLを学ぶハードルが下がる「ある考え方」 ＆ JSでちょっとしたイタズラをしてみた

目次

はじめに

はじめまして！26卒新入社員の佐藤遼平です！
先日、2日間にわたる「HTML/CSS＆JavaScript基礎研修」を受講しました！

「プログラミング」や「HTML」というワードは、IT未経験の人からすると「アルファベットの呪文がズラッと並んでいて難しそう……」というイメージがありませんか？ かくいう私も、高校時代はfor文で一度挫折しました(笑)

ですが、今回の研修を通して「ある考え方」を知っただけで、HTMLへの苦手意識がスッと消えました。

そこで本記事では、「これからWebの勉強をしてみたい！」と思っている方に向けて、HTMLを学ぶハードルが下がる「ある考え方」を紹介したいと思います。

さらに記事の後半では、研修で学んだJavaScriptを使って「絶対にクリックできない『お問い合わせボタン』」を作ってちょっとしたイタズラをしてみたので、ぜひ最後まで読んでいただけると嬉しいです！

HTMLを学ぶハードルが下がる「ある考え方」

結論からお伝えします。
HTMLはデザインではなく意味付けであるということです。

HTMLの学習ハードルを劇的に下げるある考え方、それは
「HTMLは文字の見た目を変えるものではなく、
文字に『意味付け』をして役割を持たせるもの」と理解することです。
例えば…

See the Pen
Untitled by 佐藤遼平 (@jmaowfed-the-builder)
on CodePen.

このようなTable関連のタグはtr,td,thが混ざっていて、よく混同されがちです。実際、私も全部「t」がついていて、どれがどれだか分からず、毎回絶望していました。しかしこれらの正体を知ることでスッキリしました。
実はこれらはただの英単語の頭文字だったのです。

HTMLが「マークアップ言語」と呼ばれる理由

「Row（行）」「Header（見出し）」「Data（データ）」。
これを知った時、「なんだ、ただの英単語だったのか！」と拍子抜けしました。

HTMLのタグは、コンピューターに対して「ここは見出しだよ」「ここはデータだよ」と意味を教えてあげる（マークする）ために存在しています。だからHTMLは「マークアップ言語」と呼ばれているんですね。

「この文字はどういう意味（役割）かな？」と考えながらタグを選ぶようになると、ただの暗号の丸暗記から抜け出せて、コードを書くのが一気に楽になり、楽しくなりました！

ちなみにAWSなどの資格で単語を覚えるときも、単語の由来を調べると個人的に定着度合いがグッと上がるのでおすすめです！

まとめ

あっという間の2日間の研修でしたが、「暗号を解いている」ようなイメージはなくなり「意味がわかるとやりやすい！面白い！」という実感に変わりました。

もちろん、明日からいきなりプロのエンジニアのようにバリバリとコードを書けるわけではありません。ですが、「Webサイトの裏側って、こういう仕組みで動いているんだ」という構造を知っておくだけで、日々の業務の景色が少し変わって見える気がします。

例えば、自社サイトのちょっとしたテキスト修正の仕組みが理解しやすくなったり、開発チームのエンジニアに「ここをこう動かしたい」と要望を伝える際に、相手の言語に少しだけ歩み寄ってコミュニケーションが取れるようになるはずです。

これからHTMLを学ぶ方も、今後プログラミングに触れる機会があれば、「難しそう…」と身構えずに、まずは自分が書いた文字で画面が動く楽しさを味わってみてください！

最後まで読んでいただき、ありがとうございました！

おまけ

JSでイタズラしてみた
HTMLで枠組みを作り、CSSで見た目を整えたら（今回は割愛しましたが）、JSで動きを加えることができます。
今回の研修でせっかくJSに触れたので、より理解を深めるために少し遊んでみました。

内容としては、「絶対に押せない！逃げ回る送信ボタン」です。

【実際の動きがこちら】

いかがですか？ マウスカーソルを合わせてクリックしようとすると、ボタンがスッと別の場所に逃げてしまいます（笑）。

裏側では何が起きているの？

難しいコードの解説は省きますが、実は裏側で Math.random() という「ランダムな数字（乱数）を出す」JSの関数を使っています。

「マウスが近づいたら、画面内のランダムな場所（縦〇〇、横〇〇の位置）にボタンを移動させなさい」
という指示を出しているんです。

ただのイタズラですが、自分が書いたコードが想像通りに動くという体験は、プログラミングの面白さを一番実感できた瞬間でした！