new wings

プログラミングを始めたので、感想を書いてくと思います

Create React AppのtemplateオプションにGitHub上のテンプレートを指定する

react javascript

Create React App にはデフォルトで typescript のテンプレートがある。

npx create-react-app myapp --template typescript

この template オプションにはカスタムテンプレートを指定することができる。Custom Templates | Create React App

npm に公開されているテンプレートを指定する方法

Custom Templates | Create React Appを参照。

ローカルのテンプレートを指定する方法

これもCustom Templates | Create React Appに書いてある通りで

npx create-react-app myapp --template file:../path/to/your/template/cra-template-[template-name]

とする。

github上のリポジトリに置いたテンプレートを指定する方法

これが本題。Create React App の template オプションには github のリポジトリに置いたテンプレートを直接指定できる。npm に公開する必要はない（Create React App version 4.00 で確認済み）。以下のように指定する。

npx create-react-app myapp --template git+https://github.com/account/cra-template-my-template-name.git

npm に公開されていない github 上のパッケージは npm install git+https://github.com/account/my-package.git でインストールすることができる。Create React App は template オプションで指定した文字列を単純に npm install しているようである。そのため --template の後ろに --template git+https://github.com/account/my-package.git とつなげることで github 上のテンプレートを指定することができる。あとはこれの応用でブランチの指定やタグなどを指定できるかもしれない。

JavaScriptの実行環境についての現状の理解

javascript

JavaScriptの実行環境についての現状の理解

現状の理解を整理する。

実行環境が色々ある。 例えば、

など。初めのころは全く区別がついていなかった。似て非なるようなもの。JavaScriptエンジンがどうこうは気にしないことにする。

Webブラウザ上のJavaScript

Webページの動的処理のためのもので、DOM操作ができる。そのためのAPIがあらかじめ用意されている。ただし、ブラウザの種類によって差がある。サンドボックスなのでWebブラウザの外側に自発的には干渉できない。例えばJavaScriptでファイルのダウンロードをしたい場合にはユーザーの操作が必須となる。様々なWebアプリケーションの需要によって音声や動画を扱ったり、デバイスのカメラやマイクを扱うようなAPIが追加されていたりする。この話題はどちらかというとWebブラウザの話になる？Webブラウザ上で使えるAPIについては「JavaScript | MDN」を参照。

ESほにゃらら、という形で仕様が決まっていて、新しい機能？構文？が増えている（const, let での変数宣言やPromise, class構文など）。WebブラウザがES何某に対応していれば新しい機能が使える。JavaScriptで何かを書くときにすべてのWebブラウザに対応させようとすると、それぞれのWebブラウザがどの仕様に対応しているかを調べなくてはいけない。そして一番古い仕様に合わせる他なくなって結局新しい機能が使えなかったりする。（例：Internet Explorerはconst, letが使えない。）ただし、この点については回避策があり新しい機能や構文を使う方法がある。Babelを参照「What is Babel? · Babel」。Promiseならポリフィルで対応できる（らしい）が、Webブラウザそのものの機能（例えば？）が足りない場合にはBabelを使っても対応できない。

ES Modulesに従ったモジュール機能があるが、例によってWebブラウザの対応状況が違うのでBabelのトランスパイルだかコンパイルをせずに使う状況にはまだなってないと思われる。

ES Modules

import MyModule from './MyModule.js'

windowオブジェクトがある。constまたはletを使わずにグローバルに宣言した変数はwindowオブジェクトのプロパティになる。

Node.jsで動かすJavaScript

Webサーバーのためのもの（らしい）。ElectronのMain Processの実行環境でもある。OSのコンソール上でJavaScriptを実行するような使い方ができる。サンドボックスではなくOS機能に容易にアクセスできる。例えばファイルの読み書きをするためのAPIが存在している点がWebブラウザ上のJavaScriptとは大きく異なる。Node.js上で使えるAPIについてはリンク先「ドキュメント | Node.js」のAPIリファレンスを参照。

CommonJSに従ったモジュール機能がある。

CommonJS

const fs = require('fs')

Node.jsもES Modulesに対応しつつある。（もうした？）

windowオブジェクトがない。globalオブジェクトとglobalThisオブジェクトがある。

ウッウロボ計算ツール

ポケモン
目的のアイテムをウッウロボで作るためのアイテムの組み合わせを計算します。

 

使い方
  1. 「作りたいアイテム」に作りたいアイテムを入力します。
  2. 必要なアイテムの候補が更新されるので1つ目から順に選択します。
  3. 4つ目まで選択するとその組み合わせで作れるアイテムの名前と確率が表示されます。

 

注意点
  • データはセレビィネットとbulbapedia準拠です。
  • わざレコードを探す場合にはわざ名を入力してください。
  • 最高効率の組み合わせしか計算しません。
  • ツール作者がアメざいくの確率をわかっていません。
  • ボールは確率が最も高くなるような組み合わせしか計算しません。
  • 結果が間違っていても自己責任でお願いします。

 

 

javascript で unicode の encode と decode

