JavaScript非同期処理が可能で並行処理はできない

JavaScriptはシングルスレッドで動いており、並行処理はできません。

JavaScriptでは、キューに登録された関数が順番にひとつずつ実行され、その順番は同期や非同期であったりします。

この非同期というのは、サーバーと通信を行いリクエストが返るのを待っている間など、その処理を待たないで次へ進めることです。

コールバック

コールバックとは

コールバックとは、処理が終わったら指定した関数が呼ばれる方法です。関数の引数に別の関数を指定する感じです。

最近のモダンな開発ではコールバックを使うことはほとんどありませんが、JavaScriptにおける非同期処理を理解する上でもコールバックについて理解する必要があります。

コールバック関数/高階関数による処理

引数として渡される関数のことをコールバック関数と呼び、別の関数を引数にとる関数を高階関数と呼びます。

以下の例では、showPrice関数を引数としてbicycle関数を呼び出しています。この場合ですとshowPrice関数がコールバック関数となり、bicycle関数が高階関数となります。

function bicycle(price, func){
  const name = '自転車';
  func(name, price);
}

const showPrice = function(name, price){
  console.log(name + ' の現在価格は ' + price + ' 円です。');
}

bicycle(20000, showPrice);

コールバック関数は、引数に直接記述することも可能です。

function bicycle(price, func){
  const name = '自転車';
  func(name, price);
}

bicycle(20000, function(name, price){
  console.log(name + ' の現在価格は ' + price + ' 円です。');
});

コールバック地獄

例えば、いくつかのファイルの読み込みが終わった後にそのデータに対して処理をしたい場合、以下のようにコールバック関数を次々に書いていくことになります。

この例では3つファイルに対して処理をかけていますが、これがどんどん増えていくとさらにネストが深くなることで可読性が下がり、メンテナンスが大変になります。

const fs = require('fs');

fs.readFile(a.txt', function(resA) {
  fs.readFile(b.txt', function(resB) {
    fs.readFile(c.txt', function(resC) {
      console.log(resA + resB + resC);
    })
  })
})

また、エラー処理を個別に書いていくとさらにコードが複雑化していきます。

const fs = require('fs');

fs.readFile('a.txt', function(err, resA) {
  if (err) {
    console.log(err);
    return;
  }
  fs.readFile('b.txt', function(err, resB) {
    if (err) {
      console.log(err);
      return;
    }
    fs.readFile('c.txt', function(err, resC) {
      if (err) {
        console.log(err);
        return;
      }
      console.log(resA + resB + resC);
    })
  })
})

この非同期処理におけるコールバック地獄を解消するためにPromiseがES2015で導入されました。

Promise

Promiseとは

Promiseとは、JavaScriptでの非同期処理のコールバック関数をより簡潔に記述するための仕組みです。

Promise を用いることで、非同期処理の成功や失敗に対するハンドラーを関連付けることができます。これにより非同期処理のメソッドは、最終的な値を返すのではなく、未来のある時点で値を持つPromiseを返すことで、同期メソッドと同じように値を返すことができるようになります。

Promiseはその名の通り「今は値を返せないけどあとでちゃんと返すよ」と約束するオブジェクトです。

Promiseの状態

Promise の状態は以下のいずれかとなります。

初期状態はpendingで、一度fulfilledまたはrejectedになったらそれ以降は状態は変わらず、非同期処理の終了時に返す値もそれ以降は変わりません。

• pending : まだ処理が終わっていない状態
• fulfilled : 処理が成功した状態
• rejected : 処理が失敗した状態

Promiseの使い方

resolve, reject

new Promise(function(resolve, reject) {
  resolve('success');
});

new Promise(function(resolve, reject) {
  reject('failed');
});

Promiseはresolveとreject、2つの関数を引数に取ります。

• resolve : 処理が成功したときのメッセージを表示する関数
• reject : 処理が失敗したときのメッセージを表示する関数

then(), catch()

