【事例で学ぶ】JavaScriptとは何か?

HTMLとCSSを勉強中の方から「JavaScriptがよくわからない」という声をたくさんいただきました。HTML/CSSはある程度わかったけど、JavaScriptはなんだかとっつきづらいと思っている方も多いのではないでしょうか?

そんなみなさん、ご安心ください!!

ここから4回に分けてJavaScriptの初歩レベル〜ハンバーガーメニューの実装までをスムーズに学べるステップを作成しました!

フロントエンドではなく、Webデザイナーを目指す方はとりあえずこれだけしっかりと抑えておけば問題ありません😊
(ただし、わからないことを適宜検索する必要はあります。。)

以下の4ステップでJavaScript/jQueryを学びましょう!!

  1. 【事例で学ぶ】JavaScriptとは何か?(この記事です)
  2. Webデザイナーが知っておくべきJavaScriptの最低限の文法
  3. 【これだけ覚えて!】jQueryの書き方
  4. 【コピペでできる!】jQueryを使用したハンバーガーメニューの作り方

JavaScriptとは

プログラミング言語はブラウザ側で動作するものとサーバー側で動作するものの2種類に大きく分かれます。ブラウザ側をフロントエンド、サーバー側をバックエンドとも言いますね。

JavaScriptは、ブラウザ側で動作するプログラミング言語として最も使用されているものの1つです。JavaScriptは、Webサイトを構成する要素を自由に操作できるため、できることは多岐に渡ります。

Webデザイナーとして理解しておきたいことは「JavaScriptを使用すると、ユーザー側のアクションや時間などの条件でWebサイトを構成する要素の操作ができる」という点です。

言葉の説明だけだと分かりづらいと思うので、実際にJavaScriptを使用しているサイトを見てみましょう!

JavaScriptを使用しているサイトを見てみよう

JavaScriptは世の中のほとんどのサイトに使用されています。Webサイトで頻出のUIパターンは基本的にJavaScriptを使用して実装されています。

アコーディオンメニュー

プロデュースカンパニー・エードット | http://a-dot.co.jp/

モーダルウィンドウ

2021年度博報堂アイ・スタジオ新卒採用サイト | https://www.i-studio.co.jp/recruit2021/culture/

カルーセル

株式会社サクラクレパス | https://www.craypas.co.jp/

スクロールボタン

D2C dot | https://www.d2cdot.co.jp/

ハンバーガーメニュー

病院・クリニック専門 増患対策に効果的なホームページ制作|Ex Partners【公式】| https://www.ex-partners.co.jp/

上記のようなUIパターンはユーザーのクリックに合わせて、HTMLやCSSを操作することで機能を実装しています。
このときに「ユーザーのクリックというタイミング」を取得して、「構成要素を操作する」のがJavaScriptの役割です。

なんとなくJavaScriptの役割について理解できたかな??
次回は、実際に手を動かしながらJavaScriptの基本文法を学ぶよ!!

https://crestadesign.org/js-grammar/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA