Web制作の学習を進めていくと、「JavaScript」という文言が出てきます。
HTMLやCSSと違ってJavaScriptはプログラミング言語であり、学習難易度も比較すると高くなります。
本記事ではJavaScriptはどこまで勉強する必要があるかについて考えてみました。
本記事を通して以下のお悩みが解決できるかと思います！
- JavaScriptがどういうもので、HTMLとCSSとはどのように違うのかが理解できる
- JavaScriptはどこまで勉強したほうが良いのかが把握できる。
皆様のお悩みが解決できますと幸いです。
JavaScriptとは
まず、JavaScriptとはいったい何なのか、簡単にご説明させていただきます。
JavaScriptとはプログラミング言語の一種で、フロントエンド側の動作を制御します。
フロントエンドというのは、ユーザから見える部分のことを指します。
HTMLではページの骨組みにあたる部分を、CSSでは色や配置など、装飾に当たる部分を指定します。
JavaScriptでは、クリックしたらメッセージを表示したり、色を変えたり、Webサイトに動的な要素を取り入れる役割があります。
プログラミング言語に「Java」というものがありますが、それとは全く別物で、「Java」は主にアプリケーション開発に用いられる言語で、「JavaScript」とは全く用途がことなります。
名前が似ているので混同しやすいですが、別物ということをご認識ください！
どこまで勉強すればよいのか？
一般的なWeb制作では、複雑な処理を書く必要もなく、そこまで難易度の高いことを考える必要はありません。
そのため、毎回制作で使用する範囲が決まってくるので、よく使用する処理についてご紹介させていただきます。
特定の要素（HTMLタグ）を取得
DOM操作とも呼ばれますが、特定の要素（HTMLタグ）を取得することによって、あとからclassを付与したり、消したりすることが可能です。
DOMとは「Document Object Model」の略で、この段階では「HTMLとJavaScriptをつなぐために必要なもの」と認識いただければよいかと思います。
DOM操作は頻繁に使用しますので、押さえておきたい構文になります。
要素（HTMLタグ）の操作
取得した要素（HTMLタグ）に対して、classを付与したり、要素（タグ）そのものを削除したりといったことが可能です。
HTMLとCSSで制作されたサイトではできない、JavaScriptならではの処理になりますね。
後述するイベント処理と組み合わせて使用するケースがほとんどです。
イベント処理
特定の要素が○○をしたら○○をするといったように、動的な処理を付与することができます。
例えば、ハンバーガーメニューのボタンをクリックしたら、サブメニューを表示するなど、ユーザ側の操作によって要素が動作するということもでき、いわゆる「動的サイト」を制作することが可能です。
要素の取得、イベント処理、要素の操作をセットで使用することが多いです。
スクロールしたら要素がフワッと表示されるような処理も、イベント処理によって制御されています。
本では勉強しない？
HTMLとCSSをある程度勉強できたから、こう考える方もいらっしゃるかと思います。
- 次はJavaScriptだ！
- よし、本を買って勉強しよう！！
- やたらと分厚いけど、とりあえず大事そうだから１周してみよう！
ちょっと待ってほしいです！
Web制作で使用する部分はほんの一握りで合って、仮に勉強したとしても使用しない可能性が高いです。
Web制作を主とするのであれば、そこまでする必要はないと考えております。
私もJavaScriptに関しては極めているわけでもなく、わからない部分は調べるといったやり方で、特に問題も発生しておりません。
ですが、「わからない部分は調べる」といったことは、基礎的な知識がないと、
- わからないけどどうやって調べていいのかわからない
- わからないことがわからない
といったことになりかねません。
ではどこまで（何を）勉強すればよいのか？
Web制作を進めるにあたり、以下のことについて理解できるよう勉強を進めるのがよいと考えております。
- 変数
- 変数を使用した計算や文字の結合
- IF文
- 配列
- 繰り返し処理
- DOM操作
- イベント処理
- 非同期処理
上記のことについては、本サイト内でも今後解説させていただく予定です！
完璧でなくても、どういったものなのか、ということが理解できていれば、わからない場合でも調べやすくなると思います。
JavaScriptには「jQuery」（ジェイクエリー）というライブラリというものが用意されております。
これを利用することにより、JavaScriptを簡単に記載することができるようになります。
基本的な概念が勉強できた後は「jQuery」にも触れてみるのが良いかと思います。
さいごに
HTMLやCSSとは違って、JavaScriptはプログラミング言語であるため、若干抵抗がある方もいらっしゃるかと思われます。
ですが、JavaScriptが使用できると、よりリッチな動きのあるWebサイトが制作できるようになります。
ユーザからもう少しおしゃれにしたい、スクロールしたらふわっと表示させてほしいなど、ご要望をいただくことは多々あります。
そんなときに、JavaScriptが使用できると実装するのが用意になるため、案件もスムーズに進めると思います。
より柔軟な対応ができるよう、頑張って身に付けていきたいですね！
