ネームスペースなパッケージをパブリックで公開する

package.jsonに以下を追加します。

{
  "publishConfig": {
    "access": "public"
  }
}

あとはname${自分のnpm名}/${パッケージ名}にしてnpm publishするだけです。

Symbol.iterator

オブジェクトにこのプロパティを指定するとfor..ofなど反復文で回る要素を自分で制御できます。またSymbol.iteratorにはGeneratorfunction* () {...}を使います。例えば以下では、1, 2, 3と表示されます。

const something = {};
something[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;

    // *yield [1, 2, 3]
    // も同じ結果になる
};

for (const num of something) {
  console.log(num);
}

またスプレッド構文を使うことで配列を取得することもできます。

const arr = [...something];
console.log(arr);
// [1, 2, 3]

し 僕的にはArray::filterなどで1回では絞り込めないような時に使ったりします。

例えば、配列がSlack-APIで取得できるような以下のような構造だとした時に、

const items = [
  {type: '***'},
  {type: '...'},
  {type: 'bot'},
  {type: ',,,'}
];

{type: 'bot'}まで絞り込みたい時などです。ちなみにGeneratorのthisSymbol.iteratorを埋め込んだ要素自身になります。

const untilItemHasTypeIsBot = function*() {
  const len = this.length;
  let i = 0;
  while (i < len) {
    if (this[i].type === "bot") {
      break;
    }
    yield this[i];
    i++;
  }
};

items[Symbol.iterator] = untilItemHasTypeIsBot;
console.log([...items]);
// [ { type: '***' }, { type: '...' } ]

少しだけブログについて紹介

技術

このブログはzeit/next.jsという素晴らしいフレームワークを使って、zeit/nowというこれまたzeitのホスティングサイト上で公開しています。また、データはローカルでMarkdownで書いたものをすべてAlgoliaへ格納して、各ページで検索してヒットした投稿をSSR(サーバー・サイド・レンダリング)して表示しています。つまりすべてのページがただの検索結果なので検索バーを中心に置いてかつfixedさせてます。peco的に使ってほしい的な‥
フォントは大正義Noto Sans CJK jpのサブセットです。

本当はTypeScriptが好きなのですが、あまり時間も掛けたくなかったので、TypeScriptもFlowも使わずに作りました。なのでバグなどあるかもですが、その時は見出しクリックした先のDisqusのコメントにてフィードバック貰えると嬉しいです。

JSONからCLIで値を取れる locker-keys を作った

何故作った

何に使うものなのか分からない方がほとんどだと思いますが、npmに月額7$払ってプライベートパッケージとして自分用にカスタマイズしたものを作れるのが前提みたいな話だったりします。誰にでも見られてもいいならいいやつならパブリックでもいいと思いますが!

作った理由は、

  1. .dotfilesなんかに書くのはちょっと…
  2. トークンなど諸々引っ張ってこれるものが欲しかった
  3. パブリックじゃない所で というのが主な理由です。

まず、こんなJSONが配置されているとします。

{
  "foo": {
    "token": "..."
  }
}

その時にこんなコマンドを叩くと、そのパスの値が取れるというだけです。ちなみにパスが途中だった場合はhelpが表示されます。

locker-keys foo token ...

自分用ツールを作る

毎回JSONを作るのは面倒くさいので、自分用の読み込まれている状態のコマンドを作ります。まずlocker-keysをインストールします。

yarn add locker-files

コマンド実行時に実行されるファイルcli.jsはこんな感じにします。

#!/usr/bin/env node
const lockerKeys = require('locker-keys').default;

(async () => {
  await lockerKeys.process(__dirname);
})()
  .catch(err => {
    console.error(err);
  })

あとは、同じディレクトリにlocker.jsonというファイルを置くだけです!
あ、package.json"bin": {"コマンドになる名前": "cli.js"}はお忘れなく。

プライベート公開後それをインストールして、コマンドになる名前 <prop> <prop>で想定通りの値が表示されてば完了です!

免責事項

当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。
当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。
当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

当サイトへのコメントについて

当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。また、メールアドレスとURLの入力に関しては、任意となっております。全てのコメントは管理人が事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。

  • 特定の自然人または法人を誹謗し、中傷するもの。
  • 極度にわいせつな内容を含むもの。
  • 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
  • その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。この規約に関して、詳しくはここをクリックしてください。

広告の配信について

当サイトは第三者配信の広告サービス「Google Adsense グーグルアドセンス」を利用しています。
広告配信事業者は、ユーザーの興味に応じた広告を表示するためにCookie(クッキー)を使用することがあります。
Cookie(クッキー)を無効にする設定およびGoogleアドセンスに関する詳細は「広告 – ポリシーと規約 – Google」をご覧ください。
また、このサイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。
第三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookie(クッキー)を設定したりこれを認識したりする場合があります。

職務履歴書

マーベリック株式会社 (2015.05 ~ 2017.03)

フロントエンドエンジニアとして働きました。

主に当時使った技術

PackageVersion
CoffeeScript@^1.0.0
Angular@^1.0.0
jQuery@^2.0.0
Bootstrap@^3.0.0

会社情報

MetaContent
URLhttps://www.mvrck.co.jp/
郵便番号160-0023
住所東京都新宿区西新宿 1-22-2 新宿サンエービル4F
従業員大体60人(内エンジニア30人)