Promise#then(onFulfilled, onRejected)

then()は2つの関数を引数に取ります。Promiseの状態がfulfilledになったら1番目が、rejectedになったら2番目のコールバック関数が実行されます。

Promise#catch(onRejected)

then(undefined, onRejected) のショートカットとして機能し、返り値 promiseで引数の onRejectedのコールバック関数が実行されます。

公式にもありましたが、エラー処理がすぐに必要がない場合は、最後の.catch() 文までエラー処理をしない方がシンプルに書くことができます。

参考：

const myPromise =
  (new Promise(myExecutorFunc))
  .then(handleFulfilledA,handleRejectedA)
  .then(handleFulfilledB,handleRejectedB)
  .then(handleFulfilledC,handleRejectedC);

// または、おそらく次の方がよい ...

const myPromise =
  (new Promise(myExecutorFunc))
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);

Promiseによる非同期処理

以上を踏まえて、先程のコールバック地獄をPromiseで書き換えると以下のようになります。だいぶスッキリして見やすくなりました。

let a, b, c

readFile('a.txt')
.then(function(resA) {
    a = resA;
    return readFile('b.txt');
})
.then(function(resB) {
  b = resB;
  return readFile('c.txt');
})
.then(function(resC) {
  c = resC;
  console.log(a + b + c);
})
.catch(function(err) {
  console.log(err);
})

async/await

async/awaitとは

async/awaitは非同期処理の構文のことで、Promiseを利用した場合よりも、簡潔に非同期処理を書くことができます。

asyncとは

asyncとは、非同期関数を定義する関数宣言のことで、以下のように関数の前にasyncを宣言することにより、非同期の関数を定義できます。

async functionはPromiseを返却します。

async function getSuccess() {
  return 'success'
}

ちなみにPromiseで書くと以下のようになります。

function getSuccess() {
  return Promise.resolve('success')
}

awaitとは

async function内でPromiseの結果が返ってくるまで待機する演算子のことです。

awaitを指定した関数のPromiseの結果が返されるまで、async function内の処理を一時停止し、結果が返されたらasync function内の処理を再開します。

async function showResult() {
  const result = await getResult();

  // getResult()のPromiseの結果が返ってきてから実行される
  console.log(result);
}

async/awaitによる非同期処理

以上を踏まえて先程のコードをasync/awaitで書き直してみます。

Promiseよりもさらにわかりやすくスッキリなりました。

