作りたいもの

以下のようなエラーチェックを行う入力フォーム

OKな例
・山田太郎
・山田 太郎（間に半角スペース1個）
・山田　太郎（間に全角スペース1個）
・山田　　太郎（間に全角スペース2個）
・山田　アンデルセン　太郎（間に全角スペース1個ずつ）

エラーを吐きたい例
・「 」←半角スペース1個のみ
・「　」←全角スペース1個のみ
・「 」←半角スペース2個連続
・「　　」←全角スペース2個連続

名前の間に入るスペースは通すけど、スペースだけの入力は許容しない、といった感じ。

使ったもの

Javascript, 正規表現

実装

var str = '山田　太郎';
var pattern = /^\u3000+$/g;// 1文字以上の全角スペース

if(str.match(pattern) == null){
  // NG：スペースのみ
} else {
  // OK：スペース混じりの文字列
}

正規表現	意味
/^\u3000+$/g	1文字以上の全角スペース
+	直前の文字の1文字以上の繰返し
^	文字列の先頭
$	文字列の末尾
/^正規表現$/	任意の正規表現に完全一致する文字列
/正規表現/g	全ての文字についてマッチするかどうかを検査

半角スペースの場合は/^\x20+$/gで同じことができる。

\u3000ではなく「　」で全角スペースを直書きしても良いが、Lintエラーに引っかかることがあるのでこっちのほうがよい。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

https://qiita.com/masayuki14/items/51884596fcb442006cfb

社内向けアプリケーションなんかを作っている時に戻るボタンで画面遷移すると予期しない動きをするので、戻るボタンを押しても戻れないようにしたい場合があります。

そんな時はhtmlの先頭に以下のコードを追加することで戻るボタンを無効化することができます。
このコードはモダンブラウザであれば依存ライブラリ（JQueryなど）なしでも動きます。

このコードでは実際に戻るボタンを無効化するわけではなく、ページを表示するたびに遷移先がnullの履歴を追加する処理を入れることで、戻るボタンの無効化を実現しています。

onpopstateは戻るボタンで画面遷移した時に発火するイベントで、pushStateはブラウザに遷移先を追加するメソッドとなります。

イベントハンドラの外にあるpushStateは、最初に画面をロードした時に実行され、イベントハンドラの中にあるpushStateは戻るボタンを押した時に実行されるため、どちらのコードも必要です。

戻るボタンが押されたらアラートを出力する

//画面初期表示時に遷移先nullの履歴を追加する
history.pushState(null, null, null);

//ブラウザの戻る／すすむボタンで発火するイベント
window.onpopstate = function (event) {
        //戻るボタンを押して戻った時に再度nullの履歴を追加する。
        //※この処理はalertの前に書いておく必要あり。alertの後ろだと戻るボタンを連打したときに戻れてしまう。
    history.pushState(null, null, null);
    alert("ブラウザの戻るボタンは禁止されています。");
};

サンプルコードはこちらで実際に動かしてみることができます。
https://stackblitz.com/edit/js-n5zty9?embed=1&file=index.js

注意点

戻るボタンがクリックされた際にalertやconfirmで処理を止めたりする場合は、必ずalertの前にpushStateを記述する必要があります。
alertの次においてしまうと、戻るボタン連打した時に前の画面に戻れてしまう様になるので要注意です。

戻るボタンが押されたら確認ダイアログを表示する。

こんな風に確認画面を出して、OKが押されたらトップページに遷移することもできます。

history.pushState(null, null, null);

//ブラウザの戻る／すすむボタンで発火するイベント
window.onpopstate = function (event) {
         //連続で戻るボタンがクリックされたときにも戻れない様に、履歴にnullを追加する。 
         history.pushState(null, null, null)
     var r = confirm("このページでのブラウザの戻るボタンは禁止されています。トップページに移動しますか？");
     if (r == true) {
        //コンテキストルートに戻る
        var context = window.location.pathname.substring(0, window.location.pathname.indexOf("/", 2));
        window.location.replace(context);
     } else {

     }
};

このコードは、PCのfirefoxとchromeでテストしました。他のブラウザや環境での動作は不明です。

やりたいこと

別ウィンドウで開くリンクをつくりたかった

方法

メインのコンポーネント

<script>
import { ROUTER } from '@/libs/constant-router'
export default {
  name: 'Register',
  methods: {
    toTerms() {
      let routeData = this.$router.resolve({name: ROUTER.TERMS_NAME, query: {data: "someData"}});
      window.open(routeData.href, '_blank');　//←★ここ
    },
}
</script>

　設定ファイル群

constant-router.js

プロジェクトルート直下に「libs」と名付けたディレクトリを切って、その中に格納

export const ROUTER = {
  TERMS_PATH: '/terms',
  TERMS_NAME: 'terms',
}

router.js

import Terms from '@/views/Terms.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: ROUTER.TERMS_PATH,
      name: ROUTER.TERMS_NAME,
      component: Terms,
    },
  ],
})

router.toTerms = () => {
  router.push({ name: ROUTER.TERMS_NAME })
}


export default router

概要

MongoDBのCLIツールであるmongoシェルを使っていると、JavaScriptをコマンドシェル（REPL）をとして使うのも良い思います。それならNode.jsでも良いかもしれませんが、Go言語はシングルバイナリなところが気に入っています。今回使用するJavaScriptエンジンはECMAScript 5.1の仕様かつNode.jsとは違いI/O関係など実装されていないので、実用的にするためにはかなりGo言語で拡張しなければなりません。しかし、いろいろ拡張することでGo言語の勉強にもなり、実用的なツールも手にすることも可能です。

環境

• Windows 10
• Go 1.12
• Go JavaScript パッケージ
  • github.com/dop251/goja (ECMAScript 5.1)
  • Javascriptエンジンはほかに otto, go-duptake go-duktapeなどがある

最低限の実装

• コマンドの入力・実行。実行結果の表示
• console.logもprintもないのでprintの実装
• exitコマンドで終了
• 継続行のサポート
  • 継続行のpromptは...>とします
  • 継続のキャンセルは...と入力します

実行例

go run main.go
> for(var i=0; i < 5; i++) {
...> print(i)
...> }
0
1
2
3
4
undefined
> doc={a:1, b:"xxxx"}
{"a":1,"b":"xxxx"}
> Object.keys(doc)
["a","b"]
> exit

実行例、特に実用的なものは実装していないので簡単なものしかできません。JavaScriptの仕様はECMAScript 5.1なので現在使わているのものより古いです。

ソースコード

main.go

package main

import (
    "bufio"
    "fmt"
    "os"
    "strings"

    "github.com/dop251/goja"
)

type jsRuntime struct {
    runtime   *goja.Runtime
    stringify goja.Callable
    program   *goja.Program
}

func scanCommand(scanner *bufio.Scanner, prompt string) bool {
    fmt.Print(prompt)
    return scanner.Scan()
}

func (js *jsRuntime) jsprint(vals ...goja.Value) {
    rt := js.runtime
    format := "%v"
    for _, val := range vals {
        str, ok := val.Export().(string)
        if ok {
            fmt.Printf(format, str)
            format = " %v"
            continue
        }
        v, err := js.stringify(goja.Undefined(), val)
        if err != nil {
            rt.Interrupt(rt.NewGoError(err))
            return
        }
        fmt.Printf(format, v)
        format = " %v"
    }
    fmt.Println()
}

