この記事について

この記事は、筆者が作ったESLint プラグインの紹介記事なります。
「 なぜ作ったのか? 」「 コンポーネント設計とは何か？ 」という議題に触れ、コンポーネント設計の難しさやこのプラグインの有意性について語っています。
筆者は専門家では無いので間違っている所や認識のズレなどがあるかもしれませんが、もしあった場合は編集リクエストやコメントにて指摘してくれると嬉しいです。

後、現在この記事で紹介するプラグインは「 コンポーネントは JSX で記述されている 」ことを想定しています。

作ったモノ

Specific Component Designを導入するためのELint プラグインです。
プラグインの詳細は、github のドキュメントに日本語で書いていますので、是非見てみて下さい。
以下の画像は、github へのリンクカードです。

インストール方法

npmに公開しているので、以下のコマンドでインストールする事が出来ます。

npmでインストール

$> npm install eslint-plugin-scd

yarn でも大丈夫です。

yarnでインストール

$> yarn add eslint-plugin-scd

eslint-plugin-scd の使い方

使い方は、他のESLint プラグインと同じです。この記事では、.eslintrc.jsで設定する方法を紹介します。

.eslintrc.jsで設定

module.exports = {
  extends: ["plugin:scd/recommended"], // デフォルトのルールを適用
  plugins: ["scd"], // eslint-plugin-scdを適用
  rules: {
    // オプションを渡してカスタマイズ出来ます。
    // 詳しくはgihubリポジトリに書いています。( 日本語ドキュメントあります )
    "scd/nue-element-size": [
      "error",
      {
        max: 10,
      },
    ],
  },
};

現在のところjsxとtsxの方では動作している事を確認しています。
typescriptでは、以下の設定で動くことを確認しました。

.eslintrc.js(typescriptに対応)

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },

  extends: ["eslint:recommended", "plugin:scd/recommended"],

  parser: "@typescript-eslint/parser",

  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    sourceType: "module",
  },

  plugins: ["scd", "@typescript-eslint"],
};

Specific Component Design について

Specific Component Design( 以下 SCD と表記します )は、具体的なコンポーネント基準によってコンポーネントを分類して設計するための設計思想です。

SCDの目的は、コンポーネントに明確な基準を設け、より設計しやすく・より管理しやすくすることです。
またSCDは、コンポーネントを「 フロントエンドとしてのコンポーネント 」と捉え、フロントエンドフレームワークでのコンポーネント設計で役立つことを想定しています。なので、CSS などの設計についてはSCDに含まれていませんので、ご注意ください。

具体的なコンポーネント基準とは？

SCD はコンポーネント単位が小さい順に、

1. Nue
2. Otem
3. Pafe
4. Page
5. Module

の 5 つの分類があり、それぞれの分類には明確な分類基準があります。
それら明確な基準は以下のようになります。

Nue

Nue は最小単位のコンポーネントを分類します。

規約

• コンポーネントファイルをnuesまたはnueフォルダー下に入れる
• 要素数( html タグやコンポーネントの数 )は、0~5 個以内する
• State は持たせない
• Hooks の使用禁止

Otem

Nueよりも大きなコンポーネントを分類します。

規約

• コンポーネントファイルをotemsまたはotemフォルダー下に入れる
• 要素数( html タグやコンポーネントの数 )は、5~10 個以内する
• State は持たせない
• Hooks の使用禁止

Pafe

NueやOtemよりも大きなコンポーネント、または State を保持ているコンポーネントを分類します。

規約

• コンポーネントファイルをpafesまたはpafeフォルダー下に入れる
• 要素数( html タグやコンポーネントの数 )が10 個以上、または State を保持している
• Hooks を使用してもよい

Page

Pageは、ページを構成するコンポーネントを分類します。

規約

• コンポーネントファイルをpagesまたはpageフォルダー下に入れる
• <main></main>を最低一つ持たせる
• Hooks を使用してもよい

Module

Moduleは、上記のどれにも分類できない例外的なコンポーネントを分類します。
Moduleには明確な規約はありません。自由に設計できます。

※ Module に分類するのは、どうしても他のモノに分類出来ない時です。なるべくNue・Otem・Pafe・Pageに分類できるようにして下さい。

使ってみた感じ

以下の gif 画像は、プラグインを導入してNueコンポーネントを定義した時の挙動です。( VSCode の拡張を使ってます )

Nueコンポーネントは、要素数が 5 個以下かつHooks を使ってはダメなので、要素数が 6 個以上またはHooks を使った時にエラーになります。

また、分かりにくいですがnueフォルダー下にコンポーネントファイルがあることも確認できます。( src > nue > sample.jsx ってところ )

コンポーネント設計の難しいさ

ここからはコンポーネント設計の難しさについて解説したいと思いますが、皆さんはコンポーネント設計は簡単だと思いますか？
私は難しいと思っています。そして、その理由は大きく分けて再利用性と拡張性の二つがあると思ってます。
これら二つはコンポーネントが求めるもの・作る意義であり、より良いコンポーネントを作るためには両者は必要になってきます。しかし、再利用性と拡張性は相反しており双方を維持することはできません。なので、私たちがコンポーネント設計する場合は、必ず再利用性か拡張性のどちらかを捨て、どちらかを高めるという設計を状況に応じてする必要があります。

この「 状況に応じて再利用性か拡張性のどちらかを捨てる 」という事が、コンポーネント設計における最大の難しさだと思います。

さて、その難しいさを作っている再利用性と拡張性ですが具体的にはどんなモノなのでしょうか？
それを理解するために実際に具体例を出して見てみましょう。

コンポーネント設計における再利用性

再利用性というのは、名前の通り再利用しやすいかどうかを主眼に置いており、コンポーネントを扱いやすくするためにはとても大事な要素です。ですが、「 再利用しやすい 」とはどういう事でしょうか？そこをちゃんと考えてみましょう。

以下に具体例を示します。

// 記事をカードで表示
const EntryCard = ({ entry }) => (
  <li className="entry-card">
    <div className="thumbnail">
      <img src={entry.thumbnail} />
    </div>

    <h3>{entry.title}</h3>

    <div className="author">
      <p>{entry.author.name}</p>
    </div>
  </li>
);

// 記事一覧ページ
const ExplorePage = ({ entries }) => (
  <main>
    <ul>
      {entries.map((entry) => (
        <EntryCard entry={entry} />
      ))}
    </ul>
  </main>
);

// 投稿した記事一覧ページ
const MyEntriesPage = ({ entries }) => (
  <main>
    <ul>
      {entries.map((entry) => (
        <EntryCard entry={entry} />
      ))}
    </ul>
  </main>
);

上記のソースコードは、記事情報からカードを表示するコンポーネント<EntryCard />があり、そのコンポーネントを<ExplorePage />と<MyEntriesPage />の二つのコンポーネントが使っています。
注目すべき点は、ExplorePageとMyEntriesPageの双方ともに<EntryCard />を同じ方法で使っていて、同じ表示をすることが出来ています。これは普通に hmlt タグで書いた時よりもシンプルに書けているのが分かりますね。

この「 同じ方法で同じ表示が出来ている 」という所が非常に重要です。これはつまり、同じ方法でも違う挙動( 表示 )をしてたり、同じ挙動( 表示 )でも違う使い方をしている場合は、「 再利用しやすい 」とは言えません。

例えば、以下のようなコンポーネントがそれです。

// ランダムで記事をカードで表示
const RandomEntryCard = ({ entry }) => {
  const isShow = Math.floor(Math.random() * 100) < 50;

  if (!isShow) return null; // falseならnullを返す

  return (
    <li className="entry-card">
      <div className="thumbnail">
        <img src={entry.thumbnail} />
      </div>

      <h3>{entry.title}</h3>

      <div className="author">
        <p>{entry.author.name}</p>
      </div>
    </li>
  );
};

<RandomEntryCard />はランダムで渡された entry 情報を表示します。このコンポーネントはさっきの<EntryCard />と同じ方法で使うことができますが、明らかに使いにくい事が分かります。

これが「 同じ方法でも違う挙動( 表示 )をしている 」という事です。

では次に、「 同じ挙動( 表示 )でも違う使い方をしている 」はどうでしょうか？
以下のコンポーネントがそれです。

// 記事をカードで表示
const EntryOrBlogCard = ({ entry, blog }) => {
  entry = entry || blog;

  return (
    <li className="entry-card">
      <div className="thumbnail">
        <img src={entry.thumbnail} />
      </div>

      <h3>{entry.title}</h3>

      <div className="author">
        <p>{entry.author.name}</p>
      </div>
    </li>
  );
};

<EntryOrBlogCard />は、<EntryOrBlogCard entry={entry} />または<EntryOrBlogCard blog={entry} />で同じ挙動を示します。
しかし、コンポーネントの内部を知らない人が<EntryOrBlogCard />を使っている所を見た時、Props が違う事から連想して、何か違う挙動をするように見えてしまいます。そうなると、このコンポーネントを使うのにわざわざ内部構造を理解しなければならなくなり、非常に利用しにくい状態になってしまいます。

これが「 同じ挙動( 表示 )でも違う使い方をしている 」という事です。

コンポーネント設計における拡張性

それでは、次に拡張性について見ていきましょう。
この記事での拡張性とは「 後付けがしやすい 」という事ではなく、「 挙動( 表示 )を変化させやすい 」という事です。¹

言葉だけじゃ分かりにくいと思うので、例を見てみましょう。

// 記事をカードで表示
const EntryCard = ({ entry }) => (
  <li className="entry-card">
    <div className="thumbnail">
      <img src={entry.thumbnail} />
    </div>

    <h3>{entry.title}</h3>

    <div className="author">
      <p>{entry.author.name}</p>
    </div>
  </li>
);

// 記事一覧ページ
const ExplorePage = ({ entries }) => (
  <main>
    <ul>
      {entries.map((entry) => (
        <EntryCard entry={entry} />
      ))}
    </ul>
  </main>
);

// 投稿した記事一覧ページ
const MyEntriesPage = ({ entries }) => (
  <main>
    <ul>
      {entries.map((entry) => (
        <EntryCard entry={entry} />
      ))}
    </ul>
  </main>
);

