# はじめに

10進数で表記された緯度軽度を度分秒/度分表示に変換するpackageを作りました。

GitHub - migratory-js

  • npm packageを作るのが初めて
  • TypeScriptで作るの初めて

と初めて尽くしだったので、npm package作成の手引きとして記録を残しておきます。

# migratory-js

せっかくだから紹介です。
35.3のように10進数で表記される緯度軽度を35°18′0″Nのように度分秒表示に変換してくれます。同じことをやっているpackageはあったのですが、度分秒表示しか対応しておらず度分表示がなかったので作りました。(度分秒表示が一般的なようですが、日本国内だと一部の業界で度分表示を利用することがあるみたいです)
使い方は↓の通りで、緯度か経度どちらかだけ変換したいときは、GeoNumberクラスを利用して変換する。
緯度軽度両方とも変換したいときは、DecimalConverterクラスを利用して変換する、といった感じです。

import { GeoNumber, DecimalConverter }
const geoNumber = new GeoNumber(0, true)
console.log(geoNumber.toDms(35.3, true).toDms().toString())
// > 35°18′0″N
const decimalConverter = new DecimalConverter(-15.4, 35.0)
console.log(decimalConverter.toDmm().latitude.toString())
// > 15°24′S
console.log(decimalConverter.toDmm().longitude.toString())
// > 35°0′E
console.log(decimalConverter.toDmm().longitude)
// > {
// >   degree: 35,
// >   minute: 0,
// >   direction: 'E',
// >   toString: [Function: toString]
// > }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# npm package作成手引き

まずはざっくりと作成手順を書くと、↓のような感じです。

  1. npmにアカウントを作る
  2. コンソールでnpm loginする
  3. npm initpackage.jsonを作る
  4. コードを書いてnpm publishする

# 1. npmにアカウントを作る

npmjs - signup

↑のURLからアカウント作成ができます。入力が必要な項目は↓の通りです。

項目 内容
Username ユーザー名
Email address メールアドレス
Password パスワード

登録したアカウント情報はあとで使うことになるので控えておいてください。

# 2. コンソールでnpm loginする

お好みのコンソールでnpmコマンドを叩きます。
npm loginとコマンドを入力すると先ほどnpmjsのアカウント情報を求められるので、先ほど登録したアカウント情報を入力します。

# とりあえずバージョン確認
$ npm --version
7.0.14
# npmの会員情報を入力してログイン
$ npm login
npm notice Log in on https://registry.npmjs.org/
Username: xxx
Password: xxx
Email: (this IS public) xxx@xxx.com
Logged in as xxx on https://registry.npmjs.org/.
# whoami でログインしているユーザーを確認できる
# 例えば jalemy というユーザー名でログインしている場合は jalemy と表示される
$ npm whoami
xxx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3. npm initpackage.jsonを作る

コンソールでnpm initと入力するといくつか対話形式で入力を求められるので答えていきます。ここで入力した情報がこれから作るpackageの情報となります。後から編集 できるので最初は割と適当で良いです。

項目 内容
package name パッケージ名
description パッケージの説明
entry point エントリーポイント(何も入力しなければindex.js)
test command テスト実行用のコマンド
git repository Gitのリポジトリ
keywords npmjsで表示されるキーワード一覧
author パッケージの作成者
license パッケージのライセンス
package name: (documents)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/jalemy/Documents/package.json:
{
  "name": "documents",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Is this OK? (yes)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

入力した内容はpackage.jsonに出力されます。ここで気をつけないといけないのは

  • name
  • version
  • main

の3項目です。
package名は一度publishしてから変更するのは困難ですし、既に存在するpackageと重複しているとpublishできません。packageを作り始める前にnpmjsで確認しておくと良さそうです。
versionは同一versionでのpublishができないので、そこだけ気をつける必要がありますが、特別気にしなければ1.0.0→1.0.1→1.0.2のように進めていけば良いです。
mainはエントリーポイントとなるJavaScriptファイルです。エントリーポイント大事。

# 4. コードを書いてnpm publishする

そのままEnterで進めている場合はindex.jsがエントリーポイントになっているので、index.jsに最低限のコードを書きます。

> index.js
console.log('hello world');
1
2
3

index.jsが存在する状態で、npm publishをするとnpmjsに公開されます。
npm packageの公開想像していたより簡単でした。

# package.jsonへの追加情報

package.jsonに情報を追加しておくとnpmjs上でhomepageとしてURLが表示されたり、検索用のキーワードを表示できたりします。

# name

前述通りpackageの名称です。npm install xxxのxxxに当たる部分です。

# version

バージョンです。セマンティックバージョニングの形式で書かれています。

セマンティックバージョニング

# description

packageの説明文に当たる部分です。
なくても問題ないですが、npmjsでも表示されるのであると親切です。

# main

エントリーポイントになるファイルを書くところです。
TypeScriptで書く場合は/dist/以下にコンパイル後のファイルを出力することになるので、/dist/index.jsとなります。

# scripts

npm run xxxをできるようにするプロパティです。
TypeScriptで書く場合はnpm run buildtscを動作させるようにしたりします。
npmjsにpublishするときには便利な設定がいくつかあります。例えばprepublishOnlyです。prepublishOnlyは、npm publishする前に1度実行されます。よくあるのはprepublishOnlynpm run buildを設定しておいて、publish時にbuildし忘れを防ぐといった設定でしょうか。
ちなみにnpmjsで利用できるscriptsプロパティは↓のドキュメントで公開されてます。
npmjs - scripts

# repository

npmjs上でリポジトリとして表記される部分です。GitHubのリポジトリURLを入れたりします。

# homepage

npmjs上でpackageのホームページとして表記される部分です。GitHubのreadmeを参照するようにしているのが大半でしょうか。著名なライブラリになると専用にwebサイト立ち上げられてたりしますよね。

# 参考に

migratory-js作ったときには、↓のような設定にしてました。

クリックしてpackage.jsonを展開する

{
  "name": "migratory-js",
  "version": "1.0.2",
  "description": "convert decimal latitude and longitude to degrees, minutes, seconds and degrees, minutes",
  "main": "dist/index.js",
  "author": "jalemy",
  "license": "MIT",
  "scripts": {
    "prepublishOnly": "npm run build",
    "test": "jest",
    "build": "tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jalemy/migratory-js.git"
  },
  "homepage": "https://github.com/jalemy/migratory-js",
  "keywords": [
    "DMS",
    "dms",
    "DMM",
    "dmm",
    "decimal",
    "degree",
    "minute",
    "second",
    "geo",
    "gis"
  ],
  "bugs": {
    "url": "https://github.com/jalemy/migratory-js/issues"
  },
  "dependencies": {},
  "devDependencies": {
    "@types/jest": "^26.0.15",
    "@types/node": "^14.11.10",
    "@typescript-eslint/eslint-plugin": "^4.4.1",
    "@typescript-eslint/parser": "^4.4.1",
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "jest": "^26.6.1",
    "js-test": "^0.0.1",
    "jsdoc": "^3.6.6",
    "prettier": "^2.1.2",
    "ts-jest": "^26.4.2",
    "ts-node": "^9.0.0",
    "typescript": "^4.0.3"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# おわりに

初めてnpm packageを作ってみましたが、思ったよりハマりどころがなくサクサク作れました。今回作ったのはただの数値変換ライブラリで難しいことはしてませんが、機会があったら使ってもらえると嬉しいです。
公開して1週間経たずに100以上のダウンロードがあったようで、定期的にnpmjs巡回している人がいるのかな……と。