func (js *jsRuntime) setStringify() {
    rt := js.runtime
    json := rt.Get("JSON")
    jsonObj, ok := json.(*goja.Object)
    if !ok {
        panic("JSON not defined")
    }
    stringifyProp := jsonObj.Get("stringify")
    stringify, ok := goja.AssertFunction(stringifyProp)
    if !ok {
        panic("JSON.stringify not defined")
    }
    js.stringify = stringify
}

func initialSetting() *jsRuntime {
    rt := goja.New()
    js := &jsRuntime{runtime: rt}
    rt.Set("print", js.jsprint)
    js.setStringify()
    return js
}

func (js *jsRuntime) execute() (goja.Value, error) {
    return js.runtime.RunProgram(js.program)
}

const (
    execInput = iota
    contInput
    errorInput
)

func (js *jsRuntime) compile(cmd string) int {
    program, err := goja.Compile("console", cmd, false)
    if err != nil {
        idx := strings.Index(err.Error(), "Unexpected end of input")
        if idx == -1 {
            fmt.Println(err)
            return errorInput
        }
        return contInput
    }
    js.program = program
    return execInput
}

func main() {
    prompt := "> "
    js := initialSetting()
    scanner := bufio.NewScanner(os.Stdin)
    var cmds []string
    for scanCommand(scanner, prompt) {
        cmd := scanner.Text()
        if cmd == "exit" {
            break
        } else if cmd == "..." {
            cmds = nil
            prompt = "> "
            continue
        }
        cmds = append(cmds, cmd)
        switch js.compile(strings.Join(cmds, "\n")) {
        case execInput:
            ret, err := js.execute()
            if err == nil {
                js.jsprint(ret)
            } else {
                fmt.Println(err)
            }
            cmds = nil
            prompt = "> "
        case contInput:
            prompt = "...> "
        case errorInput:
            cmds = nil
            prompt = "> "
        }
    }
}

解説

• コンソールから入力されたTEXTをscannerで取得してCompileしてエラーが無ければRunProgramで実行します。
  • exitが入力されたらプログラムを終了します
  • RunProgram()の戻り値あるいはエラーを表示します
• 行を継続のためにはCompileしてみて"Unexpected end of input"というエラーなら入力を継続する
• 各関数で今実行中のgoja.Runtimeが必要なのでjsRuntime構造体を定義します。
• Goの関数をJavaScriptで使えるようするには*goja.RuntimeのSetを使いGlobalな関数として定義します。オブジェクトの関数として定義するには*goja.ObjectのSetを使います。
  • 今回定義したのはprint関数だけです
  • printで直接fmt.Printfなどを使うとJSONが正常に表示されないので、一度JavaScriptのJSON.stringify()を実行してからfmt.Printfで表示します
  • 文字列はJSON.stringifyを使うと"引用符が付くので文字列だけ別処理にしました。
  • setStringify()でJSON.stringifyをGo言語から使えるようにします。
• InterruptはJavaScriptでthrowのように働きます。

(拡張1) load関数の実装

外部ファイルを実行するためにload(ファイル名)を実装します。

func initialSetting() *jsRuntimeに次のコードを追加します

 rt.Set("load", js.jsload)

js.jsloadの実装

jsload

func (js *jsRuntime) jsload(file string) goja.Value {
    rt := js.runtime
    f, err := os.Open(file)
    if err != nil {
        rt.Interrupt(rt.NewGoError(err))
        return goja.Null()
    }
    defer f.Close()
    text, err := ioutil.ReadAll(f)
    if err != nil {
        rt.Interrupt(rt.NewGoError(err))
        return goja.Null()
    }
    val, err := js.runtime.RunScript(file, string(text))
    if err != nil {
        rt.Interrupt(err)
        return goja.Null()
    }
    return val
}

import "io/ioutil"パッケージを使ってファイルを入力します。
入力したファイルの実行はRunScriptを使います。これは入力の継続の判定する必要がないためです。

test.jsを作って実行します

test.js

for(var i=0; i < 5; i++) {
    print(i)
}

go run main.go
> load("test.js")
0
1
2
3
4
undefined
>

(拡張2) Go言語のオブジェクト(構造体とそのメソッド)をJavaScriptから使う

オブジェクトexampleObjとします。これを構造体として定義し、そのメソッドも定義します。以下の例はMethod1,Method2として両方とも円の面積を計算する同じ処理ですが戻り値が型が異なっています。メソッドはgojaパッケージから参照されるのでメソッド名を大文字で始めます。またexampleObjを生成する関数createExampleObjをJavaScriptに設定します。

initialSetting()に追加

    rt.Set("createExample", js.createExampleObj)

type exampleObj struct {
    js *jsRuntime
}

func (js *jsRuntime) createExampleObj() *exampleObj {
    return &exampleObj{js: js}
}

func (o *exampleObj) Method1(r float64) float64 {
    return r * r * 3.14
}

func (o *exampleObj) Method2(r float64) goja.Value {
    return o.js.runtime.ToValue(r * r * 3.14)
}

実行

go run main.go
> o=createExample()
{}
> o.Method1(1)
3.14
> o.Method2(1)
3.14
> o.Method2(2)
12.56
>

問題はないのですが、メソッド名が大文字で始まるのは入力コマンドとしては使いづらいです。そこでこれらのWrapperをJavaScriptで記述します。

initialSetting()に追加

    _, err := rt.RunString(builtin)
    if err != nil {
        panic(err)
    }

const builtin = `
example = function() {
    return new ExampleObj()
}
ExampleObj = function () {
    var _obj = createExample()
    this.getObj = function() {
        return _obj
    }
}
ExampleObj.prototype.method1 = function (r) {
    return this.getObj().Method1(r)
}
ExampleObj.prototype.method2 = function (r) {
    return this.getObj().Method2(r)
}
`

_objをExampleObj外から直接アクセスできないようにthis._objにはしませんでした。
外部ファイルにしてloadで読み込むのも可能です。

実行

go run main.go
> o=example()
{}
> o.method1(1)
3.14
> o.method1(2)
12.56
> o.method2(2)
12.56
> 

参照

• https://github.com/dop251/goja
• gojaを使ってGoでJavaScriptの実行を試してみた

まとめ

いろいろ工夫すれば使いやすいツールが作れるのではないでしょうか。

問題点

• 基本的なものもGoで拡張しないと使いえない
• GCは実装されていないようです。
• JavaScriptの仕様が古い
  • Proxyがない
  • 可変長引数を次の可変長引数に渡すには配列にしてapplyメソッドを使う

Appnedix

試作の紹介

今、自分用に試作中のものを少し紹介します。

database/sqlパッケージを使用してSQLをJavaScriptのコマンドとして実装して、データの受け取りはなるべくJSON化しています。現時点ではsqlite3とPostgreSQLのドライバーを使って試作しています。これらはmongoシェルを参考にしています。
また、コマンドの入力用のパッケージとして https://github.com/chzyer/readline を使っています

さらに考えられるのは

• MongoDBのようにテーブルが存在しないときに自動的に作成する　
  • 最初にinsertするJSONを用いて、create tableを発行する。
  • データの型をどうするか。データベースごとにdefaultの設定を考える
• EXCELファイルやCSVファイルを読んでJavaScript上でJSONデータとして扱えるようにする
  • これらのファイルをDBにストアできる
• MongoDB
  • すでにmongoシェルがあるが、ここに実装すれば他のRDBと連携できる
  • mongoシェルの実装(C++, SpiderMonkey)は複雑なので改造は難しい。
• I/O関係の実装
• RESTfulクライアント
• https://github.com/gizak/termui/ のパッケージをJavaScriptから使えるようにして監視モニター

sqlite3のコマンド例

