JavaScript on ゲンゾウ用ポストイット

nodemonを使ってGo製Ginサーバをホットリロードしようとしたらハマった話

Tue, 02 Aug 2022 08:00:18 +0900

はじめに

事前にお伝えすると、Go 言語アプリケーションの開発を効率化するためにホットリロードを導入しようとした場合、最適なのは Air と呼ばれるライブリロードツールを利用するのが良いでしょう。 Air も Go 製ですので、Go の実行環境が整っていれば利用できます。

という前提をおいた上で今回のエントリへ。

ホットリロード ( ライブリロード ) を導入し、コードが変更されたことを自動検知して実行プロセスを再起動させると開発がスムーズに進められます。

今までいくつかのツールを遷移してきましたが、ここ数年は nodemon がお気に入りです。

アプリケーション開発時だけでなく、シェルスクリプト作成時にも利用でき、かつコマンド＋オプション指定で利用できるところが気に入っています。過去にも以下のようなエントリを投稿しています。

シェルにも使える！nodemon を使ってコードに変更があった場合にホットリロード ( 自動再起動 ) させる

前置きが長くなりましたが、Go 言語+Gin Web Framework を使った開発中をしていてホットリロードを導入するために nodemon 経由で go run したところ、うまくリロードされないという事象にあいました。

どのような問題が発生したのかと、どのように解決したかを紹介します。

検証環境

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


$ uname -moi
arm64 unknown Darwin

$ bash -version | head -n 1
GNU bash, バージョン 5.1.16(1)-release (aarch64-apple-darwin21.1.0)

$ nodemon --version
2.0.19

$ go version
go version go1.18 darwin/arm64

まずは Gin のチュートリアルどおりにかんたんな Web API を作成

このあたりは足早に流していきます。

Google製のJavaScript Shellラッパー"zx"を触ってみたYO！

Fri, 14 May 2021 22:42:38 +0900

はじめに

Twitter で少し前に盛り上がっていた、 google/zx という NPM ライブラリに触れてました。

新しいツールを触る機会は家の手伝いや子守をしていてここ数年全く取れていなかったのですが、今日はたまたま時間が作れました。

検証環境

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


$ uname -moi
x86_64 MacBookPro16,1 Darwin

$ bash -version | head -n 1
GNU bash, version 5.1.8(1)-release (x86_64-apple-darwin20.3.0)

$ node --version
v15.12.0

$ yarn --version
1.22.10

ツールの紹介

Bash は偉大だけと、多くのケースでスクリプトを書こうとするともっと高級な言語が選択されます。文法や型に制約が強いほうがチーム開発には向いていますよね。

ちょっとした処理を Bash で書こうものなら、他のエンジニアから風当たりが強いです 。

JavaScript も良い選択肢ですが、JavaScript から Bash コマンドを呼び出す手間が面倒です。

そんな手間を違和感なく解決してくれるのが zx とのことです。

yml-sorterを使ってYAMLファイルの属性情報をソートする

Sat, 10 Apr 2021 08:11:59 +0900

はじめに

最近 Kubernetes 、 Docker Compose 、 OpenAPI といったツールで YAML ファイルを触ることが多いです。

参加したプロジェクトでは、この設定ファイルが環境別に管理されていました。環境は以下のものがあり、それぞれに YAML ファイルが用意されています。

本番環境
ステージング環境
開発環境

設定ファイルが多重管理されているという問題に対処するために、まずはそれぞれの環境の設定ファイルの違いを diff で確認しようと思いました。

しかし、そもそもそれらの設定ファイルの属性がきれいに並べられておらず、 diff が大変です。

なんとかならないものでしょうか？

検証環境

1
2
3
4
5


$ node --version
v15.14.0

$ yarn --version
1.22.5

YAML ファイルの各フィールドをソートするために `yml-sorter` を使う

これに対処するために YAML の内容を属性名でソートさせてから diff すれば良さそうです。

探してみたところ、YAML ファイルの各フィールド名でソートするためのツールを見つけました。

yml-sorter

こちらのツールは、 js-yaml という別のツールのラッパーということです。

インストール

npm なら以下の通り。

1

npm i -g yml-sorter

yarn なら以下の通り。

1

yarn global add yml-sorter

使い方

YAML ファイルを引数に指定して実行するだけです。

シェルにも使える！nodemon を使ってコードに変更があった場合にホットリロード(自動再起動)させる

Fri, 09 Apr 2021 08:45:41 +0900

はじめに

Node.js でアプリケーション開発をしている際に、コード変更が行われたら自動的に再起動したいと思いました。ちょうど GraphQL を使ってアプリケーションを開発していたのですが、 GraphQL のスキーマ変更は（ Apollo Server の) 再起動を行わないと変更が反映されません。

nodemon というツールを使うことで簡単に実現できました。

作業環境

1
2


$ node --version
v15.12.0

「nodemon」ってなに？

