MENU
未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる
  1. ホーム
  2. Web制作
  3. 【学習ログ15】 JavaScript jQueryフォーム操作・JSONについて

【学習ログ15】 JavaScript jQueryフォーム操作・JSONについて

広告
Web制作

こんにちは！つるぴよ(@tsurupiyoo)です

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

あわせて読みたい
【学習ログ14】 JavaScript jQueryメソッドについて こんにちは、つるぴよ(@tsurupiyoo)です！ JavaScriptを勉強してフロントエンジニアを目指しています！ 今回は学習ロードマップの１番目「マンガJavaScript」を読んでの...

目次

jQueryによるフォーム操作

フォーム操作って何？？
ねこまる
ねこまる
つるぴよ
つるぴよ
Webページでよくある文字を入力したりするところをフォームっていうよ。
そこの操作について学んでいこう！

テキスト入力欄

テキスト入力欄の種類
①「<input type =”text” value=”〜”>」
②「<textarea>〜</textarea>」

テキスト入力欄の値の取得と設定は「val()」で行えます。
実例をみていきましょう。

【値の取得】

<div><input type="text" id="txt1a" value="text1a"></div>
<div><textarea id="txt1b">text1b</textarea></div>
var txt1a = $('#txt1a').val();
var txt1b = $('#txt1b').val();

【値の設定】

<div><input type="text" id="txt2a" value=""></div>
<div><textarea id="txt2b"></textarea></div>
$('#txt2a').val(txt1a);
$('#txt2b').val(txt1b);

チェックボックス

チェックボックスの値の取得は「prop()」で行えます。
実例をみていきましょう。

【値の取得】

<div>
    <label>
        <input type="checkbox" id="chck1" checked>
        チェックボックス
    </label>
</div>
var chck1 = $('#chck1').prop('checked');

【値の設定】

<div>
    <label>
        <input type="checkbox" id="chck2">
        チェックボックス
    </label>
</div>
$('#chck2').prop('checked', chck1);

ラジオボタン

ラジオボタンの値の取得と設定は「val()」で行えます。
セレクタに注意が必要で、以下のような指定の仕方をします。
「input[name=rgrp1]」
「input」タグで属性「name」が「rgrp1」
また、選択されている要素は「:checked」と指定します。
実例をみてみましょう。

【値の取得】

<div>
    <label>
        <input type="radio" name="rgrp1" value="1">
        ラジオ1
    </label>
    <label>
        <input type="radio" name="rgrp1" value="2" checked>
        ラジオ2
    </label>
    <label>
        <input type="radio" name="rgrp1" value="3">
        ラジオ3
    </label>
</div>

var rgrp1 = $('input[name=rgrp1]:checked').val();

【値の設定】

<div>
    <label>
        <input type="radio" name="rgrp2" value="1">
        ラジオ1
    </label>
    <label>
        <input type="radio" name="rgrp2" value="2">
        ラジオ2
    </label>
    <label>
        <input type="radio" name="rgrp2" value="3">
        ラジオ3
    </label>
</div>
$('input[name=rgrp2]').val([rgrp1]);

セレクトボックス

セレクトボックスの値の取得と設定は「val()」でできます。
実例をみていきましょう。

【値の取得】

<div>
    <select id="sel1">
        <option value="1">選択肢1</option>
        <option value="2" selected>選択肢2</option>
        <option value="3">選択肢3</option>
    </select>
</div>
var sel1  = $('#sel1').val();

【値の設定】

<div>
    <select id="sel2">
        <option value="1">選択肢1</option>
        <option value="2">選択肢2</option>
        <option value="3">選択肢3</option>
    </select>

$('#sel2').val(sel1);

送信前の確認

フォームの値をCGIに送る前に空欄があるかを確認する方法です。

<form id="frm" action="dummy.cgi">
    <div><input type="text" id="txt2a" value=""></div>
    <div><input type="submit"></div>
</form>
$('#frm').submit(function() {
    var txt2a = $('#txt2a').val();
    if (txt2a === '"') {
        alert('入力欄2aが未入力');
        return false;
    }
});

処理の流れ
①id「form」に対して「submit」（送信）時の処理を関数で登録
②関数の戻り値がfalseなら関数を止めます。

注意点
「submit」ボタンではなく「form」タグの方にイベント設定する

第２３話　jQueryを利用した通信処理

「Ajax」って何？？
ねこまる
ねこまる
つるぴよ
つるぴよ
ページの移動を伴わない通信処理やその仕組みを利用したWebページプログラミングのことだよ！

ここからはjQueryを利用した通信処理と「Ajax」について学んでいきたいと思います！