$go run main.go
script> db=sqlite3("sample.db")
{"driver":"sqlite3","conn":"sample.db"}
script> db.exec("create table tbl1(a integer, b varchar)")
{}
script> db.exec("insert into tbl1 values(?,?)", 1, "string 1")
{}
script> db.exec("insert into tbl1 values(?,?)", 2, "string 2")
{}
script> db.query("select * from tbl1")
{"a":1,"b":"string 1"}
{"a":2,"b":"string 2"}
script>

テーブルオブジェクトを実装して次のように使う

script> t = db.table("tbl1")
{"driver":"sqlite3","name":"tbl1"}
script> t.insert({a:3, b:"string 3"})
{}
script> t.find()
{"a":1,"b":"string 1"}
{"a":2,"b":"string 2"}
{"a":3,"b":"string 3"}
script> t.find("a>1")
{"a":2,"b":"string 2"}
{"a":3,"b":"string 3"}
script> t.find().forEach(function(doc) {
...   if (doc.a > 1) {
...     print(JSON.stringify(doc))
...   }})
{"a":2,"b":"string 2"}
{"a":3,"b":"string 3"}
script>

modesql()でSQLモードにします。SQLモードを終わらせるにはexit;と入力します。

script> modesql(db)
sql> select * from tbl1 where a > 1;
{"a":2,"b":"string 2"}
{"a":3,"b":"string 3"}
sql> create table tbl2(c real ,d varchar);
sql> insert into tbl2 values(1.2, "string 1.2");
sql> select * from tbl2;
{"c":1.2,"d":"string 1.2"}
sql> exit;
script> t2=db.table("tbl2")
{"driver":"sqlite3","name":"tbl2"}
script> t2.find()
{"c":1.2,"d":"string 1.2"}
script>

findにはlimit,skipオプションを実装しました。このほかにはsortやselectする項目名を指定するコマンドも実装可能でしょう。

script> t.find().limit(2).skip(1)
{"a":2,"b":"string 2"}
{"a":3,"b":"string 3"}

sqlite3のtbl1のデータをPostgreSQLのpgtbl1にコピーする

script> pg = postgres()
{"driver":"postgres","conn":"dbname=test sslmode=disable"}
script> pg.exec("create table pgtbl1(a integer, b varchar)")
{}
script> pgt = pg.table("pgtbl1")
{"driver":"postgres","name":"pgtbl1"}
script> t.find().forEach(function(doc) {
...   pgt.insert(doc)
... })
script> pgt.find()
{"a":1,"b":"string 1"}
{"a":2,"b":"string 2"}
{"a":3,"b":"string 3"}
script>

PostgreSQLのpsqlコマンドで確認します

>psql test
psql (11.0)
"help" でヘルプを表示します。

test=# select * from pgtbl1;
 a  |     b
----+-----------
  1 | string 1
  2 | string 2
  3 | string 3

(3 行)


test=#

また、mongoシェル風なテーブルの記述にしたかったのでgojaパッケージを改造しました。

script> t = db.table("tbl1")
{"driver":"sqlite3","name":"tbl1"}
script> t.insert({a:3, b:"string 3"})
{}

としているものをmongoシェル風にdb.tbl1.insertとして使えるようになりました。通常はtbl1はundefinedになりますので、undefinedのプロパティが参照されたときに特定のメソッドを呼び出すように改造しました。

script> db.tbl1.insert({a:4, b:"string 4"})
{}
script> db.tbl1.find()
{"a":1,"b":"string 1"}
{"a":2,"b":"string 2"}
{"a":3,"b":"string 3"}
{"a":4,"b":"string 4"}
script>

db.tbl1.fromExcel("Book1.xlsx", "Sheet1")やdb.tbl1.toExcel("Book1.xlsx", "Sheet1")なども実装出来たら有用かもしれない。

JavaScriptでは特定の値が含まれているか調べる方法が複数あります。
用途によって使い分けられるのでまとめてみました。

String.prototype.indexOf()メソッド

呼び出すStringオブジェクトを引数の値で検索し、
指定された値が最初に現れた位置を返します。

使い方

test.js

let sample = 'abcdefg';
let result = sample.indexOf('c');
console.log(result);

実行結果

2

大文字と小文字は区別し、
値が見つからない場合は-1を返します。
なので…

test.js

let sample = 'ABCDEFG';
let result = sample.indexOf('c');
console.log(result);

実行結果

-1

検索し始める最初の位置を指定する事も出来ます。

test.js

let sample = 'abcdeabcde';
let result = sample.indexOf('cd', 5);
console.log(result);

実行結果

7

この場合、検索する位置を指定しなければ2が表示されますが、
検索する最初の位置を5番目に指定したので、
次のcdが当てはまる、7を取得することが出来ました。

String.prototype.includes()メソッド

選択した文字列を対象の文字列の中に見つけられるかどうかを判断し、
真偽値を返します。
見つかった場合はtrue、見つからなければfalseとなります。

使い方

test.js

let sample = 'abcdefg';
let result = sample.includes('c');
console.log(result);

実行結果

true

大文字と小文字も区別します。

test.js

let sample = 'ABCDEFG';
let result = sample.includes('c');
console.log(result);

実行結果

false

検索し始める最初の位置を指定する事も出来ます。

test.js

let sample = 'hello world';
let result = sample.includes('hello', 2);
console.log(result);

実行結果

false

検索する位置を指定しなければ文字列を見つけられるのでtrueが表示されます。
しかし今回、検索する最初の位置を2番目からに指定したので、
helloが見つからずにfalseを返しました。

String.prototype.search()メソッド

対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
成功した場合は、マッチした箇所の位置を、
失敗の場合は-1を返します。

使い方

test.js

let sample = 'HELLO world';
let regex = /[a-z]/g;
let result = sample.search(regex);
console.log(result);

実行結果

6

失敗パターン

test.js

let sample = 'HELLO world';
let regex = /[0-9]/g;
let result = sample.search(regex);
console.log(result);

実行結果

-1

対象のStringオブジェクトの中に数字は存在しなかったので、
-1を返しました。

RegExp.prototype.test()メソッド

対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
こちらは結果を真偽値で返します。

使い方

test.js

let sample = 'hello world';
let regex = /[a-z]/g;
let result = regex.test(sample);
console.log(result);

実行結果

true

String.prototype.match()メソッド

対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
こちらは結果を配列で返し、
マッチが見つからない場合はnullをかえします。

使い方

test.js

let sample = 'HELLO world';
let regex = /[a-z]/g;
let result = sample.match(regex);
console.log(result);

実行結果

["w", "o", "r", "l", "d"]

指定する正規表現のgフラグの有無によって取れる内容が変わります。
今度はgフラグの無い場合を試してみます。

test.js

let sample = 'HELLO world';
let regex = /[a-z]/;
let result = sample.match(regex);
console.log(result);

実行結果

["w", index: 6, input: "HELLO world"]

このgフラグが存在しない場合は、
RegExp.prototype.exec()メソッドと同じ結果を返します。
ただ、一番最初に見つけたマッチだけが欲しい場合、
代わりにRegExp.prototype.exec()メソッドを使ったほうが良さそうです。

RegExp.prototype.exec()

match()と同じく、対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
こちらは結果を配列で返し、
マッチが見つからない場合はnullをかえします。

使い方

test.js

let sample = 'HELLO world';
let regex = /[a-z]/;
let result = regex.exec(sample);
console.log(result);

実行結果

["w", index: 6, input: "HELLO world"]

まとめ

