テックタッチアドベントカレンダー19日目を担当する@kosyです。
18日目は @92thunder による Vuex × TypeScriptにvuex-smart-moduleを選んだ理由 でした。
vuex-smart-moduleがどう良いのかわかる内容で理解が深まりました。型に苦しめられた過去があるからこそ今の成長があるわけですね。
vuex-smart-moduleに即決定したスピード感、さすがテックタッチ。

はじめに

日本全国ダーツの旅みたいな感じでランダムに市区町村出してくれるサイトを作りました。
場所だけじゃなく、おすすめ観光スポットも表示されます。
エンジニアに転職した今年4月当初に作ろうとしましたが、何をどうすれば良いのか全くわからず結局何も作れないまま終わりました。９ヶ月経った今なら作れる！ということで作ってみました。
ぜひ遊んでみてください。

成果物

https://random-travel.netlify.com/

作成手順

１. 市区町村コードを取得できるAPIの準備
2. Puppeteerで観光地の情報収集
3. Vueでページを作る
4. Netlifyでアップロード

1. 市区町村コードを取得できるAPIの準備

内閣府 地方創生推進室が提供するAPIで市区町村コードが取得できるため利用登録 → RESAS
↓こんな感じで都道府県コードを入力すると、その都道府県の市区町村一覧が取得できます。(市区町村一覧API)

{
    "message": null,
    "result": [{
        "prefCode": 1,
        "cityCode": "01100",
        "cityName": "札幌市",
        "bigCityFlag": "2"
    }, {
        "prefCode": 1,
        "cityCode": "01101",
        "cityName": "札幌市中央区",
        "bigCityFlag": "1"
    }, {
     …
}

都道府県コードのAPIでは、パラメータが指定できないので全都道府県のコードと名前が一括で返ってきます。なので、都道府県一覧は初回だけ取得したら一覧を保持しておきました。
登録できたらAPIキーが発行されるので、これを使ってリクエストを送ります。

2. Puppeteerで観光地の情報収集

Puppeteerも業務で使用しているため勉強も兼ねて使用。
観光地情報はじゃらんから、地図画像はgoogleから取得しています。

じゃらんにした理由は、人気観光地TOP3をまとめてくれている&地域毎の観光情報のURLが市区町村コード変えればそのページに行けるものなので情報収集しやすかったからです。
地図はgoogleにあった良い感じの画像のURLを取得して表示させています。
Google maps API使えば周辺地図も見れてよかったのかもしれませんが、市区町村の緯度経度をどこかから取得する必要があり時間と気力の問題から断念。

Puppeteerは以前に書いた記事に操作方法をまとめています。基本的にはこの記事で書いた操作しかしていません。
Puppeteerで自動ブラウザ操作するときによく使う操作一覧

収集したデータは市区町村ごとに{市区町村コード}.jsonファイルで保存し、vueでランダムに算出した市区町村コードのjsonファイルを呼び出しています。

3. Vueでページを作る

開発時は発行したAPIキーは、Vueのプロジェクト直下にenv.developmentファイルを作成し、そこにVUE_APP_API_KEY=APIキーのように記載しておきます。
APIキーは悪用されると困るので直接コードに書き込むのではなく、環境変数で管理します。

APIを使ってランダムで市区町村を取得するコードは以下のとおりです。

 cityCodeList = { data: { message: null, result: [], statusCode: 0 }, status: 0 }　// APIのレスポンスを格納する配列
 all: any[] = []
 prefCode: number = 0
 resultCity = {}  // 最終的に選ばれた市区町村を格納する変数
 error: string = ''

 apiKey:string = process.env.VUE_APP_API_KEY

 config = {
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': this.apiKey,
    },
  }

  mounted() {
    this.calculateDestination();
  }

  async calculateDestination() {
    this.prefCode = Math.floor((Math.random() * 47) + 1);　// 都道府県を乱数で選定
    // APIを使う
    await axios
      .get(`https://opendata.resas-portal.go.jp/api/v1/cities?prefCode=${this.prefCode}`, this.config)
      .then((response) => { this.cityCodeList = response; })
      .catch((error) => { console.log(error); });

    // レスポンスエラーになっていないか確認
    if (this.checkNotError()) {
      // 市区町村を乱数で選定
      const randomCity = Math.floor(Math.random() * this.cityCodeList.data.result.length);　
      this.resultCity = this.cityCodeList.data.result[randomCity];
    }
  }

  checkNotError() {
    if (this.cityCodeList.data.statusCode) {
      if (this.cityCodeList.data.statusCode === 429) {
        this.error = 'しばらく時間をおいてから試してみてください';
      } else {
        this.error = '行き先を決められませんでした';
      }
      return false;
    }
    return true;
  }

観光情報を表示させる処理は以下の通りです。puppeteerで取得したJSONファイルを読み込むだけ。

  async fetchSpotData(cityCode: string) {
    this.draftSpotData = await fetch(`./data/${cityCode}.json`)
      .then(response => response.json());
  }

4. Netlifyでアップロード

GitHubにコードをあげたら、NetlifyとGitHubを連携させデプロイします。
APIキーはNetlifyのSettings >　Build&deploy > Environment　で設定すればOK。
以降の更新はgitHubにpushする度に行われます。

おわりに

アドベントカレンダーという機会がなければ、作成をずっと後回しにしてそうだったので今回は良い機会でした。
半年前は作れなかったものが作れるようになったのは嬉しい。

明日20日目の担当は@mosimosiの「型論ではなくKatalon」です！乞うご期待！

DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第４弾の記事です。

前回はDECK.GLのPathLayerを使って、データの描画を行いました。
今回はこれにマップコンポーネントを組み込んで表示させてみたいと思います。

前回のおさらい

前回は、App.jsx に下記のコードを書きました。

App.js

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [
  {
    path: [
      [-122.45, 37.7],
      [-122.5, 37.8],
      [-122.6, 37.7]
    ]
  }
];

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",
        data,
        getPath: d => d.path,
        getWidth: 30
      })
    ];
    return <DeckGL viewState={viewState} layers={layer}></DeckGL>;
  }
}

マップコンポーネント

DECK.GLはマップコンポーネントなしでも独立して動作しますが、地理データをビジュアライズするのに地図情報が表示されないのではおもしろくありませんよね。

DECK.GLと簡単に連携できるマップコンポーネントとして、GoogleMapとMapboxの２つの選択肢がありますが、
今回はMapboxを使って描画したいと思います。

※マップコンポーネントの連携についての詳細はこちらをご参照ください。

Mapboxとは？

Mapboxとは、米カリフォルニア州サンフランシスコにある位置データプラットフォームです。要するに、GoogleMapのような地図サービスです。

最近はゼンリンと提携したり、「ソフトバンク・ビジョン・ファンド」から出資を受けたりと、日本での事業も強化しようとしているようです。

• 参考: Mapbox.jp、日本で事業を開始
• 参考: ゼンリンがデータ提供したというMapboxを使ってみた

Mapboxでは、GoogleMap同様開発者に便利なインターフェースがたくさん提供されています。
例えば、Mapbox GL JSというJavaScriptライブラリが提供されていたり、
mapbox-glという名前でNodeパッケージも公開されています。

今回はReactコンポーネントとして利用できるreact-map-glを使ってMapboxを連携させましょう。

※MapboxのDocumentationはこちら
- Mapbox GL JSのGithub
- react-map-glのGithub

Mapboxを連携させよう

react-map-glライブラリのインストール

まずreact-map-glライブラリをインストールします。

$ yarn add react-map-gl
yarn add v1.17.3
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
warning " > @testing-library/user-event@7.1.2" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] ?  Building fresh packages...
success Saved lockfile.

... （長いので省略）

├─ tinyqueue@2.0.3
├─ vt-pbf@3.1.1
└─ wgs84@0.0.0
✨  Done in 24.60s.
$ 

MapGLコンポーネントのimport

インストールが終わったら、MapGLコンポーネントをimportしましょう。
また、Mapbox GL JS の css も import しておかないとwarningが出てしまうので、こちらもimportします。

App.js(一部)

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";
import MapGL from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

Mapbox のアクセストークン

Mapbox を使う場合は、 Mapbox のアクセストークンを埋め込む必要があります。

アクセストークンは、Mapboxにログインして、「Access tokens」の + Create a token ボタンから作成することができます。

こちらからログインしてください https://account.mapbox.com/
※アカウントを持っていない人は、アカウントの作成が必要です

アクセストークンが取得できたら、下記のようにApp.jsxに書きます。
本来アクセストークンのような外部に漏れてはいけない情報は、.envファイルなどの環境変数で管理した方が良いですが、
Mapboxには、指定したURLから発信されたリクエストに対してのみ機能する「制限付きトークン」を作成することができるので、これであればファイルに埋め込んでも問題ありませんね。

App.js(一部)

// mapbox access token
const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoiZ......."

MapGLコンポーネントの追加

それでは最後にDeckGLにマップコンポーネントを組み込みます。
上記で定義したアクセストークンはmapboxApiAccessTokenに渡します。

App.js(一部)

    return (
      <DeckGL viewState={viewState} layers={layer}>
        <MapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );

ブラウザで表示

それではここまで書いたコードをブラウザで表示してみましょう！
yarn startコマンドで起動させると・・・

地図の上にパスが表示されました！！

次回予告

次回からはいよいよGoogleMapタイムラインの表示を行なっていきます！

App.jsxの全体像

App.js

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";
import MapGL from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

