【初心者向け】JavaScriptを使ってできること｜読み込み方とサンプルコード

こんにちは、こがたです。
ぼくは商品・サービスをURLベースで紹介できるサービス「Goorec」を運営しています。
普段使っている商品や自分のコンテンツを紹介できるので是非ご活用してみてください！

どのWEBページにもJavaScriptが使われています。
この記事ではJavaScriptはどういうことができるのか説明します。

後半にニコ動のようなコメントが流れていくサンプルコードを紹介します。
(実際にこの記事上でコメントの動きを試すこともできます)

対象読者

JavaScriptのできることを知りたい
WEBページに動きをつけたい
WEBアプリを開発したい
WEBページに動きをつける方法を知りたい
フロントサイド(HTML,CSS,JavaScript)学習中

まずJavaScriptの役割を説明します。
どういった仕組みで何ができ、何ができないのか把握しましょう。

次にJavaScriptを利用する方法を解説します。
初心者でも簡単にできるので手元で試してみてください。

実際にニコ動のようなコメントが流れるコードを紹介します。

最後に短時間で自分で考えながらコーディングできるようになるための学習方法を紹介します！

JavaScriptの役割
1. JavaScriptができること/できないこと
2. 事前に理解しておいた方がよい知識
JavaScriptを読み込む方法
1. 外部ファイル
2. HTML(scriptタグ)内にコードを書く
(実装例)ニコ動のようなコメントが流れるコード
自分で考えて実装できるようになるための学習方法
フロントエンドの学習方法
最後に

JavaScriptの役割

JavaScriptはWEBページに動きをつけるために利用します。

HTML、CSSとは違いプログラミングの要素が大きくなりスゴく楽しめます。

こがた

JavaScriptだけで簡単なブラウザゲームを作ることもできます！

ぼくは初めて触れたときに数独を作りました^^

もう少し詳しくいうと、HTML(表示する内容)とCSS(ページのデザイン)をJavaScriptで状況に合わせて追加、変更、削除することができます。

実際にJavaScriptを利用してニコ動のようなコメントが流れるページを作成してみました。
※実際のコードは後ほど解説していきます

なんとなくJavaScriptのできることをイメージできたよ！

動かしたり表示したりを、状況に合わせて調整できるんだね！

ネットワーク、システム全体像については↓↓↓をご覧ください。

【ネットワークとは】サーバ・システムの仕組みがわかる｜アプリ開発したい方必見

WEB・スマホアプリを開発する方はもちろん、技術者以外でもネットワークの知識が必要な時代です！この記事ではインターネットの仕組みやWEBアプリ、スマホアプリがどのように動いているのか説明しています。システウの動く仕組みを理解することができたら、開発はもちろんブログなど多くのことに活用することができます。

JavaScriptができること/できないこと

できること

動きのあるWEBページを作る
APIをたたいてサーバのデータを取得する
非同期通信

できないこと

DB操作
サーバ操作
セキュリティ強化

JavaScriptはページに動きをつける以外にもサーバにアクセス(APIをたたく)してDB等の情報を取得することができます。

また非同期通信を行う際にも使用します。