メソッドによって用途が異なる為、
使い分けが大切ですね。
何かあればご意見、ご指摘頂けますと嬉しいです。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/includes

JavaScriptでは特定の値が含まれているか調べる方法が複数あります。
用途によって使い分けられるのでまとめてみました。

String.prototype.indexOf()メソッド

呼び出すStringオブジェクトを引数の値で検索を行い、
指定された値が最初に現れた位置を返します。

使い方

test.js

let sample = 'abcdefg';
let result = sample.indexOf('c');
console.log(result);

2

大文字と小文字は区別し、
値が見つからない場合は-1を返します。
なので…

test.js

let sample = 'ABCDEFG';
let result = sample.indexOf('c');
console.log(result);

-1

検索し始める最初の位置を指定する事も出来ます。

let sample = 'abcdeabcde';
let result = sample.indexOf('cd', 5);
console.log(result);

7

この場合、検索する位置を指定しなければ2が表示されますが、
検索する最初の位置を5番目に指定したので、
次のcdが当てはまる7を取得することが出来ました。

String.prototype.includes()メソッド

選択した文字列を対象の文字列の中に見つけられるかどうかを判断し、
真偽値を返します。
見つかった場合はtrue、見つからなければfalseとなります。

使い方

test.js

let sample = 'abcdefg';
let result = sample.includes('c');
console.log(result);

true

大文字と小文字も区別します。

test.js

let sample = 'ABCDEFG';
let result = sample.includes('c');
console.log(result);

false

検索し始める最初の位置を指定する事も出来ます。

test.js

let sample = 'hello world';
let result = sample.includes('hello', 2);
console.log(result);

false

この場合、検索する位置を指定しなければ文字列を見つけられるのでtrueが表示されます。
しかし検索する最初の位置を2番目からに指定したので、
helloが見つからずにfalseを返しました。

String.prototype.search()メソッド

対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
成功した場合はマッチした箇所の位置を、
失敗の場合は-1を返します。

使い方

test.js

let sample = 'HELLO world';
let regex = /[a-z]/g;
let result = sample.search(regex);
console.log(result);

6

失敗パターン

test.js

let sample = 'HELLO world';
let regex = /[0-9]/g;
let result = sample.search(regex);
console.log(result);

-1

対象のStringオブジェクトの中に数字は存在しなかったので、
-1を返しました。

RegExp.prototype.test()メソッド

対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
こちらは結果を真偽値で返します。

使い方

test.js

let sample = 'hello world';
let regex = /[a-z]/g;
let result = regex.test(sample);
console.log(result);

true

String.prototype.match()メソッド

対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
こちらは結果を配列で返し、
マッチが見つからない場合はnullをかえします。

使い方

test.js

let sample = 'HELLO world';
let regex = /[a-z]/g;
let result = sample.match(regex);
console.log(result);

["w", "o", "r", "l", "d"]

指定する正規表現のgフラグの有無によって取れる内容が変わります。
今度はgフラグを無い場合を試してみます。

test.js

let sample = 'HELLO world';
let regex = /[a-z]/;
let result = sample.match(regex);
console.log(result);

["w", index: 6, input: "HELLO world"]

このgフラグが存在しない場合は、
RegExp.prototype.exec()メソッドと同じ結果を返します。
ただ、一番最初に見つけたマッチだけが欲しい場合、
代わりにRegExp.prototype.exec()メソッドを使ったほうが良さそうです。

RegExp.prototype.exec()

match()と同じく、対象のStringオブジェクトが正規表現でマッチできるかどうかを判定します。
こちらは結果を配列で返し、
マッチが見つからない場合はnullをかえします。

使い方

test.js

let sample = 'HELLO world';
let regex = /[a-z]/;
let result = regex.exec(sample);
console.log(result);

["w", index: 6, input: "HELLO world"]

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/includes

機能

KEN_ALL.CSVから、郵便番号と住所(漢字)を抽出したファイルを作成する
出力ファイルはUTF–8、改行コードは未変換(元ファイルのまま)です。

使い方

1. 日本郵便の郵便番号データダウンロードページで公開されている、"KEN_ALL.CSV"ファイルを開き、EmEditorで下記マクロを実行する。
2. KEN_ALL.CSVと同じディレクトリにKEN_ALL_cnv.CSVファイルが作成される

マクロ

郵便番号データ変換.jsee

var startTime = new Date();
/*
□マクロ名：郵便番号データ変換.jsee
□バージョン：1.10
■開くファイル
　郵便番号データダウンロードから取得した住所の郵便番号（CSV形式）
　http://www.post.japanpost.jp/zipcode/download.html
■作成ファイル
　9.町域名の内容を簡略化したファイル（ファイル名=拡張子の前に"_cnv"を追加）
■手順(例)
　KEN_ALL.CSVを開く
　郵便番号データ変換.jseeを実行
　同一ディレクトリに変換後のファイル(UTF-8)が作成される
*/

Redraw = false;//ウィンドウの再描画:しない

document.CellMode = false;//CSV セル選択モード解除

columnN = document.GetColumns();//CSV モードで列の数を取得
if(columnN != 15){
    alert( "列数エラー。列数は、" + columnN + "です。" );
    Quit();
}

//■使用しない列を削除
document.selection.StartOfDocument()//カーソル位置を文頭へ移動
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(4490);//郵便番号（7桁）
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(4490);//都道府県名
editor.ExecuteCommandByID(4490);//市区町村名
editor.ExecuteCommandByID(4490);//町域名
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1
editor.ExecuteCommandByID(3962);//列の削除 1

//■保存するファイル名を設定
strPath = document.Path;//文書のパスを取得
aName = document.Name.split(".");//文書のファイル名を取得
sCnvPath_Name = strPath + "\\" + aName[0] + "_cnv." + aName[1];

//■UTF8で一旦保存
document.Encoding = eeEncodingUTF8;//保存時のエンコード：UTF-8
document.UnicodeSignature = false;//保存時に(BOM)を付けない
document.Save( sCnvPath_Name );//文書を保存
document.close();//文書を閉じる
editor.ExecuteCommandByID(4583);//最も最近閉じたファイルを開く
document.CellMode = false;//CSV セル選択モード解除

//■町域の複数行に渡るかっこ書きを削除
//郵便番号の列を取得
document.selection.SetActivePoint( eePosCellLogical, 1, 1 );
editor.ExecuteCommandByID(4461);
sTmp = "\r\n" + document.selection.Text;
aPostalCode = new Array();
aPostalCode = sTmp.split("\r\n");

//町域の列を取得
document.selection.SetActivePoint( eePosCellLogical, 4, 1 );
editor.ExecuteCommandByID(4461);
sTmp = "\r\n" + document.selection.Text;
aTyou = new Array();
aTyou = sTmp.split("\r\n");
sTmp = null;

//最終行から開始行へ向かって処理を行う
fOkikae = false;//フラグ置き換えモード：終わり
re1 = new RegExp("^\"[^（]*）\"$");//"）"のみを検索
re2 = new RegExp("(^\".*)（[^）]*(\")$");//"（"のみを検索
for(i = aTyou.length - 2; i >= 1; i--){
    if( ( aPostalCode[i] == aPostalCode[i-1] ) || ( fOkikae == 1)){//郵便番号が同じor置き換えモードの場合
        document.selection.SetActivePoint( eePosCellLogical, 4, i );
        if( fOkikae ){
            if(aTyou[i].match(re2)){//"（"のみを検索
                document.SetCell( i , 4, RegExp.$1 + RegExp.$2, eeDontQuote );
                fOkikae = false;//フラグ置き換えモード：終わり
            }else{
                document.selection.SelectLine();
                document.selection.Delete(1);//行削除
            }
        } else {
            if(aTyou[i].match(re1)){//"）"のみを検索
                document.selection.SelectLine();
                document.selection.Delete(1);//行削除
                fOkikae = true;//フラグ置き換えモード：開始
            }
        }
    }
}