// mapbox access token
const MAPBOX_ACCESS_TOKEN = "pk.eyJ1IjoiZ.......";

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [
  {
    path: [
      [-122.45, 37.7],
      [-122.5, 37.8],
      [-122.6, 37.7]
    ]
  }
];

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",
        data,
        getPath: d => d.path,
        getWidth: 30
      })
    ];
    return (
      <DeckGL viewState={viewState} layers={layer}>
        <MapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );
  }
}

そもそもの理由

サジェスト機能付きで、単一と複数選択を実装する必要があった。（プラグインは使っていいのかわからない。つかえたらselect2を使うのが良い）

一般的サジェスト

HTML5タグリファレンス引用より、一般的なデータリストの使い方

<input type="search" autocomplete="off" list="keywords">
<datalist id="keywords">
<option value="ウィキペディア">
<option value="ウィルス対策">
<option value="ウィンドウズ">
</datalist>

http://www.htmq.com/html5/datalist.shtml

ここのinputタグにmultipleをつけて、複数選択できればいいのだが、単一選択しかできない

方法１（JavaScriptで実装する）

separatorに指定した文字を入力した際に、次の選択候補が出るように実装
ただ、中身のoptionが増えるとすごくパフォーマンスが悪い（リスト再生成しているため）

<script>
    $(function(){
        const datalist = $('datalist');
        const options = $('datalist option');
        const optionsarray = $.map(options ,function(option) {
            return option.value;
        });
        const input = $('input[list]');
        let inputcommas = (input.val().match(/,/g)||[]).length;
        const separator = ',';

        function filldatalist(prefix) {
            if (input.val().includes(separator) && options.length > 0) {
                datalist.empty();
                for (i=0; i < optionsarray.length; i++){
                    if (prefix.indexOf(optionsarray[i]) < 0 ) {
                        datalist.append('<option value="'+prefix+optionsarray[i]+'">');
                    }
                }
            }
        }
        input.on("change paste keyup",function() {
            inputtrim = input.val().replace(/^\s+|\s+$/g, "");
            const currentcommas = (input.val().match(/,/g)||[]).length;

                if (inputcommas !== currentcommas) {
                    const lsIndex = inputtrim.lastIndexOf(separator);
                    const str = (lsIndex != -1) ? inputtrim.substr(0, lsIndex)+"," : "";
                    filldatalist(str);
                    inputcommas = currentcommas;
                }
                input.val(inputtrim);

        });
    });
</script>

送信する値が、selectの時と違うので、細工する必要がある。

https://translate.google.com/translate?hl=ja&sl=en&u=https://stackoverflow.com/questions/14148538/multiple-selections-with-datalist&prev=search

方法2 input type emailとform

typeをemailにして、emailにすると入力値がメールアドレスじゃなかった時にバリデーションがかかるので、formにnovalidateをつけてバリデーションをしないようにする必要がある。

<form novalidate>
　　<input type="email" autocomplete="off" name="sample" list="keywords" multiple>
　　<datalist id="keywords">
　　　  <option value="ウィキペディア">
　　    <option value="ウィルス対策">
　　　  <option value="ウィンドウズ">
　　</datalist>
</form>

送信する値が、selectの時と違うので、細工する必要がある。

方法3 select2プラグインを使用する

これが使えるなら、一番楽（サジェスト機能付きセレクトボックス）
multipleを外せば、単一選択のサジェスト機能付きセレクトボックスとなる。
また、送信される値がvalueという点もよい。今回はただ表示しただけだが、カスタマイズ性も高く色や幅などの調整をし、よりかっこよくできる。

<select class="sample" name="sample" style="width:1000px" multiple>
    <option value="1">ウィキペディア</option>
    <option value="2">ウィルス対策</option>
    <option value="3">ウィンドウズ</option>
</select>
<script>
    $(function(){
        $('.sample').select2();
    });
</script>

まとめ

datalistは、labelとvalueを指定できるが、両方記述すると両方表示される。
labelは指定しなくてもいいが、valueはしていする必要があり、表示されてしまうため、selectで送る際のvalueとは少し違う。
(selectはoptionタグで囲まれているものが表示され、送信される値はvalueといった程度)
以前の記事で、selectboxに送信値を合わせるように、datalistを細工したが、正直めんどくさかった。なぜselectと同じようにHTML側がつくってくれなかったのだろう？

はじめに

Reactを勉強する上でGithub pageでReactアプリを公開できるのか気になったのがきっかけです。

GitHub Pagesについて
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
[GitHub 公式ヘルプ]https://help.github.com/ja/github/working-with-github-pages/about-github-pages

参考にしたサイト

• GitHub PagesにReactアプリをデプロイする方法 https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf
  
• React公式(INSTALLATION>新しいReactアプリを作る)
  https://ja.reactjs.org/docs/create-a-new-react-app.html
  

環境

以下は私が行った環境です.

name	version
Node	v10.14.2
npm	6.4.1

2019/12/19現在ではReact公式サイトに

あなたのマシンに Node >= 8.10 及び npm >= 5.6 の環境が必要です　　　　

と記載されていました.

手順

1.Reactアプリの作成

以下のコマンドを実行しました.

今回はreact-pagesという名前のReactアプリを作成しています.

$ npx create-react-app react-pages

2.gh-pagesのインストール

以下のコマンドでgh-pagesをインストールします。
以下のコマンドではcd react-pagesで作成したreact-pagesフォルダまで移動しgh-pagesをインストールしています。

$ cd react-pages
$ npm install gh-pages --save-dev

npm

Node.jsで利用するパッケージ管理ツール

gh-pages

GitHubのgh-pagesブランチ（または他の任意の場所）にファイルを公開するためのパッケージ

3.Reactアプリのpackage.jsonを修正

作成したReactアプリのpackage.jsonに以下の設定を追記してください.
ここで"homepage"に書いてあるURLの[GitHub username],[created repository name]はそれぞれ自分が作成した名前をつけてください

package.json