上記のコードは、再利用性の時と同じソースコードです。現状では<EntryCard />は表示のみをしており、その他の事はしていません。
それを Author 情報の表示非表示を出来るように修正したいと思います。
理由は、このコードの<MyEntriesPage />は自分が投稿した記事しか表示されない為、Author 情報を表示する必要が無いためです。( Author 情報が全て自分( ページを見ている人 )になるため )

<EntryCard />を以下のように修正します。

EntryCardを修正

const EntryCard = ({ entry, showAuthor }) => (
  <li className="entry-card">
    <div className="thumbnail">
      <img src={entry.thumbnail} />
    </div>

    <h3>{entry.title}</h3>

    {showAuthor ? (
      <div className="author">
        <p>{entry.author.name}</p>
      </div>
    ) : null}
  </li>
);

showAuthor という Props によって、author 情報の表示を切り替えられるようにしました。
この修正によって、<EntryCard />を使っているコンポーネントは以下のように修正します。

ExplorePageとMyEntriesPageを修正

// 記事一覧ページ
const ExplorePage = ({ entries }) => (
  <main>
    <ul>
      {entries.map((entry) => (
        <EntryCard entry={entry} showAuthor={true} /> // Author情報を表示
      ))}
    </ul>
  </main>
);

// 投稿した記事一覧ページ
const MyEntriesPage = ({ entries }) => (
  <main>
    <ul>
      {entries.map((entry) => (
        <EntryCard entry={entry} showAuthor={false} /> // Author情報を非表示
      ))}
    </ul>
  </main>
);

上記の修正により、author 情報は必ず表示していた所をshowAuthorの値によって表示非表示を出来るように<EntryCard />を修正しました。

これにより<EntryCard />の出来ることが増え、より対応できる場面が増えたと分かります。

再利用性と拡張性は相反する

さて、再利用性と拡張性を説明してきましたが、ここで一つ問題が発生しました。
それはExplorePageとMyEntriesPageを修正のソースコードの以下の二つ部分です。

ExplorePageコンポーネントより抜粋

(
  /* ... */
  <EntryCard entry={entry} showAuthor={true} /> // Author情報を表示
  /* ... */
)

MyEntriesPageコンポーネントより抜粋

(
  /* ... */
  <EntryCard entry={entry} showAuthor={false} /> // Author情報を非表示
  /* ... */
)

上記の二つのコードは<EntryCard />の拡張性を上げるためにshowAuthorを Props に追加したため、<EntryCard />にshowAuthorの値を渡しています。これは特段問題が無いように見えますが、再利用性という観点から見ると問題が発生しています。
以下のソースコードを見てください。

showAuthorにtrueを渡す例

(
  /* ... */
  <EntryCard entry={entry} showAuthor={true} />
  /* ... */
)

(
  /* ... */
  <EntryCard entry={entry} showAuthor />
  /* ... */
)

showAuthorにfalseを渡す例

(
  /* ... */
  <EntryCard entry={entry} showAuthor={false} />
  /* ... */
)

(
  /* ... */
  <EntryCard entry={entry} /> // showAuthorはundefinedとなるが、undefinedはfalseとして扱われるため同じ挙動を示す
  /* ... */
)

上記の書き方でも、<EntryCard />は同じ挙動をします。
再利用性とは「 同じ方法で同じ挙動( 表示 )を扱える 」という事でした。
しかしどうでしょう？上記のコードは、 同じ方法でしょうか？
showAuthorに boolean を渡すのに、true・falseそれぞれ二通りずつあります。これは明らかに、再利用性が損なわれていることが分かります。

つまり、拡張性を上げた結果、再利用性が失われています！

これが再利用性・拡張性が相反すると言った所以です。
また、これらはboolean型だけの話ではなく、Propsの数が多くなったり、別のデータ型になったとしても同じです。

再利用性と拡張性にどう向き合うか？

再利用性と拡張性はコンポーネント作るための意義であり、双方とても大事な要素です。
しかし双方が相反しているため両者を高く保つことは困難で、状況に応じてどちらかを高く保つ必要があるかという事にコンポーネント設計者は頭を悩ませています。

私はこの問題について再利用性と拡張性を維持することを諦め明確な基準を設けることで、再利用性と拡張性を最低限保持することで対応しています。

そして、この「 明確な基準を設ける 」というのがこの記事で紹介している ESLint プラグインやSCDを作った理由です。

長々と話してきましたが、結局のところ再利用性と拡張性を高く保つ事は難しく、考えた末の結果は最低限の再利用性と拡張性は保持するという所に落ち着きました。これが良いか悪いかで言えば、それはたぶん人それぞれでしょう。

あなたは eslint-plugin-scd を使うべきか？

もしあなたがコンポーネント設計を複数人で行う場合は、この記事で紹介している ESLint プラグインのようなコンポーネント設計を強制するESLint プラグインを使うべきであると思います。
なぜなら、人によってコンポーネント設計の基準は違っており、それが色々な人為的ミスにつながるからです。
もしそうでないなら、この記事で紹介している ESLint プラグインを使っても使わなくても大丈夫でしょう。

つまり、このプラグインを使うべき人は以下のような人たちだと思います。

• コンポーネント設計に自信が無い人
• コンポーネント設計に労力をかけたくない人
• 複数人でコンポーネント設計を行う必要がある人

あとがき

ここまでコンポーネント設計について語ってきましたが、正直説明するのが難しく、私の考えている事の一割も説明できてないように思えて、自分の説明力の無さに落胆していますが、あくまでESLint プラグインの紹介記事なので、プラグインの事だけでも知ってもらえたら幸いです。

コンポーネント設計の闇は、State とかキャッシュが入ってきた途端に一気に深くなりますよね ?
私はフロントエンドで一番難しいのがコンポーネント設計だと思ってますが、皆さんはどうでしょうか？そこまで難しくないでしょうか？
ここら辺の認識は、使うフレームワークなどによって結構変わってくるかもしれませんね。Anguler だと悩まないかも ?

またフロントエンドはデザインのところばかり注目されて、こういった設計があるって事を外部の人から理解してもらえない事が多々あるので、この記事で少しでもコンポーネント設計の難しさについて理解してもらえたらいいなと思っています。

最後に、今回作ったESLint プラグインですが、もしかしたら既存のプラグインで同じような事は出来るかもしれません。
ただ今回は調べるのが面倒くさかったのと、前々から ESLint プラグイン作ってみたかったので作ってみました。
色々と学べたのでいい機会だったと思います ?

もしSCDのルールが気に入らない人は.eslintrc.jsなどの設定ファイルで、ルールをカスタマイズして使うこともできますので、是非使ってみて下さい。

それでは ?

---

1. 拡張性という言葉はあまり良くないと思ってますが、他にいい言葉が思い浮かばなかったので拡張性としています。 ↩

javascriptには構造化の概念がサポートされているがその逆の分割のための構文はなかった。

オブジェクトの分割

まずは簡単な分割の例を見てみる。

let person = {//データ構造を作成
  name: 'Tanaka'
}
let {name} = person;//データ構造を分割

console.log(name);//Tanaka

まず、オブジェクトリテラルを使ってデータ構造を作成している。これによりプロパティを簡単な方法で指定できる。
sonogo
データ構造の分割をしている。nameプロパティを変数に取り出すための分割分が使用されている。

let person = {//データ構造を作成
  name: 'Tanaka',
  age:25
}
let {name,age} = person;//データ構造を分割

console.log(name);//Tanaka 25

上記では、オブジェクトwから抽出したいフィールドの名前を指定するとフィールドと同じマナエの変数にフィールド値を代入される。
ES5で同じことをするとこうなる。

let name=person.name;
let age=person.age;

別名を使用したい場合にはこうする。

let {name:firstName,age:yearOld}=person;

これによりfirstNameとyearOldにperson.name、person.ageの値が割り当てられる。
データ構造の構築時とまさに逆であるところがミソ。

データ構造の異なるレベルのデータの分割

の場合は入れ子に(ネスト)する。

let geoLocation = {
  "location": {
    "lat": 51.0,
    "lng": -0.1
  },
  "accuracy": 1200.4
}
let {
  location: {
    lat,
    lng
  },accuracy
} = geoLocation;
console.log(lat)//51
console.log(lng)//-0.1
console.log(accuracy)//1299.4
console.log(location)//undefined

location変数は作成されないことに注意。
このプロパティは調べただけ。

配列の分割

配列もオブジェクトと同様に逆の構文。

let coords=[51.0,-0.1];
let [lat,lng,]=coords;
console.log(lat);//51.0
console.log(lng);//-0.1

オブジェクトはそれらの値をキー(名前)で追跡するため、それらの値は同じキー/名前で抽出しなければならない。
配列は値のインデックスで追跡する。配列を分割するときは変数に割り当てる変数が何を分割するのかを指定する。

入れ子で分割

配列でも入れ子の分割ができる。

let location = ['str', [1234, 5678]];
let [moji, [suji, suji2]] = location;
console.log(moji) //str
console.log(suji) //1234
console.log(suji2) //5678

使う場面

使う場面として値の入れ替えがある。

if (stop < start) {
  //値を入れ替える  
  let tmp = start;
  start = stop;
  stop = tmp;
}

上の例だと入れ替えるのに一時的な変数を用意しているが、分割を使えばもっと単純になる。

if (stop < start) {
  //値を入れ替える  
  [start, stop] = [stop, start];
}

オブジェクトと配列の分割の組み合わせ

let res = {
  num: [51.0, -0.1]
};
let {
  num: [ar, ar2]
} = res;
console.log(ar, ar2);

上記ではオブジェクトと配列の分割を組み合わせている。これも入れ子の一種。

ここでもnumという変数は作成していない。作成したのはarとar2の2つである。

分割可能なデータ

オブジェクトの分割は配列を含め、任意のオブジェクトで使用できるが数字は変数名として使えないので、分割代入では別名にする。

const {
  0: a,
  1: b,
  length
} = ['foo', 'bar']
console.log(a)//foo
console.log(b)//bar
console.log(length)//2

配列の分割には以下のような用途もできる。

const [one, two, three, ] = 'abc';
console.log(one)//a
console.log(two)//b
console.log(three)//c

iterableプロトコルを実装しているオブジェクトはすべて配列の分割で分割できる。

まとめ