//■町域の文字列を置き換え
document.selection.SetActivePoint( eePosCellLogical, 4, 1 );//カーソル位置を設定
editor.ExecuteCommandByID(4461);//列を選択
document.selection.Replace("以下に掲載がない場合","",eeFindReplaceSelOnly | eeReplaceAll,0);
document.selection.Replace("(\".*)（(その他|丁目|番地|次のビルを除く|地階・階層不明|.*[、～].*|.*以上|.*以下)）(\")","\\1\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);
//★名駅ミッドランドスクエア（高層棟）（地階・階層不明）
document.selection.Replace("(\".*)（高層棟）(.*\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);
//★三田市の次に番地がくる場合
document.selection.Replace("\".*の次に番地がくる場合\"","\"\"",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);
//★土樋（１丁目「１１を除く」） => 土樋（１丁目）
//★切畑（長尾山「その他」） => 切畑（長尾山）
document.selection.Replace("(\".*（.*)「(.*を除く|その他)」(）\")","\\1\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);
//★音江町（国見その他） => 音江町（国見）
document.selection.Replace("(\".*（.*)その他(）\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);
//★花田町官有地（無番地を除く）
//★芦田町福田（３７６－１０を除く）
//★津島町下畑地（乙を除く）
document.selection.Replace("(\".*)（.*を除く）(\")","\\1\\2",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

//■町域のかっこ"（"および"）"を削除
document.selection.Replace("(\".*)（(.*)）(\")","\\1\\2\\3",eeFindReplaceSelOnly | eeReplaceAll | eeFindReplaceRegExp,0);

editor.ExecuteCommandByID(4099);//ファイルを上書き保存
document.close();//文書を閉じる
var endTime = new Date();

alert((endTime - startTime)/1000 + "sec");
Redraw = true;//ウィンドウの再描画:する
Quit();

補足

• UTF-8への変換(内部処理は既にUnicodeですので、正確にはUTF-8での書き出し)は処理の最後にやっても良いです（上記サンプルでは、一旦UTF-8で保存していますが、サンプルと言うことで...）
• 47行目は、元のソース上は"\\"です(￥マーク２つを二重引用符でくくっている)コードの色が変になっていますが...
• EmEditorでのcsvの加工をしようと思い、その時の練習用に作成しました

参考

EmEditor マクロ ヘルプ チュートリアル

はじめに

初めてQiitaの記事を書くので、拙いところがあると思いますが見てくれると嬉しいです。
今回、webアプリケーションで生体認証を実装することを目標に、JavaScript等の必要な知識を勉強しながら実装します。

今回の目標

環境の構築、簡単なnode.jsの実装

1. node.jsのインストール

こちらの記事を参考にしました。
【Mac】node.jsインストール方法
Node.jsとは
Node.js を5分で大雑把に理解する

2. HTMLファイルの読み込み

実際にnode.jsをローカルホストで試してみます。
Node.jsサーバーの実装

server.js

//html,fsオブジェクトの生成
var http = require('http');
var fs = require('fs');

//リンクの作成
var html_paths = {index:'../html/index.html'};
var html_pages = {index:fs.readFileSync(html_paths.index,'utf-8')};

//サーバーリクエスト処理(何度も使うので関数化しました)
function res_write(res,target,text_type) {
  res.writeHead(200,{'Content-Type':text_type});
  res.write(target);
  res.end();
}
//サーバーの作成
var server = http.createServer(function(req,res){
  var target;
  switch (req.url) {
    case '/':
    case '/index':
      res_write(res,html_pages.index,'text/html');
      break;

    default:
      res.writeHead(404,{'Content-Type':'text/plain'});
      res.end('not fond');
      return;
  }

});

server.listen(1234);
console.log('Server has been started');

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>
<body>
  <h1>test.html</h1>
</body>
</html>

結果

localhost:/1234に接続できました。

3. JavaScriptの読み込み

簡単なjavascriptファイルを作成

test.js

function test(){
  alert('test');
}
test();

javascriptのファイルを読み込めるようにserver.jsに追記します

server.js

var js_paths={test:'./test.js'};
var js_pages= {test:fs.readFileSync(js_paths.test,'utf-8')};

server.js

case '/test.js':
      res_write(res,js_pages.cam,'text/plain'); break;

index.htmlにjavascriptファイルを読み込む記述をします。

index.html

<script type="text/javascript" src="./test.js"></script>

結果 javascriptのファイルをHTML上に読み込むことができました。

まとめ

• node.jsの環境を構築することができた。
• node.jsの簡単な実装。

次回は、JavaScriptで画像を加工する方法を実装します。
感想、アドバイス等あればお願いします。

おまけ

node.jsの参考書(amazonへのリンクです)
JavaScriptエンジニアのためのNode.js入門

kindle unlimitedなら無料、kindle版も350円と安くてオススメです。

はじめに

初めてQiitaの記事を書くので、拙いところがあると思いますが見てくれると嬉しいです。
今回、webアプリケーションで生体認証を実装することを目標に、JavaScript等の必要な知識を勉強しながら実装します。

今回の目標

環境の構築、簡単なnode.jsの実装

1. node.jsのインストール

こちらの記事を参考にしました。
【Mac】node.jsインストール方法
Node.jsとは
Node.js を5分で大雑把に理解する

2. HTMLファイルの読み込み

実際にnode.jsをローカルホストで試してみます。
Node.jsサーバーの実装

server.js

//html,fsオブジェクトの生成
var http = require('http');
var fs = require('fs');

//リンクの作成
var html_paths = {index:'../html/index.html'};
var html_pages = {index:fs.readFileSync(html_paths.index,'utf-8')};

//サーバーリクエスト処理(何度も使うので関数化しました)
function res_write(res,target,text_type) {
  res.writeHead(200,{'Content-Type':text_type});
  res.write(target);
  res.end();
}
//サーバーの作成
var server = http.createServer(function(req,res){
  var target;
  switch (req.url) {
    case '/':
    case '/index':
      res_write(res,html_pages.index,'text/html');
      break;

    default:
      res.writeHead(404,{'Content-Type':'text/plain'});
      res.end('not fond');
      return;
  }

});

server.listen(1234);
console.log('Server has been started');

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>
<body>
  <h1>test.html</h1>
</body>
</html>

結果

localhost:/1234に接続できました。

3. JavaScriptの読み込み

簡単なjavascriptファイルを作成

test.js

function test(){
  alert('test');
}
test();

javascriptのファイルを読み込めるようにserver.jsに追記します

server.js

var js_paths={test:'./test.js'};
var js_pages= {test:fs.readFileSync(js_paths.test,'utf-8')};

server.js

case '/test.js':
      res_write(res,js_pages.cam,'text/plain'); break;

index.htmlにjavascriptファイルを読み込む記述をします。

index.html

<script type="text/javascript" src="./test.js"></script>

結果 javascriptのファイルをHTML上に読み込むことができました。

まとめ

• node.jsの環境を構築することができた。
• node.jsの簡単な実装。

次回は、JavaScriptで画像を加工する方法を実装します。
感想、アドバイス等あればお願いします。

おまけ

node.jsの参考書(amazonへのリンクです)
JavaScriptエンジニアのためのNode.js入門

kindle unlimitedなら無料、kindle版も350円と安くてオススメです。

はじめに

ユーザーのサイト利用に関する併用状況をWebで可視化する必要があり、
（３つまでであれば）ベン図が直感的でわかりやすいと思ったのですが
意外と簡単にベン図を作成するJavaScriptライブラリが見つからなかった中
D3.jsのプラグイン「venn.js」が使いやすかったので備忘録的に残します。

venn.jsのGitHubこちら
venn.js

ベン図

examplesフォルダにサンプルが豊富にありますので、
そこを見ればだいたいやりたいことは載っています。
いくつか実際に使ってみたサンプルについて書いていきます。

基本

examples/simple.htmlを少し手直ししています。
・日本語でも動きます。
・D3.jsのバージョンをv4→v5に上げても動きます。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>venn.js sample</title>
<style>
body {
    font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-size: 14px;
}
</style>
</head>

<body>
    <div id="venn"></div>
</body>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../venn.js"></script>
<script>
// データセットの用意
var sets = [ {sets: ['サイトA'], size: 12},
             {sets: ['サイトB'], size: 12},
             {sets: ['サイトA','サイトB'], size: 2}];

// #vennに描画
var chart = venn.VennDiagram();
d3.select("#venn").datum(sets).call(chart);
</script>
</html>

色の変更

examples/styled.htmlを参考にしています。
以降はscript内のみ書きます。
・色を指定することができます。
・丸の色及びテキストの色両方変更することもできます（もちろん片方だけも可能）

// データセットの用意
var sets = [ {sets: ['サイトA'], size: 12},
             {sets: ['サイトB'], size: 12},
             {sets: ['サイトA','サイトB'], size: 2}];

// #vennに描画
var chart = venn.VennDiagram();
d3.select("#venn").datum(sets).call(chart);

// 色の変更
var colors = ['red', 'blue']; // 1つ目を赤、2つ目を青に
d3.selectAll("#venn .venn-circle path")
    .style("fill", function(d,i) { return colors[i]})
d3.selectAll("#venn .venn-circle text")
    .style("fill", function(d,i) { return colors[i]})

順番の変更

examples/orientation_order.htmlを参考にしています。
・描画の順番を変えることができます。

// データセットの用意
var sets = [ {sets: ['サイトA'], size: 12},
             {sets: ['サイトB'], size: 12},
             {sets: ['サイトA','サイトB'], size: 2}];

// #vennに描画
var chart = venn.VennDiagram();

// 順番の変更
var customOrdering = {'サイトB': 1, 'サイトA': 2}; // 1つ目サイトBに、2つ目をサイトAに
chart.orientationOrder(function (a, b) { return customOrdering[a.setid] - customOrdering[b.setid]});

d3.select("#venn").datum(sets).call(chart);

ツールチップの表示

examples/intersection_tooltip.htmlを参考にしています。
ツールチップのstyleを定義する必要があるため、ここはHTMLすべて書きます。
・ツールチップで数値（ここではユーザー数）を表示することができます。
・マウス操作に合わせて色の透明度などを変化させることができます。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>venn.js sample</title>
<style>
body {
    font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-size: 14px;
}
</style>
</head>

<body>
    <div id="venn"></div>
</body>

<style>
.venntooltip {
  position: absolute;
  text-align: center;
  width: 128px;
  height: 22px;
  background: #333;
  color: #ddd;
  padding: 2px;
  border: 0px;
  border-radius: 8px;
  opacity: 0;
}
</style>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../venn.js"></script>
<script>
// データセットの用意
var sets = [ {sets: ['サイトA'], size: 12},
             {sets: ['サイトB'], size: 12},
             {sets: ['サイトA','サイトB'], size: 2}];

// #vennに描画
var chart = venn.VennDiagram();
var div = d3.select("#venn")
div.datum(sets).call(chart);

var tooltip = d3.select("body").append("div")
    .attr("class", "venntooltip");

div.selectAll("path")
    .style("stroke-opacity", 0)
    .style("stroke", "#fff")
    .style("stroke-width", 3)

div.selectAll("g")
    .on("mouseover", function(d, i) {
        // sort all the areas relative to the current item
        venn.sortAreas(div, d);

        // Display a tooltip with the current size
        tooltip.transition().duration(400).style("opacity", .9);
        tooltip.text(d.size + " ユーザー");

        // highlight the current path
        var selection = d3.select(this).transition("tooltip").duration(400);
        selection.select("path")
            .style("fill-opacity", d.sets.length == 1 ? .4 : .1)
            .style("stroke-opacity", 1);
    })

    .on("mousemove", function() {
        tooltip.style("left", (d3.event.pageX) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
    })

    .on("mouseout", function(d, i) {
        tooltip.transition().duration(400).style("opacity", 0);
        var selection = d3.select(this).transition("tooltip").duration(400);
        selection.select("path")
            .style("fill-opacity", d.sets.length == 1 ? .25 : .0)
            .style("stroke-opacity", 0);
    });
</script>
</html>

おわりに

venn.jsの説明というより、ほとんどD3.jsの説明になってしまいましたが。。。
見方を変えればvenn.jsでSVGに描画してしまえば、あとはD3.jsの世界なので
スタイルの変更などは比較的自由に行えます。
難易度は上がりますが、レイアウトを動的に変えることなどもできるので、
ビジュアライズの世界が広がりますね。

こんにちは。
プログラミング初心者のオジサンです。

JavaScriptでミニアプリを作成しており、そのアプリでテーブルを動的に作成する必要がありまして、テストがてら、DOMだけでテーブルを作成するコードを作ってみました。

1.HTML（index.html）

テーブルはDOMで作るため、bodyタグの中はほぼ空です。
JavaScriptを読み込むためのscriptタグしかありません。
DOMを勉強するときは、だいたいこの内容でやってます。

<!DOCTYPE html> 
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>表をjsで作る</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>

2.CSS（css/styles.css）

書式は最低限、整えてます。
テーブルはdivタグでflexboxちっくに。
…まだ、flexbosをよく理解できていません(;^_^A

/* 表の書式設定 */
.table {
    text-align: center;
}

/* 行の書式設定 */
.row {
    display: flex;
}

/* 列の書式設定 */
.cell {
    margin: auto;
}

3.JavaScript（js/main.js）

今作っているミニアプリは、テーブルの列数は固定ですが、行数はどんどん追加される仕様となっています。
そのため、本来は行数や列数を選ばさせ、表を動的に作る内容としたかったのですが、ボリュームが増えそうなので今回は4×4の固定された表とさせていただきました。

コードの流れですが、createElement()でdivタグを生成し、その後にクラスやテキストを入れ、最後にappendChild()でブラウザに表示させるようにしています。
行はdlタグ、列はdtタグで作成しています。
こちらもcreateElement()でタグを生成し、その後クラスやテキストを入れ、最後にappendChild()でブラウザに表示させるようにしています。

'use strict';

{
    // divタグで表を作る
    const table = document.createElement('div');
    table.classList.add('table');
    table.textContent = '表';
    document.body.appendChild(table);

    // dlタグで行を作る（今回は4つ）
    for (let i = 0; i < 4; i++) {
        const dl = document.createElement('dl');
        dl.classList.add('row');
        table.appendChild(dl); 
        //　dtタグで列を作る（今回は4つ）
        for (let j = 0; j < 4; j++) {
            const dt = document.createElement('dt');
            dt.classList.add('cell')
            dt.textContent = `${i}行${j}列`;
            dl.appendChild(dt); 
        }
    }
}

最後に

Qiita初投稿になります！
今後もどんどんサンプルコードを書いていきたいと思いますので、よろしくお願いします。

make ページでは メニュー要素を隠したい。
そんなときは以下のように書く。

vue.blade.php

    <el-footer id="footer" class="layout-footer" v-show="$route.path.indexOf('make') < 0">
こんな塩梅
    </el-footer>

これで現在のページが make にマッチしない時のみ メニューが表示されるようになる。

　まったくのプログラミング初心者（Progateを終えたぐらい）が、JSを勉強するため、ゲームをつくりたいが、ゲームのために一から全部プログラムをかくのはめんどくさい。
　そんな人（自分）のために、JSで書かれたツールを紹介する記事です！
　ここで紹介するふたつは、JSでいろいろいじれるものです。

RPGツクールMV（有料）

　みんな知ってる気がするRPGツクールシリーズの最新作。ただ、有志の人が公開しているJSで書かれたプラグイン（追加機能のこと）が多いため、自分で書かなくていいやとなりがち。
　個人的には、ツクールにデフォルトでついている、条件分岐などを使い慣れてからJSでいじることをおすすめします。最初はJSでなにかしようとしても何もできないかと思うので……。
　公式サイトはこちら:https://tkool.jp/mv/

　ティラノスクリプト（無料）

　吉里吉里というFateが作られたゲーム制作ツールに、仕様を似せたもの。ノベルゲームが作れる。もちろん、JSをつかえばノベルゲーム以外のものもつくれる。
　個人的には、こちらがおすすめです。
　公式サイトはこちら:https://tyrano.jp/

スタイルが出来上がったので、次は計算をしていきたいと思います。
第一回のHTMLとCSSを作る記事は、こちら

目次

第ー回

• HTMLのマークアップ
• CSS

第二回（この記事はここ）

• Javascriptで四則演算
• 6)打った数字をコンソールに出力させよう。
• 7)打った数字と記号を変数に格納しよう。
• 8)計算結果を出力させよう。
• 8-1）「＝」を押した時の処理
• 8-2) 計算結果と計算途中を、計算結果の画面に表示させよう。

第三回以降以下の不具合の改善

• 最初に「＋　÷　－　＝　.」が押せてしまう。
• 最初に0を連続で押せてしまう。
• 一度間違えると、全てやり直し（BSボタンを使えるようにしよう）
• 一度計算をやると、次の計算をするときに、ブラウザを読み込みなおさないといけない（Cボタンを使えるようにしよう）
• 12.12.や12..12のように小数点を正しくなく入力できてしまう。
• 割り算等で小数点以下が異様に長い。
• 記号ボタン（＋×÷-)を連続で押せてしまい、計算ができない。（連続で押した場合は、最後に押した記号ボタンが採用されるようにしたい。
• 電卓と同じように「.4」と入力したら0.4としたい。

前回のHTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>電卓</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class = "container">
<!--      計算結果を出力する場所-->
      <div id = "output_total" class="output ">0</div>
<!--      計算過程を出力する -->
      <div id = "output_sub" class="output active">0</div>
<!--      ボタンを配置する場所-->
      <div class = 'input'>
          <section class = 'row'>
            <div id = "clear">C</div>
            <div class = "num_bth"></div>
            <div class = "num_bth" id="bs">BS</div>       
            <div class = "num_bth " data-index-id= '/'>÷</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 9 >9</div>
            <div class = "num_bth " data-index-id = 8 >8</div>
            <div class = "num_bth " data-index-id = 7 >7</div>
            <div class = "num_bth " data-index-id = '*'>×</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 6 >6</div>
            <div class = "num_bth " data-index-id = 5 >5</div>
            <div class = "num_bth " data-index-id = 4 >4</div>
            <div class = "num_bth " data-index-id = '-'>－</div>     
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 3 >3</div>
            <div class = "num_bth " data-index-id = 2 >2</div>
            <div class = "num_bth " data-index-id = 1 >1</div>
            <div class = "num_bth " data-index-id = '+'>+</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth" data-index-id = 00 >00</div>
            <div class = "num_bth" data-index-id = 0 >0</div>
            <div class = "num_bth" data-index-id = . >.</div>
            <div id = 'equal_btn'>=</div>       
          </section>        
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Javascript処理

6)打った数字をコンソールに出力させよう。
例1）【ボツ】　一応、打った番号は出力されるが、同じコードの繰り返しになる書き方は却下。

'use strict'
{
  const num_bth = document.getElementsByClassName('num_bth');
  num_bth[3].addEventListener('click', () => {
    console.log(num_bth[3].textContent);
  });//9をクリックすると9が出力

  num_bth[4].addEventListener('click', () => {
    console.log(num_bth[4].textContent);
  }) ///8をクリックすると9が出力

  //以下続く

}

これでもコンソールにクリックした数字は出力できますが、こんな書き方をしてたら、先生に怒られてしまいそうです。

例2)【ボツ】同じコードの繰り返しをやめるため、getElementsByClassNameとforを使ってみる

  const num_bth = document.getElementsByClassName('num_bth'); 
    for(let i = 0; i < num_bth.length ; i++) {
      num_bth[i].addEventListener('click', () => {
        console.log(num_bth[i].textContent);
      }) //click
    }//for

