JavaScript中級者への道①

僕の名前は進藤京介。JavaScriptを勉強中でしゅ。
自称JavaScript中級者が、モノホンの上級者になるべく修行中。。。

webpackの環境を作る

中級者になるためには、まずはwebpackで色々とやっていこうと思う。
色々というのはBabelとsassだと思い、何かいいもんはねえかとネットでサーフィンをしたところ最高のサイトを発掘した

【webpack 4】環境構築からJSとCSSを別出力まで(備忘録) – expexp.jp
今回はwebpackによる環境構築から、ファイルの出力までを紹介します。環境はMac(macOS Sierra)、node v10.1.0、npm 6.4.1、webpackのバージョンは4.17以上、Babel 7で進めます。webpackはデフォルトでCSS(SASS)もなにもかもをまとめて1つのJavaScrip...

まずは上記のサイトを参考に環境を整えた。

非同期処理でぶっ飛ぶのでこちらも追加する
https://qiita.com/nbstsh/items/44a63b724214a9f920e2

今回作るモノ

郵便番号から市町村情報を表示させるというものです。
やはり中級者といえばAjaxを使うんだろうということで採用。

自分で用意するのは面倒なので元からあるやつを使う(誰でも使えます。key情報とかもいらないのでお手軽)
https://zipaddress.net/

フォルダ構成としてはwebpackを導入するにあたり参考にしたサイトと同じ。
srcフォルダにjsとsassフォルダを作り、そこにファイルを作っていく。
あとはbuildしたらdistフォルダに出力される。
まずはdist/index.htmlを自作する

dist/index.html

<h1>JavaScript中級者への道-その①</h1>
<input type="text" id="zipcode">
<button id="btn">ゲットする</button>

<div id="result"></div>

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

内容は非常にシンプルで、input要素とボタン要素を配置する。
あとはリクエストの結果を表示させるエリアを用意しておき、bundel.jsを読み込む処理をぶち流す。

このbundel.jsはbuildした時に自動的に作られるjsファイルです。
ここにcssの設定なども入っているので、index.htmlは非常にシンプルになります。
次はsassを書きますが、今回はjsの中級者への道というタイトルなので、まぁ色を変更する程度しか書いていませんが、buildした統合されていることを確認するためのものですわ

src/sass/main.scss

$bg-color:gray;
$h1color:#333;
html {

  body {
    background: rgba( $bg-color, 1 );
  }
  h1{
    color:$h1color;
  }
}

main.jsを書く

main.jsはその名の通りmainですので、イベントが起きる箇所になってます。

import dataManager from './getdata'
//sassを読み込む
import '../sass/main.scss'

const btn = document.getElementById("btn")

const btnevent = function (){
    //input要素の値を取得する
    const value = document.getElementById("zipcode").value
    //getdaaメソッドを呼び出してリクエストを投げる
    dataManager.methods.getdata(`https://api.zipaddress.net/?zipcode=${value}`)
        //リクエストの結果をresultエリアに表示する
        .then(val => {
            document.getElementById("result").innerHTML = 
                `
                <h1>${val.data.city}</h1>
                <P>${val.data.fullAddress}</p>
                `
        })
        .catch(error => console.log(error))
}

btn.addEventListener("click",btnevent)