• 分割はデータ構造から値を出すためのシュガーシンタックス
• 分割はオブジェクトリテラルと配列リテラルを高文化する問の逆の構文でできる。
• オブジェクトの分割ではプロパティ名を使って値を指定する。
• 配列の分割は、インデックスを使って指定。
• 分割は入れ子も取り出せる

なぜin+配列を禁止するのか？

Pythonで

Python

>>> 0 in [1,2]
False
>>> 1 in [1,2]
True

となり、JavaScriptで

JavaScript

> 0 in [1,2]
true
> 1 in [1,2]
true

となるので、間違いやすい。

このルールの正しいコードの例は

JavaScript

> [1,2].includes(0)
false
> [1,2].includes(1)
true

となる。

ESLintにin+配列を禁止するルールがない。

ESLintのカスタムルールを作ってin+配列を禁止しよう。

禁止する方法

.eslintrc.js の rules に "no-in-array": "error" を追加。

rules フォルダーに no-in-array.js を作成。

動作確認

test.js

const k = [1, 2];

console.log(1 in [3, 4]); // エラー

for (const i in [5, 6]) // エラーなし
    for (const j in [7, 8]) // エラーなし
        console.log(i in k, j); // エラー

> eslint --rulesdir rules test.js

  4:13  error  in + array is a troublemaker                 no-in-array
  8:21  error  in + array is a troublemaker(variable init)  no-in-array

--fix にも対応した。

> eslint --rulesdir rules test.js --fix

test.js

const k = [1, 2];

console.log([3, 4].includes(1)); // エラーなし

for (const i in [5, 6]) // エラーなし
    for (const j in [7, 8]) // エラーなし
        console.log(k.includes(i), j); // エラーなし

for (const i in [5, 6])が文字列型で"0", "1"を返し[1, 2].includes("1")がfalseになることも間違いやすい。

参考にしたサイト

ESLint のカスタムルールを作ろう! (その1) - Qiita
書いて覚える ESLint ルールの作り方：キマリは通さない - Qiita
Working with Rules - ESLint - Pluggable JavaScript linter

おわりに

ESLintに追加されたら嬉しい。

はじめに

コーディングを行う際、ヘッダーのメニューにある下線をスクロール位置ごとに動かしたかったのですが、躓いてしまったため残したいと思います。
私はコーディング歴も浅く、手探りで実装したので、もしより良い方法があればご教授いただけると幸いです。

完成形

コード

下線が追従する基本的な形はこちらを参考にしました。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <header class="header">
    <nav id="navigation">
      <ul>
        <li class="current">
          <a href="#">content</a>
        </li>
        <li class="menu-2">
          <a href="#">second-content</a>
        </li>
        <li class="menu-3">
          <a href="#">3rd-content</a>
        </li>
        <li class="menu-4">
          <a href="#">4</a>
        </li>
      </ul>
      <span id="slide-line"></span>
    </nav>
  </header>
  <div class="contents">
    <div class="content" id="content1">ひとつめ</div>
    <div class="content" id="content2">ふたつめ</div>
    <div class="content" id="content3">みっつめ</div>
    <div class="content" id="content4">よっつめ</div>
  </div>
</body>

style.css

header{
  width: 100%;
  height: 30px;
  position: fixed;
}
ul li {
  display: inline-block;
}
a{
  display: inline-block;
  padding: 30px 20px;
  font-size:14px;
  text-decoration:none;
}
#navigation{
  position: relative;
}
#slide-line{
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color:#75C2FF;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.content{
  height: 700px;
  padding: 80px;
}
.content:nth-child(odd){
  background-color: #f5f5f5;
}

script.js

$(window).load(function(){
  $('nav span').css({
    width: $('nav .current').width(),
    left: $('nav .current').position().left
  });

  $(window).scroll(function () {
    let content2 = $('#content2').offset().top;
    let content3 = $('#content3').offset().top;
    let content4 = $('#content4').offset().top;
    if ($(this).scrollTop() < content2) {
      if ( ! $('header').hasClass("current1") ) {
        $('header').addClass("current1");
        $('header').removeClass("current2 current3 current4");
        $('nav span').animate({
          width: $('nav .current').width(),
          left: $('nav .current').position().left
        });
      }
    }else if ($(this).scrollTop() > content2 && $(this).scrollTop() < content3) {
      if ( ! $('header').hasClass("current2") ) {
        $('header').addClass("current2");
        $('header').removeClass("current1 current3 current4");
        $('nav span').animate({
          width: $('.menu-2').width(),
          left: $('.menu-2').position().left
        });
      }
    }else if ($(this).scrollTop() > content3 && $(this).scrollTop() < content4) {
      if ( ! $('header').hasClass("current3") ) {
        $('header').addClass("current3");
        $('header').removeClass("current1 current2 current4");
        $('nav span').animate({
          width: $('.menu-3').width(),
          left: $('.menu-3').position().left
        });
      }
    }else if ($(this).scrollTop() > content4) {
      if ( ! $('header').hasClass("current4") ) {
        $('header').addClass("current4");
        $('header').removeClass("current1 current2 current3");
        $('nav span').animate({
          width: $('.menu-4').width(),
          left: $('.menu-4').position().left
        });
      }
    }
  });
});

仕組み

まずメニューバーが動く仕組みについてですが、animateメソッドを使って横幅と位置を指定することで動きをつけています。
こちらの詳細は参考サイトにございますのでご覧ください。

let content2 = $('#content2').offset().top;
let content3 = $('#content3').offset().top;
let content4 = $('#content4').offset().top;
次にスクロールによる、スクロールをした時の区切りとなる要素の位置を上記で定義します。
以下のif文に関しての説明です。
現在のスクロール位置が特定の区切りの中（例えばcontent2の中）にいるか、かつheaderが特定のクラス（前の例えだとcontent2というクラス）を持っていないとメニューバーが動くという仕組みです。

悩んだこと

今回はheaderのクラスのつけ外しを行うことでうまく動かしているのですが、これをする前はうまくいっていませんでした。
console.logなどで確かめてみるとわかるのですが、scrollアクションは少しのスクロールで何回も発火するため、その度にanimateメソッドが読み込まれ非常に処理が重くなってしまいました。
そこで私は、animateメソッドが読み込まれるのをスクロール位置が切り替わった時のみにしたいと考え、クラスの有無を条件式としてあげることで重くなることを防ぐことができました。

おわりに

最後までご覧いただきありがとうございます。
この方法は初心者の私が考えたやり方のため、無理のある記述の可能性があります。
ぜひ有識の方がいらしたらご意見くださると幸いです。

【ゴール】

javascriptの変数、定数の違い

【メリット】

＊　javascript理解度向上

【コード】

変数（var , let）

＊中身を何回も更新できる

var

＊再宣言可能
＊再宣言の際に(var)は不要

hoge.js

var name = "太郎";

console.log(name);　// 太郎が出力


name = "次郎"；

console.log(name);　//次郎が出力

var name = "三郎"; //再宣言可能

let

＊同変数名は一度しか宣言できない

hoge.js

let name = "太郎";

console.log(name);  //太郎が出力

let name ="次郎"; //エラー出る...

定数

＊中身は一回だけ決めれる

const

hoge.js

 const name = "太郎";

 console.log(name); //太郎と出力

【合わせて読みたい】

■JavaScriptで書く「let,var,const」の違い・使い分け
https://techacademy.jp/magazine/14872

■ 【JavaScript】 js　繰り返し文　for / while
https://qiita.com/tanaka-yu3/items/942d9d4838ebe14be1c2

■ 【jQuery】初心者でもよく理解できたやつ
https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461

概要

先日に LINE チャンネルの友達登録や投稿情報を kintone に保管 で、LINEのチャンネル登録をして、友達登録や投稿情報を kintone に保管したり、AWS Lambda から返信できることまでは確認しました。
今回は、kintone から LINE チャンネルを友達登録した方に対して個別でメッセージを送る方法を試してみました。

kintone アプリの項目追加

先ずは、前回作成した LINE の友達登録や投稿情報を保管する kintone アプリに、LINE に送信するメッセージ用のフィールドを追加します。

フィールド名	タイプ	フィードコート・要素ID
lineユーザID	文字列（1行）	lineUserId
日時	日時	lineDateTime
lineタイプ	文字列（1行）	lineType
lineモード	文字列（1行）	lineMode
lineメッセージ	文字列（複数行）	lineMessage
（追加）lineに送るメッセージ	文字列（複数行）	sendMessage
（追加）	スペース	sendSubmit

スペースは「LINEにメッセージ送信」ボタンを表示するために追加しています。

kintone の JavaScript プログラム作成

kintone の 詳細画面を表示した時に「LINEにメッセージ送信」ボタンを表示し、クリックすると同時に LINE に、レコードのLINEユーザID宛てに「lineに送るメッセージ」フィールドの値を送る JavaScript プログラムを作成します。

LINE のユーザ宛てにメッセージを送るためには、Messaging API の https://api.line.me/v2/bot/message/push で以下のヘッダーで、JSON データを POST します。

・ヘッダー

let headers = {
    'Authorization': ' Bearer ' + '{' + token + '}',
    'Content-Type' : 'application/json'
};

token の値は、 LINE チャンネルの友達登録や投稿情報を kintone に保管 で説明したチャンネルアクセストークンです。

・POST データ

let json = {
    "to":userId,
    "messages":[
        {
            "type":"text",
            "text":message
        }
    ]
};

message にLINEユーザに連絡するテキスト文書をセットしておきます。

・CORS によるエラーに注意

kinton の JavaScript で外部APIを利用する場合は、XMLHttpRequest() は使えません。ついつい私も最初 XMLHttpRequest() で実装しようとして後になって気づくのですが、 kintone.proxy() を利用します。うっかり XMLHttpRequest() で実装しようものなら、エラーでデバッグ画面で以下を確認することになります。また、うっかりやってしました、、、（汗）

Access to XMLHttpRequest at 'https://api.line.me/v2/bot/message/push' from origin 'https://yukataoka.cybozu.com' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

・今回実装したコード例

今回は以下のように実装して、kintone から LINE にメッセージが送れるようになりました。
kintone.proxy()　は Promise でなくて良かったのですが、同期処理になっています。（汗）

sendLineMessage.js