2021-04-09 現在で 1500 万を超えるプロジェクトで利用されているツール
ソースコードの変更を監視している
変更があったら自動定期にサーバプロセスを再起動してくれる

「nodemon」の使い方は？

とても簡単です。 node コマンドの代わりに nodemon コマンドを使います。ただそれだけ。それだけで、コードの変更を検知したら自動的に再起動してくれます。

「nodemon」コマンドの特徴

ほぼこれを使えば困ることがないぐらい、機能豊富です。特徴を上げてみます。

アプリケーションを自動的に再起動してくれます
いくつかの拡張子に該当するファイルを自動的に探して監視してくれます
- .js
- .mjs
- .coffee
- .litcoffee
- .json
デフォルト挙動では node コマンド + 監視機能 として動作しますが、 python コマンド + 監視機能 や、 ruby コマンド、 make など、任意のコマンド実行に切替可能です
指定したファイルやディレクトリを監視対象から外すこともできます
指定したディレクトリだけを監視させることができます
自作のスクリプトから呼びだあすことも可能

インストール方法

npm コマンドが使えれば簡単にインストールできます。

jqコマンドを使って改行エスケープ文字列を含むワンライナーを改行させて出力する

Tue, 09 Mar 2021 15:44:58 +0900

最近はデータファイルやロギングデータとして JSON フォーマットが一般化しました。僕のまだ若い頃にはタブ区切りカンマ区切りといたほうが後が一般的だったのが懐かしいです。（こんな発言していると老害なんて言われてしまいますね。）

さてそんな JSON フォーマット。スキーマレスでさっとアプリケーションを作る際のデータフォーマットとして非常に便利。しかし、複数行にまたがる文字列を格納する際は改行を “¥n” (Macだと "\n" ) のような改行エスケープシーケンス使って変換し清掃内に格納します。当然のことながら人間には非常に読みにくいです。

チームメンバから jq コマンドを使って JSON のデータをパースして確認する際に、見やすくする方法がないか質問されました。

お答えしたいと思います。

特にオプションを指定せずに `jq` コマンドを使った場合

まずはサンプルの JSON データを用意します

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


$ cat <<EOF > test.json
{
 "subject": "sample json data",
 "body": "# Greetings\n\n## English\n\nhello world!\n\n## Japanese\n\nこんにちわ世界！"
}
EOF


$ cat test.json
{
 "subject": "sample json data",
 "body": "# Greetings\n\n## English\n\nhello world!\n\n## Japanese\n\nこんにちわ世界！"
}

次に、jqコマンドを使って作成した test.json ファイルの subject、body 属性を出力してみます。

Bashシェルスクリプトで連想配列をJSONに変換し出力する方法

Fri, 25 Sep 2020 08:00:10 +0900

はじめに

Bashでは、 declare コマンドを利用して連想配列変数を宣言することが可能です。

参考 : Bashのビルトインコマンド “declare” の使い方紹介（その１） | ゲンゾウ用ポストイット

シェル内で定義した連想配列をJSONに変換し出力したいと思いましたが、どのように記述したらよいか悩んだためまとめました。

検証環境

1
2
3
4
5


$ uname -moi
x86_64 x86_64 GNU/Linux

$ bash -version | head -n 1
GNU bash, version 4.2.46(2)-release (x86_64-redhat-linux-gnu)

事前準備

今回は、 jq コマンドを利用してJSON変換を実現してみたいと思います。

GitHub - stedolan/jq: Command-line JSON processor

事前にインストールしておきましょう。

コードサンプル

事前に declare -A コマンドで宣言した連想配列に値を詰め込んでおき、 jq を使ってJSONオブジェクトに変換してみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


# 返送配列変数を定義
$ declare -A MAP

# 連想配列に値をセット
$ MAP["key1"]=1
$ MAP["key2"]=2
$ MAP["key3"]="hoge"
$ MAP["key4"]=

# JSON変換
$ for i in "${!MAP[@]}"; do
 # 奇数行にキーを、偶数行に値を出力し、jqコマンドに食わせる
 echo "$i"
 echo "${MAP[$i]}"
done | jq -c -n -R 'reduce inputs as $i ({}; . + { ($i): (input|(tonumber? // .)) })'

実行結果は以下のようになります。

`rbenv install` / `nodenv install` だけで適切なバージョンがインストールされる

Tue, 02 Jun 2020 16:15:39 +0900

はじめに

プロジェクトディレクトリ直下に .ruby-version / .node-version を配置することで、自動的に rbenv や nodeenv コマンドが適切なバージョンの ruby / node を利用するように切り替えてくれます。

ただし、環境セットアップドキュメントに rbenv install 2.7.1 / nodenv install 12.13.11 のようにバージョンが記載されていた場合、ドットファイルとの乖離が生まれてしまいます。

さてどうしたものか、 rbenv install $(cat .ruby-version) とでも書いておこうと思いましたがもっとかんたんな方法がありました。（おそらくRuby使いには初歩的なことなのでしょうね）