unicode encoded
 
unicode decoded
 

  // https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
  if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
      targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
      padString = String(typeof padString !== "undefined" ? padString : " ");
      if (this.length >= targetLength) {
        return String(this);
      } else {
        targetLength = targetLength - this.length;
        if (targetLength > padString.length) {
          padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
        }
        return padString.slice(0, targetLength) + String(this);
      }
    };
  }

  /**
   *
   * @param {string} s
   * @returns number[]
   */
  function unicode_encode_char(s) {
    const len = s.length;
    let x = [];
    for (let i = 0; i < len; i++) {
      x.push(s.charCodeAt(i));
    }
    function padnJoin(x) {
      return x
        .map(function (x) {
          return x.toString(16).padStart(4, "0");
        })
        .join("");
    }
    return padnJoin(x);
  }

  /**
   *
   * @param {string} h
   */
  function unicode_decode_char(h) {
    // 配列の各要素をそれぞれ引数に展開させるために apply を使う
    return String.fromCharCode.apply(
      null,
      h.match(/.{4}/g).map(function (x) {
        return parseInt(x, 16);
      })
    );
    // モダンブラウザではスプレッド演算子が使える
    // return String.fromCharCode(...h.match(/.{4}/g).map((x) => parseInt(x, 16)));
  }

  const str = document.getElementById("str");
  document.getElementById("str").addEventListener("input", function (e) {
    if (e.target.value == "") return;
    const en = unicode_encode_char(e.target.value);
    const de = unicode_decode_char(en);
    const byte = en.match(/.{2}/g) ? en.match(/.{2}/g).length : 0;
    document.getElementById("encoded").innerText = byte + "バイト: " + en;
    document.getElementById("decoded").innerText = de;
  });

ポエム　検索力

ポエム

Googleで検索すればだいたいわかると言われる。 おおむねそうだと思う。ただ例外はあって、専門的な学問分野に関することは出てこなかったりする。 それはさておく。 検索するにもどう検索したらいいかわからない、なんてことはよくある。

なにか問題があってその解決策を検索する。 その問題はあまりにありふれていそうで、世界のどこかでは確実に誰かが既に直面していて検索すれば解決策が出てくるはずである、などと考える。 車輪の再発明をしたくないので検索する。しかし、その問題、概念を表現する言葉がなかなかわからない。 ひたすらにヒットしそうな言葉で検索する。 そして見つかった解決策にはその問題を的確に表現するキーワード、または専門用語があてられていることがある。 その専門用語あるいはキーワードを使い検索すると、『今までの苦労は何だったんだ』という程にその問題に関係していそうな検索結果が出てくる。

結局のところ検索するにも適切なキーワードをひねり出す力がなければ自分が求める結果は得られない。 そのキーワードを考え付く力をこう呼ぶ。

────────　検索力

例えば「車輪の再発明」という言葉。 この言葉が表す概念自体は誰もが一度は考え付きそうな単純な概念だったりする。 ただ「車輪の再発明」というキーワードを知らない人がその概念について検索しようとするときにどのような言葉を使って検索するのだろうか。 いきなり「車輪の再発明」などと閃いて検索できるはずもない。「車輪の再発明」という言葉を使わずに適切な言葉を選び、望む検索結果を得る必要がある。

Synology NAS に Node v12 をインストールしたことで npm install が失敗する件の対策

synology

Synology NAS に Node v12 をインストールしたことで npm install が失敗する件の対策について

現状の対策方法： Node v8 の npm を引き続き実行する。

注意 この記事では Node v12 の npm install を正しく実行させる方法については書いていません。それをするには zlib をアップデートする必要があるはずです。

Synology NAS のパッケージアップデートの関係で Nodejs の v12 がインストールされた。
今までは v8 の方のパスが通っていたわけだが v12 がインストールされたことでそちらのパスが通るようになった。

ここで問題発生

v12 になってからは npm install が失敗する。

エラーメッセージ

ZlibError: zlib: invalid distance too far back
error code Z_DATA_ERROR

Synology NAS にインストールされている zlib が古いからだ。
zlib を手動で更新するのも面倒なので npm install する時には v8 の方を明示的に指定するのがいいと思われる。

例 uuid をインストール ポイントはv8のnodeとnpm-cli.jsを指定すること

$ /volume1/@appstore/Node.js_v8/usr/local/bin/node /volume1/@appstore/Node.js_v8/usr/local/lib/node_modules/npm/bin/npm-cli.js i uuid

/volume1 の部分は環境依存。

毎回入力するのは面倒なので環境変数に突っ込むなり何なりすればいいと思う。

例 ~/.profile ファイルに下記を追記する。.profile がなければ作る。

export NODEv8="/volume1/@appstore/Node.js_v8/usr/local/bin/node"
export NPMv8="/volume1/@appstore/Node.js_v8/usr/local/lib/node_modules/npm/bin/npm-cli.js"
export npmv8="$NODEv8 $NPMv8"

以降、例えば npm list は $npmv8 list のように実行する。

関連する報告