これで同じコードを繰り返して書かなくてもクリックしたキーの値をコンソールに出力できました。

例3)【ボツ】もう少し短く書くため、querySelectorAllとforEachを使う

  const num_bth = document.querySelectorAll('.num_bth');
  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.textContent);
    }) //click
  })//forEach
//123456890+-×÷が出力される

数字はうまく出力されますが、この方法だと「÷」を押すとが「÷」出力され、「×」を押すと「×」が出力される。。「/」や「*」が出力されないと計算できない。

ちなみにforEachは配列に対して行うので、複数あるものなら使えるわけではなかった。以下だとエラーになります。

  const num_bth = document.getElementsByClassName('num_bth');
  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.textContent);
    }) //click
  })//forEach
×以下のエラメッセージが表示される。
Uncaught TypeError: num_bth.forEach is not a function

例4)【採用】
カスタムdata属性を使う。

忘れてたら、
詳解JavaScript DOM編 #06 カスタムデータ属性を扱ってみよう　参照

  const num_bth = document.querySelectorAll('.num_bth');
  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.dataset.indexId)
    }) //click   
  })//forEach 
//123456890+-*/が出力される

7)打った数字と記号を変数に格納しよう。

  const num_bth = document.querySelectorAll('.num_bth');
  let total = 0;//計算式を表す変数 
  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.dataset.indexId)
      total += index.dataset.indexId;  
      console.log(total);  
    }) //click   
  })//forEach