検証環境

1
2
3
4
5


$ uname -moi
x86_64 MacBookPro16,1 Darwin

$ bash -version | head -n 1
GNU bash, バージョン 5.0.17(1)-release (x86_64-apple-darwin19.4.0)

前提

rbenv がインストールされていること
nodenv がインストールされていること

`rbenv install` / `nodenv install` だけでよい

1

rbenv install $(cat .ruby-version)

というややこしい構文を書こうとしていましたが、試してみると以下のコマンドでもドットファイルを読み込んで適当なバージョンをインストールしてくれるようでした。

Chromeの開発者ツールのコンソールタブで`$`が使える（jQueryがインストールされていないのに）

Tue, 26 May 2020 13:04:29 +0900

はじめに

ChromeでjQueryを使用していないページを開デバッグしている時の話です。開発者ツールの「コンソール」パネルを開きながら $ を入力すると、何やらオートコンプリート機能により候補がでてきます。

$("body") と入力するとオブジェクトが取得できています。

ずっと不思議に思ってはいたのですが、調べてみました。

検証環境

1

Version 81.0.4044.138 (Official Build) (64-bit)

Chromeの開発者ツール独自の機能だった

Chromeの開発者ツール、特にコンソールページに関するドキュメントサイトにかかれていました。

上記のサイトを参考に $ に関わる機能を見ていきます。

$_

$_ は最後に評価された式の値を返却する変数です。

「コンソール」パネルに 2+2 と入力し、Enterキーを押しましょう。式が 4 と評価されていることがわかります。

この直後に $_ と入力し、Enterキーを押しましょう。 $_ 入力直前の式の実行結果である 4 が表示されます。

2*3 と入力し、Enterキーを押しましょう。 6 と評価されます。 $_ の評価結果は先程の 4 から 6 に変わっていることがわかります。

ただの数値に対して利用した場合には便利さがわかりませんが、例えば事前に配列を取得した結果、その長さを確認するといった場合に便利です。

$0 - $4

「要素」パネル上でDOM要素が選択できますが、このDOM要素の選択履歴を5つまでさかのぼって参照することができる変数です。

例えば、事前に「要素」パネルを開き、任意の要素を選択（クリック）します。

その後「コンソール」パネルを開き、 $0 変数を参照すると、先程クリックしたDOM要素のHTMLが格納されていることがわかります。

ちなみに、 $1 を参照すると <body> 要素が格納されています。僕が事前に <body> 要素をクリックしていたためにこのような結果となっています。

$0 - $4 に対して、プロパティの参照( ex $0.id 、 $0.style )を行うこともできます。

JavaScriptで数値をカンマ区切り（カンマ編集）の文字列とする方法

Wed, 22 Jan 2020 07:30:40 +0900

はじめに

簡単にできる、できないなどの意見が昔からあるが、 2020年現在は各種ブラウザやNode.jsも進化し、いずれも統一した方法で実現できるようです。

検証環境

1
2
3
4
5


$ "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --version
Google Chrome 79.0.3945.130

$ node --version
v13.6.0

カンマ区切り（カンマ編集）する方法

Number#toLocaleString() メソッドを使えば実現できます。

1
2
3
4
5
6
7
8
9


$ node
Welcome to Node.js v13.6.0.

Type ".help" for more information.
> let n = 1234567
undefined
> console.log(n.toLocaleString())
1,234,567
undefined

JavaScriptの部分の処理を取り出すと以下のようになっています。

1
2
3


let n = 1234567

console.log(n.toLocaleString())

ChromeやSafari、Firefoxの開発者ツールに上記スクリプトを貼り付けても、やはり正常に動作することを確認できました。

ひとこと

数年前は Node.js や Safari では未実装だったメソッドでした。時代は進化しました。

JavaScriptで連想配列を利用する際にObjectではなくMapを使うメリット

Thu, 04 Jul 2019 12:00:33 +0900

はじめに

JavaScriptで値のユニークな配列を利用する方法(Set) のエントリに関連して。

「ES2015」で新たに用意された便利なコレクションオブジェクトとして Map があります。他言語だと、例えばJavaのMapのように組み込みの連想配列機能が用意されています。 Map を利用すると、それまでは Object で代用してきた連想配列機能を実現することができます。

とはいえ今まで Object で実現できていたのならそれで良いのではないか？という疑問が浮かびました。そこで Object ではなく Map を使う際の違いやメリットを調べてみました。

検証環境

1
2


$ node --version
v12.5.0

従来のObjectを使った場合の連想配列の作り方

従来のObjectを使っての連想配列の作り方は以下のようなコードになります。

(example1.js)

1
2
3
4
5
6
7


const obj = {}
obj.string = "hello"
obj.array = []
obj.number = 2
obj.object = {}

console.log(obj)