(function() {
    "use strict";

    const Protocol   = "https://";
    const LineHost   = "api.line.me";
    const LinePath   = "/v2/bot/message/push";
    const LineToken  = "LINEのチャンネルアクセストークン";

    // レコード詳細表示時イベント
    var eventsDetailShow = [
        'app.record.detail.show',
        'mobile.app.record.detail.show'];
    kintone.events.on(eventsDetailShow, function(event) {
        let sendButton  = makeSendButton(LineToken, event.record.lineUserId.value, event.record.sendMessage.value);
        if(event.type !== 'mobile.app.record.detail.show') {
            kintone.app.record.getSpaceElement('sendSubmit').appendChild(sendButton);
        }else{
            kintone.mobile.app.record.getSpaceElement('sendSubmit').appendChild(sendButton);
        }
    });

    // LINEにメッセージ送信ボタン作成
    function makeSendButton(token, userId, message) {
        let submitButton = document.createElement('div');
        let sendButton       = document.createElement('button');
        sendButton.innerText = ' LINEにメッセージ送信 ';
        sendButton.className = "gaia-ui-actionmenu-save";
        sendButton.onclick   = function() {
            let json = {
                "to":userId,
                "messages":[
                    {
                        "type":"text",
                        "text":message
                    }
                ]
            };
            let url = Protocol + LineHost + LinePath;
            let res = funcPostLine(url, token, json);
        };
        submitButton.appendChild(sendButton);
        return submitButton;
    }

    // line にメッセージを送信
    function funcPostLine(url, token, json)
    {
        let headers = {
            'Authorization': ' Bearer ' + '{' + token + '}',
            'Content-Type' : 'application/json'
        };
        kintone.proxy(url, 'POST', headers, json).then(function(args) {
            if (args[1] === 200) {
                alert("LINEにメッセージを送信しました！");
                return true;
            }else{
                alert("LINEのメッセージ送信にエラーがありました！\n" + args[0]);
                return false;
            }
        }, function(error) {
            alert("LINEのメッセージ送信にエラーがありました！\n" + error);
            return false;
        });
    }   
})();

実行結果

kintone の詳細画面で「LINEにメッセージ送信」ボタンを押すと、即座に「LINEにメッセージを送信しました！」の alert() が表示され、LINEへのメッセージ送信を確認できました。

まとめ

先日の LINE チャンネルの友達登録や投稿情報を kintone に保管 から、今回の kintoe から LINE に投稿するまでで、以下を確認できました。

・LINE チャンネルを開設する
・LINE チャンネルの友達登録や投稿情報を kintone に保管
・LINE チャンネルの投稿に返信を送信
・kintone から LINE にメッセージを送信

特に kintone との連携の例が少なく相当な苦戦を予想していましたが、実際はわりと簡単に実装できました。実装のためのコストは以外とかからないと推測します。

ポイントとしては、チャンネルの友達登録時に LINE ユーザID を取得し、kintone で管理するアプリ(例えば顧客管理アプリ)のどう紐づけるかが鍵になりそうです。チャンネルの友達登録時や、その後でも kintone のアプリの情報と紐ずくしくみをどのように実装するかが、kintone と LINE を連携して活用するための鍵になりそうです。

参考情報

line 送信設定
https://developers.line.biz/ja/reference/messaging-api/#send-push-message
外部APIの実行
https://developer.cybozu.io/hc/ja/articles/202166320

Kinx ライブラリ - JIT ライブラリ

はじめに

「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」 でお届けしているスクリプト言語 Kinx。JIT コンパイルのためのライブラリを作ってみました。

• 参考
  • 最初の動機 ... スクリプト言語 KINX（ご紹介）
    • 個別記事へのリンクは全てここに集約してあります。
  • リポジトリ ... https://github.com/Kray-G/kinx
    • Pull Request 等お待ちしております。
      

JIT やりたいよね。今回は Kinx - native でも使っている SLJIT を使いやすくしようということで、ライブラリ化しました。SLJIT 自体、ドキュメントが少なくてソースから解読して使っているので、SLJIT そのものの使い方を備忘録的に書こうかとも思ったのだけど、今回は保留。どこかでやるかもしれない。

しかし、SLJIT をそのまま使うよりも勿論使いやすくなっているので、こっちのほうが良いと思う。ホスト言語もスクリプト なので、手軽に楽しめるでしょう。

どんな感じ?

先にどんな感じのプログラムになるか、サンプルを出しておきます。色々細かい話が続いてここまでたどり着いてくれなさそうなので。。。

using Jit;

var c = new Jit.Compiler();
var entry1 = c.enter();
    var jump0 = c.ge(Jit.S0, Jit.IMM(3));
    c.ret(Jit.S0);
    var l1 = c.label();
    c.sub(Jit.R0, Jit.S0, Jit.IMM(2));
    c.call(entry1);
    c.mov(Jit.S1, Jit.R0);
    c.sub(Jit.R0, Jit.S0, Jit.IMM(1));
    c.call(entry1);
    c.add(Jit.R0, Jit.R0, Jit.S1);
    c.ret(Jit.R0);

jump0.setLabel(l1);
var code = c.generate();

for (var i = 1; i <= 42; ++i) {
    var tmr = new SystemTimer();
    var r = code.run(i);
    System.println("[%8.3f] fib(%2d) = %d" % tmr.elapsed() % i % r);
}

Jit.Compiler オブジェクトを作って、enter で関数エントリを作り、色々レジスタをいじくりまわして ret するコードを書きます。で、実行するときは generate() して run()、となります。generate() して dump() とすると、アセンブル・リストを見ることもできます。

色々とばしたい方は サンプル へ Go！ → サンプルでは Ruby、Python、PyPy とのベンチマークもしてますよ。

SLJIT

そもそも SLJIT とは何か。

一言でいえば 抽象化アセンブラ で、一つの書き方で複数の環境をサポートできてしまうという、CPU ごとに異なるので作り直さなければならないというアセンブラの問題を解決してくれるライブラリです。現状サポートしているというプラットフォームは以下の通り。

• SLJIT のサポート・プラットフォーム
  • Intel-x86 32
  • AMD-x86 64
  • ARM 32 (ARM-v5, ARM-v7 and Thumb2 instruction sets)
  • ARM 64
  • PowerPC 32
  • PowerPC 64
  • MIPS 32 (III, R1)
  • MIPS 64 (III, R1)
  • SPARC 32

ただし、ここで紹介する Kinx 版 JIT ライブラリは 64bit しかサポートしていないこと、および x64 Windows と x64 Linux しか確認して（できて）いませんので、そこは悪しからずご了承ください。

公式? 説明文書

私が知る限り、参考になる文書は以下程度しか見つかりませんでした。

• https://zherczeg.github.io/sljit/
• http://ftp.jaist.ac.jp/pub/NetBSD/NetBSD-current/src/sys/external/bsd/sljit/dist/doc/tutorial/sljit_tutorial.html

参考にはなります。

GitHub のリポジトリは以下です。

• https://github.com/zherczeg/sljit

Jit

さて、Kinx ライブラリとしての JIT ライブラリ。C のまま使うより便利にはしてます。もちろん C のライブラリを使えばもっとより細かく制御できると思いますが、それなりのことはできます。

using Jit

Jit ライブラリは標準組み込みではないため、using ディレクティブを使用して明示的に読み込む。

using Jit;

Jit オブジェクト

Jit オブジェクトはパラメータ用のメソッドとコンパイラ・クラスが定義されている。

Jit パラメータ用メソッド

Jit のパラメータとして、即値、レジスタ、メモリアクセスの 3 種類がある。以下の形で利用する。

即値、メモリアクセス

即値、メモリアクセスは以下のメソッドで利用する。Jit.VAR() はローカル変数領域を使うための特別なメソッド。スタック領域にローカル変数領域が自動的に確保され、その領域を使う。

メソッド	備考
Jit.IMM(v)	64bit 整数、浮動小数点数どちらも同じ書き方。代入先のレジスタと合わせる。
Jit.VAR(n)	ローカル変数領域。1 変数 8 バイト固定。
Jit.MEM0(address)	address として即値を代入、ただし現在実アドレスをスクリプトから指定できないので、スクリプトからは使えない。
Jit.MEM1(r1, offset)	r1 に指定したレジスタをアドレスとみて、offset 位置（バイト単位）のメモリアドレスを示す。
Jit.MEM2(r1, r2, shift)	shift は 0 なら 1 バイト、1 なら 2 バイト、 2 なら 4 バイト、3 なら 8 バイトを示し、r1 + r2 * (shiftで示すバイト分) の位置のメモリアドレスを示す。

レジスタ

以下のレジスタを使用可能。関数内で使えるレジスタの数は自動的に計算され、関数（enter() で区切った範囲）ごとに変わる。

レジスタ	用途
Jit.R0 ～ Jit.R5	汎用レジスタ。一時的に利用。別関数呼び出し後に破棄される可能性あり。
Jit.S0 ～ Jit.S5	汎用レジスタ。別関数呼び出し後に破棄されない保証。
Jit.FR0 ～ Jit.FR5	浮動小数点レジスタ。一時的に利用。別関数呼び出し後に破棄される可能性あり。
Jit.FS0 ～ Jit.FS5	浮動小数点レジスタ。別関数呼び出し後に破棄されない保証。

尚、Floating Point 用のレジスタは FR/FS 合わせて最大で 6 個までなので、FR4 まで使用した場合、FS0 しか使えません。FR5 まで使うと FS* は全て使えません。以下のような感じですのでご注意を。

FR* レジスタ	FS* レジスタ
(使えない)	FS0, FS1, FS2, FS3, FS4, FS5
FR0	FS0, FS1, FS2, FS3, FS4
FR0, FR1	FS0, FS1, FS2, FS3
FR0, FR1, FR2	FS0, FS1, FS2
FR0, FR1, FR2, FR3	FS0, FS1
FR0, FR1, FR2, FR3, FR4	FS0
FR0, FR1, FR2, FR3, FR4, FR5	(使えない)

Jit コンパイラ

Jit 命令を作っていくためには Jit コンパイラ・オブジェクトを作成する。

var c = new Jit.Compiler();

Jit コンパイラには以下のメソッドがある。