12+3をクリックするとコンソールにこの以下のように出力される。

【失敗例】

  const num_bth = document.querySelectorAll('.num_bth');
  let total;//計算式を表す変数 

  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.dataset.indexId)
        total += index.dataset.indexId;     
      console.log(total);  
    }) //click   
  })//forEach

ボタンを押す前は、変数には数字がないため、undefinedとなってしまう。

• 8)計算結果を出力させよう。 【失敗例】

'use strict'
{
  const num_bth = document.querySelectorAll('.num_bth');
  let total = 0;//計算式を表す変数 

//  //数字や記号のボタンを押した時
  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.dataset.indexId)
        total += index.dataset.indexId;     
      console.log(total);  
    }) //click   
  })//forEach

  //イコールを押した時
  const equal_btn = document.getElementById('equal_btn');
  equal_btn.addEventListener('click',() =>{
    console.log(eval(total));
  });

}

※
eval() は文字列として表された JavaScript コードを式として評価する関数。
0が付いていると計算ができない。
最初にクリックした時と、二番目の数字がクリックされた時で処理を変える。
【成功例】

'use strict'
{
  const num_bth = document.querySelectorAll('.num_bth');
  let total = 0;//計算式を表す変数 

//  //数字や記号のボタンを押した時
  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.dataset.indexId)
      if(total ===0) {
        total = index.dataset.indexId;  
      }else{
        total += index.dataset.indexId;
      }      
      console.log(total);  
    }) //click   
  })//forEach

  //イコールを押した時
  const equal_btn = document.getElementById('equal_btn');
  equal_btn.addEventListener('click',() =>{
    console.log(eval(total));
  });

}

