Blog
ブログ

【JavaScriptとは?】Web制作の初心者向けに解説!

JavaScript
javaScriptとは
  • JavaScriptがよく分からない
  • JavaScriptを使うと何ができるの?
  • JavaScriptはどうやって勉強すればいいの?

JavaScriptはWeb制作で使われることの多いプログラミング言語です。

当サイトでもJavaScriptを使っています

しかしHTMLやCSSを学んだ後にJavaScriptを勉強しようとすると、あまりの違いに面食らってしまう人が多いです。まったく内容が違うからビックリしますよね。

この記事ではJavaScriptがどんなプログラミング言語で何ができるのか解説します。勉強で混乱しないためにも、一体何をこれから学ぶのか改めて確認しましょう。

JavaScriptとは

JavaScriptのコーディング画面

JavaScriptはWebサイトに動きをつけることが得意なプログラミング言語です。略してJSと呼ばれたり書かれたりします。

Webサイトで「時間によって変化する画像」や「クリックすると表示が変わるボタン」など見たことはないでしょうか。

動きでアクセントをつけることで見ている人を飽きさせないWebサイトを作ることができます。

単調だとちょっとつまらないですよね

見た目や操作性を良くするために多くのWebサイトではJavaScriptが使われています。

JavaScriptでできること

グラフが表示された画面

実際にJavaScriptで何ができるのか、次の3点について解説します。

  • スクロールに合わせて要素の表示方法を変える
  • フォームの入力内容を確認する
  • 画像をスライドショーのように切り替える

スクロールに合わせて要素の表示方法を変える

ユーザーが画面スクロールしたらヘッダーを浮かせる、といった処理は良く使われます。

JavaScriptの基本は、何かをキッカケに処理を走らせるというものです。スクロールしたらやクリックしたらなどです。

当サイトでもスクロール時にヘッダーを浮かせて、右下に画面上へスクロールするボタンを出現させるようにしています。

具体的にはクラスの付け外しで実現しています

フォームの入力内容を確認する

フォームにどういった入力がされたかで内容を変化させることができます。

例えば質問フォームの入力内容に応じて次の質問内容を変えるや、全部入力されるまで送信ボタンを押せないようにするなどですね。

他にも入力内容に電話番号や住所の入力値におかしな値が無いかなどのチェックに使うこともできます。

画像をスライドショーのように切り替える

トップページのイラストや、背景画像が動くサイトを見たことはないでしょうか。JavaScriptを使うと画像を動かしたり消したりできるようになります。

ユーザーがクリックなどの操作をしたときだけでなく、時間経過で自動的に動くサイトもよく見かけますね。

ちなみに画像が切り替わる動きをスライダーといいます

JavaScriptの勉強方法

本の上にメガネが乗った画像

勉強方法として1番いいのは実際に自分で作ってみることです。でもいきなり作るのはちょっとハードルが高い高いですよね。

なので最初は学習ハードルが低く簡単に始められる方法を使いましょう。特にProgateというプログラミング学習サイトがおすすめです。

初心者に人気のプログラミング学習サイトです

Progateでは実際に手を動かしながら勉強ができるので、ずっと文字を読んで退屈で眠くなるということも起きにくいです。

すべてのコースを受講するには有料会員(1,078円/月)になる必要がありますが、最初の方は無料で学習することができます。まだやったことのない人は、とりあえず自分にあうかお試ししてみるのがおすすめです。

まとめ:JavaScriptで見やすいWebサイトを作ろう

コーヒーとPCのあるデスク

JavaScriptを使うとWebサイトに動をつけるとユーザーに分かりやすく、飽きにくいWebサイトを作ることができます。

HTMLやCSSとまったく違う文法なので最初は戸惑うかもしれません。しかしWebサイトを動かすためだけであれば高度な技術がなくても大丈夫です。

Progateで学習できる内容でも十分可能ですので、まずはお試ししてみてください。

基本的な文法が分かれば大丈夫です