node コマンドを使ってコマンドラインから実行した結果は以下のようになります。

1
2


$ node example.js
{ string: 'hello', array: [], number: 2, object: {} }

Objectを使った場合のキーは暗黙に変換される

Objectを利用した場合には、キーの取扱に注意しなければいけません。実際にソースコードを見ていきましょう。

以下の例ではObjectに対して、Numberの 2 と Stringの "2" をキーとして値をセットしています。

(example2.js)

1
2
3
4
5
6


const obj = {}
obj["2"] = "二"
obj[2] = "に"

// { '2': 'に' }
console.log(obj)

実行すると以下のようになります。

JavaScriptで値のユニークな配列を利用する方法(Set)

Wed, 03 Jul 2019 09:40:11 +0900

はじめに

「Vue.js」や「Nuxt.js」を使って開発をする機会が増えてきました。しばらくコマンドラインと戯れる年月が長かったで、浦島太郎状態です。 ES2015～2018 で提供された新しい言語使用が便利で改めて学習し直しているところです。

JavaScriptの `Array` は重複を許してしまう

本題に貼ります。 JavaScriptの Array は値の重複を許してしまいます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


let numbers = [
 1,
 2,
 3,
]

console.log("=== first ===")
console.log(numbers)

// 要素を追加
numbers.push(4)
numbers.push(5)
console.log("=== first ===")
console.log(numbers)

// すでに格納されている同値を追加
numbers.push(3)
numbers.push(3)
console.log("=== third ===")
console.log(numbers)

実行結果は以下の通り。 3 の値が重複していることがわかります。

「Amazon Cognito」で提供するログインページを自作してみる（`aws-cli`で構築）

Thu, 06 Jun 2019 23:41:17 +0900

はじめに

「Amazon Cognito」を使って既存のWebサービスのログイン認証機能を一部置き直す方法について、何パターンか検討してみました。

今まで検討してみた方法ですが、いずれも「Amazon Cognito」が提供するログインページをそのまま利用する、というものでした。

どうしてもログインページを既存のWebシステムのデザインに合わせたい、という場合にはログインページも既存のWebページのものを使う方法もあります。既存のWebページのものを流用する方法についてまとめてみました。

準備

今回はなるべくAWSの「マネージメントコンソール」からの操作を行わずに「Cognito」を使ったログイン機能を実装してみます。

そのため、以下のコマンドを利用することを前提としています。

aws コマンド
jq コマンド
npm コマンド

検証環境

1
2
3
4
5
6
7
8


$ aws --version
aws-cli/1.16.170 Python/3.7.3 Darwin/18.6.0 botocore/1.12.160

$ jq --version
jq-1.6

$ npm --version
6.9.0

作業開始

今回作成したプログラムは以下のGithubリポジトリにコミット済みです。試行錯誤した結果作成されたプログラムを負いながら手順を説明します。

GitHub - genzouw/aws-cognito-example-custom-page

圧縮されたソースファイルをダウンロードするか、 git コマンドで clone しておいてください。（Githubリポジトリページのソースコードを見ても良いです。）

1

$ git clone git@github.com:genzouw/aws-cognito-example-custom-page.git

※(2019-06-06) 便宜上、当エントリにGithubリポジトリ上のコードと同じ内容を貼り付けておきますが、メンテナンスはGithubリポジトリの方だけとする予定です。乖離する可能性があることをご了承ください。

Vue.jsを使ってこどもたちのために百人一首学習アプリを作ってみた

Tue, 04 Jun 2019 07:59:25 +0900

「Vue.jsでなにか作りたい」という思いと、子どもたちの「なにかゲーム作って欲しい」という思いから簡単なWebアプリを作ってみました。

ひゃくにんいっしゅをおぼえよう

数ヶ月前に作成したものですが、 index.html に 「Vue.js」 をCDNサーバ経由で読み込むだけの単純な作りでした。勉強のために以下の点を改良しました。

プロジェクトは vue init で生成
開発時は npm run dev でライブリローディング
外部のライブラリはすべて npm で管理
- axios
- bootstrap
- moment
- underscore
- vue
- vue-analytics
- vue-meta
- vuex
- firebase ( まだ使っていないが使いたい )

気になっているのは「SEO」の対策についてです。今回、HTMLの head タグ無いのメタ情報についても、「Vue.js」から埋め込むという荒業を行ってみました。 GoogleのクローラがJavaScriptをどの程度解釈してくれるのか？というのを一ヶ月ぐらいかけてみていこうと思います。

ちなみに、「Twitter」や「Facebook」にリンクを張った場合にはJavaScriptの動作はしてくれないようでアイキャッチ画像などは表示されません。 SNSでのシェアを考えた場合にはSSRを検討したほうが良さそうですね。

「markdownlint」を使ってMarkdown記法の構文チェックを行う（Vimのaleプラグインと組み合わせるともっと便利に）

Tue, 14 May 2019 08:54:56 +0900