async function showFilesData() {
  const resA = await readFile(a.txt');
  const resB = await readFile(b.txt');
  const resC = await readFile(c.txt');
  console.log(resA + resB + resC);
}

showFilesData()
.catch(err) {console.log(err)}

参考

JavaScript | コールバック関数/高階関数を利用する

JavaScript では関数もオブジェクトのひとつであり、関数を呼びだす時に引…

www.javadrive.jp

Promiseについて0から勉強してみた #JavaScript - Qiita

ES6を使う機会がありそうで、Promiseについて全然知らなかったので、実際に…

qiita.com

コールバック地獄からの脱出 #JavaScript - Qiita

どうもこんにちは。うめきです。 これはアドベントカレンダー「厚木の民」の３日目の…

qiita.com

async/await 入門（JavaScript） #AsyncAwait - Qiita

はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録…

qiita.com

参考：LINE謎の開発についてまとめ

参考：プログラミング初心者でも無料で簡単にLINE BOTが作れるチュートリアル｜渡なべ達明｜note

参考：【入門】Google Apps ScriptでLINE botを作成する

特にこちらのKindle本ではとてもわかりやすく解説されています。こちらの本では実際に作られている謎解きやマーケティング戦略まで紹介されているので、ご一読することをおすすめします。

LINE謎とは

LINEの公式アカウントを用いて、主にBot形式で謎を出題する謎解き形式をLINE謎と呼ばれています。

LINEのアカウントさえあれば、手軽に謎解きに挑戦することができます。LINEのMessaging APIが開放されてからLINE謎が出現し、少しずつ広まってきているようです。

LINE謎開発の事前準備

事前準備として以下が必要となります。今回は参考記事通りにGAS(Google App Script)を使用してコーディングを行っています。Googleアカウントは登録された前提とします。

• Googleアカウント登録
• LINE Developers登録
• LINE Bot Designer(必須ではない)

LINE Developersの登録

まず、以下のリンクからLINE開発者登録を行います。既にLINEアカウントを持っている場合は、そのアカウントで登録することができます。QRコードログインで簡単に認証することができます。

LINE Developers

LINE Bot Designerのダウンロード

LINE Bot Designerを使用することで、簡単かつ短時間でLINE Botのプロトタイプを作成することができます。GUIで感覚的にチャットボットを設計できます。

以下のリンクからLINE Bot Designerをダウンロードします。後ほど使用しますので、その後インストールまでやっておきましょう。

LINE Bot Designer

Messaging APIで新規チャンネルを作成

先ほど登録したLINE Developersにログインし、「新規チャンネル作成」を押します。新規チャンネル作成に必要な項目を入力します。

ここで作成するLINE謎のチャンネル名やアイコンなどを登録します。なおチャンネル名は7日間は変更できないため、注意が必要です。

LINE Messaging API：Messaging APIの特徴 Messaging APIは

GASからWebhook URLを取得する

まず、自身のGoogleアカウントからGoogleドライブを開き、Googleスプレッドシートを新規作成します。

スプレッドシートを開いたら、「ツール」→「スクリプトエディタ」を選択します。

選択すると、以下のようなスクリプトエディタが表示されます。左上にあるプロジェクト名を入力し、「公開」→「ウェブアプリケーションとして導入」を選択してください。

それぞれ、以下のように設定し「Deploy」を押下します。

表示された「Current web app URL」をコピーします。これがWebhook URLとなります。

LINE DevelopersのWebhook設定でGASと連携する

作成したチャンネルからMessaging API設定を選択します。下にあるWebhook設定のWebhook URLに先ほどコピーしたURLをペーストします。また、Webhookの利用をONにします。

次にさらに下にあるチャンネルアクセストークンの発行を行います。このチャンネルアクセストークンは後で使います。

GAS(Google App Script)を使って、ユーザとの応答形式LINE Botのスクリプトを実装する

GASの画面に戻り、ユーザとの応答形式のスクリプトを実装していきます。JavaScriptで書くことができます。

チャンネルアクセストークンの設定とリクエスト判定

まずはじめにチャンネルアクセストークンを設定します。先ほど発行したチャンネルアクセストークンを変数に代入しましょう。

次にユーザから送られてくるリクエスト判定を行います。event.typeによって友達追加かメッセージかを判定します。

// チャンネルアクセストークンを設定
var channel_access_token = "先ほど発行したチャンネルアクセストークン";

// ユーザからのリクエスト判定(友達追加またはメッセージ)
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if (event.type == "message") {
      sendMessage(event);
    }
    if (event.type == "follow") {
      sendFollowMessage(event);
    }
  });
}

友達追加時の挙動

ユーザから友達追加された際に返すメッセージを設定します。setFollowMessageで友達追加時のメッセージ用意し、ユーザに返します。