Ajax(非同期通信)
XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。
Wiki(https://ja.wikipedia.org/wiki/Ajax)

簡単に言うとページを更新しなくても、サーバからデータを取得して表示することができる仕組みです。

こがた

たとえば、Twitterでタイムラインを表示する場合、スクロールしたら次々とデータを取得して数々のツイートが表示されます。

これは非同期通信でツイート情報を取得して表示しているのです。

こんなに素晴らしいJavaScriptにもできないことはあります。

ブラウザ上で動作するためサーバ側の処理をすることができません！
(サーバ側でAPIが用意されていれば、それを利用して操作することは可能です)

またブラウザで動作、つまりユーザの端末で動作するので、ユーザ自身で簡単にJavaScriptを書き換えることができてしまいます。

こがた

JavaScriptでセキュリティ対策を行なっていても、書き換えられる可能性があるので信用しすぎないようにしましょう。

セキュリティは基本的にサーバ側で考慮する必要があります！

事前に理解しておいた方がよい知識

JavaScriptを学ぶ前にWEBページの構造、デザインの仕組みを知っておく必要があります。

前提知識

HTMLの構造
CSSの役割、書き方

HTMLはWEBページに表示される要素をまとめたものになります。
詳細は↓↓↓をご覧ください。

【初心者向け】HTMLの基本を理解して応用させていこう｜フロントサイドの知識

WEBアプリ・サイトの開発、ブログの運営にはクライアント(ユーザ)側で表示するフロントサイドの知識が欠かせません。この記事ではWEBページの内容であるHTMLについて初心者向けに説明しています。最後まで読むと自分で応用させることができるようになるので、是非読んでみてください。

CSSはHTMLの各要素をどう見せるか、というデザインになります。
役割、書き方については↓↓↓をご覧ください。

【初心者向け】CSSの役割と書き方を学び応用力を身につけよう｜学習のやり方が重要

この記事ではCSSの学習方法と書き方を説明します。「CSSとは何か」というところから解説していくので、WEBアプリを開発したい方、ブログ運営されている方は最後までご覧ください。どのように学習すれば効率的に身につけられるのか紹介しているので、是非試してみてください。

JavaScriptを読み込む方法

JavaScriptをWEBページに反映する方法は２パターンあります。

反映方法

外部ファイルを利用する
HTML内に<script>タグを追加する

こがた

どちらにもメリット・デメリットがあるから説明していきますね！

外部ファイル

外部ファイルにするとHTMLファイルとJavaScriptファイルを別にすることができます。

外部ファイルを使うメリット

複数のHTMLで使い回すことができる
HTML、JavaScriptファイルそれぞれのコードが少ない

なーんとなくわかったような、、、わからないような、、、

具体的にHTMLコードを見てイメージしていきましょう！

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
　　<script src="sample.js"></script>
　　<title>JavaScriptサンプル</title>
  </head>
  <body>
  </body>
</html>

５行目の↓↓↓でJavaScriptを読み込んでいます。

<script src="sample.js"></script>

src属性に外部ファイル(JavaScript)のファイルパスを設定してます。

複数のHTMLファイルで同じJavaScriptを使用したい場合は、それぞれのHTMLでこのように読み込めば全てに反映することができます。

こがた

１つのJavaScriptファイルを修正したら、読み込んでいる全てのページに反映させることができるので、基本的には外部ファイル化します！

またHTMLに１行追加するだけで読み込むことができるので、１ファイルのコード量を減らすことができます。

こがた

プログラミングはいかにコードを少なく、管理しやすくするかがポイントになるので覚えておきましょう！

<head>タグ外でも読み込むことができ、上から順に実行されていきます。

HTML(scriptタグ)内にコードを書く

scriptタグ内に直接JavaScriptを書く方法もあります。
パーツによって部分的に利用することが一般的です。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
　　<title>JavaScriptサンプル</title>
  </head>
  <body>
   <p id="test-text">Test<p>
   <script>
    var testText  = document.getElementById("test-text");
    testText.style.color = "red";
   </script>
  </body>
</html>

9〜12行目でJavaScriptのコードを書いています。
(ここでは「Test」の文字を赤色に変えています)

ここで重要なのが、8行目のpタグよりも後ろに書いているということです。
それは上から順番に読み込まれるという特徴があるためです！

JavaScriptで「Test」の文字列の要素の色を変えています。
もしpタグよりも上にJavaScriptを書いても「Test」要素が読み込まれていないため、変更することができないのです。

こがた

部分的にJavaScriptを利用したい場合などによく利用する方法です。

利用方法まとめ

外部ファイル：共通した処理、大量のコード
HTML内記述：HTML要素を読み込んでから実行、要素に合わせた動き

ケースに合わせて使い分けてください！

(実装例)ニコ動のようなコメントが流れるコード

ここからは実際にJavaScriptを動かしてどういうことができるのかサンプルを見ていきます。

↓↓↓に適当な文字を入力して送信ボタンを押してみてください。
ニコ動のようにコメントが流れます。
※コメントは流れるだけで、保存されることはありません。他の方が見ることもできないので安心してください

本当にコメントが流れてきた〜！！

こがた

詳細の解説はしませんが、サンプルコードを載せておきますね！

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <title>JavaScriptサンプル</title>
  </head>
  <body>
    <div class="p-5">
      <form id="comment-form" action="#">
        <input type="text" id="comment-message">
        <input type="button" onclick="sendComment()" value="送信">
      </form>
    </div>

    <div id="comment"></div>
    <script src="sample.js"></script>
  </body>
</html>

// 画面サイズ
const wWidth = window.outerWidth;
const wHeight = window.outerHeight;

// コメント表示領域
var commentWrap = document.getElementById('comment');

// コメント送信
const sendComment = () => {
  const textbox = document.getElementById("comment-message");
  const inputValue = textbox.value;

  // ランダムなトップの位置
  randomTop = Math.floor(Math.random() * (wHeight-500));

  // 新しいHTML要素を作成
  var new_element = document.createElement('p');
  new_element.textContent = inputValue;
  new_element.style.position = 'absolute';
  new_element.style.top = randomTop + 'px';
  //new_element.style.left= wWidth-100+ 'px';
  new_element.style.left= wWidth + 'px';
  commentWrap.appendChild(new_element);

  const intervalId = setInterval(() =>{
    moveElement(new_element);
    var nowLeft = Number(new_element.style.left.replace('px', ''));
    if(nowLeft < -100){　
      clearInterval(intervalId);
      // 要素の削除
      new_element.remove();
    }}, 80);
}

const moveElement = element => {
  var nowLeft = Number(element.style.left.replace('px', ''));
  element.style.left= nowLeft - 10 + 'px';
};