12+3=15がコンソールに出力できた。

8-2) 計算結果と計算途中を、電卓の画面に表示させよう。

'use strict'
{
  const num_bth = document.querySelectorAll('.num_bth');
  let output_sub = document.getElementById('output_sub');//計算結果を表示する場所
  const output_total = document.getElementById('output_total');//計算過程を表示する場所
  let total = 0;//計算式を表す変数 

//  //数字や記号のボタンを押した時
  num_bth.forEach(index => {
    index.addEventListener('click', () => {
      console.log(index.dataset.indexId)
      if(total ===0) {
        total = index.dataset.indexId;  
      }else{
        total += index.dataset.indexId;
      }      
      output_sub.textContent = total;
    }) //click   
  })//forEach

  //イコールを押した時
  const equal_btn = document.getElementById('equal_btn');
  equal_btn.addEventListener('click',() =>{
    console.log(eval(total));
    output_total.textContent = eval(total);
  });

}

計算結果が出力できた。

現状の問題点

レベル1はとりあえず計算結果を出力できるまで、ということで、ここまで。

レベル2では、以下の現状の問題点を一つずつ直していきたいと思います。

• 最初に「＋　÷　－　＝　.」が押せてしまう。
• 最初に0を連続で押せてしまう。
• 一度間違えると、全てやり直し（BSボタンを使えるようにしよう）
• 一度計算をやると、次の計算をするときに、ブラウザを読み込みなおさないといけない（Cボタンを使えるようにしよう）
• 12.12.や12..12のように小数点を正しくなく入力できてしまう。
• 割り算等で小数点以下が異様に長い。
• 記号ボタン（＋×÷-)を連続で押せてしまい、計算ができない。（連続で押した場合は、最後に押した記号ボタンが採用されるようにしたい。
• 電卓と同じように「.4」と入力したら0.4としたい。

ファ・・・！
chatworkなど、ログイン時などによく見るこの人↓

気軽に使えるんだ！
今更知ったよ！

ちょうどお問い合わせページで使う機会があったのでメモメモ

今回はv2を使用

<form>

    <label>お名前</label><input type="text" name="onamae" value="" placeholder="お名前" >

    <!-- ▼reCAPTCHAのチェックボックスが表示される -->
    <div id="google_rechapcha"></div>

    <button id="send" type="submit" disabled="disabled">送信</button>
</form>

<script>
var onloadCallback = function() {
                     // IDがgoogle_rechapchaにレンダリングする
    grecaptcha.render('google_rechapcha', {
      'sitekey' : '*****************************', // 取得したkeyをいれる
      'callback' : verifyCallback, //コールバック関数を指定
    });
  };

  // コールバック関数を定義
  function verifyCallback(){
      // submitボタンのdisableをfalseにする。
      document.getElementById('send').disabled = false;
  }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

概要

ボタンを押すとAPIを通じて、GitHubのユーザーが一覧表示されます。

環境

MacOS Mojave
xamppをインストール&起動している前提で記述します。

ディレクトリ構成

htdocs
├── ajax.html

HTMLの雛形

下記ファイルをhtdocsへ配置します。

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax - External API</title>
</head>
<body>
    <!-- buttonタグの設置 -->
    <button id="button">GitHubのユーザー読み込み</button>
    <br><br>
    <h1>GitHub Users</h1>
    <div id="users"></div>
</body>
</html>

APIの取得

認証等が特に必要ない下記URLから取得します。
https://api.github.com/users

Ajaxの記述

URLからAPIを取得する

ajax.html

<body>
    <button id="button">GitHubのユーザー読み込み</button>
    <br><br>
    <h1>GitHub Users</h1>
    <div id="users"></div>

    <script>
        // Ajax処理記述
        document.getElementById('button').addEventListener('click', loadUsers);

        // APIを読み込む
        function loadUsers(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.github.com/users', true);

            xhr.onload = function(){
                if(this.status == 200){
                    // JSONを変数に格納できる形に変更する
                    var users = JSON.parse(this.responseText);
                }
            }

            xhr.send();
        }
    </script>

取得した情報をHTMLに表示させる

ajax.html

    <script>
        // Ajax処理記述
        document.getElementById('button').addEventListener('click', loadUsers);

        // APIを読み込む
        function loadUsers(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.github.com/users', true);

            xhr.onload = function(){
                if(this.status == 200){
                    // JSONを変数に格納できる形に変更する
                    var users = JSON.parse(this.responseText);

                    // for文でuser情報を一つずつ抜き出す
                    var output = '';
                    for(var i in users){
                        output +=
                        '<div class="user">' +
                        '<img src="'+users[i].avatar_url+'" width="70" height="70">' +
                        '<ul>' +
                        '<li>ID: '+users[i].id+'</li>' +
                        '<li>ID: '+users[i].login+'</li>' +
                        '</ul>' +
                        '</div>';
                    }
                    // HTMLに抜き出した情報を表示させる
                    document.getElementById('users').innerHTML = output;
                }
            }

            xhr.send();
        }
    </script>

この状態で、localhost/ajax.htmlにアクセス→ボタンを押すと、ユーザ一覧が表示されます。

見た目を良くする

見た目が寂しいので、cssを記述します。

ajax.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax - External API</title>
    <!-- cssの記述 -->
    <style>
        .user{
            display: flex;
            background: #f4f4f4;
            padding: 10px;
            margin-bottom: 10px;
        }

        .user ul{
            list-style: none;
        }
    </style>

完成

最終的なコードは下記のとおり

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax - External API</title>
    <!-- cssの記述 -->
    <style>
        .user{
            display: flex;
            background: #f4f4f4;
            padding: 10px;
            margin-bottom: 10px;
        }

        .user ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <button id="button">GitHubのユーザー読み込み</button>
    <br><br>
    <h1>GitHub Users</h1>
    <div id="users"></div>

    <script>
        // Ajax処理記述
        document.getElementById('button').addEventListener('click', loadUsers);

        // APIを読み込む
        function loadUsers(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.github.com/users', true);

            xhr.onload = function(){
                if(this.status == 200){
                    // JSONを変数に格納できる形に変更する
                    var users = JSON.parse(this.responseText);

                    // for文でuser情報を一つずつ抜き出す
                    var output = '';
                    for(var i in users){
                        output +=
                        '<div class="user">' +
                        '<img src="'+users[i].avatar_url+'" width="70" height="70">' +
                        '<ul>' +
                        '<li>ID: '+users[i].id+'</li>' +
                        '<li>ID: '+users[i].login+'</li>' +
                        '</ul>' +
                        '</div>';
                    }
                    // HTMLに抜き出した情報を表示させる
                    document.getElementById('users').innerHTML = output;
                }
            }

            xhr.send();
        }
    </script>
</body>
</html>

参照元

AJAX Crash Course (Vanilla JavaScript)