Jit コンパイラ・メソッド	復帰値	概要
Jit.Compiler#label()	label	現在の場所にラベルを付加する。
Jit.Compiler#makeConst(reg, init)	ConstTarget	コード生成後に即値を設定するための仮定義コードを出力する。
Jit.Compiler#localp(dst, offset)		ローカル変数の実アドレスを取得するコードを出力する。dst に示したレジスタに格納される。offset はローカル変数番号。
Jit.Compiler#enter(argType)	label	関数の入り口を作成。引数タイプを指定できる（省略可）。
Jit.Compiler#fastEnter(reg)	label	関数の入り口を作成。ただし、余計なエピローグ、プロローグは出力せず、復帰アドレスを reg に保存する。
Jit.Compiler#ret(val)		Return コードを出力する。val を返す。val は浮動小数点数は FR0 レジスタ、それ以外は R0 レジスタで返却される。
Jit.Compiler#f2i(dst, op1)		double を int64_t にキャストするコードを出力する。dst は汎用レジスタ。op1 は浮動小数点レジスタ。
Jit.Compiler#i2f(dst, op1)		int64_t を double にキャストするコードを出力する。dst は浮動小数点レジスタ。op1 は汎用レジスタ。
Jit.Compiler#mov(dst, op1)		dst に op1 を代入するコードを出力する。浮動小数点とそれ以外の型は自動的に認識する。
Jit.Compiler#neg(dst, op1)		op1 の符号反転した結果を dst に格納するコードを出力する。
Jit.Compiler#clz(dst, op1)		op1 の先頭から 0 であるビットの数を数え、dst に格納するコードを出力する。
Jit.Compiler#add(dst, op1, op2)		op1 と op2 を加算した結果を dst に格納するコードを出力する。
Jit.Compiler#sub(dst, op1, op2)		op1 と op2 を減算した結果を dst に格納するコードを出力する。
Jit.Compiler#mul(dst, op1, op2)		op1 と op2 を乗算した結果を dst に格納するコードを出力する。
Jit.Compiler#div(dst, op1, op2)		浮動小数点数のみ、op1 と op2 を除算した結果を dst に格納するコードを出力する。
Jit.Compiler#div()		汎用レジスタで符号なしとして除算した値を R0 レジスタに格納するコードを出力する。
Jit.Compiler#sdiv()		汎用レジスタで符号付きとして除算した値を R0 レジスタに格納するコードを出力する。
Jit.Compiler#divmod()		汎用レジスタで符号なしとして除算した値を R0 レジスタに格納し、余りを R1 レジスタに格納するコードを出力する。
Jit.Compiler#sdivmod()		汎用レジスタで符号付きとして除算した値を R0 レジスタに格納し、余りを R1 レジスタに格納するコードを出力する。
Jit.Compiler#not(dst, op1)		op1 のビット反転した結果を dst に格納するコードを出力する。
Jit.Compiler#and(dst, op1, op2)		op1 と op2 でビット AND した値を dst に格納するコードを出力する。
Jit.Compiler#or(dst, op1, op2)		op1 と op2 でビット OR した値を dst に格納するコードを出力する。
Jit.Compiler#xor(dst, op1, op2)		op1 と op2 でビット XOR した値を dst に格納するコードを出力する。
Jit.Compiler#shl(dst, op1, op2)		op1 を op2 ビット分、左シフトした値を dst に格納するコードを出力する。
Jit.Compiler#lshr(dst, op1, op2)		op1 を op2 ビット分、論理右シフトした値を dst に格納するコードを出力する。
Jit.Compiler#ashr(dst, op1, op2)		op1 を op2 ビット分、算術右シフトした値を dst に格納するコードを出力する。
Jit.Compiler#call(label)	JumpTarget	enter() 定義した関数呼び出しを行うコードを出力する。後で呼び出し先を設定する JumpTarget を返す。label を指定した場合は後から設定する必要はない。
Jit.Compiler#fastCall(label)	JumpTarget	fastEnter() で定義した関数呼び出しを行うコードを出力する。後で呼び出し先を設定する JumpTarget を返す。
Jit.Compiler#jmp(label)	JumpTarget	jmp コマンドを出力する。label を指定した場合は後から設定する必要はない。
Jit.Compiler#ijmp(dst)	JumpTarget	jmp コマンドを出力する。dst はアドレスを示すレジスタ、または即値。
Jit.Compiler#eq(op1, op2)	JumpTarget	op1 == op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#neq(op1, op2)	JumpTarget	op1 != op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#lt(op1, op2)	JumpTarget	符号なしとして op1 < op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#le(op1, op2)	JumpTarget	符号なしとして op1 <= op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#gt(op1, op2)	JumpTarget	符号なしとして op1 > op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#ge(op1, op2)	JumpTarget	符号なしとして op1 >= op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#slt(op1, op2)	JumpTarget	符号付きとして op1 < op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#sle(op1, op2)	JumpTarget	符号付きとして op1 <= op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#sgt(op1, op2)	JumpTarget	符号付きとして op1 > op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#sge(op1, op2)	JumpTarget	符号付きとして op1 >= op2 を確認するコードを出力。条件が真となった場合のジャンプ先を指定する JumpTarget を返す。
Jit.Compiler#generate()	JitCode	コード生成を行う。

Jit.Compiler#enter(argType)

関数の入り口を enter メソッドで定義するが、argType を指定しなかった場合は Jit.ArgType.SW_SW_SW を指定されたものとみなす。引数は 3 つまで（仕様）で、それぞれの型を指定する。

• SW ... Signed Word (64bit)
• UW ... Unsigned Word (64bit)
• FP ... Floating Point (64bit)

実際問題としては受け取るレジスタのビット列が同じになるため SW と UW は変わらないが、もしかしたら将来何か違いを出すかもしれない。尚、最後の引数から SW は省略可能。なので、以下は全部同じ意味となる。

• Jit.ArgType.SW_SW_SW
• Jit.ArgType.SW_SW
• Jit.ArgType.SW

引数で渡されるレジスタは決まっており、以下のようになっている。

• 呼び出し側

型	第 1 引数	第 2 引数	第 3 引数
Integer	Jit.R0	Jit.R1	Jit.R2
Double	Jit.FR0	Jit.FR1	Jit.FR2

• 受け取り側

型	第 1 引数	第 2 引数	第 3 引数
Integer	Jit.S0	Jit.S1	Jit.S2
Double	Jit.FS0	Jit.FS1	Jit.FS2

呼び出し側でセットするレジスタと、受け取り側で受け取るレジスタが異なることに注意。

ConstTarget

ラベルアドレスを setLabel() で設定する。
ラベルのアドレスを即値としてレジスタやメモリに格納したいときに使う。あまり使う機会は無いか。ジャンプテーブルの代わりになるかとも思うが、テーブルの作り方がイマイチうまい仕組みを用意できていないので。

ちなみに、即値を setValue() で設定することもできるが、普通に Jit.IMM(100) とか、浮動小数点数でも Jit.IMM(0.1) とかできるようにしたので、こちらを使う意味はあまりない。

仮にジャンプテーブルに使うとした際の例は後述。

JumpTarget

ジャンプ先、もしくは関数コールのためのアドレスを setLabel() で設定する。

例えば、比較した結果で分岐させる場合、以下のようになる。

var c = new Jit.Compiler();
// 関数のエントリポイント。
c.enter();
// S0レジスタ値 >= 3
var jump0 = c.ge(Jit.S0, Jit.IMM(3));
... // 条件が偽のときのコード
var jump1 = c.jmp();
var label0 = c.label();
... // 条件が真のときのコード
var label1 = c.label();
...

jump0.setLabel(label0);
jump1.setLabel(label1);

JitCode

generate() メソッドでコード生成に成功すると、JitCode オブジェクト返る。JitCode オブジェクトのメソッドは以下の通り。尚、引数は 3 つまでしか指定できないことに注意（仕様）。抽象化アセンブラなので、様々なアーキテクチャに対応するために必要な仕様です。必要ならローカル変数領域を確保して、その先頭アドレスを渡すなどの工夫が必要。サンプルは後述。

メソッド	概要
JitCode#run(a1, a2, a3)	復帰値を Integer として受け取る。
JitCode#frun(a1, a2, a3)	復帰値を Double として受け取る。
JitCode#dump()	ジェネレートされたアセンブル・リストを出力する。

サンプル

フィボナッチ数列（再帰版）

では、恒例のフィボナッチ数列を算出する再帰版のコードを書いてみましょう。サンプルとして最初に提示したものそのままです。

var c = new Jit.Compiler();
var entry1 = c.enter();
    var jump0 = c.ge(Jit.S0, Jit.IMM(3));
    c.ret(Jit.S0);
    var l1 = c.label();
    c.sub(Jit.R0, Jit.S0, Jit.IMM(2));
    c.call(entry1);
    c.mov(Jit.S1, Jit.R0);
    c.sub(Jit.R0, Jit.S0, Jit.IMM(1));
    c.call(entry1);
    c.add(Jit.R0, Jit.R0, Jit.S1);
    c.ret(Jit.R0);

jump0.setLabel(l1);
var code = c.generate();

for (var i = 1; i <= 42; ++i) {
    var tmr = new SystemTimer();
    var r = code.run(i);
    System.println("[%8.3f] fib(%2d) = %d" % tmr.elapsed() % i % r);
}

結果は以下の通り。

[   0.000] fib( 1) = 1
[   0.000] fib( 2) = 2
[   0.000] fib( 3) = 3
[   0.000] fib( 4) = 5
[   0.000] fib( 5) = 8
[   0.000] fib( 6) = 13
[   0.000] fib( 7) = 21
[   0.000] fib( 8) = 34
[   0.000] fib( 9) = 55
[   0.000] fib(10) = 89
[   0.000] fib(11) = 144
[   0.000] fib(12) = 233
[   0.000] fib(13) = 377
[   0.000] fib(14) = 610
[   0.000] fib(15) = 987
[   0.000] fib(16) = 1597
[   0.000] fib(17) = 2584
[   0.000] fib(18) = 4181
[   0.000] fib(19) = 6765
[   0.000] fib(20) = 10946
[   0.000] fib(21) = 17711
[   0.000] fib(22) = 28657
[   0.000] fib(23) = 46368
[   0.000] fib(24) = 75025
[   0.000] fib(25) = 121393
[   0.001] fib(26) = 196418
[   0.001] fib(27) = 317811
[   0.001] fib(28) = 514229
[   0.002] fib(29) = 832040
[   0.002] fib(30) = 1346269
[   0.004] fib(31) = 2178309
[   0.006] fib(32) = 3524578
[   0.009] fib(33) = 5702887
[   0.016] fib(34) = 9227465
[   0.035] fib(35) = 14930352
[   0.042] fib(36) = 24157817
[   0.066] fib(37) = 39088169
[   0.119] fib(38) = 63245986
[   0.181] fib(39) = 102334155
[   0.289] fib(40) = 165580141
[   0.476] fib(41) = 267914296
[   0.773] fib(42) = 433494437