はじめに

手に馴染むエディタを使いコードを書きながら、同じぐらいドキュメントを書いてます。

アプリケーションの概要、報告書、ブログからメールに至るまで、最近はMarkdown形式で記載してそれぞれのビューアあるいはコンバータで変換して文字を起こすことが多くなっています。

Markdown記法を利用することのメリット

執筆効率がよい
- HTMLのようにタグを書かなくて良いためタイピング量が減る
- 簡単なメモでも早く綺麗に書ける
統一したドキュメント形式を保てる
汎用性が高い
- 関連ツールや利用できるサービスが多い
段落など見た目が統一される
- h1 / h2 / h3 / pre / li / bold …

Markdown記法は自由が多い

Markdown記法の習得は非常に容易です。実際僕も一日ほど使ったぐらいで移行することができました。理由の一つとして規約の少なさがあげられます。

Markdown記法は自由度を構文チェックで補う

自由度が高いがゆえに、統一感のないドキュメントが出来上がりがちです。例えばHTMLの文書構造として、 h1 タグの次には h2 タグが登場するべきであり、 h3 タグが登場してはおかしいですね。同様に # でタイトルを記載したあとに ### タイトルが来るとおかしいわけです。 # タイトルがないというのもやはり同様におかしいですね。

自由度の高いMarkdown記法ですが、構文チェックを行うことで、弱点を補うことができます。

Markdown記法の構文チェックツール「markdownlint」を使う

僕は 「markdownlint」 というLintツールを利用しています。

GitHub - DavidAnson/markdownlint: A Node.js style checker and lint tool for Markdown/CommonMark files.

導入手順

事前準備

Node.js製のツールとして提供されているため、Node.jsのインストールが必要です。以下のエントリを参照すればすぐにインストールが可能です。

Node.jsのインストール方法

markdownlintのインストール

npm コマンドでインストールします。

CSVをJSONに変換するためのNode.jsライブラリ「csv2json」

Fri, 01 Mar 2019 20:34:55 +0900

はじめに

JSON データをinputとして処理するテストコードを書きたかったが、参考にするテストデータが CSV フォーマットだったために簡単に変換できないかと探していたところ良いものを見つけました。

csv2json

検証環境

1
2
3
4
5


$ uname -moi
x86_64 MacBookPro10,1 Darwin

$ bash -version
GNU bash, バージョン 5.0.2(1)-release (x86_64-apple-darwin18.2.0)

必要なもの

npm でインストールするツール&ライブラリのため、 Node.js の実行環境が必要です。

実行環境がない場合は Node Version Manager で Node.js がインストールできます。 ( Redhut/Fedora/CentOSなら yum 、 Ubuntu/Debianなら apt-get 、 Macなら brew を使ってインストールすることもできるが、以下の方法ならどの環境でもセットアップ可能。 )

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


# **Node Version Manager** ( 複数のアクティブなnode.jsバージョンを管理するためのシンプルなbashスクリプト ) を利用
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

$ cat <<'EOF' >>~/.bashrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
EOF

$ . ~/.bashrc

$ nvm install --latest-npm

$ node --version
v11.10.1

`csv2json` のインストール

npm コマンドが使えるようになっていれば以下のコマンドでインストールが可能です。

Amazonの書籍詳細ページからタイトルを抜き出し大阪市立図書館の蔵書検索を行うJavaScript

Sat, 16 Apr 2016 21:58:19 +0900

はじめに

新人教育の一環として、部内でオススメの書籍を募ったところ、自分が読んでみたいと思った書籍がたくさんありました。で一つ一つ検索し ほしい物リスト に登録していったがすべて購入すると随分な費用となるため、大阪市立図書館の蔵書検索で検索し予約することにしました。その作業を少しでも容易にすべく、JavaScriptでブックマークレットを作成してみました。

スクリプト

1

javascript: var w = document.getElementById('productTitle').innerText.replace(/―/mgi, " ").trim(); location.href = "http://www.oml.city.osaka.lg.jp/index.php?action=pages_view_main&active_action=v3search_view_main_init&block_id=552&tab_num=0&op_param="+encodeURIComponent("words="+w);

使い方

前提

僕の利用しているブラウザはhrome です

ブックマークに次のスクリプトを登録します。（ブックマークレットとなります）
Amazonの商品ページ（ ex ）を開き、先のブックマークレットをクリックします。

ひとこと

マウスで選択されている文字列から検索、なども容易に実現できますね。 スクリプトとは関係ないですが、大阪市立図書館のページ重たいです。

Rhino実行環境構築からJavaのcommons-langライブラリを呼び出してみる

Mon, 08 Feb 2010 00:44:09 +0900

以下のフレームワークを使用した開発が一段落した。

blanco Framework

次の案件の調査開始。
intra-mart というサーバサイドJavaScriptのパッケージカスタマイズ。