//...
"homepage": "https://[GitHub username].github.io/[created repository name]/",
"scripts": {

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
//...

4.GitHubでRepositoryを作成

このときのリポジトリの名前は作成したReactアプリと異なっていても大丈夫です

また、GitHubがPROアカウントではない場合はPublicでRepositoryを作成してください。

5.GitHubPageの設定

作成したGigHubのリポジトリよりsettingへ移動,その後下へスクロールしGitHub Pages のSourceをmaster branchへ変更する.

6.作成したアプリをデプロイ

以下のコードでデプロイします。また,実行する場所は作成したReactアプリ内で行ってください.以下の前半部分はリポジトリを作成したときに出てくる任意のフォルダーとリポジトリを接続しREADME.mdをリポジトリへ追加しているものです.

$ git init
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin 
$ git@github.com:[GitHub username]/[Repository name].git
$ git push -u origin master
$ npm run deploy

結果

GitHubPages設定後表示もう一度GitHubPagesの設定場所へ移動し表示されているURLをクリック.

以下のようなページが開かれていれば成功です.

最後に

デプロイの意味とか全然しらない初学者(私)でもちょっと調べたらできるもんだなぁと感激しました。
積極的にいろんなことにトライしてみようと思いました。
次はReactをつかって自分のポートフォリを作りたいと思います。

こちらの記事は、Parag Zaveri 氏により2018年10月に公開された『 How to stop using console.log() and start using your browser’s debugger 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。

ソフトウェア開発者になる道を進み始めたとき、私も他の人と同じように、いくつかの困難にぶつかりました。中でも、新人開発者が直面する最も一般的な苦闘の1つは「デバッグ」です。Chrome でコンソールを開き、”console.log()”で値を取り出せば、バグの所在を見つけられることに気づいたとき、最初は聖杯を発見したと思いましたが、後で非常に効率が悪いことに気がつきました。笑い話として、私のお気に入りのユースケースをいくつか紹介します。

console.log（ 'Total Price：'、total）//値が保存されたかどうか確認しようとして..

console.log（ 'Here'）//プログラムの実行が特定の関数に到達したかどうか..

ほとんどの開発者は、 実際これがプログラムの(バッグ手法として好ましくないことに気づくでしょう。もっと良い方法があるはずです！

ありがたいことに、ブラウザにデバッグツールが付属しています。ここでは特に、Chrome デベロッパーツールについて説明していきます。

この投稿では、ブレークポイントの使用、コードのステップ実行、ウォッチ式の設定、Chromeデベロッパーツールでの修正の適用について説明します。

このチュートリアルを進めるには、私が作成したコードのサンプルリポジトリを使用する必要があります。こちらをクリックしてください。（ロードに数分かかる場合があります）

Step1：バグの再現

バグを常に再現する、一連のアクションを実行することから始めます。

1. ここでは、バグのあるチップ計算機を使用します。サンプルコードを開いていない場合、こちらから開いてください。
2. ‘Entree 1’ に 12 を入力
3. ‘Entree 2’ に 8 を入力
4. ‘Entree 3’ に 10 を入力
5. ‘Tax’ に 10 を入力
6. ‘Tip’ で 20％ を選択
7. ‘Calculate Bill’ をクリックします。合計は 39.6 になるはずですが、結果は大きく異なります。代わりに、 14105.09… と表示されます...うわっ!

Step2：ソースパネルの使い方を学ぶ

Chrome でこれをデバッグするには、デベロッパーツール の使用に慣れる必要があります。Chromeデベロッパーツールを開くには、 Command + Option + I（Mac） または Control + Shift + I（Linux） を押します。
訳注：マウス操作では Chrome のオプションを開き「その他のツール」から開くことが可能。

上部の ”sources” パネルをクリックすると、デバッグ用の3つのパネルにアクセスできるはずですーファイルナビゲーター、ソースコードエディター、およびデバッグペイン。Step 3に進む前に、いろいろクリックしてみてください。

Step3：ブレークポイントを設定する

最初のブレークポイント設定方法を示す前に、 ”console.log()” を使用した場合を先に見てみましょう。明らかにプログラム上では、小計の計算と並行して何かの処理が進んでいるようです。以下のようにして、プログラムをデバッグすることもできます。

幸いなことに、ブラウザの開発ツールでは、これはもう必要ありません。代わりに、単にブレークポイントを設定し、コードをステップ実行して、ブラウザーが認識している値を見つけることができます。

ブレークポイントを設定する方法について見ていきましょう。ブレークポイントとは、コードの実行を一時停止させるタイミングを知るためにブラウザが探すもので、これによりあなたは停止時点でデバッグを行うことが可能になります。

上記の目的のために、マウスイベントの設定をすることで、プログラム実行の冒頭部分にブレークポイントを設定します。

デバッガーペインで、 ”Event Listener Breakpoints” のビューを展開します。そこから、 ”Mouse” を展開し、 ”Click” にチェックマークを付けます。

“Calculate Bill” ボタンをクリックすると、最初の ”onClick()” 関数の最初の行で、デバッガーは実行を一時停止します。デバッガーがそれ以外のどんな場所にいても、再生ボタンを押すとデバッガーはそれ（一時停止）をスキップします。

Srep4：コードのステップ実行

すべてのデバッグツールで、ユーザーはコードの実行に関する2つのオプションをナビゲーションから選択できます。次の関数の呼び出しで ”step into” するか “step over” することが可能です。

“step into” を選択すると、各関数内でコードの各行が1つずつ実行されます。

次の関数呼び出しを“step into” する

“step over” を選択すると、動作確認済みの関数全体をスキップできます。

次の関数呼び出しを“step over” する

コードをステップ実行する例を次に示します。画面右側の “scope” タブの配下に最初の3つの ”Entree” の値が表示されています。

Step5：コード行ブレークポイントを設定する

Wow！ コードをステップ実行できるのは素晴らしいことですが、ちょっとかさばって面倒ですよね？通常は、特定の場所の値のみを知りたいはずです。はい、その問題の解決策が、コード行ブレークポイントです。

著者注：このコード行ブレークポイントが、まさに”console.log()” の使用をやめ、Chrome デベロッパーツールをお勧めした理由です。

コード行ブレークポイントを設定するには、詳細情報を表示させたい行番号をクリックするだけです。その後、通常どおりにコードを実行すると、設定されたコード行ブレークポイントで実行が停止します。これですべての関数で “step into” , “step over” をいちいち選択しなくても良くなります。

注：問題がある場合は、”mouse” > “click” のチェックボックスが選択解除されていることを確認してください。

ご覧のとおり、 10812 の値を要求したときの小計の値が表示されています。”Entree” の値は ”scope” ペインにも表示され、コード上にオーバーレイで表示されます。
訳注：「 10812 の値を要求」・・・”Entree1”に 10, “Entree2”に 8, “Entree3”に 12の値を要求したときに 10812 として小計を処理している。→以下で修正の話に繋がる

うむむ… バグが見つかったようですね...文字列として連結したのは誰かな？

ではいくつかのウォッチ式を設定して、確認してみましょう。

Step6：ウォッチ式を作成する

さて、これで”Entree” の値が適切に加算されていないことがわかったので、各値にウォッチ式を設定しましょう。

ウォッチ式は、コード内の特定の変数または式に関する詳細情報を提供します

「ウォッチ（監視）」する値を定義するには、一番上の “Watch” ペインをクリックし、開いたら + 記号をクリックします。ここで、変数名または他の式を入力できます。

デモでは、 ”Entree1” の値と、その値のタイプにウォッチ式を設定します。

なるほど！ 問題が見つかったようです。 ”Entree1” は文字列として保存されているようです！値自体を獲得する方法に起因しているようです。おそらく、”querySelector()” が原因です。他のいくつかの値も同様に影響を受ける可能性があるので、デベロッパーツールでさらにデバッグを進め、コードを修正していきましょう。

Step7：コードの修正

さらに調査してみると、”querySelector()” が犯人で間違いありません！

では、これをどのように修正すればよいのでしょうか？そうですね、例えば 74行目のように”Number（getEntree1()）” を使用して、単純に文字列を強制的に数値に変換できます。

実際にコードを編集するには、”sources” の左にある “element” パネルに移動する必要があります。JavaScript コードが表示されない場合は、”script” タグを展開する必要があります。そこからコードを右クリックし、”edit as html” を選択しましょう。

ワークスペースを使用している場合、コードの保存は簡単ですぐに表示できます。そうでない場合は、command + s（mac） または control + s（linux） を使用して Web ページのローカルコピーを保存する必要があります。

そうすればローカルコピーを開くことができるので、変更を表示できます。

出来上がり！

このデバッグ方法論は、Kayce Basques 様の “Get Started with Debugging Javascript in Chrome DevTools” という記事からインスピレーションを得て、developers.google.comでも採用されました。
Demo Code： https://github.com/paragzaveri/chromeDevTools

翻訳協力

Original Author: Parag Zaveri
Thank you for letting us share your knowledge!

この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当: @aoharu
翻訳担当: @upaldus
監査担当: @nyorochan
公開担当: @aoharu

私たちと一緒に記事を作りませんか？

私たちは、海外の良質な記事を複数の優秀なエンジニアの方の協力を経て、日本語に翻訳し記事を公開しています。
活動に共感していただける方、良質な記事を多くの方に広めることに興味のある方は、ぜひご連絡ください。
Mailでタイトルを「参加希望」としたうえでメッセージをいただく、もしくはTwitterでメッセージをいただければ、選考のちお手伝いして頂ける部分についてご紹介させていただく事が可能です。
※ 頂いたメッセージには必ずご返信させて頂きます。

ご意見・ご感想をお待ちしております

今回の記事は、いかがだったでしょうか？
・こうしたら良かった、もっとこうして欲しい、こうした方が良いのではないか
・こういったところが良かった
などなど、率直なご意見を募集しております。
いただいたお声は、今後の記事の質向上に役立たせていただきますので、お気軽にコメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
みなさまのメッセージをお待ちしております。

こんにちわ。Patheeの廣瀬です

世界の行ったところを塗りつぶすサービスExplorStateを、
GeoChart(Google Chart Tools)を使って作ってみました

今回はこのサービス作成の際に得られたGeoChartのTipsなどを紹介していきます

ExplorState is 何

私の訪問履歴

世界中で旅行した場所を自治体単位で塗りつぶしてドヤるサイトです
都道府県だと経県値さん、国だと色々(MapColoとか)ありますが、
世界の自治体単位のものがなかったので作りました

GeoChart

Google様謹製のチャートライブラリGoogle Chart Toolsの機能の一部で、
データを食わせると簡単に地図を塗りつぶしてくれます
https://developers.google.com/chart/interactive/docs/gallery/geochart

このライブラリはGoogle Analytics向けに作られたものをライブラリ化したようで、
データの範囲やクリックイベントが仕込める場所などが一緒です
(analyticsの地図)

簡単な使い方や日本地図・世界地図を描画するサンプルは日本語文献でもそれなりに出てきますが、
もうちょっと突っ込んだ使い方をご紹介したいと思います

region

Chartのoptionに指定するregionには、エリアを示すコードを入力します
コードの種類によって四段階で範囲の表示が変わります

世界

null or "world" (どちらを使っても表示は一緒)

大陸

アメリカ(019)など

亜大陸

北アメリカ(021)など

国

アメリカ合衆国など(US)

詳細はContinent Hierarchy and Codesを参照

クリックイベントと組み合わせて、範囲を徐々に絞って表示していくなどの表現ができます

data (地域コード)

大陸、亜大陸、国のデータは上記のContinent Hierarchy and Codesを見れば、塗りつぶす先のデータが分かります

では、自治体の地域コードは？
アメリカのアラスカだと"US-AK"、日本の北海道だと"JP-01"などですが、
先ほどのContinent Hierarchy and Codesには見当たりません
このページのエリアコードがリンクになっているので飛びます
アメリカだとこんなWikipediaのページに飛びます

さらにこのページからもう一つリンクに飛ぶ必要があります。ISO 3166-2:USの部分です

これでようやく自治体の地域コードを手に入れることができました。お疲れ様です
僕のサービスでは存在する全ての国家のデータを、Wikipediaをめぐって手に入れました

日本語で情報が欲しい場合は、URLのenをjaにすると良いです
https://en.wikipedia.org/wiki/ISO_3166-2:US
↓
https://ja.wikipedia.org/wiki/ISO_3166-2:US

ただし、日本語情報は古いことがあります
日本ではトップレベルの自治体、つまり都道府県の追加・合併・廃止などは沖縄返還を最後に50年近く行われていませんが、
世界ではままあるようです

また、GeoChartの方も更新についていけていないようで、
こうやって集めてもうまく表示されない自治体があります。
その他にもデータには色々苦労があったのですが、それはまたの機会に

過去記事一覧

• その1 タイトル画面
• その2 ダンジョン・プレイヤーの生成と描画
• その3 プレイヤーの移動
• その4 ダンジョンのランダム生成
• その5 ダンジョンのサイズ

現在のコードについては前回の記事の最後の項を参照してください。

ゲームメッセージ

今回は初めにゲームメッセージを出力する機能を実装します。

ゲームメッセージはゲーム画面の右下の部分に描画することにします。

まず、ゲームメッセージを保持するためのmessages変数を用意します。ゲームメッセージはメッセージを表すオブジェクトの配列として保持することにします。

var messages = null;

次に、保持するメッセージの最大数をNUM_MESSAGE変数で定義します。保持するメッセージの最大数は8個とします。

var NUM_MESSAGE = 8;

次に、メッセージを追加するためのadd_message関数を実装します。

第1引数にはメッセージを表すオブジェクトを渡すものとします。

メッセージを表すオブジェクトは下のようなプロパティを有するものとします。

• text・・・メッセージテキストです。
• type・・・メッセージの種類です。
• repeat・・・メッセージの繰り返し回数を表します。同じメッセージが連続して出力された場合には繰り返し回数を増加させることによって同じメッセージが連続して出力されたことを表現することにします。

この関数では追加されたメッセージが直前に追加されたメッセージと同じものである場合には直前に追加されたメッセージの繰り返し回数を1増加させ、異なるものである場合にはmessages変数にメッセージを追加します。

ただし、保持されているメッセージが8個より多い場合には古いメッセージを削除するようにします。

function add_message (message) {
    var l = messages[messages.length - 1];
    if (message.text === l.text && message.type === l.type) {
        if (!l.repeat) {
            l.repeat = 2;
        }
        else {
            l.repeat++;
        }
    }
    else {
        messages.push(message);
        while (messages.length > NUM_MESSAGE) {
            messages.shift();
        }
    }
}

最後に、draw関数にメッセージを描画する処理を追加します。

メッセージの種類に応じてメッセージの文字色を変更します。

また、メッセージに繰り返し回数が設定されている場合には繰り返し回数も表記するようにします。

    con.save();
    con.textBaseline = 'top';
    con.textAlign = 'left';
    con.font = '16px consolas';
    con.translate(SX * PX, SCREEN_Y - ((16 + 6) * NUM_MESSAGE + 8 * 2));
    for (var i = 0; i < messages.length; i++) {
        if (messages[i].type === 'normal') {
            con.fillStyle = 'white';
        }
        else if (messages[i].type === 'special') {
            con.fillStyle = 'yellow';
        }
        else {
            throw new Error('not supported.');
        }
        var text = messages[i].text;
        if (messages[i].repeat) {
            text += '（' + 'x' + messages[i].repeat + '）';
        }
        con.fillText(text, 8, (16 + 6) * i + 8);
    }
    con.restore();

これでゲームメッセージを出力する機能が実装できました。

メッセージの追加

実際に幾つかメッセージを出力してみましょう。

まず、メッセージテキストを定義します。

3つのメッセージを出力するようにしてみます。

1つ目のメッセージは新しいゲームを開始した時に出力します。

2つ目のメッセージは下り階段を降りた場合に出力します。

3つ目のメッセージは壁に向かって歩こうとした場合に出力します。

var MSG_INIT = 'あなたは目覚めました。';
var MSG_DOWNSTAIR = '下り階段を降りました。';
var MSG_WALL = '壁に阻まれました。';

1つ目のメッセージはinit関数で追加します。

init関数を下のように変更します。

種類がspecialでテキストがMSG_INITのメッセージを追加します。

function init () {
    fields = [];
    fields[0] = create_field(0, [], seed);
    player = {
        depth: 0,
        x: 12,
        y: 17
    };
    messages = [{
        text: MSG_INIT,
        type: 'special'
    }];
}

2つ目と3つ目のメッセージはkeydownイベントハンドラで追加します。

2つ目のkeydownイベントハンドラを下のように変更します。

移動しようとしたマスの種類が壁であった場合に種類がnormalでテキストがMSG_WALLのメッセージを追加します。

また、下り階段から1つ下の階に移動した場合に種類がnormalでテキストがMSG_DOWNSTAIRのメッセージを追加します。

    c.on('keydown', function (e) {
（省略）
        if (e.keyCode >= 37 && e.keyCode <= 40) {
（省略）
            if (x !== player.x || y !== player.y) {
                var block = fields[player.depth].blocks[x][y];
                if (B_CAN_STAND[block.base]) {
                    player.x = x;
                    player.y = y;

                    draw(con, env);
                }
                else {
                    if (block.base === B_WALL) {
                        add_message({
                            text: MSG_WALL,
                            type: 'normal'
                        });

                        draw(con, env);
                    }

                    return;
                }
            }
            else {
                return;
            }
        }
        else if (e.keyCode === 32) {
            var block = fields[player.depth].blocks[player.x][player.y];
            if (block.base === B_DOWNSTAIR) {
                player.depth++;
                if (!fields[player.depth]) {
                    fields[player.depth] = create_field(player.depth, [{
                        x: player.x,
                        y: player.y
                    }], seed);
                }
                add_message({
                    text: MSG_DOWNSTAIR,
                    type: 'normal'
                });
            }
            else {
                return;
            }
        }
        else {
            return;
        }

        draw(con, env);
    });

メッセージが表示されたゲーム画面は下のようになります。

プレイヤーのステータスの描画

次にプレイヤーのステータスを描画します。

と言っても、現在プレイヤーの状態として存在する値は、player変数に格納されるdepth、x、yのみです。

この中でxとyは敢えてゲーム画面に表示する必要はありませんが、depthは表示すべきでしょう。

また、今後ゲームを開発していくにつれてプレイヤーの状態として様々なものが追加されていくことになるはずです。

その中の幾つかはゲーム画面に表示させるべきものとなるでしょう。

そこで、今後はゲーム画面の右上部分にプレイヤーのステータスを表示していくことにします。

今回はプレイヤーが何階のフロアにいるかを表示する処理を追加してみることにします。

ゲーム画面に描画するテキストを保持する変数を追加します。

var TEXT_DEPTH = '階';

draw関数に下のコードを追加します。

    con.save();
    con.textBaseline = 'top';
    con.textAlign = 'left';
    con.font = '24px consolas';
    con.fillStyle = 'white';
    con.translate(SX * PX, 0);
    con.fillText(player.depth + TEXT_DEPTH, 8, (24 + 6) * 0 + 8);
    con.restore();

これでプレイヤーのいる階がゲーム画面に表示されるようになりました。

ゲーム画面は下のようになります。

今回はここまで

今回はここまでです。

game.jsは下のようになりました。

var TITLE = 'シンプルローグライク';

var TEXT_START = 'はじめる';
var TEXT_DEPTH = '階';

var MSG_INIT = 'あなたは目覚めました。';
var MSG_DOWNSTAIR = '下り階段を降りました。';
var MSG_WALL = '壁に阻まれました。';

var SCREEN_X = 1600;
var SCREEN_Y = 800;

var SX = 25;
var SY = 25;
var PX = 32;
var PY = 32;

var B_FLOOR = 0;
var B_WALL = 1;
var B_DOWNSTAIR = 2;

var B_CAN_STAND = [];
B_CAN_STAND[B_FLOOR] = true;
B_CAN_STAND[B_WALL] = false;
B_CAN_STAND[B_DOWNSTAIR] = true;

var NUM_MESSAGE = 8;

var img = new Image();
img.src = 'Dungeon_B_Freem7.png';

var seed = Date.now().toString(10);

var startf = false;

var fields = null;
var player = null;
var messages = null;

$(function(){
    var canvas = document.getElementById('game');
    var con = canvas.getContext('2d');

    var keyl = false;
    var keyu = false;
    var keyr = false;
    var keyd = false;

    var env = {
        diagonal: false
    };

    var c = $('body');
    c.on('keydown', function (e) {
        if (e.keyCode === 37) {
            keyl = true;
        }
        else if (e.keyCode === 38) {
            keyu = true;
        }
        else if (e.keyCode === 39) {
            keyr = true;
        }
        else if (e.keyCode === 40) {
            keyd = true;
        }
        else {
            keyl = false;
            keyu = false;
            keyr = false;
            keyd = false;
        }
    });
    c.on('keyup', function (e) {
        if (e.keyCode === 37) {
            keyl = false;
        }
        else if (e.keyCode === 38) {
            keyu = false;
        }
        else if (e.keyCode === 39) {
            keyr = false;
        }
        else if (e.keyCode === 40) {
            keyd = false;
        }
    });
    c.on('keydown', function (e) {
        if (!startf) {
            if (e.keyCode === 90) {
                startf = true;

                init();

                draw(con, env);
            }

            return;
        }

        if (e.keyCode === 16) {
            if (!env.diagonal) {
                env.diagonal = true;

                draw(con, env);
            }

            return;
        }

        if (e.keyCode >= 37 && e.keyCode <= 40) {
            var nx = fields[player.depth].nx;
            var ny = fields[player.depth].ny;
            var x = player.x;
            var y = player.y;
            if (e.shiftKey) {
                if (keyl && keyu) {
                    if (x === 0 || y === 0) {
                        return;
                    }
                    x--;
                    y--;
                }
                else if (keyr && keyu) {
                    if (x === nx - 1 || y === 0) {
                        return;
                    }
                    x++;
                    y--;
                }
                else if (keyl && keyd) {
                    if (x === 0 || y === ny - 1) {
                        return;
                    }
                    x--;
                    y++;
                }
                else if (keyr && keyd) {
                    if (x === nx - 1 || y === ny - 1) {
                        return;
                    }
                    x++;
                    y++;
                }
                else {
                    return;
                }
            }
            else {
                if (e.keyCode === 37) {
                    if (x === 0) {
                        return;
                    }
                    x--;
                }
                else if (e.keyCode === 38) {
                    if (y === 0) {
                        return;
                    }
                    y--;
                }
                else if (e.keyCode === 39) {
                    if (x === nx - 1) {
                        return;
                    }
                    x++;
                }
                else if (e.keyCode === 40) {
                    if (y === ny - 1) {
                        return;
                    }
                    y++;
                }
            }

            if (x !== player.x || y !== player.y) {
                var block = fields[player.depth].blocks[x][y];
                if (B_CAN_STAND[block.base]) {
                    player.x = x;
                    player.y = y;
                }
                else {
                    if (block.base === B_WALL) {
                        add_message({
                            text: MSG_WALL,
                            type: 'normal'
                        });

                        draw(con, env);
                    }

                    return;
                }
            }
            else {
                return;
            }
        }
        else if (e.keyCode === 32) {
            var block = fields[player.depth].blocks[player.x][player.y];
            if (block.base === B_DOWNSTAIR) {
                player.depth++;
                if (!fields[player.depth]) {
                    fields[player.depth] = create_field(player.depth, [{
                        x: player.x,
                        y: player.y
                    }], seed);
                }
                add_message({
                    text: MSG_DOWNSTAIR,
                    type: 'normal'
                });
            }
            else {
                return;
            }
        }
        else {
            return;
        }

        draw(con, env);
    });
    c.on('keyup', function (e) {
        if (e.keyCode === 16) {
            if (env.diagonal) {
                env.diagonal = false;

                draw(con, env);
            }
        }
    });
    $(window).on('blur', function (e) {
        if (env.diagonal) {
            env.diagonal = false;

            draw(con, env);
        }
    });

    draw(con, env);
});

function init () {
    fields = [];
    fields[0] = create_field(0, [], seed);
    player = {
        depth: 0,
        x: 12,
        y: 17
    };
    messages = [{
        text: MSG_INIT,
        type: 'special'
    }];
}

function add_message (message) {
    var l = messages[messages.length - 1];
    if (message.text === l.text && message.type === l.type) {
        if (!l.repeat) {
            l.repeat = 2;
        }
        else {
            l.repeat++;
        }
    }
    else {
        messages.push(message);
        while (messages.length > NUM_MESSAGE) {
            messages.shift();
        }
    }
}

function create_field (depth, upstairs, base_seed) {
    var random = new Random(base_seed + ',' + depth.toString(10));

    var nx = 25;
    var ny = 25;
    if (depth > 0) {
        nx = 50;
        ny = 50;
    }

    var blocks = [];
    for (var i = 0; i < nx; i++) {
        blocks[i] = [];
        for (var j = 0; j < ny; j++) {
            if ((i === 0 || j === 0) || (i === nx - 1 || j === ny - 1)) {
                blocks[i][j] = {
                    base: B_WALL
                };
            }
            else {
                blocks[i][j] = {
                    base: B_FLOOR
                };
            }
        }
    }

    if (depth === 0) {
        blocks[12][5] = {
            base: B_DOWNSTAIR
        };

        return {
            nx: nx,
            ny: ny,
            blocks: blocks
        };
    }

    var rs = [{
        x1: 1,
        x2: nx - 2,
        y1: 1,
        y2: ny - 2
    }];
    var ers = [];
    var dps = [1, 1, 1, 1, 1, 1, 0.5, 0.5, 0.5, 0.5];
    while (rs.length > 0 && dps.length > 0) {
        var r = rs.shift();
        var nrs = split_room(blocks, r, dps.shift(), random);
        for (var i = 0; i < nrs.length; i++) {
            rs.push(nrs[i]);
        }
        if (nrs.length === 0) {
            ers.push(r);
        }
    }
    while (rs.length > 0) {
        ers.push(rs.shift());
    }

    var nds = 1;
    while (nds > 0) {
        var x = random.num(nx - 2) + 1;
        var y = random.num(ny - 2) + 1;
        var f = true;
        for (var i = 0; i < upstairs.length; i++) {
            if (x === upstairs[i].x && y === upstairs[i].y) {
                f = false;
                break;
            }
        }
        if (f) {
            blocks[x][y].base = B_DOWNSTAIR;
            nds--;
        }
    }

    for (var i = 0; i < upstairs.length; i++) {
        if (blocks[upstairs[i].x][upstairs[i].y].base = B_WALL) {
            blocks[upstairs[i].x][upstairs[i].y].base = B_FLOOR;
        }
    }

    return {
        nx: nx,
        ny: ny,
        blocks: blocks
    };
}

function split_room (blocks, r, dp, random) {
    var ap = random.fraction();
    if (ap <= dp) {
        var dir = random.num(2);
        if (r.x2 - r.x1 > (r.y2 - r.y1) * 2) {
            dir = 0;
        }
        else if ((r.x2 - r.x1) * 2 < r.y2 - r.y1) {
            dir = 1;
        }

        if (dir === 0) {
            if (r.x2 - r.x1 <= 6) {
                return [];
            }

            var x = random.num(r.x2 - r.x1 - 6) + 3 + r.x1;
            if (blocks[x][r.y1 - 1].base !== B_WALL) {
                return [];
            }
            if (blocks[x][r.y2 + 1].base !== B_WALL) {
                return [];
            }
            var y = random.num(r.y2 - r.y1) + r.y1;
            for (var i = r.y1; i <= r.y2; i++) {
                if (i !== y) {
                    blocks[x][i].base = B_WALL;
                }
            }

            var r1 = {
                x1: r.x1,
                x2: x - 1,
                y1: r.y1,
                y2: r.y2
            };
            var r2 = {
                x1: x + 1,
                x2: r.x2,
                y1: r.y1,
                y2: r.y2
            };
            var ord = random.num(2);
            if (ord === 0) {
                return [r1, r2];
            }
            else {
                return [r2, r1];
            }
        }
        else if (dir === 1) {
            if (r.y2 - r.y1 <= 6) {
                return [];
            }

            var y = random.num(r.y2 - r.y1 - 6) + 3 + r.y1;
            if (blocks[r.x1 - 1][y].base !== B_WALL) {
                return [];
            }
            if (blocks[r.x2 + 1][y].base !== B_WALL) {
                return [];
            }
            var x = random.num(r.x2 - r.x1) + r.x1;
            for (var i = r.x1; i <= r.x2; i++) {
                if (i !== x) {
                    blocks[i][y].base = B_WALL;
                }
            }

            var r1 = {
                x1: r.x1,
                x2: r.x2,
                y1: r.y1,
                y2: y - 1
            };
            var r2 = {
                x1: r.x1,
                x2: r.x2,
                y1: y + 1,
                y2: r.y2
            };
            var ord = random.num(2);
            if (ord === 0) {
                return [r1, r2];
            }
            else {
                return [r2, r1];
            }
        }
    }
    return [];
}

function draw (con, env) {
    con.fillStyle = 'black';
    con.fillRect(0, 0, SCREEN_X, SCREEN_Y);

    if (!startf) {
        con.textBaseline = 'alphabetic';
        con.textAlign = 'center';
        con.fillStyle = 'white';

        con.font = '48px consolas';
        con.fillText(TITLE, SCREEN_X / 2, SCREEN_Y / 4);

        con.font = '32px consolas';
        con.fillText('> ' + TEXT_START, SCREEN_X / 2, SCREEN_Y / 4 * 3);

        return;
    }

    var nx = fields[player.depth].nx;
    var ny = fields[player.depth].ny;

    var ox = 0;
    if (player.x <= Math.floor(SX / 2)) {
        ox = 0;
    }
    else if (player.x >= nx - Math.floor(SX / 2)) {
        ox = nx - SX;
    }
    else {
        ox = player.x - Math.floor(SX / 2);
    }

    var oy = 0;
    if (player.y <= Math.floor(SY / 2)) {
        oy = 0;
    }
    else if (player.y >= ny - Math.floor(SY / 2)) {
        oy = ny - SY;
    }
    else {
        oy = player.y - Math.floor(SY / 2);
    }

    for (var i = 0; i < SX; i++) {
        for (var j = 0; j < SY; j++) {
            var block = fields[player.depth].blocks[ox + i][oy + j];
            if (block.base === B_FLOOR) {
                con.fillStyle = 'white';
                con.beginPath();
                con.arc((i + 0.5) * PX, (j + 0.5) * PY, 1, 0, Math.PI * 2);
                con.closePath();
                con.fill();
            }
            else if (block.base === B_WALL) {
                con.strokeStyle = 'white';
                con.strokeRect(i * PX, j * PY, PX, PY);
                con.beginPath();
                con.moveTo(i * PX, j * PY);
                con.lineTo((i + 1) * PX, (j + 1) * PY);
                con.moveTo((i + 1) * PX, j * PY);
                con.lineTo(i * PX, (j + 1) * PY);
                con.closePath();
                con.stroke();
            }
            else if (block.base === B_DOWNSTAIR) {
                con.drawImage(img, 4 * 32, 5 * 32, 32, 32, i * PX, j * PY, PX, PY);
            }
        }
    }

    var px = player.x - ox;
    var py = player.y - oy;

    con.textBaseline = 'middle';
    con.textAlign = 'center';
    con.fillStyle = 'red';
    con.font = '24px consolas';
    con.fillText('?\uFE0E', px * PX + (PX / 2), py * PY + (PY / 2));

    if (env.diagonal) {
        con.save();
        con.strokeStyle = 'white';
        con.translate(px * PX + (PX / 2), py * PY + (PY / 2));
        con.rotate(Math.PI / 4);
        con.beginPath();
        con.moveTo((PX / 2) + 4, -4);
        con.lineTo((PX / 2) + 4 + 8, -4);
        con.lineTo((PX / 2) + 4 + 8, -4 - 4);
        con.lineTo((PX / 2) + 4 + 8 + 8, 0);
        con.lineTo((PX / 2) + 4 + 8, 4 + 4);
        con.lineTo((PX / 2) + 4 + 8, 4);
        con.lineTo((PX / 2) + 4, 4);
        con.closePath();
        con.stroke();
        con.rotate(Math.PI / 4 * 2);
        con.beginPath();
        con.moveTo((PX / 2) + 4, -4);
        con.lineTo((PX / 2) + 4 + 8, -4);
        con.lineTo((PX / 2) + 4 + 8, -4 - 4);
        con.lineTo((PX / 2) + 4 + 8 + 8, 0);
        con.lineTo((PX / 2) + 4 + 8, 4 + 4);
        con.lineTo((PX / 2) + 4 + 8, 4);
        con.lineTo((PX / 2) + 4, 4);
        con.closePath();
        con.stroke();
        con.rotate(Math.PI / 4 * 2);
        con.beginPath();
        con.moveTo((PX / 2) + 4, -4);
        con.lineTo((PX / 2) + 4 + 8, -4);
        con.lineTo((PX / 2) + 4 + 8, -4 - 4);
        con.lineTo((PX / 2) + 4 + 8 + 8, 0);
        con.lineTo((PX / 2) + 4 + 8, 4 + 4);
        con.lineTo((PX / 2) + 4 + 8, 4);
        con.lineTo((PX / 2) + 4, 4);
        con.closePath();
        con.stroke();
        con.rotate(Math.PI / 4 * 2);
        con.beginPath();
        con.moveTo((PX / 2) + 4, -4);
        con.lineTo((PX / 2) + 4 + 8, -4);
        con.lineTo((PX / 2) + 4 + 8, -4 - 4);
        con.lineTo((PX / 2) + 4 + 8 + 8, 0);
        con.lineTo((PX / 2) + 4 + 8, 4 + 4);
        con.lineTo((PX / 2) + 4 + 8, 4);
        con.lineTo((PX / 2) + 4, 4);
        con.closePath();
        con.stroke();
        con.restore();
    }

    con.save();
    con.textBaseline = 'top';
    con.textAlign = 'left';
    con.font = '24px consolas';
    con.fillStyle = 'white';
    con.translate(SX * PX, 0);
    con.fillText(player.depth + TEXT_DEPTH, 8, (24 + 6) * 0 + 8);
    con.restore();

    con.save();
    con.textBaseline = 'top';
    con.textAlign = 'left';
    con.font = '16px consolas';
    con.translate(SX * PX, SCREEN_Y - ((16 + 6) * NUM_MESSAGE + 8 * 2));
    for (var i = 0; i < messages.length; i++) {
        if (messages[i].type === 'normal') {
            con.fillStyle = 'white';
        }
        else if (messages[i].type === 'special') {
            con.fillStyle = 'yellow';
        }
        else {
            throw new Error('not supported.');
        }
        var text = messages[i].text;
        if (messages[i].repeat) {
            text += '（' + 'x' + messages[i].repeat + '）';
        }
        con.fillText(text, 8, (16 + 6) * i + 8);
    }
    con.restore();
}

function hash (seed) {
    var sha256 = new jsSHA('SHA-256', 'TEXT');
    sha256.update(seed);
    return sha256.getHash('HEX');
}

class Random {
    constructor (seed) {
        this.seed = seed;
        this.hash = hash(seed);
        this.pointer = 0;
    }

    byte () {
        if (this.pointer === 64) {
            this.hash = hash(this.hash);
            this.pointer = 0;
        }
        var value = this.hash.substring(this.pointer, this.pointer + 2);
        this.pointer += 2;
        return parseInt(value, 16);
    }

    num (max) {
        if (max <= 0) {
            throw new Error('max of random.num must be positive.');
        }
        else if (max <= 256) {
            return this.byte() % max;
        }
        else {
            throw new Error('not supported.');
        }
    }

    fraction () {
        return this.byte() / 256;
    }
}

function test_random_class_byte () {
    var a = [68, 9, 150, 66, 71, 184, 42, 152,
        84, 31, 148, 195, 79, 121, 253, 235,
        87, 142, 108, 87, 64, 95, 18, 186,
        184, 92, 200, 43, 179, 155, 117, 136,
        209, 241, 173, 107, 190, 11, 178, 50];
    var r = new Random('yurina');
    for (var i = 0; i < a.length; i++) {
        if (r.byte() !== a[i]) {
            throw new Error('test_random_class_byte');
        }
    }
}

function test_random_class_num () {
    var a = [0, 1, 0, 2, 1, 4, 0, 0, 3, 1, 5, 3, 1, 9, 13, 11];
    var r = new Random('yurina');
    for (var i = 0; i < a.length; i++) {
        if (r.num(i + 1) !== a[i]) {
            throw new Error('test_random_class_num');
        }
    }
}

次回は敵キャラクターと満腹度について考えたいと思います。

はじめに

こんにちは！@70days_jsです。

55日目,61日目にインベーダーゲームを作ろうとしてできませんでした。
それが、ついに、今日！
一応完成しました！

とはいえ、ビームを出したら敵が消えて、敵が下まで到達するとゲームオーバーになるというシンプルゲームです。
バグ検証はしていないので、もしかしたら変な動作をするところがあるかもしれません。
あらかじめご了承ください。

62日目。(2019/12/19)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day62.html

やったこと

インベーダーゲームがついに完成しました。（gif)↓

コードは昨日の記事(年末まで毎日webサイトを作り続ける大学生 〜61日目 インベーダーゲームのリベンジ〜)とほぼ同じなので、変更点だけ書いていきます。

主な変更点は、当たり判定と、上まで行ったビームの削除、ゲームオーバーの機能です。

当たり判定↓

//関数定義
function hit(beam, enemies) {
  for (var i = 0; enemies.length > i; i++) {
    let oneEnemy = enemies[i];
    if (
      (oneEnemy.x < beam.x &&
        oneEnemy.x + enemyWidth > beam.x &&
        oneEnemy.y + enemyHeight > beam.y) ||
      (oneEnemy.x > beam.x && oneEnemy.x < beam.x + oWidth)
    ) {
      enemies.splice(i, 1);
      return true;
    }
  }
}

//ここで使っています↓
 if (beams) {
    for (var i = 0; beams.length > i; i++) {
      let oneBeam = beams[i];
      oneBeam.render();
      let hitOrNoHit = hit(oneBeam, enemies);//ここでhit関数を使う
      if (hitOrNoHit) beams.splice(i, 1);
      if (oneBeam.y + oHeight < 0) beams.splice(i, 1);
      console.log(oneBeam.y);
    }
  }

hit関数はもしビームと敵が被ったらtrueを返すようになっているので、trueが返ったらビームを消すようにしています。
敵の削除はhit関数の中で行なっています。
今回オブジェクトは機体とビームと敵の三つ用意したんですが、当たり判定はどれにも属さないと思いメソッドではなく関数にしました。
ただ、今回作ったものは再利用性がないので改善しないとですね。

次に上まで行ったビームの削除ですが、昨日の段階でゲームをし続けるとものすごく重くなっていたのは、この上まで行ったビームを削除してないからだということがわかりました。↓

 if (beams) {
    for (var i = 0; beams.length > i; i++) {
      let oneBeam = beams[i];
      oneBeam.render();
      let hitOrNoHit = hit(oneBeam, enemies);
      if (hitOrNoHit) beams.splice(i, 1);
      if (oneBeam.y + oHeight < 0) beams.splice(i, 1);//←上までいったビームの削除！
      console.log(oneBeam.y);
    }
  }

最後にゲームオーバーの機能です。↓

    //ゲームオーバー
    if (enemy.y >= h - machineHeight) {
      clearInterval(enemyCreate);
      enemies.length = 0;
      beams.length = 0;
      alert("GAME OVER!!!");
    }

setInterval()で一秒ごとに敵を作り続けているのでまずそれをclearInterval()消して、↓

let enemyCreate = setInterval(function() {
let enemy = new Enemy(ctx);
enemies.push(enemy);
}, 1000);

敵とビームを入れている配列のlengthを0にします。
今日初めて知ったのですが、配列はlengthを0にすると要素を空にしたのと同じことになるようです。
削除(splice)するか迷いましたが、あとでもう一回する機能をつけるときのことを考え、空にするだけにしました。
そして最後にアラートでGAME OVER!!!と出てゲーム終了です。

感想

やー、55日目に失敗してから絶対インベーダーゲームは作りきると決めたので、できてよかったです。
作ると宣言してまだ作れてないものはあとオセロが残っていますね。
年末までに作れるようになんとか頑張ります。今年もあとちょっとだ！

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

参考

配列を空にするにはlength=0で十分。（配列とかおれおれAdvent Calendar2018 – 02日目） | Ginpen.com

大変勉強になりました。ありがとうございます！

これから学ぶ言語について

これからプログラミングを学ぶにあたり、HTML,CSS,Javascript,Ruby,Ruby on Railsの５つの言語について調べてみました。
（間違いがございましたらご指摘頂けますと幸いです！）

HTML

Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）

• Webページを作るための最も基本的なマークアップ言語のひとつです。

• Webページの文書構造を形作るための言語で、普段観ているWebページのほとんどが、HTMLで作られています。

• Hyper Text（ハイパーテキスト）とは、ハイパーリンクを埋め込むことができる高機能なテキストです。　

• HTMLにはハイパーリンク機能で関連する情報同士を結びつけて情報を整理するという特徴があります。

• Markup（マークアップ）とは文書の各部分が、どのような役割を持っているのかを示すということです。

• コンピュータに理解できるように文書の構造を定義することが、HTMLの最も重要な役割で、
  この際目印をつけるための記号として使用されるのがHTMLタグです。

• HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があります。

CSS

“Cascading Style Sheets” （カスケーディング・スタイル・シート）スタイルシート

• スタイルシート言語の1つで、文書構造にデザインを施し見栄えを整える役割を担っています。

• CSSは、HTMLと組み合わせて使用する言語です。
  　WEBページ＝HTML（文書構造）＋CSS（見栄え）で構成されています。

• ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

JavaScript

JavaScript（ジャバスクリプト）

• JavaScriptとは、現在、世界中のデベロッパーの間で最も人気のあるプログラミング言語の1つ。私たちはみんなJavaScriptのヘビーユーザー。普段から1日に何十回も使用しています。

特徴

• JavaScriptはスプリクト言語のためJavaやC言語と違いコンパイルする必要がありません。

• JavaScriptとは、動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるプログラミング言語

• JavaScriptはユーザー側のWebブラウザとWebサイト・ウェブサービスの相互間のやりとりを円滑にします。

• JavaScriptのコードはブラウザがWebページにアクセスしたときにダウンロードされ、画面上に表示されるとJavaScriptのコードが実行されて次に実行するべき動作がもしあればブラウザに指示します。

Javascriptで出来ること

• フォームのチェック
  フォームに入力されたテキストデータをサーバに送る前にチェックできます

• イベント処理
  キーボードやマウスによる操作によってWebページの動的な動きを実現できます。

• テキストの処理・加工
  テキストのスタイルを変化させたり、文字を抜き出したり、テキスト回りの加工も可能です。

• Cookieの処理
  Cookieを作ったり、逆にユーザーのCookieデータを読み込んだりできます

• ウインドウの操作
  出現するウィンドウの位置やサイズ、スクロールさせるなど、さまざまな動きを指定できます。

• ほかにも、JavaScriptでできることはたくさんあります。

Ruby

Ruby（ルビー）

• Rubyは、『まつもとゆきひろ』により開発されたオブジェクト指向スクリプト言語。 日本で開発されたプログラミング言語として初めて国際規格に認証されました。
• 「書くのが楽しい」「気持ちよくかける」とよく言われます。

主な特徴

• Rubyは他の言語と比べると記述量が少なくて済みます。

• JavaやPHPといった他の言語同様、Rubyはオブジェクト指向なプログラミング言語です。

• Rubyはスクリプト言語であり、JavaやC言語と違いコンパイルする必要がありません。　

Rubyで出来ること

• Webアプリ開発
  Ruby on RailsというWebアプリ開発用のフレームワークを利用することで、比較的簡単にオリジナルのアプリケーションを制作することができます。

• スマホアプリ開発
  Webアプリケーションだけでなく、RUBYMOTIONを利用することで、スマホアプリ開発をすることが可能です。

• スクレイピング
  Webサイトから情報を取得し加工するという意味です。 

Ruby on Rails

Ruby on Rails（ルビーオンレイルズ）RoR　又は　Rails

• Ruby on RailsはオープンソースのWebアプリケーションフレームワークである。

• Railsの基本理念は「同じことを繰り返さない」（DRY:Don't Repeat Yourself）と「設定より規約」（CoC:Convention over Configuration）である。

• Ruby on Railsとは、Rubyで構築された、Webアプリケーション開発のための「フレームワーク」です。

• Ruby on Railsでは、MVCアーキテクチャ（MVCモデル）という設計法に基づいて開発を行います。

MVCとは
Model（データを扱う）の頭文字Mと、View（ページの見た目）の頭文字V、Controller（ModelとViewとの連携を行う）の頭文字Cを取ってMVCと呼ばれています。

気になった調べた言葉

５つの言語を調べているうちに気になって調べた言葉です。

コンパイラ言語

高速で動作する代わりに記述が面倒。
ソースコードを事前にコンパイルして、先に機械語に変換しておく。(C、C++、Java、C#など)

スクリプト言語


低速で動作する代わりに短い記述で処理を実現。
ソースコードを逐次機械語に翻訳しながら実行する。
(Python、Perl、PHP、Ruby、JavaScriptなど）

コンパイラ方式とインタープリタ方式

プログラミング言語を変換するタイミングによって，インタープリタ方式とコンパイル方式の2つの型に分類できます。

インタープリタ方式

ソースコードをその場で順を追って解釈する形式をいいます。(Javascript,Ruby)メリットは作成したソースプログラムをただちに実行できるという点。

コンパイラ方式

ソースプログラムをいったん機械語に翻訳し，その機械語になったプログラムを実行する方式です。メリットは実行速度が速い点。

オブジェクト指向プログラミング

「モノ」を組み立てるように表現して、コンピュータに動作をさせること。

Cookie

Web閲覧時に生成されるCookieデータは、サイトで登録したIDやパスワード、ページを見たときの日時や回数を記録するデータです。

フレームワーク

Webアプリケーションを簡単に開発できるようにする骨組みのこと。

はじめに: やりたいこと

タイトルわかりますかね? 見てもらった方が早いので図を貼っておきます。こういうやつです。(こういう機能はなんて言えばいいんだろう?)

ひとつの SVG の中に複数の領域を作って、それぞれが drag できるようになっています。これの作り方について解説します。Git リポジトリの情報可視化 で作ったやつのいち機能ですね。

ちなみに、元ネタは The D3 Graph Gallery の Zooming in d3.js です。そちらでは座標軸 (目盛り) 位置を固定して、プロットされている要素のズームやドラッグをやっています。ここではドラッグだけで、かつ x/y 軸部分の領域は縦または横のみに動く、という形です。やってることは大して違いがないので、これがわかれば同じような話に応用が利くはずです。

上のデモは CodePen で作ってあるのでそちらで触ってみてください。以下、このコードの内容を説明します。

See the Pen d3-multi-part-drag by m.hagiwara (@corestate55) on CodePen.

用語定義

以下のように表示領域に名前を付けています。

使われている SVG の機能

D3.js で作る図は SVG で構成されているので、D3.js での実装はいったん置いておいて、まずは使われている SVG 要素の機能や使い方から押さえましょう。

Group (g) と座標変換 (transform)

• g - SVG: Scalable Vector Graphics | MDN
• transform - SVG: Scalable Vector Graphics | MDN

Group (g) はコンテナで、複数の要素をまとめられます。Group にたいして transform を設定すると、group の子要素になっている SVG 要素全体に対して座標系を設定する (座標変換を行う) ことができます。今回の場合、各表示領域の左上 (上の図で丸がついているところ) がその表示領域の原点になるように設定しています。単純な平行移動 (translate(x, y))です。ここの「座標系の設定」がとても重要で、SVG 領域で見たときと、各領域 (group) で見たときに扱う座標系が異なってきます。

これを示すためにデモの方は各領域内での座標系と SVG 視点(青) で見たときの座標系で特徴的なポイントを表示しています。

たとえば SVG 座標系から見ると [200, 100] のところが以下のようになります。視点が違うので座標が異なりますが、「SVG 図上の位置」としては同じポイントを指しています。

• xAxis 座標系では [0, 100]
• yAxis 座標系では [200, 0]
• plotArea 座標系では [0, 0]

こうして座標系を設定することにより、表示領域が接する部分の座標(値)をそろえることができました。各領域内の要素をどう動かすかについては実装 (イベントハンドラ) の所ですね。

図形のクリッピング (clipPath)

さて、座標系を設定しましたがまだ「表示領域」が設定されていません、このままだと group の「外」にしたい所にオブジェクトを描画しても表示されます。SVG の表示領域内であればオブジェクトが描画できるのでまああたりまえですね。「特定の領域からはみ出したオブジェクトについては描画しない」を実現するために clipPath (クリッピング) を使用します。

• クリッピングとマスキング - SVG: Scalable Vector Graphics | MDN

表示領域 =「この範囲内にだけオブジェクトを描きたい範囲」を SVG 要素として設定します。ここでは矩形 (rect) なので、各エリアそれぞれで clipPath として使う rect を設定します。表示領域設定用の rect は defs セクションの中に置いて、要素を再利用可能にします。それを group から参照するという形になります。表示領域用 rect を複数の要素に対して適用するためにさらに group を作ります。具体的には以下のような階層を各領域ごとに作ります。

+ SVG
  + Group (座標系の設定)
    + defs (再利用可能な要素の定義)
    | + clipPath
    |   + Rect (表示領域の設定)
    + Group (描画オブジェクトをまとめて clipPath を適用する) 
      + 描画対象のオブジェクト

上の階層からわかりますが、表示領域用 rect は座標系を設定した group の子要素になるので、各領域の座標系で位置・サイズを指定することになります。clipPath を適用したグループ内にある SVG 要素は、領域からはみ出した部分はクリッピングされて表示されなくなります。こうして「表示領域」が設定されます。

d3.js での実装

Group と clipPath

まずは各表示領域: g/clipPath のデータを作っていきます。コメント入れてありますが、どこから見た何の値なのかに気をつけてください。基準にする座標系が異なる設定値が混ざっているので、そこを間違うと上手くいきません。¹

const graphData = [
  {
    area: 'xAxis', // 領域名 (id とかに使う)
    px: px0,       // SVG 座標系から見たときの xAxis 座標系の位置 (transform する移動量)
    py: 0,
    clipPath: {    // 表示領域の設定: xAxis 座標系から見たときの clipPath の位置とサイズ
      x: 0,
      y: 0,
      width: width1,
      height: py0
    }
  },
  // 省略
]

このデータに基づいてそれぞれの SVG 要素を作っていきます。まず group の作成と座標系の設定から。

const groups = svg.selectAll('g')
  .data(graphData)
  .enter()
  .append('g')
  .attr('id', d => `${d.area}-group`)
  .attr('transform', d => `translate(${d.px},${d.py})`) // SVG 座標系から見たときの領域座標系(原点)の位置

座標系を設定したらその下に clipPath と clipPath を適用する group (各領域の中で実際に描画するオブジェクトを格納するコンテナ) を作ります。

groups
  .append('defs')
  .append('SVG:clipPath')        // clipPath の定義
  .attr('id', d => `${d.area}-clip`)
  .append('rect')                // clipPath として使う四角形 (rect) を設定
  .attr('x', d => d.clipPath.x)  // 各領域の下につくるので、その領域の座標系で位置とサイズを指定
  .attr('y', d => d.clipPath.y)
  .attr('width', d => d.clipPath.width)
  .attr('height', d => d.clipPath.height)
groups
  .append('g')
  .attr('class', 'clipped-group')
  .attr('clip-path', d => `url(#${d.area}-clip)`) // URLで clipPath 領域を参照

要素の描画

あとは、各表示領域ごとに clipPath が適用されている group の中に描画対象のオブジェクトを入れていきます。もちろんそれらも、各表示領域の座標系で位置を指定します。

ドラッグしてオブジェクトを動かす

各領域ごとに drag イベントハンドラを設定しますが、個々のオブジェクトに設定するのではなく、表示領域全体でドラッグして動かせるようにするので、イベントをキャプチャするための要素 (rect) を追加します。また、イベントキャプチャ用の rect は、これ自体はドラッグの対象にしないので clipPath を適用する group の外に置きます。

+ SVG
  + Group (座標系の設定)
    + defs (再利用可能な要素の定義)
    | + clipPath
    |   + Rect (表示領域の設定)
    + Group (描画オブジェクトをまとめて clipPath を適用する) 
    | + 描画対象のオブジェクト
    + Rect (ポインタイベント)   <= 追加, イベントキャプチャのため最後(一番上)におく

groups
  .append('rect')
  .attr('class', d => `${d.area} drag-handler`) // ポインタイベントキャプチャ用の rect
  .attr('x', d => d.clipPath.x)                 // 位置とサイズは clipPath rect とおなじ
  .attr('y', d => d.clipPath.y)
  .attr('width', d => d.clipPath.width)
  .attr('height', d => d.clipPath.height)

ここでポイントなのは CSS の方で pointer-events: all を設定しておくところです。デモでは各表示領域の範囲がわかりやすいように塗りつぶしアリにしているのですが、実際には fill: none (塗りつぶしナシ) に設定するでしょう。そうなるとデフォルトではイベントをつかんでくれなくなるので、見えなくてもこのオブジェクトでポインタイベントをつかんでね、と指定しておきます。

• pointer-events - CSS: カスケーディングスタイルシート | MDN

rect.drag-handler {
  pointer-events: all;
}

今回は、各領域に描画するオブジェクトに対して特にポインタイベントを設定しないので、このイベントハンドラ用 rect を最前面に持ってきています。が、もし個々のオブジェクトにもイベントハンドラを設定したい場合、こいつが一番上にあるとすべてのポインタイベントを奪ってしまうので動きません。オブジェクトの順序を変える (重なり方を変える) とかの工夫が必要になります。

あとはポインタイベント用 rect に対してイベントハンドラを設定してやるだけです。xAxis/yAxis では x/y いずれか片方の移動量だけを渡すようにしてあります。これは dragAllMarker は三つの領域すべての要素に対して指定された移動量でオブジェクトを動かすからですね。xAxis/yAxis では縦横どちらか片方向の成分を捨てないと狙った動きになりません。たとえば xAxis 領域内で縦にドラッグすると yAxis/plotArea 内の要素が縦に動く、という状況になります。

const dragHandlerOf = {
  'xAxis': () => dragAllMarker(d3.event.dx, 0), // 横方向のみひろう
  'yAxis': () => dragAllMarker(0, d3.event.dy), // 縦方向のみひろう
  'plotArea': () => dragAllMarker(d3.event.dx, d3.event.dy)
}
Object.keys(dragHandlerOf).forEach(area => {
  selectGroup(area)
    .select('rect.drag-handler')
    .call(d3.drag().on('drag', dragHandlerOf[area]))
})

Drag するのはオブジェクトか座標系か

今回のデモと同じような動作を実現させるときに、2 種類やり方があると思います。

• 座標系を固定してオブジェクトを動かす (今回のデモで実装しているのはこっち)
• オブジェクトを固定して座標系を動かす

前者が視点を固定してモノを動かす方法、後者はモノを固定して視点を動かすもの、という言い方でもよいかな。後者・座標系を動かす場合は、ドラッグイベントに対して各座標系の transform の値を変えていくことになります。個々のオブジェクトに対して位置計算をするのではなく、座標系の方をいじった方が簡単になるような気もしますが、合わせて clipPath やポインタイベント用 rect の位置も変えていかないといけないんですよね。考え方がちょっとややこしいのでやっていません。²

おわりに

複数の表示領域で、中身を個別に動かす・連動して動かす、というのをどうやるかについて説明しました。座標系と表示範囲の設定方法がわかれば、あとは通常のイベントハンドリングでできます。いくつか SVG の機能について知らないとできないので、SVG について知っているかどうかが結構効いてきますね。SVG ドキュメントの構造や座標系設定などに注意しましょう。このあたりの理屈がわかれば、表示領域を増やしたり、zoom を加えたり……みたいな応用はいろいろコントロールできるようになると思います。

---

1. Git リポジトリの情報可視化 のコードを元にデモ用のサンプルコードをかいたので変数名とかプロパティ名がそれに引きずられていますが、もうちょっと名前を工夫するとか考えた方が良かった気がしますね…。 ↩

2. あと、ちょっと試してみたところ、SVG 座標系に対してどの位置に設定するかという操作をするためか、ドラッグした際にカクつくのがあったので。でも、そのときの自分のコードが悪かったかもしれない。あまりちゃんと調べられていないのでこのあたりはもうちょっと調べてみてもいいかな……。 ↩

各種ブラウザで使えるJavascriptが統一されてきたこともあり、ここらで自分が管理しているサイトからjQueryを除いてみようと思い試行錯誤をしていたが、結局諦めた。
これから同じような事をする人の参考になればと思い軽く情報共有しようと思う。

書き換え可能なもの

DOMの生成完了

//jquery
 $(document).ready(() => {})
//native
 document.addEventListener("DOMContentLoaded", () => {});

セレクタ(単数/複数)

//jquery
$('.className').each((index, elem) => {
//native
document.querySelector('.className')
document.querySelectorAll('.selected input').forEach((el, index) => {

属性情報の追加/取得

//jquery
$(elem).attr('attribute','value');
$(elem).attr('attribute');
//native
elem.setAttribute('attribute','value');
elem.getAttribute('attribute');

親要素のクラスを追加/除去
classListで要素に付与されているクラスのリストが取得可能

//jquery
$(elem).parent().addClass("className");
$(elem).parent().removeClass("className");
//native
elem.parentElement.classList.add('className');
elem.parentElement.classList.remove('className')

イベントリスナ

//jquery
$('hoge').click(() => {});
//native
document.querySelector('hoge').addEventListener('click', () => {}); //クラスが一つ
document.querySelectorAll('hoge').forEach((elem) => { //クラスが複数
  elem.addEventListener('click', () => {});
});

domが単数の場合と複数の場合を意識してコードを書かないといけないため結構面倒くさい。

困難なもの

・あるポジションまでAnimationで移動したい時

//jquery
const position = $("#id").offset().top;
$('html').animate({ scrollTop: position }, 'fast');
//native
const position = document.querySelector('#id').offsetTop;
window.scrollTo({
  top: position,
  behavior: "smooth"
});

一応アニメーションでのスクロール自体は実現することができるが、behaviorがsmoothかinstantぐらいの指定しかないため、気持ちの良いアニメーションを実現する事ができない。かといって自前でscroll書くのは結構大変で上手く書かないとコードも汚れる。

・script付きのhtmlを埋め込み実行

const html = '<div>...</div><script>...(some_js_execution)</script>'
//jquery
$('#id').html(html); // Scriptが実行される
//native
$('#id').innerHTML = html; // Scriptが実行されない

innerHTMLでは内部にscriptタグがある場合実行できない。ソーシャルボタンを設置する場合は大抵scriptタグがコピーされるソースの中に埋め込まれているので、動的な埋め込みが困難となる。jQueryではcreateElementをしてHTMLのDOMを生成してScriptタグを埋め込むという内部操作でScriptの実行を行っていたが、それを自前で書くのは面倒である。

まとめ

DOMの操作自体は比較的簡単に書けるが、複数DOMの操作は煩雑であった。また細かいAnimation制御ができなかったり、htmlとinnerHTMLなどのように微妙な違いが存在するものもあるので手軽に脱jQueryという訳には行かない事が分かった。

結局まだjqueryが役立つシーンは多いと思われる。Webサイト/Webアプリケーションのjavascriptの使用具合により
native javascriptのみ -> zepto + javascript -> jquery + javascript -> vue.js, react -> react + redux
ぐらいな感じで使い分けていくのが現状のベストプラクティスかなと個人的には思う。