「Ajax」とは？

つるぴよ
つるぴよ
ちなみに「Ajax」の読み方は「エイジャックス」だよ！
【「Ajax」の特徴 】
・「Asynchronous JavaScript + XML」の略。日本語にすると「非同期にJavaScript とXMLファイルを使って通信を行う」という意味。（「XML」とは「HTML」のようなテキストの一種）
・Webページを動的に書き換える処理
・書き換えの際は新しいWebページをロードせず、バックグラウンドでサーバーと通信を行います。
jQueryにはこの「Ajax」を手軽に行うためのメソッドがあります。
次の章からこのメソッドを使った通信方法を紹介していきます。

jQueryの通信処理

通信を行う「ajax」メソッドはオブジェクトを引数にとります。
引数のいくつかのオプションを紹介しますが、全てを使う必要はありません。

$.ajax({
    url: "http://www.google.com/search",    // URL（最低限これは必要）
    data: "q=crocro&lang=ja",    // 送信するデータ
    type: "GET",    // GETかPOST（非設定時はGET）
    cache: true,    // 通信結果をキャッシュするか（非設定時はtrue）
    timeout: 1000,  // タイムアウトのミリ秒
    username: "",   // 認証が必要な場合のユーザー名
    password: ""    // 認証が必要な場合のパスワード
}).done(function(data, textStatus, jqXHR) {
    // 成功時の処理
}).fail(function(jqXHR, textStatus, errorThrown) {
    // 失敗時の処理
}).always(function (data_or_jqXHR, textStatus, jqXHR_or_errorThrown) {
    // 成功、失敗に関わらず実行する処理
);
});

セキュリティの問題

「Ajax 」のセキュリティによる問題
・同じサーバー上にあるファイルしか基本的に取得できない。
・ブラウザによってはローカルで読み込めない

上記の問題があるので機能を試す際はサーバー上にHTMLファイルと読み込むファイルをアップロードしてから試してみましょう。

用意するデータの文字コード

「Ajax」ファイルの取得では次のことに気をつけなくてはいけません。
「Ajax」の通信処理ではファイル文字コードを「UTF-8」と想定して行われます。
そのため取得した文字コードが「UTF-8」意外だと文字化けしたりします。
「日本語の入ったファイル」も要注意です。

非同期通信

「ajax」の「success」に指定した関数は、ブラウザが通信を完了した後に実行されます。
JavaScriptのプログラムはこの実行を待たずに次の処理に進みます。

非同期通信とは？
プログラムの処理とは独立して通信が行われること。

実際に実行される順番を解説します。

// 領域1
 
$.ajax({
    type: "GET",
    url: "data1.csv"
}).done(function(result){
    // 領域3
    $("#data").text(result);
});
 
// 領域2

処理順番解説
①「領域１」が実行される
②「領域２」が実行される
③通信完了後に「領域３」が実行される

ねこまる
ねこまる
非同期な通信ってなんのためにするの？？
例えば、通信が完了するまでブラウザが固まってしまうというようなことを防いでいるんだよ。
つるぴよ
つるぴよ

セキュリティ

つるぴよ
つるぴよ
「Ajax」で通信を行う時はセキュリティに注意しよう！

基本的に気をつけること
・クライアント側とサーバー側の両方
・データを送るときと受け取るときに問題となるデータがないか確認

開発者はセキュリティ情報を集め続ける必要があります。
ITサイトやセキュリティサイトを日々チェックしてみましょう。

情報処理推進機構：情報セキュリティ対策
情報処理推進機構
Google検索-JavaScript セキュリティ

「クロスドメイン」とは

「クロスドメイン」通信とは？？
Webページを読み込んだ以外の「ドメイン」と通信すること
JavaScriptでは基本的に使えない通信方法。

つるぴよ
つるぴよ
「ドメイン」はURLの「http://www.google.com/」の「www.google.com」の部分のことだよ！

「Ajax」が通信に利用するオブジェクト「XMLHttpRequest」はWebページが読み込まれた「ドメイン」以外とは通信を行いません。

ローカルでの制約

ブラウザによってはローカルにHTMLファイルがある場合、ローカルにあるファイルを読み込むことができません。
そのため通信系のテストはサーバー上で行うのが良いです。

ローカルサーバーで環境を作る場合は「nginx」や「XAMPP」などを導入すると良いです。
JavaScriptの実行確認だけなら「nginx」が軽くて良いです。

nginx
nginx: download
XAMPP Installers and Downloads for Apache Friends

JSONとは