クライアントサイドもJavaScriptでゴリゴリコーディング。いっそ開発支援用のスクリプトもJavaScriptで書いてしまおうとRhinoをセットアップ。

セットアップ

Rhino のダウンロードから、Rhinoのパッケージをダウンロード。解凍したフォルダ内のjs.jarを適当な場所に置くのだが、Groovyに似せて ~/.rhino/lib に配置してみた。

加えてパスの通った場所に以下のようなBashスクリプトを配置。

rhino

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


$ echo <<'EOF' >rhino
#!/usr/bin/env bash
libs=""
for f in $(\ls ~/.rhino/lib/*.jar); do
 libs=$libs:$f
done
java -cp $libs org.mozilla.javascript.tools.shell.Main "${@}"
EOF

$ chmod 755 rhino

実行

早速実行してみる。

test1.js

#!/usr/bin/env rhino
print('test')

1
2
3
4
5
6
7
8
9


# 先程作成した `rhino` スクリプトの引数にJavaScriptファイルを渡すと実行可能
$ rhino test1.js
test

# 実行権限を付与すれば、ファイルを指定して実行可能
$ chmod 700 ./test1.js

$ ./test1.js
test

おお！思った以上に実行速度が早くてびっくりした。

なぜ再三GroovyからJavaScriptを呼ぼうとしたか

Tue, 02 Dec 2008 06:58:00 +0900

なぜ何度もJavaScriptを呼ぼうと頑張ったかというと、以下のjavascriptテストフレームワークを使用したかったから。

Maven - JsTester

テストケースを書くために、Groovyに特化したクラスも用意されている。

Maven - Frequently Asked Questions

掲載されていたものを抜粋し、若干バグっている部分を修正。（このサイトのソース、あちこちにタイプミス、変数定義漏れなどがあり、若干バグっているがw）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22



import net.sf.jstester.ext.GroovyJsTestCase

class GroovyJsTesCaseTest extends GroovyJsTestCase {
 void testScript(){
 def groovyVar = "10";

 def script = """
 var counter = 0;
 function count(){
 counter++;
 }

 for( i = 0; i < $groovyVar; i++ ){
 count();
 }
 """;
 
 eval( script );
 assertExpressionEquals( "$groovyVar", "counter" );
 }
}

結構おもしろいなぁと思った。最後の

GroovyでJavaScriptソースをコールしてみる３

Tue, 02 Dec 2008 06:11:00 +0900

はじめに

GroovyでJavaScriptソースをコールしてみる２の続き。

今回は、以下のようにしてJavaScriptのオブジェクト内に格納されている関数を取り出してみます。

1

var genzou = {age: 29, sex: 'man', greet: function() { return 'こんにちわ世界'; } };

上記の例では、 greet プロパティの関数が今回のターゲットです。

GroovyからJavaScriptをパースして関数プロパティを抜き出してみる

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import javax.script.*;
import sun.org.mozilla.javascript.*;

def engine = new ScriptEngineManager().getEngineByName("JavaScript");

engine.with {
 eval("var genzou = {age:29, sex:'man', greet:function(){ return 'こんにちわ世界'; } };");

 def getClosure = { String key -> delegate.get(key, delegate) }
 sun.org.mozilla.javascript.internal.NativeObject.metaClass.getAt = getClosure

 def obj = eval("genzou")
 // ***何が取れるかな？***
 println obj["greet"]
}

実行結果は

1

sun.org.mozilla.javascript.internal.InterpretedFunction@1549ceb

どうやら関数を取得できている模様。

さらに、

1

 println obj["greet"]

の部分を

GroovyでJavaScriptソースをコールしてみる２

Mon, 01 Dec 2008 06:41:00 +0900

はじめに

GroovyでJavaScriptソースをコールしてみるの続きです。

obj.get("age", obj) のように、1回のメソッド呼び出しのために2回もオブジェクトインスタンスを記述するのが面倒です。これをなんとかしたいと思います。

metaClass を使って、プロパティにもっと簡単にアクセスできるようにしてみます。

`metaClass` を使って、プロパティにもっと簡単にアクセスできるようにしてみる

metaClass.getAt() メソッドを実装してやることで、Groovy内のオブジェクトに対して以下のようにプロパティアクセス可能となります。

1
2
3
4
5


X.metaClass.getAt = { String key -> /* any logic */ }

X x = new X()

x["some-field"]

obj.get("age", obj) という記述を metaClass.getAt() でくるんでやることで、 obj["age"] のようにアクセスできるようにしてやろうと思います。

その前に寄り道。取得できたJavaScriptのオブジェクトってどんなJavaクラスなの？

これを知らなくても metaClass.getAt に設定するクロージャ処理は実装可能ですが、寄り道して、JavaScript実行結果から取得されたオブジェクトのクラスを調べてどのようにプロパティ情報が格納されているのかを調べてみることにしました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import javax.script.*;

def engine = new ScriptEngineManager().getEngineByName("JavaScript");

