【JavaScript】JavaScriptとは?初心者向けに分かりやすく解説!

JavaScript

こんにちは!
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです!
Webデザイナーってどんな仕事内容?これからWebデザイナーに挑戦したい!という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています!

今回は、初心者向けにJavaScriptを分かりやすく解説します!
JavaScriptを覚えるとホームページ制作がもっと楽しくなる!

JavaScriptとは?

JavaScript(ジャバスクリプト)とは、Webブラウザ上で動くプログラム言語のことで、js(ジェイエス)と略して言ったりします。

Webブラウザ上で動くので、phpのようにサーバーで動くプログラムとは違い、サーバーにアップロードせず動作を確認できるので、プログラム言語の中では開発しやすいため、初心者におすすめのプログラム言語です。

JavaScriptは、Webサイトをリッチにすることができ、主に「画像クリックで拡大」や、「商品が横にスライドする」など、Webサイトを見ていると良くあるようなアニメーションを実装することができます。

しかも、こういったアニメーションはネット上にライブラリがアップロードされていて、無料でダウンロードすることができます。

ただ、htmlとcssとは違い、しっかりプログラム言語なので、ある程度の学習は必須になります。

JavaScriptとJavaの違い

ここで良く間違えやすい「JavaScript」と「Java」について解説しておきます。

JavaScriptはWebサイト制作で使用するプログラム言語で、JavaはSNSやスマホアプリ開発などに使われる言語です。

あまりWebの知識がない方がJavaScriptのことがJavaと言ったりしますが、全く別物なので注意しましょう。

JavaScriptって何ができるの?

「JavaScriptとは?」でも言いましたが、Webサイトをリッチにすることができ、ユーザーに気持ちよく閲覧してもらうことができます。

  • 画像がそのままだと小さいのでクリックして拡大して見れる
  • 商品が指1本の動作で色々な角度から見れる
  • メニューボタンをクリックしたら見たいページが下から表示される

など、ありとあらゆるアニメーションがJavaScriptで実装することができます。

このページはあまりアニメーションは使っていないのですが、右下の「↑」ページトップボタンもJavaScriptで実装しています。
通常であればパッと一瞬でページトップに飛びますが、ぬるぬるっとページトップに飛ぶようにしています。

こうすることで、いま自分がページのどのくらいの位置にいたか、このページのボリューム感が分かるようになります。

JavaScriptを取り入れることで、単純にリッチにするだけではなく、ユーザーにとって使いやすいWebサイトにすることができます。

JavaScriptの書き方

では早速、JavaScriptの書き方について解説します。
まずは、以下のコードをテキストエディターにコピーして保存し、Webブラウザで開いてみましょう。

<!DOCTYPE html>
<html>
<body>

    <script>
        document.write("Hello world!!");
    </script>

</body>
</html>

どうでしょうか?
「Hello world!!」と表示されたでしょうか?

これがJavaScriptの基本の書き方で、「<script> 〜〜〜 </script>」スクリプトタグで囲んで記述します。
上記コードは「ブラウザに Hello world!! と書き込む」例になります。

テキストを置き換えてみる

上記コードだとJavaScriptの意味があまりないので、次にテキストを置き換えてみましょう。
先ほどのファイルに上書き保存して、ブラウザを更新してみましょう。

<!DOCTYPE html>
<html>
<body>

    <p id="sample">元のテキスト</p>

    <script>
    	var elem = document.getElementById("sample");
        elem.innerHTML = "置き換えたテキスト";
    </script>

</body>
</html>

「置き換えたテキスト」と表示されたはずです。
本来であればpタグに囲まれている「元のテキスト」が表示されるのですが、JavaScriptでテキストを置き換えています。

5秒後にテキストを置き換える

テキストを置き換えるだけではアニメーションとは言えないので、次は5秒後にテキストが置き換わるようにしてみます。

<!DOCTYPE html>
<html>
<body>

    <p id="sample">元のテキスト</p>

    <script>
    	function txtChange() {
            var elem = document.getElementById("sample");
            elem.innerHTML = "置き換えたテキスト";
    	}
    	setTimeout(txtChange, 5000);
    </script>

</body>
</html>

5秒後にテキストが置き換わったでしょうか?

少し解説すると、先ほどと同じテキストを置き換える記述を「function」で囲みました。
functionとは関数のことで、1つのまとまりにできるイメージです。
その関数を「setTimeout」で5000ミリ秒(5秒後)に実行すると言った書き方です。

このように「何秒後にこれを動かす」「何かが実行(表示)されたらこうなる」と言ったことがJavaScriptで実装することができます。

最後に

以上、JavaScriptについて解説しました。
初心者におすすめのプログラム言語ではありますが、ある程度の学習は必要になるので、初めは「どんなことをWebサイトでやりたいか」から考えるのが良いと思います。

今回は、

  • JavaScriptとは?
  • JavaScriptとJavaの違い
  • JavaScriptって何ができるの?
  • JavaScriptの書き方

についてお伝えしました。

次回はおすすめのライブラリなどについてお伝えできればと思います。

最後までお読みいただきありがとうございました!
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです!
何か気になること等あればお気軽にコメントください。

コメント

タイトルとURLをコピーしました