「JSON」「JSONP」の特徴
・WebページのJavaScriptでデータを取得する際よく使われるデータ形式
・WebAPIと呼ばれるWeb上に公開されている便利なツールのほとんどた対応している
・「JSON」はJavaScriptのオブジェクトのように書いたテキストデータ

つるぴよ
つるぴよ
以前からよく使われていた「XML」は冗長でファイルサイズが大きいので今は
「JSON」や「JSONP」が使われているよ！

実際にサンプルをみてみましょう。
「data.json」というファイルの内容です。

{"seito" : [
    {
        "namae" : "Yasumi Yuu",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Takabisya Rei",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Utiki Mamoru",
        "seibetu" : "Man"
    }
]}

「Ajax」では、このファイルを読み込んだあとにJavaScriptのオブジェクトに変換して利用します。

「JSON」の実例

先ほどのプログラムを読み込んで表示するプログラムをみていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        function hyouji() {
            $.getJSON("data.json", function(json){
                for (var i = 0; i < json.seito.length; i ++) {
                    var seito = json.seito[i];
                    $("#data")
                    .append(seito.namae + " : " + seito.seibetu)
                    .append("<br>");
                }
            });
        }
        </script>
    </head>
    <body>
        <input type="button" onClick="hyouji();" value="表の表示">
        <div id="data"></div>
    </body>
</html>

解説
jQueryの「getJSON」メソッドを利用しています。

「$.getJSON(“data.json”, function(json){ 」
・第一引数にはファイルのパスを記述
・第二引数にはデータ取得後の処理を無名関数で記述

無名関数の引数には「json」がとってあります。
この「json」には取得した「data.json」をJavaScriptのオブジェクトとして解釈したデータが入っています。

つるぴよ
つるぴよ
このJSONの内容は以下の通りだよ！
var json = {"seito" : [
    {
        "namae" : "Yasumi Yuu",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Takabisya Rei",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Utiki Mamoru",
        "seibetu" : "Man"
    }
]};

これをツリー状にしてみます
seito

  • seito[0]
    • seito[0][“namae”] = “Yasumi Yuu”
    • seito[0][“seibetu”] = “Woman”
  • seito[1]
    • seito[1][“namae”] = “Takabisya Rei”
    • seito[1][“seibetu”] = “Woman”
  • seito[2]
    • seito[2][“namae”] = “Utiki Mamoru”
    • seito[2][“seibetu”] = “Man”

このような構造なので「for」文の中では「json.seito」を配列として扱っています。
「json.seito.length」→配列の要素数
「var seito = json.seito[i];」の中の「var seito」オブジェクトの中身
→「namae」と「seibetu」の2つのキーを持つ
そのため以下2つは同じ内容になります。

var seito = json.seito[0];

var seito = {
    "namae" : "Yasumi Yuu",
    "seibetu" : "Woman"
};

このようにして取得した「json」の各データをid「data」の要素に追加しています。

$("#data")
.append(seito.namae + " : " + seito.seibetu)
.append("<br>");

「append」メソッドとは？
セレクタで選択した要素の配下に指定のHTMLを追加する命令のこと。

上記の例では
「seito.namae + “:” + seito.seibetu」として名前と性別を追加しています。
「<br>」は改行です。

「JSON」の取得は「XMLHttpRequest」というオブジェクトが利用されています。
そのため同じ「ドメイン」のファイルしか取得できません。
またWebブラウザによってはローカルでは動作しません。

「JSONP」とは

つるぴよ
つるぴよ
「JSONP」は他のドメインのサーバーからデータを読み込んで利用できるよ

「JSON」ではクロスドメインの制約でできなかったので、「JSONP」と呼ばれるでーた形式を使います。
「JSON」のデータを少しだけ変更したテキストデータです。

jsonCallback(
    {"seito" : [
        {
            "namae" : "Yasumi Yuu",
            "seibetu" : "Woman"
        },
        {
            "namae" : "Takabisya Rei",
            "seibetu" : "Woman"
        },
        {
            "namae" : "Utiki Mamoru",
            "seibetu" : "Man"
        }
    ]}
)
「JSON」との違い
「jsonCallback」のように関数を記述してその引数としてデータが書かれている
「JSONP」のデータは完全なJavaScriptプログラムです。
「<scriot>」タグをプログラムから追加することで外部JavaScriptファイルとして読み込めます。

jQueryによるフォーム操作

ここまで学んだことをまとめます。
・テキスト入力欄
・チェックボタン
・ラジオボタン
・セレクトボックス
・送信前の確認
jQueryを利用した通信処理
「Ajax」
非同期通信
セキュリティ
クロスドメイン
「JSON」
「JSONP」

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら

Web制作

関連記事

目次