engine.with {
 eval("var genzou = {age:29, sex:'man'};");

 def obj = eval("genzou")
 println obj.properties
}

プロパティをすべて舐めて出力してみました。結果、以下のように。

GroovyでJavaScriptソースをコールしてみる

Mon, 01 Dec 2008 06:12:00 +0900

先週まで、「サーバサイトJavaScript」を使用したシステムに携わっていました。

その時に「JUnit」を使ってテストをできないかといろいろ調べていたときのメモです。

（最近ではTestNGなるものが話題のようですが、ろくすっぽJUnitも使っていないのに次のテストフレームワークを試す気もなく、まずはJUnitを使い倒すべく勉強中です。）

JavaScriptなので、jsUnit的なものを使用したら解決なのでしょうが、やはりそこはGroovy中毒としては引けません。

まずはGroovy（もちろんJavaでできる）でJavaScriptソースをコールしてみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import javax.script.*;

def engine = new ScriptEngineManager().getEngineByName("JavaScript");

engine.with {
 eval("var genzou = {age:29, sex:'man'};");

 def obj = eval("genzou")
 println obj.get("age", obj)
}

JavaScriptを文字列として引き渡し、実行します。その後実行結果を取得します。意外と簡単ですね。

ただ、オブジェクトのプロパティ参照がやや面倒くさい。

Scriptable (Rhino) のgetメソッドを実行しているようなのですが、第二引数に毎回自分自身を引き渡してやる必要があるようです。（ Python の self キーワードをメソッドの第一引数に渡す、というルールに似ていますね。）

次回は、 metaClass に getAt メソッドを追加して、ちょっとだけ簡単にしてみたいと思います。

Groovy勉強したら、prototype.js使えるようになってた

Tue, 18 Nov 2008 06:50:00 +0900

今更ですが、prototype.jsのネタを。

一年以上も前のプロジェクトでprototype.jsを使用したWEBシステムを構築しました。

prototype.js v1.5.0 の使い方を参考に、勉強がてら調べながらシステム構築しました。その時には**$()や$F()**の利用方法を学ぶ程度、Event.observeを利用する程度までしか本質を理解できませんでした。

Groovyを勉強した現在、上記システムの改修作業に携わっているのですが、prototype.jsの見方がかなりかわってきています。特にArrayまわり。

GroovyのListには

find
findAll
collect
each
any
all

といった便利なメソッドが用意されており、ループ処理を簡単に記述できます。

prototype.jsを利用すると同様のことがjavascriptでも実現できるようです。（ちなみにprototype.jsを使用するにはサイトからダウンロードしてきたjsファイルをhtmlにインポートするだけです。）

1
2
3
4
5



// これで、"[taro]", "[hanako]", "[jiro]"という文字配列がセットされる
var newlist = ["taro", "hanako", "jiro"].collect(function(name){
 return "[" + name + "]";
})

適用前は

1
2
3
4
5
6
7



// これで、"[taro]", "[hanako]", "[jiro]"という文字配列がセットされる
var names = ["taro", "hanako", "jiro"]
var newlist = []
for( var i = 0; i < names.length; i++ ){
 newlist.push("[" + name + "]");
)

少しだけコードが減って見やすくなっています（かな？）

これが生きてくるのは

list.findAll(…).collect(…).each(…);

などのように、連想的にメソッドを呼び出す場合でしょう。その場合には確かにソースコードは減るし、見やすくなるように感じます。

これと比べるとgroovyの同メソッドなどの構文がいかにシンプルかが分かります。

1
2
3
4
5



// これで、"[taro]", "[hanako]", "[jiro]"という文字配列がセットされる
def newlist = ["taro", "hanako", "jiro"].collect{
 "[" + it + "]";
}

groovyと比較して、prototype.js(javascript)を利用した場合の面倒さとしては以下のように感じました。

JavaScriptの `replace` メソッドで条件に合致した最初のパターンしか置換されない

Mon, 10 Nov 2008 07:58:00 +0900

誰もが通る道なのでしょう。

1

'abcdabc'.replace('ab', '')

とやっても、前方の一ヶ所しか置換されないので、ずっと

1

'abcdabc'.split('ab').join('')

とやっていました。

前回紹介したjavascriptの本を読むと、

1

'abcdabc'.replace(/ab/g, '')

で解決できるそうです。なるほど、正規表現ね。

LinuxでコマンドラインからJavaScriptを呼び出す方法

Sun, 09 Nov 2008 08:00:00 +0900

LinuxでJavaScriptを利用してファイル操作等を行うことが可能。前回も書いたとおり、 Rhino を使用する。ここでは ubuntu での動作まで説明してみます。

インストール

1

$ sudo apt-get install rhino

で、 Rhino をインストール。パスも勝手に通るようです。

確認

試しに動かしてみる。

1

$ rhino

以下のようなプロンプトが表示されればOK。

1

js >

テストスクリプト作成