function sendFollowMessage(e) {
  var followMessage = setFollowMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": followMessage
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + channel_access_token
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

// 友達追加された際に返すメッセージ
function setFollowMessage(e) {
  var message = [{
    "type": "text",
    "text": "友達追加ありがとうございます！"
  }];
  return (message)
}

メッセージが送られてきた際の挙動

友達追加時と同様にsetMessageに送られてきたメッセージに対応する返信を用意します。

switch文でそれぞれのメッセージに対応する返信を書いていきます。これがユーザとの応答形式Botの中身になります。LINE謎の場合は答えやヒントなどに対応する返信を書いていくことになります。

defaultは想定していないメッセージが送られてきた場合の返信を書きます。

function sendMessage(e) {
  var message = setMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": message
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + channel_access_token
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

// メッセージが送られてきた際に返す返信の条件分岐
function setMessage(e) {
  switch (e.message.text) {
    case "答え":
      var message = [
        {
          "type": "text",
          "text": "正解です。"
        }
      ];
      return(message)
      break;

  case "ヒント":
    var message = [
      {
        "type": "text",
        "text": "ヒントは〇〇です。"
      }
    ];
    return(message)
    break;

  default:
    var message = [
      {
        "type": "text",
        "text": "ヒントが欲しい場合は「ヒント」と入力してください。"
      }
    ];
    return(message)
    break;
  }
}

以上で応答形式Botの完成です。完成後は、「公開」→「ウェブアプリケーションとして導入」を選択し、バージョンを「new」にして再度デプロイしましょう。すると反映されていることが確認できると思います。

返信メッセージをリッチにしたい

返信メッセージをもっとリッチにしたい場合は、先ほどインストールしたLINE Bot Designerを使ってみましょう。

インストールが完了後、プロジェクトを作成を選択します。

プロジェクトの設定を行います。

設定完了後、プロトタイプをGUIで作成することができます。プロトタイプ完成後、右下のJSONをコピーすることで、そのまま使用することができます。

ここで画像・動画、テンプレートメッセージなどを設計し、JSONコードをそのままGASにコピペで使うことができます。LINE謎を作成する場合は画像などを使うと思いますので、こちらを積極的に活用してみましょう。

実際にLINE謎を作ってみた

実際にLINE謎を作ってみました。ざっくりストーリーから考え、次にストーリーにあわせた謎を作り、開発という流れで行いました。こういう謎解きを作るのは初めてでしたが、丸一日かけて公開まで漕ぎ着けることができました。

初心者向けのLINE謎で10分くらいで解けるので、もし時間があればやっていただけると嬉しいです。

地球最後の日に残された謎：https://lin.ee/tV2tCPuy

フレームワークはRuby on Railsを使用しています。例として会社・子会社の場合で紹介しています。

jQueryでプルダウンが選択された時にもう一方のプルダウンの中身を決定する方法

会社プルダウンと子会社プルダウンを表示しています。子会社プルダウンは会社プルダウンが選択されるまでは非活性にしています。

・_company_index.html.erb

...

<label>
    <legend>会社</legend>
    <div>
        <%= create_company_pulldown :company_id, 'company_id', '選択してください', @filter_params[:company_id] %>
    </div>
</label>

<label>
    <legend>子会社</legend>
    <div>
        <%= f.select :subsidiary_company_id, @subsidiary_company_options, { prompt: '選択してください' }, class: 'subsidiary_company_check', disabled: @filter_params[:subsidiary_company_id] == nil %>
    </div>
</label>

...

子会社以外の会社を取得し、会社プルダウンに格納

・application_helper.rb

# 会社マスタプルダウン用
def create_company_pulldown(name, class_name, prompt, selected_id = '')
    companies = ::Company.where(parent_company_id: nil).is_not_old
    select object, name, options_for_select(companies.collect { |u| [u.company_name, u.id] }, selected: selected), options, html_options
end

CoffeScriptで書かれているため若干書き方が異なります。

以下のサイトからjsファイルのjQueryに変換できます。

js2coffee - JavaScript Parser & AST Analyzer

Parse JavaScript code into AST (Abstract…

js2.coffee

・companies.coffee

$ ($) ->
    # 会社プルダウンが変更された時のイベント
    $('#company_id').on 'change', ->
    $subsidiary_company_check = $('.subsidiary_company_check')
    company_id = $('[name=company_id]').val()

    # 会社が選択されていない場合
    if (! company_id)
        $subsidiary_company_check.find('option').remove()
        $subsidiary_company_check.prop('disabled', true)

        return

    # Ajaxで送るデータ整形
    formData = new FormData()
    formData.append 'company_id', company_id

    $.ajax
        type: 'POST'
        url: self.search_subsidiary_company_url
        data: formData
        cache: false
        contentType: false
        processData: false

    # 成功
    .done (data, textStatus, jqXHR) ->
        $subsidiary_company_check.find('option').remove()
        $subsidiary_company_check.prop('disabled', false)
        $subsidiary_company_check.append $('<option></option>').text('選択してください').val('parent')
        $subsidiary_company_check.append $('<option></option>').text('すべて').val('all')

        # 子会社が存在しない場合
        if (data['companies'].length == 0)
            $subsidiary_company_check.prop('disabled', true)
            $group_company_check.prop('checked', false)
            $group_company_check.prop('disabled', true)

        # 子会社が存在する場合
        else
            $group_company_check.prop('disabled', false)

        # 子会社プルダウンにDOM生成
        $(data['companies']).each (i) ->
            $subsidiary_company_check.append $('<option></option>').val(data['companies'][i].id).text(data['companies'][i].company_name)
            return

        # 失敗
        .fail (jqXHR, textStatus, errorThrown) ->

        #エラーメッセージ表示
        $('.error_message').html('')
        for k, v of $.parseJSON(jqXHR.responseText)
            $('.error_xs').append('<p>' + v[0]["message"] + '</p>')
            return

ルーティング設定
routes.rb

...

post :search_subsidiary_company

...

AjaxのURL先。選択した会社IDから子会社取得を取得しています。

companies_controller.rb

def search_subsidiary_company
    begin
        company_id = params[:company_id]
        @companies = Company.where(parent_company_id: company_id)
        respond_to do |format|
            format.json {
                render json: {companies: @companies}, status: 200
            }
        end
    rescue ActiveRecord::ActiveRecordError => e
        format.json {
            render json: e.message, status: :unprocessable_entity
        }
    end
end

onclickで「return false」が効かない時の対処法

function myCheck() {
    var j = 0;
    for (var i = 0; i < document.form1.elements.length - 1; i++) {
        if (document.form1.elements[i].checked) {
            j++;
        }
    }

    if (j < 2) {
        alert("項目が選択されていません。");
        return false;
    } else {
        return true;
    }
}

jsの部分です。想定では、ダイアログが表示された時は、データをサーバに送らず処理をキャンセルするイメージでしたが、なぜかうまくいかん…。

<button type="submit" onclick="myCheck();" value="送信"></button>

対処法は「onclick」のとこを修正します。下のように「return myCheck();」に直したらいけました。

<button type="submit" onclick="return myCheck();" value="送信"></button>

どうやら<script>内に「return false」を書いても、イベントハンドラはfalseを認識しないようです。

そのため、イベントハンドラにreturnを明記することで解決できますよ！

同じエラーが出た方は参考にしてみてください。

「internal/modules/cjs/loader.js:550」のエラーが出た時の対処法

internal/modules/cjs/loader.js:550
 throw err;
 ^

Error: Cannot find module 'nightmare'
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
 at Function.Module._load (internal/modules/cjs/loader.js:475:25)
 at Module.require (internal/modules/cjs/loader.js:598:17)
 at require (internal/modules/cjs/helpers.js:11:18)
 at Object.<anonymous> (/Users/simanapo/Desktop/yahooSearch.js:1:81)
 at Module._compile (internal/modules/cjs/loader.js:654:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
 at Module.load (internal/modules/cjs/loader.js:566:32)
 at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
 at Function.Module._load (internal/modules/cjs/loader.js:498:3)<br>

こんなエラーが出ていませんか？モジュールが足りないよって怒られています。

なので足りないモジュールをインストールして、ローカルにリンクしましょう。

以下のコマンドを試してみてください。

npm install -g nightmare
npm link nightmare<br>

nightmareのとこは「Error: Cannot find module」で表示されたモジュールに置き換えてください。

どうでしょう？解決しましたか？