業務

  1. 自社サービス「Sphere」の保守
  2. 自社サービス「Sphere Paper」の保守
  3. 自社サービス「Sphere Infeed」のクライアント向け埋め込みタグ作成
  4. 自社サイトのリニューアル(アーカイブ)
  5. 自社リクルートサイトのリニューアル
  6. 自社ポータルサイト

株式会社GEEK (2017.05 ~ 現在)

フロントエンドエンジニアとして働いています。一部フルスタックフロントエンドエンジニアで開発しました。

主に当時使った技術

PackageVersion
Typescript@^2.0.0
Babel@^7.0.0
React@^16.2.0
NestJS(Express)@^5.0.0

会社情報

MetaContent
URLhttps://www.geek.co.jp/
郵便番号101-0047
住所東京都千代田区内神田1-5-13 内神田TKビル2F
従業員大体15人(内エンジニア5人)

業務

  1. クラウド型人事管理システムの保守
  2. アンケートフォームシステム開発
  3. 自社サイトリニューアル
  4. Bot開発

nju33

自己紹介

このページをご覧頂きありがとうございます。nju33で活動してます佐々木純という者です。 今(2018年9月)は東京都千代田区の株式会社GEEKという会社でフロントエンドエンジニアとして働かせて頂いてます。
ちなみに出身は福井県で、好物は秋吉純けいです。
とりあえず、30歳を目標に生きてますので現世の皆様よろしくお願い致します。

小中高はとにかくゲーム、ゲームで、特に中学の後半からはRed Stoneというオンラインゲームにハマり不登校になるなど酷い有様でしたが、Web制作に興味を持ったことでどうにか普通の人並みの生活はどうにか送れています。 ただまぁフロントエンドエンジニアでやってることもゲームのやり込みと対して違わないな思うこともあり(例えば、読み込み速度をどれだけ早くするかとか)正直熱中するとすぐ1日経っちゃうような生活なので、本当にこのままでいいのか不安ではありますが、とりあえず30歳までは生活スタイルを変えずに生きていこうと思ってます。

ちなみに今はフルスタックフロントエンドエンジニアを目指していて、何かWebサービスでも作れたらいいな〜と思ってます。
今考えてるのは病気系に特化した交流サイトなんですけど、僕自身アトピーやアレルギー、光線過敏などを持っていて体調を崩しやすいので、同じような悩みを抱えてる人達と交流したいというのがあります。もう2chとか荒らしが酷くて本当に不便だし、なによりリアルタイムで同じ症状の人がいるのは励みになる。

Object 型

instanceof Objectな値なら何でも入れることができる型です。
objectを使います。

const obj: object = {};

ある程度プロパティを絞り込みたい場合は、interfaceで型を作ります。オブジェクトの場合?:とはてなマークを付けることで、その値のundefinedを許容させることができます。
以下ではbarは含めていませんがエラーになりません。しかし、fooを外すとエラーになります。

interface Value {
  foo: string;
  bar?: string;
}

// ok
const value: Value = {
  foo: 'foo'
}

すべてのプロパティが同じ型の時便利なのがRecord<K extends string, T>型です。Kでは'foo' | 'bar'のようなintersection typesstringを指定していて、これはそれぞれプロパティとなる値です。つまり{foo: T, bar: T}になり、Tに指定した型がそれぞれのプロパティ値の型になります。
つまり、次の2つはまったく同じ型になります。

type Value = Record<'foo' | 'bar', string>;
interface Value {
  foo: string;
  bar: string;
}

TypeScriptではオブジェクト値を取得する時にややハマりそうなポイントがあります。次のコードの①は問題ないですが、②はエラーになってしまうのです。

const value: Value = {foo: 'foo', bar: 'bar'};
// ①: ok
value.foo
// ①: error
value['foo']

これを回避するにはtsconfig.jsonnoImplicitAny: falseにするか、Value型にIndex Signaturesという添字アクセスの情報を加えてあげます。 ここで、その値となる型にはfoobarといった他のプロパティ値の型すべてが入るようにしなければなりません。

interface Value {
  [k: string]: string | number;
  foo: string;
  num: number;
}

Boolean 型

以下のようにboolean型を指定すると、代入を数値だけに絞れます。

const bool: boolean = true;
// Type '"true"' is not assignable to type 'boolean'.
const boolStr: boolean = 'true';

また、以下のように型を指定せずに代入した場合boolean型として扱われます。

let bool = true;
// ok
bool = false

Number 型

以下のようにnumber型を指定すると、代入を数値だけに絞れます。

const num: number = 123;
// Type '"123"' is not assignable to type 'number'.
const strNum: number = '123';

また、以下のように型を指定せずに代入した場合number型として扱われます。

const num = 123;
// ok
num = 456

String 型

以下のようにstring型を指定すると、代入を文字列だけに絞れます。

const str: string = 'text';
// Type '123' is not assignable to type 'string'.
const numStr: string = 123;

また、以下のように型を指定せずに代入した場合string型として扱われます。

let str = 'foo';
// ok
str = 'bar'

また、型として特定のワードを指定すると、とそのワードだけの代入に絞り込むことができます。

const foo: 'foo' = 'foo';
// Type '"foo"' is not assignable to type '"bar"'.
const bar: 'bar' = 'foo';

これは基本的にIntersection Types(|)と一緒に使うことが多いです。

// ok
let foo: 'foo' | 'bar' = 'foo';
// ok
foo = 'bar';