以下の内容を既述。(test.jsとしておく)

1
2


#!/usr/bin/env rhino
print("てすとじっこうできた！");

ファイルのパーミッションを変更しておく。

1

$ chmod 755 test.js

実行

1

$ ./test.js

を実行。問題なければ、「 てすとじっこうできた！ 」と表示されるはず。

以上

JavaScriptも捨てがたい・・・

Sun, 09 Nov 2008 07:45:00 +0900

現在参入中のプロジェクトでは

クライアントサイド
サーバーサイド

がともにJavaScriptでかかれています。

クライアントサイドがJavaScript、というのはweb系のシステムならブラウザを使用する以上当然かもしれません。サーバーサードがJavaScriptとはどういうことかというと、 im-jssp framework を利用しています。あまり知られていないかもしれません。仕組みとしては java servlet container が、 Rhino を利用してサーバーに配置された JavaScript ファイルを実行してレスポンスを返す、というもの。これが簡単そうで意外と奥が深い。

mixin
クロージャ

のような機能はJavaScriptに既に存在していたんですね。

そういえば現在使用中の Ubuntu でも、apt-get install rhino を実行すると Rhino がインストールされます。コマンドから rhino -f file と打ち込むとクライアント処理をJavaScriptで記述したスクリプトを実行できます。

会社で JavaScript の本を見つけて読んだら、いかに JavaScript を誤解していたかよく分かりました。 Groovy なければ、絶対JavaScriptでスクリプト組んでいたでしょう。

JavaScript on ゲンゾウ用ポストイット

nodemonを使ってGo製Ginサーバをホットリロードしようとしたらハマった話

はじめに

検証環境

まずは Gin のチュートリアルどおりにかんたんな Web API を作成

Google製のJavaScript Shellラッパー"zx"を触ってみたYO！

はじめに

検証環境

ツールの紹介

yml-sorterを使ってYAMLファイルの属性情報をソートする

はじめに

検証環境

YAML ファイルの各フィールドをソートするために yml-sorter を使う

インストール

使い方

シェルにも使える！nodemon を使ってコードに変更があった場合にホットリロード(自動再起動)させる

はじめに

作業環境

「nodemon」 ってなに？

「nodemon」 の使い方は？

「nodemon」 コマンドの特徴

インストール方法

jqコマンドを使って改行エスケープ文字列を含むワンライナーを改行させて出力する

特にオプションを指定せずに jq コマンドを使った場合

Bashシェルスクリプトで連想配列をJSONに変換し出力する方法

はじめに

検証環境

事前準備

コードサンプル

`rbenv install` / `nodenv install` だけで適切なバージョンがインストールされる

はじめに

検証環境

前提

rbenv install / nodenv install だけでよい

Chromeの開発者ツールのコンソールタブで`$`が使える（jQueryがインストールされていないのに）

はじめに

検証環境

Chromeの開発者ツール独自の機能だった

$_

$0 - $4

JavaScriptで数値をカンマ区切り（カンマ編集）の文字列とする方法

はじめに

検証環境

カンマ区切り（カンマ編集）する方法

ひとこと

JavaScriptで連想配列を利用する際にObjectではなくMapを使うメリット

はじめに

検証環境

従来のObjectを使った場合の連想配列の作り方

Objectを使った場合のキーは暗黙に変換される

JavaScriptで値のユニークな配列を利用する方法(Set)

はじめに

JavaScriptの Array は重複を許してしまう

「Amazon Cognito」で提供するログインページを自作してみる（`aws-cli`で構築）

はじめに

準備

検証環境

作業開始

Vue.jsを使ってこどもたちのために百人一首学習アプリを作ってみた

「markdownlint」を使ってMarkdown記法の構文チェックを行う（Vimのaleプラグインと組み合わせるともっと便利に）

はじめに

Markdown記法を利用することのメリット

Markdown記法は自由が多い

Markdown記法は自由度を構文チェックで補う

Markdown記法の構文チェックツール「markdownlint」を使う

導入手順

事前準備

markdownlintのインストール

CSVをJSONに変換するためのNode.jsライブラリ「csv2json」

はじめに

検証環境

必要なもの

csv2json のインストール

Amazonの書籍詳細ページからタイトルを抜き出し大阪市立図書館の蔵書検索を行うJavaScript

はじめに

スクリプト

使い方

ひとこと

Rhino実行環境構築からJavaのcommons-langライブラリを呼び出してみる

セットアップ

YAML ファイルの各フィールドをソートするために `yml-sorter` を使う

「nodemon」ってなに？

「nodemon」の使い方は？

「nodemon」コマンドの特徴

特にオプションを指定せずに `jq` コマンドを使った場合

`rbenv install` / `nodenv install` だけでよい

JavaScriptの `Array` は重複を許してしまう

`csv2json` のインストール

`metaClass` を使って、プロパティにもっと簡単にアクセスできるようにしてみる