ちなみに、fib(42) の結果を Ruby, Python, PyPy, PHP, HHVM, Kinx, Kinx(native) で計測して比較してみた。JIT ライブラリ版は上記は run() の時間しか計ってないので、スクリプト解釈と JIT コード生成まで含め、全て公平にプロセス全体の user time で算出。

速い順に並べると以下の通り。やはり JIT で直接ネイティブ・コードを出力させると際立って速い。何気に Kinx(native) が PyPy より速かったのは嬉しい誤算。HHVM とどっこいくらい。スクリプトでは Ruby 速くなったなー。1.8 時代とか知ってると感慨深いですねー。

言語	版数	User 時間
Kinx(Jit-Lib)	0.10.0	0.828
HHVM	3.21.0	2.227
Kinx(native)	0.10.0	2.250
PyPy	5.10.0	3.313
PHP	7.2.24	11.422
Ruby	2.5.1p57	14.877
Kinx	0.10.0	27.478
Python	2.7.15+	41.125

尚、先の JIT ライブラリでジェネレートされたアセンブル・リストはこちら。Windows と Linux で違うのだが、今回は Linux。

       0:   53                                          push rbx
       1:   41 57                                       push r15
       3:   41 56                                       push r14
       5:   48 8b df                                    mov rbx, rdi
       8:   4c 8b fe                                    mov r15, rsi
       b:   4c 8b f2                                    mov r14, rdx
       e:   48 83 ec 10                                 sub rsp, 0x10
      12:   48 83 fb 03                                 cmp rbx, 0x3
      16:   73 0d                                       jae 0x25
      18:   48 89 d8                                    mov rax, rbx
      1b:   48 83 c4 10                                 add rsp, 0x10
      1f:   41 5e                                       pop r14
      21:   41 5f                                       pop r15
      23:   5b                                          pop rbx
      24:   c3                                          ret
      25:   48 8d 43 fe                                 lea rax, [rbx-0x2]
      29:   48 89 fa                                    mov rdx, rdi
      2c:   48 89 c7                                    mov rdi, rax
      2f:   e8 cc ff ff ff                              call 0x0
      34:   49 89 c7                                    mov r15, rax
      37:   48 8d 43 ff                                 lea rax, [rbx-0x1]
      3b:   48 89 fa                                    mov rdx, rdi
      3e:   48 89 c7                                    mov rdi, rax
      41:   e8 ba ff ff ff                              call 0x0
      46:   49 03 c7                                    add rax, r15
      49:   48 83 c4 10                                 add rsp, 0x10
      4d:   41 5e                                       pop r14
      4f:   41 5f                                       pop r15
      51:   5b                                          pop rbx
      52:   c3                                          ret

Const の例

Const の例として、あえて書くならこんな感じ。ローカル変数にジャンプテーブルを作っているので、毎回テーブルを作り直していてイマイチ。テーブルだけ作成してアドレスを渡せるようなインターフェースを別途用意すれば解決しそうではある（やるかも）。

var c = new Jit.Compiler();
c.enter();
    c.mov(Jit.R1, Jit.IMM(-1));
    var jump0 = c.slt(Jit.S0, Jit.IMM(0));
    var jump1 = c.sgt(Jit.S0, Jit.IMM(3));
    var const0 = c.makeConst(Jit.VAR(0));
    var const1 = c.makeConst(Jit.VAR(1));
    var const2 = c.makeConst(Jit.VAR(2));
    var const3 = c.makeConst(Jit.VAR(3));
    // ローカル変数のアドレスを S0 レジスタ（第一引数）のオフセットで取得し R0 レジスタに格納。
    c.localp(Jit.R0, Jit.S0);
    // ローカル変数の値自体を取得。
    c.mov(Jit.R0, Jit.MEM1(Jit.R0));
    // ローカル変数の中身をアドレスと見立ててジャンプ。
    c.ijmp(Jit.R0);
    var l0 = c.label();
    c.mov(Jit.R1, Jit.IMM(102));
    c.ret(Jit.R1);
    var l1 = c.label();
    c.mov(Jit.R1, Jit.IMM(103));
    c.ret(Jit.R1);
    var l2 = c.label();
    c.mov(Jit.R1, Jit.IMM(104));
    c.ret(Jit.R1);
    var l3 = c.label();
    c.mov(Jit.R1, Jit.IMM(105));
    var l4 = c.label();
    c.ret(Jit.R1);

// ジャンプアドレスはコード生成前にセットする。
jump0.setLabel(l4);
jump1.setLabel(l4);

var code = c.generate();
// const 値はコード生成後にセットする。
const0.setLabel(l0);
const1.setLabel(l1);
const2.setLabel(l2);
const3.setLabel(l3);

for (var i = -1; i < 5; ++i) {
    var r = code.run(i);
    System.println(r);
}

結果。

-1
102
103
104
105
-1

コード出力はこんな感じ。こちらは試しに Windows 版で出してみた。

       0:   53                                          push rbx
       1:   56                                          push rsi
       2:   57                                          push rdi
       3:   48 8b d9                                    mov rbx, rcx
       6:   48 8b f2                                    mov rsi, rdx
       9:   49 8b f8                                    mov rdi, r8
       c:   4c 8b 4c 24 b0                              mov r9, [rsp-0x50]
      11:   48 83 ec 50                                 sub rsp, 0x50
      15:   48 c7 c2 ff ff ff ff                        mov rdx, 0xffffffffffffffff
      1c:   48 83 fb 00                                 cmp rbx, 0x0
      20:   0f 8c 94 00 00 00                           jl 0xba
      26:   48 83 fb 03                                 cmp rbx, 0x3
      2a:   0f 8f 8a 00 00 00                           jg 0xba
      30:   49 b9 95 ff 57 61 89 01 00 00               mov r9, 0x1896157ff95
      3a:   4c 89 4c 24 20                              mov [rsp+0x20], r9
      3f:   49 b9 a7 ff 57 61 89 01 00 00               mov r9, 0x1896157ffa7
      49:   4c 89 4c 24 28                              mov [rsp+0x28], r9
      4e:   49 b9 b9 ff 57 61 89 01 00 00               mov r9, 0x1896157ffb9
      58:   4c 89 4c 24 30                              mov [rsp+0x30], r9
      5d:   49 b9 cb ff 57 61 89 01 00 00               mov r9, 0x1896157ffcb
      67:   4c 89 4c 24 38                              mov [rsp+0x38], r9
      6c:   48 8d 44 24 20                              lea rax, [rsp+0x20]
      71:   48 6b db 08                                 imul rbx, rbx, 0x8
      75:   48 03 c3                                    add rax, rbx
      78:   48 8b 00                                    mov rax, [rax]
      7b:   ff e0                                       jmp rax
      7d:   48 c7 c2 66 00 00 00                        mov rdx, 0x66
      84:   48 89 d0                                    mov rax, rdx
      87:   48 83 c4 50                                 add rsp, 0x50
      8b:   5f                                          pop rdi
      8c:   5e                                          pop rsi
      8d:   5b                                          pop rbx
      8e:   c3                                          ret
      8f:   48 c7 c2 67 00 00 00                        mov rdx, 0x67
      96:   48 89 d0                                    mov rax, rdx
      99:   48 83 c4 50                                 add rsp, 0x50
      9d:   5f                                          pop rdi
      9e:   5e                                          pop rsi
      9f:   5b                                          pop rbx
      a0:   c3                                          ret
      a1:   48 c7 c2 68 00 00 00                        mov rdx, 0x68
      a8:   48 89 d0                                    mov rax, rdx
      ab:   48 83 c4 50                                 add rsp, 0x50
      af:   5f                                          pop rdi
      b0:   5e                                          pop rsi
      b1:   5b                                          pop rbx
      b2:   c3                                          ret
      b3:   48 c7 c2 69 00 00 00                        mov rdx, 0x69
      ba:   48 89 d0                                    mov rax, rdx
      bd:   48 83 c4 50                                 add rsp, 0x50
      c1:   5f                                          pop rdi
      c2:   5e                                          pop rsi
      c3:   5b                                          pop rbx
      c4:   c3                                          ret

7b 行目の jmp rax がポイント。テーブルを静的に定義できるようになればジャンプテーブルとして機能するようになるかと（今は簡単にできる方法が無い...）。

4 つ以上の引数の例

ちょっと面倒くさいが、4 つ以上引数を渡したい場合は、ローカル変数領域に値を格納し、そのアドレス（ポインタ）を引数として渡す。以下の例では、最初に引数をローカル変数領域にセットするためのフック関数を経由させている。ちなみに、ローカル変数は全て 8 バイトで確保されるため、直接 Jit.MEM1() などでアクセスする場合のオフセットは 8 の倍数でないと合わないので注意。

var c = new Jit.Compiler();
var entry1 = c.enter();
    c.mov(Jit.VAR(0), Jit.S0);
    c.mov(Jit.VAR(1), Jit.IMM(3));
    c.mov(Jit.VAR(2), Jit.IMM(2));
    c.mov(Jit.VAR(3), Jit.IMM(1));
    c.localp(Jit.R0);
    var call1 = c.call();
    c.ret(Jit.R0);
var entry2 = c.enter();
    c.mov(Jit.R1, Jit.S0);
    c.mov(Jit.S0, Jit.MEM1(Jit.R1, 0));
    var jump0 = c.ge(Jit.S0, Jit.MEM1(Jit.R1, 8));
    c.ret(Jit.S0);
    var l1 = c.label();
    c.sub(Jit.R3, Jit.S0, Jit.MEM1(Jit.R1, 16));
    c.mov(Jit.VAR(0), Jit.R3);
    c.mov(Jit.VAR(1), Jit.IMM(3));
    c.mov(Jit.VAR(2), Jit.IMM(2));
    c.mov(Jit.VAR(3), Jit.IMM(1));
    c.localp(Jit.R0);
    c.call(entry2);
    c.mov(Jit.S1, Jit.R0);
    c.sub(Jit.R3, Jit.S0, Jit.MEM1(Jit.R1, 24));
    c.mov(Jit.VAR(0), Jit.R3);
    c.mov(Jit.VAR(1), Jit.IMM(3));
    c.mov(Jit.VAR(2), Jit.IMM(2));
    c.mov(Jit.VAR(3), Jit.IMM(1));
    c.localp(Jit.R0);
    c.call(entry2);
    c.add(Jit.R0, Jit.R0, Jit.S1);
    c.ret(Jit.R0);