必要な箇所はコメントを書きました。大事な処理は別のモジュールで行なっています。
中級者になるために必須のテンプレートリテラルを使っています。
バッククオート`で文字列を囲うと、改行はもちろんのこと${}で変数などをそのまま展開できてしまうのです。すげ

また中級者必須スキルであるラムダ式も使っています。()=>これですね。一行のときは{}これは不要で、引数が一つの時は()が不要です。(val)=>でも可能

さてモジュールを書いていきます。
src/js/getdata.js

export default  {
    methods:{
        async getdata (url) {
            //fetchメソッドでAjax通信を行う。
            const result = await fetch(url,{
                type:"GET",
                dataType:'jsonp'
            })
            const data = result.json()
            return data
        }
    }
}

Ajax通信を行なって結果を返すだけのメソッドが定義されています。
中級者必須のfetchメソッドでAjax通信を行います。
XMLHttpRequestやら、jQueryというモノが過去にはあったそうだ。。。(おい!)

main.jsから呼ばれたgetdataメソッドは、その結果を返して、main.jsでその結果を展開している。という仕組みです。

エラー処理

このままで大変なことが起きてしまいます。
それは不正な郵便番号を入力した場合に何もおきないということです。一応コンソールログを見てみます。

TypeError: Cannot read property 'city' of undefined
    at eval (main.js:13)

なにやらリクエストの結果がundefinedになっております。
なぜエラーの時ににコンソールに出力されているかというと、実はエラー処理を行なっているからですね。

main.jsを見るとcatchしているのがわかりますね。

    dataManager.methods.getdata(`https://api.zipaddress.net/?zipcode=${value}`)
        //リクエストの結果をresultエリアに表示する
        .then(val => {
            document.getElementById("result").innerHTML = 
                `
                <h1>${val.data.city}</h1>
                <P>${val.data.fullAddress}</p>
                `
        })
        .catch(error => console.log(error))

この郵便番号のAPIは000-0000か0000000という形式なら取得できるので、正規表現を使ってリクエスト前にバリデーション処理を行うようにします。

正規表現

自称中級者の進藤は正規表現に関しては使いこなすことができていませんが、こんなことはできるよな程度の知識はあるので、今回は郵便番号かどうかを正規表現を使って検査します。

src/js/codeValidation.js

export default{
    methods:{
        checkCode(code){
            
            const pattern1 = /^\d{3}-?\d{4}$/g;
            const pattern2 = /^\d{7}$/g;
            
            if(code.match(pattern1) != null || code.match(pattern2) != null)
                return true
            else
                return false
            

        }
    }
}

郵便番号の形式にマッチする場合はtrueを返して、それ以外はfalseを返すようにします。これをmain.jsで読み込んで利用します。

main.js

import dataManager from './getdata'
//バリデーション機能を読み込む
import validator from './codeValidation'
//sassを読み込む
import '../sass/main.scss'
import { isNull } from 'util';

const btn = document.getElementById("btn")

const btnevent = function (){
    //input要素の値を取得する
    const value = document.getElementById("zipcode").value
    //バリデーションを行う
    if(!validator.methods.checkCode(value)){
        alert("エラー")
        return
    }
    //getdaaメソッドを呼び出してリクエストを投げる
    dataManager.methods.getdata(`https://api.zipaddress.net/?zipcode=${value}`)
        //リクエストの結果をresultエリアに表示する
        .then(val => {
            document.getElementById("result").innerHTML = 
                `
                <h1>${val.data.city}</h1>
                <P>${val.data.fullAddress}</p>
                `
        })
        .catch(error => console.log(error + "だめです"))
}

btn.addEventListener("click",btnevent)

リクエストを送る前にバリデーション処理を行い、不正な値は全てはじくようにしました。

余談

jQueryは素晴らしい。僕も使ったことがある。WordPressでテーマを作ろうとした時に、ほとんどの解説サイトでjQueryを使う。jQueryは簡単にWebページに動きを入れたりロジックを入れることができる。
実は僕の会社の社内システムの機能追加したことがある。ver1.3くらいのjQueryを使っていたのを覚えている。

自分で追加機能を作るのは簡単だったけど、既存のコードを読むのはすごい大変だった。
書いている時は気持ちがいいけど、あとあと読み直すのが辛いなと思いましたね。

あと先輩社員の中にはJavaScriptはできないけどjQueryはできるって人がゴロゴロいる。
それだけjQueryは取り掛かりやすい魔法のようなものである。

魔法は使いすぎるとMPが減っちゃうので注意したいというお話です。

コメント

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