jump0.setLabel(l1);
call1.setLabel(entry2);
var code = c.generate();

for (var i = 1; i <= 42; ++i) {
    var tmr = new SystemTimer();
    var r = code.run(i);
    System.println("[%8.3f] fib(%2d) = %d" % tmr.elapsed() % i % r);
}

出力はさっきと同じ。

Double の引数と復帰値

Double 紹介していないのでそれも。こちらもフィボナッチでいきましょう。しかし、俺はフィボナッチ大好きだな。気づかなかったけど。0.1 刻みバージョンです。

var c = new Jit.Compiler();
var entry1 = c.enter(Jit.ArgType.FP);
    c.mov(Jit.FR0, Jit.IMM(0.3));
    var jump0 = c.ge(Jit.FS0, Jit.FR0);
    c.ret(Jit.FS0);
    var l1 = c.label();
    c.mov(Jit.FR0, Jit.IMM(0.2));
    c.sub(Jit.FR0, Jit.FS0, Jit.FR0);
    c.call(entry1);
    c.mov(Jit.FS1, Jit.FR0);
    c.mov(Jit.FR0, Jit.IMM(0.1));
    c.sub(Jit.FR0, Jit.FS0, Jit.FR0);
    c.call(entry1);
    c.add(Jit.FR0, Jit.FR0, Jit.FS1);
    c.ret(Jit.FR0);

jump0.setLabel(l1);
var code = c.generate();

for (var i = 0.1; i < 3.5; i += 0.1) {
    var tmr = new SystemTimer();
    var r = code.frun(i);
    System.println("[%8.3f] fib(%3.1f) = %.1f" % tmr.elapsed() % i % r);
}

浮動小数点数の即値は直接比較メソッドで使えるようにしていないので（すればいいんだけど）一旦レジスタに格納して使う必要がある。

frun() することで Double 値を受け取れる。結果は以下の通り。

[   0.000] fib(0.1) = 0.1
[   0.000] fib(0.2) = 0.2
[   0.000] fib(0.3) = 0.3
[   0.000] fib(0.4) = 0.5
[   0.000] fib(0.5) = 0.8
[   0.000] fib(0.6) = 1.3
[   0.000] fib(0.7) = 2.1
[   0.000] fib(0.8) = 3.4
[   0.000] fib(0.9) = 5.5
[   0.000] fib(1.0) = 8.9
[   0.000] fib(1.1) = 14.4
[   0.000] fib(1.2) = 23.3
[   0.000] fib(1.3) = 37.7
[   0.000] fib(1.4) = 61.0
[   0.000] fib(1.5) = 98.7
[   0.000] fib(1.6) = 159.7
[   0.000] fib(1.7) = 258.4
[   0.000] fib(1.8) = 418.1
[   0.000] fib(1.9) = 676.5
[   0.000] fib(2.0) = 1094.6
[   0.000] fib(2.1) = 1771.1
[   0.000] fib(2.2) = 2865.7
[   0.000] fib(2.3) = 4636.8
[   0.000] fib(2.4) = 7502.5
[   0.000] fib(2.5) = 12139.3
[   0.001] fib(2.6) = 19641.8
[   0.001] fib(2.7) = 31781.1
[   0.002] fib(2.8) = 51422.9
[   0.003] fib(2.9) = 83204.0
[   0.004] fib(3.0) = 134626.9
[   0.006] fib(3.1) = 217830.9
[   0.015] fib(3.2) = 352457.8
[   0.020] fib(3.3) = 570288.7
[   0.027] fib(3.4) = 922746.5

出力コードは以下の通り。これも Windows 版。浮動小数点数を引き渡すために、最初に簡単なフック関数がある。SLJIT は関数のエントリポイントでの引数で浮動小数点数を指定できないので、こういう形で回避している。

そういう意味でも、SLJIT を直接使うよりこっちを使うほうが色々面倒見てくれて良い。ローカル変数領域で必要なサイズを自動的に計算したり、非破壊レジスタのための一時保存コードなども必要な数行うように自動で計算もさせているので。

       0:   53                                          push rbx
       1:   56                                          push rsi
       2:   57                                          push rdi
       3:   48 8b d9                                    mov rbx, rcx
       6:   48 8b f2                                    mov rsi, rdx
       9:   49 8b f8                                    mov rdi, r8
       c:   4c 8b 4c 24 d0                              mov r9, [rsp-0x30]
      11:   48 83 ec 30                                 sub rsp, 0x30
      15:   0f 29 74 24 20                              movaps [rsp+0x20], xmm6
      1a:   f2 0f 10 03                                 movsd xmm0, qword [rbx]
      1e:   48 89 f2                                    mov rdx, rsi
      21:   49 89 f8                                    mov r8, rdi
      24:   48 89 c1                                    mov rcx, rax
      27:   e8 0d 00 00 00                              call 0x39
      2c:   0f 28 74 24 20                              movaps xmm6, [rsp+0x20]
      31:   48 83 c4 30                                 add rsp, 0x30
      35:   5f                                          pop rdi
      36:   5e                                          pop rsi
      37:   5b                                          pop rbx
      38:   c3                                          ret
      39:   53                                          push rbx
      3a:   56                                          push rsi
      3b:   57                                          push rdi
      3c:   48 8b d9                                    mov rbx, rcx
      3f:   48 8b f2                                    mov rsi, rdx
      42:   49 8b f8                                    mov rdi, r8
      45:   4c 8b 4c 24 b0                              mov r9, [rsp-0x50]
      4a:   48 83 ec 50                                 sub rsp, 0x50
      4e:   0f 29 74 24 20                              movaps [rsp+0x20], xmm6
      53:   f2 0f 11 6c 24 38                           movsd [rsp+0x38], xmm5
      59:   f2 0f 10 f0                                 movsd xmm6, xmm0
      5d:   49 b9 33 33 33 33 33 33 d3 3f               mov r9, 0x3fd3333333333333
      67:   4c 89 4c 24 40                              mov [rsp+0x40], r9
      6c:   f2 0f 10 44 24 40                           movsd xmm0, qword [rsp+0x40]
      72:   66 0f 2e f0                                 ucomisd xmm6, xmm0
      76:   73 17                                       jae 0x8f
      78:   f2 0f 10 c6                                 movsd xmm0, xmm6
      7c:   f2 0f 10 6c 24 38                           movsd xmm5, qword [rsp+0x38]
      82:   0f 28 74 24 20                              movaps xmm6, [rsp+0x20]
      87:   48 83 c4 50                                 add rsp, 0x50
      8b:   5f                                          pop rdi
      8c:   5e                                          pop rsi
      8d:   5b                                          pop rbx
      8e:   c3                                          ret
      8f:   49 b9 9a 99 99 99 99 99 c9 3f               mov r9, 0x3fc999999999999a
      99:   4c 89 4c 24 40                              mov [rsp+0x40], r9
      9e:   f2 0f 10 44 24 40                           movsd xmm0, qword [rsp+0x40]
      a4:   f2 0f 10 e6                                 movsd xmm4, xmm6
      a8:   f2 0f 5c e0                                 subsd xmm4, xmm0
      ac:   f2 0f 11 e0                                 movsd xmm0, xmm4
      b0:   48 89 c1                                    mov rcx, rax
      b3:   e8 81 ff ff ff                              call 0x39
      b8:   f2 0f 10 e8                                 movsd xmm5, xmm0
      bc:   49 b9 9a 99 99 99 99 99 b9 3f               mov r9, 0x3fb999999999999a
      c6:   4c 89 4c 24 40                              mov [rsp+0x40], r9
      cb:   f2 0f 10 44 24 40                           movsd xmm0, qword [rsp+0x40]
      d1:   f2 0f 10 e6                                 movsd xmm4, xmm6
      d5:   f2 0f 5c e0                                 subsd xmm4, xmm0
      d9:   f2 0f 11 e0                                 movsd xmm0, xmm4
      dd:   48 89 c1                                    mov rcx, rax
      e0:   e8 54 ff ff ff                              call 0x39
      e5:   f2 0f 58 c5                                 addsd xmm0, xmm5
      e9:   f2 0f 10 6c 24 38                           movsd xmm5, qword [rsp+0x38]
      ef:   0f 28 74 24 20                              movaps xmm6, [rsp+0x20]
      f4:   48 83 c4 50                                 add rsp, 0x50
      f8:   5f                                          pop rdi
      f9:   5e                                          pop rsi
      fa:   5b                                          pop rbx
      fb:   c3                                          ret

おわりに

JIT 面白いですね。これでパーサ・コンビネータとか実装して組み合わせたらたら、ちょっとした JIT 付き言語処理系が作れますね。そういう道を目指してもいいかも。

おそらく想定する使い方としては次の 2 通りでしょうか。

1. Kinx のライブラリ作成の際に数値計算等の範囲で JIT 化し、高速化する。
2. DSL（ドメイン固有言語）やオレオレ言語のホストとなり、バックエンドの出力に使う。

ではまた。

はじめに

※ Docker入門者の学習記事です！

Deno が盛り上がって来ているように見えます。?

興味をそそられたので、学習も兼ねてさっそくDockerでコンテナ化してみました。

ゴール

• Dockerfileを自作して、イメージを作ってみる
• コンテナにDenoをインストールして、触れる環境を作る
• Denoの標準APIを使用して、Webサーバーを立ち上げる

Dockerfileを作成

コンテナイメージの元となるDockerfileを作成します。

最終的には、以下のようなものが出来上がりました。

FROM debian:stable-slim

WORKDIR /var/www/html

RUN apt-get -qq update \
  && apt-get -qq -y install curl zip unzip \
  && curl -fsSL https://deno.land/x/install/install.sh | sh \
  && apt-get -qq remove curl zip unzip \
  && apt-get -qq remove --purge -y curl zip unzip \
  && apt-get -qq -y autoremove \
  && apt-get -qq clean \
  && echo 'export DENO_INSTALL="/root/.deno"' >> ~/.bash_profile \
  && echo 'export PATH="$DENO_INSTALL/bin:$PATH"' >> ~/.bash_profile

CMD ["/bin/bash", "-c", "source ~/.bash_profile && bash"]

Dockerfileの内容

基本設定

元となるOSイメージ: 今回は軽量なdebian-slimを選択

FROM debian:stable-slim

今回はWebサーバーを起動させるので、/var/www/htmlを作業ディレクトリに指定してみました。

WORKDIR /var/www/html

Denoのインストール

基本的には、Deno公式のやり方と同じです。

まずは、Denoのインストールと、シェルスクリプトの実行に必要なcurl zip unzipをインストールします。

RUN apt-get -qq -y install curl zip unzip

Deno公式のやり方と同じようにインストールコマンドを実行。

RUN curl -fsSL https://deno.land/x/install/install.sh | sh

あとしまつ

不要なファイルを削除します。

—purgeオプションを使用すると設定ファイルごとすべて削除します。再び使わないようなパッケージに使用。

RUN apt-get -qq remove --purge -y curl zip unzip

不要になった依存パッケージまで削除

RUN apt-get -qq -y autoremove

パスを通す

denoコマンドを使用するために、パスを通してやる必要があります。

RUN echo 'export DENO_INSTALL="/root/.deno"' >> ~/.bash_profile \
  && echo 'export PATH="$DENO_INSTALL/bin:$PATH"' >> ~/.bash_profile

たった今変更したプロファイルを、bashに適用します。

CMDにはコンテナ起動直後に実行されるコマンドを記述します。

コンテナ起動後も引き続きbashを使用するので、最後に&& bashを引っ付けておきました。

CMD ["/bin/bash", "-c", "source ~/.bash_profile && bash"]

イメージのビルド

-tオプションをつけることで、名前をつけてイメージをビルドします。今回はdeno-dockerと名付けました。

Dockerfileを作ったディレクトリで、以下のコマンドを実行します。

docker build ./ -t deno-docker

コンテナの起動

以下のコマンドで、コンテナを起動します。

ちょっと長いですが...

docker container run -it --rm -p 8080:8080 --mount src=`pwd`,target=/var/www/html,type=bind --disable-content-trust deno-docker

１行づつコメントを以下につけました。

docker container run \ # コンテナ起動
-it \ # コンテナに入って標準入力を待ち受ける
-p 8080:8080 \ # ポートの指定（ホストのポート：コンテナのポート）
--rm \ # コンテナを停止したら自動でコンテナ廃棄する
--mount src=`pwd`,target=/var/www/html,type=bind\ # バインドマウント
--disable-content-trust\ # 証明書のないイメージを信頼する
deno-docker # 先ほど作成したイメージ

DenoでWebサーバーを立ち上げる

コチラも公式チュートリアルのまんまです。

詳しい解説は、公式から確認できます。

helloDeno.ts

import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

const s = serve({ port: 8080 }); // さっきコンテナに指定したポート
console.log("http://localhost:8080/");

for await (const req of s) {
  req.respond({ body: "<h1>Hello Deno</h1>\n" });
}

• Denoは標準でTypescriptをサポートしています！ 面倒な設定ともオサラバ？✋

• asyncなしで、awaitが使用可能です！

denoコマンドで実行する

先ほどバインドマウントしたディレクトリに、Typescriptファイル（今回はhelloDeno.ts）を保存し、
以下のコマンドを実行します。

deno run --allow-net helloDeno.ts

Denoは標準でファイル、ネットワーク、環境変数等にアクセスすることができないセキュアな設定になっています。

ネットワークを許可するには--allow-netオプションを付与して実行します。

見事、Webサーバーが起動できました！

まとめ

• Dockerfileを自作して、イメージを作ることができた
• コンテナにDenoをインストールして、（少しだけど）Denoプログラムを書けた
• Denoの標準APIを使用して、Webサーバーを立ち上げた

参考

• https://deno.land/
• https://future-architect.github.io/articles/20200612/
• https://dev.to/francescoxx/docker-deno-containerize-a-deno-hello-world-server-1ha1
• https://qiita.com/shisama/items/d2b802ca2afaab2c359a
• https://tech-lab.sios.jp/archives/18811

majidaiとは

majidaiとは、nodejs用のWebフレームワークです。
サードパーティーライブラリが使っていないため非常に軽いです。
データ量 < 50KB

インストール

nodejsがインストールはこの記事のスコープ外とします。

1. プロジェクトの初期化

タミナルから作業フォルダーに移動し、プロジェクトの初期化を行います。

npm init -y

2. majidaiインストール

以下のコマンドで「majidai」をインストールします。

npm install majidai

3. サーバーコード

以下のコマンドで「majidai」をインストールします。

server.js

// majidaiの読み込み
const majidai = require("majidai");

// インスタンス化
const server = new majidai();

// 受付開始
server.start();

4. serverの起動

以下のコマンドでウエブサーバーの起動します。

node server.js

そして、ブラウザを起動し、http://localhostにアクセスします。以下の画面が表示されればOKです。

デフォルトでは80ポートで受け付けしますが、以下のようにポートを指定する事が可能です。

const config = {
    http: {
        port: 8000
    }
};
const server = new majidai(config);

静的コンテンツの配信

デフォルトでは静的コンテンツの配信が無効にしてますが、以下のように「Document Root」指定する事で指定のフォルダーは以下のものを配信する事が可能です。

const config = {
    http: {
        documentRoot: './public'
    }
};
const server = new majidai(config);

使い方

majidaiの書き方は以下のようになります。

server.METHOD(PATH, CALLBACK)

METHODとは

以下の３種類があります。
- get : http GETリクエストのみ受け付けます
- post : http POSTリクエストのみ受け付けま
- listen :複数のhttpメソッドを一つのPATHで受け付けます
※詳細についてはこちら

PATHとは

"/" , "/top", "/user/dakc",..みたいにどこでリクエストを受け付けるかの事です。

CALLBACKとは

これはコールバック関数の事です。指定のPATHにリクエストを受け付けたら、この関数が実行されます。関数の引数が以下の2つです。
- request : <http.IncomingMessage>
- response : <http.ServerResponse>
majidaiが両方のオブジェクトに「mj」オブジェクトを追加します。

request.mj

requestに追加したmjオブジェクトがクライアントから送られて来たデータを操作するために以下の2つの関数(メソッド）を有します。

• getParams : GETで送られて来た情報をJSONオブジェクトとして返します。キーを引数として指定することで特定のキーに対する値のみを取得する事が可能です。
• postParams: POSTで送られて来た情報をJSONオブジェクトとして返します。キーを引数として指定することで特定のキーに対する値のみを取得する事が可能です。※x-www-form-urlencoded, application/json, form-dataどれでデータが送られて来てもJSONオブジェクトとして返します。

response.mj

クライアントにレスポンスを返すために以下のメソッドを有します。

• text : plain/textとしてレスポンス
• json : application/jsonとしてレスポンス
• static : 静的コンテンツのレスポンス
• redirect : 別のURLへリダイレクト
• error : HTTPエラーとしてレスポンス

※ 詳細についてはこちら

samples

サンプルを見ながらどのようなことできるかやってみましょう！

1. GET受付

get-sample.js

const server = new majidai();

server.get("/home", (request,response) => {
    // リクエストがhttp://〇〇/home?price=230)
    var price = request.mj.getParams("price");
    console.log(price);
    // 230

    // OR
    // 全データをJsonオブジェクトとして取得
    var getData = request.mj.getParams();
    console.log(getData);
    // { price: '230' }

    // 「price」の値を取得
    var price_ = getData.price;
    console.log(price);
    // 230


    return "ここで返すものがクライアントへのレスポンスになります";
});

server.start();

2. POST受付

post-sample.js

const server = new majidai();

server.post("/login", (request,response) => {
    // リクエストがhttp://〇〇/login
    // <form action="/login" method="POST">
    //   <input name="id" type="text" value="abc">
    //   <input name="pass" type="password" value="p@ss">
    // </form>

    // 「id」の値を取得
    var id= request.mj.postParams("id");
    console.log(id);
    // abc

    // OR
    // 全データをJsonオブジェクトとして取得
    var postData = request.mj.postParams();
    console.log(postData);
    // { id: 'abc', pass: 'p@ass' }

    // 「id」の値を取得
    var id_ = postData.id;
    console.log(id_);
    // abc


    return "ここで返すものがクライアントへのレスポンスになります";
});

server.start();

3. 複数HTTPメソッド受付

multiple-methods.js

const server = new majidai();

server.listen({ method: ["GET", "POST"], path: "/profile" }, (request, response) => {
    // GETでもPOSTでもこのの処理を実行されます。
    // DO SOMETHING

    return "something";
});

server.start();

Parameterized URL

どのような表現が分かりやすいかよくわからなかったため、上記の表記にしました。ごめんなさい。何か気付くところがありましたら是非コメントに残してやってください。

この機能がどうしても実現したかった機能です。
「http://〇〇/user?id=abdf&command=edit」より
「http://〇〇/user/abdf/edit」
ほうが好きだったからです。

parameterized-url.js

// {}の中のものがその名前のキーでデータを取得する事ができます。
server.get("/books/{year}/{price}", function (req, res) {
    // リクエストがhttp://〇〇/books/2020/5000

    // {}の中のものがその名前のキーでデータを取得する事ができます。
    // 「year」の値を取得
    var year = req.mj.getParams("year");
    console.log(year );
    // 2020

    // 「price」の値を取得
    var price= req.mj.getParams("price");
    console.log(price);
    // 5000

    // GETと受けたものをレスポンスとして返す
    return req.mj.getParams();
});

※post,listenの時もParameterizedURL機能が使えます。

Docker

以下の１行のコマンドを実行する事でブラウザーからmajidaiの動作を確認できます。

docker run -it --rm -p 80:80 dakc/majidai npx /data/server.js

最後に

nodejsの標準の機能のみで動く軽量なフレームワークを欲しかったため、majidaiを開発しました。MITライセンスでリリースしておりますのでご自由にお使いください。

DOCUMENTATION - https://dakc.github.io/majidai.html