Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブnpm

2020年1月13日 By KD コメントを書く

2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

2020年もWeb業界の進歩は止まりません。今回は、JS周辺のバックエンド寄りの注目技術である「Deno」と「Entropic」をざっくり紹介します。

はじめに

2020年に入り、Web業界の特にJavaScript周りの動向を調査していたところ、「Predicting the Future of the Web Development (2020 and 2025)」という面白い動画を見つけました。2020年から5年後までのWeb業界の予測の動画で、ざっくり言うと、以下の4つの予想が示されています。

  1. TypeScriptが爆発的に人気を集めており、React/Vue/Anguarなどのフロントエンドフレームワークで利用可能になっている現状から、TypeScriptがJSプロジェクトで最も一般的な選択肢になるという予想
  2. ブラウザ上での大容量ファイルのダウンロードが許容されつつある現状から、WebAssemblyにより、ブラウザ経由でネイティブアプリのような大容量のWebアプリが提供されるようになるという予想
  3. NPMのパッケージレジストリやGitHub Package Registoryといった中央集権型のパッケージレジストリのセキュリティ問題を挙げ、多くのエンジニアが何かしらの悪意のあるNPMパッケージによる感染被害に合うという予想
  4. JSの代替手段の一つであるElmを取り上げ、JSより優れている点を示しつつも、ニッチであり続けるという予想

詳しくは実際に動画を見てみてください。

この動画の(1)で、なぜか触れられていなかったのですが、TypeScriptが今後主流になっていくだろうという予想の背景として、NodeJSの作者がTypeScriptのランタイムとして開発している「Deno」の存在があるはずです。まさにネクストNodeJSと言えるものなので、今回紹介することにしました。

この動画の(3)で、「The economics of open source by C J Silverio | JSConf EU 2019」で発表された「Entropic」という分散型のパッケージレジストリの話題も出ており、会場の誰も聞いたことがなかったようなので、これも紹介することにしました。

ということで、今回は多くの人が書いている2020年のフロントエンド寄りの記事に飽きた人向けに、バックエンド寄りで注目すべき技術「Deno」と「Entropic」をざっくり紹介しておきます。

Denoの紹介

まずは、ネクストNodeJS「Deno」の紹介です。

Denoとは?

「Deno」とは、JavaScriptとTypescriptを実行するための新しいランタイムであり、V8/Rust/Tokio/TypeScriptで作られています。

背景

NodeJSの作者Ryan Dahlさんの「Deno」の紹介動画「JSDC 2018#A01 – Deno, A New Server-Side Runtime By Ryan Dahl」や、比較的新しい動画「Ryan Dahl. Deno, a new way to JavaScript. JS Fest 2019 Spring」にて説明されています。(同じスライド使っていろいろなところで登壇していますね。)NodeJSが抱えている、(1)貧弱なモジュールシステム、(2)レガシーAPIのサポート、(3)セキュリティ問題、を解決し、楽しく生産的な実行環境を作ることが現在の目的です。背景としては、「Node.jsに関する10の反省点 Ryan Dahl – JSConf EU 2018」で語っている反省に起因しています。

試す

それでは、2018年にプロトタイプと言っていた「Deno」が2020年現在動くのか試してみましょう。

インストールする

まずは公式インストール手順に沿ってインストールします。

$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ cat "export PATH=$HOME/.local/bin/deno:$PATH" >> ~/.zshrc
$ deno --version
deno 0.28.1
v8 8.0.192
typescript 3.7.2

TCPサーバーを書く

公式マニュアルを見て、簡単なTCPサーバーを書いてみましょう。

$ mkdir deno-echo-app
$ cd deno-echo-app
$ touch app.ts

app.ts

const PORT = 8080;

const listener = Deno.listen({ port: PORT });
console.log(`listening on 0.0.0.0:${PORT}`);

for await (const conn of listener) {
  Deno.copy(conn, conn);
}

エコーしてみる

TCPサーバーを実行します。

$ deno --allow-net app.ts
Compile file:///Users/user/deno-echo-app/app.ts
listening on 0.0.0.0:8080

エコーされるか確認します。

$ nc localhost 8080
Hello, Deno!
Hello, Deno!

OKですね。自動的でコンパイルされて実行されるのは快適ですね。

「--allow-net」は外部のネットワークにアクセスする事を許可するためのフラグです。「Deno」はセキュリティを意識してい実装されているので、デフォルトでサンドボックス上で実行されるようになっており、外部のファイルシステム、ネットワーク、スクリプトの実行、環境変数にアクセスできないようになっています。

現状はまだ「mildly stable」のようですが、試す分には大丈夫なようです。気になる人は遊んでみてください。

Entropicの紹介

次に、分散型パッケージレジストリ「Entropic」の紹介です。

Entropicとは?

「Entropic」とは、新しい分散型(decentralized)の統合パッケージレジストリ(a federated package registry)であり、新しいCLI「ds」も付属されています。

背景

背景は、冒頭で紹介した動画「The economics of open source by C J Silverio | JSConf EU 2019」で語られています。NPMを会社化した経験から、中央集権型のサービスはお金がかかり過ぎる問題があり、かつ、パッケージレジストリをプライベートカンパニーがコントロールすべきではないと。そこで、新たなOSSとして、分散型のパッケージレジストリである「Entropic」を発表するに至ったというわけです。NPM inc自体は、「NPM Pro」という月額7ドルでプライベートリポジトリが使えるプランを用意していますが、Github Package Registryとガッツリ競合しているので、やはりこのままでは会社としては短命な雰囲気です。

試す

それでは、「Entropic」で自分のレジストリを作って、、、と思ったのですが、正直取り上げるのが早すぎた感があり、公式ドキュメントは未完なので、「ds」コマンドを少し試してみるだけにしようと思ったのですが、、、インストールも失敗して動きませんでした。残念ながら試す段階にも達していないようです。

「Entropic」は発想は面白いのですが、実用化されるのはまだまだ先という感じですね。興味がある人はぜひコントリビュートしてみてください。

最後に

いかがでしたか?「Deno」も「Entropic」も2020年に正式にリリースされるかは微妙なくらい新しいOSSですが(まだ数年かかりそう)、今後のJSの発展に寄与する技術だと思います。これらを知っていれば、バックエンド寄りのJS周辺の最新技術の動向に取り残されずに済むかもしれません。ちなみに、フロントエンドの注目技術は個人的には「Svelte」なのですが、それは別の記事にします。それでは。

環境

  • Deno: 0.28.1

カテゴリ : 技術 Tips & Tutorials タグ : deno, entropic, javascript, npm, typescript, yarn

2019年2月18日 By KD コメントを書く

NPMモジュール内で依存しているモジュールを自動的にアップデートする方法(Greenkeeper編)

NPMモジュール内で依存しているモジュールを自動的にアップデートする方法(Greenkeeper編)

NPMモジュール内で依存しているモジュールのバージョンが古くなった場合に、Greenkeeperを使って自動的にモジュールのバージョンをアップデートする方法を紹介します。

はじめに

NPMモジュールを作成して公開してしばらくすると、以下のように依存しているモジュールが古くなっていきます。

NewImage

これを毎回手動でアップデートしていくのは手間ですが、セキュリティ面などのバグフィックスもあるのでアップデートは可能な限り行いたいことでしょう。

そこで、自動的に古くなっている依存しているパッケージを検出し、アップデートするためのプルリクエストを送ってくれるのがGreenkeeperというサービスです。しかもパブリックリポジトリであれば無料です。

NewImage

それではGreenkeeperをNPMモジュールのリポジトリに導入していきましょう。

Greenkeeperの導入方法

GreenkeeperとGitHubを連携する

まずは「Greenkeeper」のページに行き、「YOUR ACCOUNT」をクリックします。

NewImage

「Login with GitHub」をクリックします。

NewImage

「Authorize greenkeeper」をクリックします。

NewImage

パスワードを入力して「Confirm password」をクリックします。

NewImage

GreenkeeperのページにGitHubのアカウントが表示されます。

NewImage

これで連携が完了しました。

リポジトリを登録する

次に、対象のNPMモジュールのリポジトリをGreenkeeperに登録します。Greenkeeperのページからアカウントをクリックします。

NewImage

「Repositories」タブで「Greenkeeper installation page on GitHub」をクリックします。

NewImage

全てのリポジトリを登録することもできますが、今回はリポジトリを選択して登録します。「Only select repositories」にチェックを入れ、「Select repositories」からリポジトリを選択し、「Install」をクリックします。

NewImage

ダッシュボードにリポジトリ名が表示されます。

NewImage

これでリポジトリの登録が完了しました。

古くなったモジュールをアップデートする

依存しているモジュールが古くなるとGreenkeeperが検出して、以下のように「Update dependencies to enable Greenkeeper」のプルリクエストが自動的に発行されます。(今回は最初なのでGreenkeeperを初期化するためのプルリクエストも含まれています)

NewImage

通常のGitHubのフロー通りに「Merge pull request」をクリックします。

NewImage

すると、マージされます。

NewImage

Geenkeeperのプルリクエストをマージすると、Geenkeeperのページのリポジトリのステータスが「Enabled」になります。

NewImage

これで古くなったモジュールがアップデートされました。

最後に

いかがでしたか?これで自作のNPMモジュールで依存しているモジュールが古くなっても自動的にプルリクエストが発行されるようになりました。便利ですね。

カテゴリ : 技術 Tips & Tutorials タグ : github, greenkeeper, npm

2019年2月15日 By KD コメントを書く

NPMモジュールを自動的にセマンティック・バージョニングで管理する方法(semantic-release編)

NPMモジュールを自動的にセマンティック・バージョニングで管理する方法(semantic-release編)

NPMモジュールを自動的にセマンティック・バージョニングで管理するためのモジュール「semantic-release」の導入方法を紹介します。

はじめに

NPMモジュールをバージョン管理する場合、セマンティック・バージョニングに従うのが一般的です。これを手動でやろうとすると、リリースの運用ルールを自分で決めて、NPMコマンドを使ってバージョンを上げてNPMに公開することになります。手動というのはミスも起きますし、そもそも面倒です。そこで、コミットメッセージのルールを決めることで、コミットするだけで自動的にセマンティック・バージョニングでバージョンを上げてNPMに公開してくれるモジュールが「semantic-release」です。今回は、「semantic-release」の導入方法を紹介します。

また、NPMモジュールを自作で作成する方法を知りたい人は以前の記事を参照してください。

セマンティック・バージョニングとは?

セマンティック・バージョニング(Semantic Versioning)とは、仕様が公開されており、ほとんどのNPMモジュールで採用されているバージョン管理の方法です。ざっくり言うと、バージョンを「X.Y.Z」とすると、「X」はMajor version(ブレイキングチェンジがある場合に上げる)、「Y」はMinor version(機能追加がある場合に上げる)、「Z」はPatch version(バグフィックスの場合に上げる)としてバージョンを定義して管理する方法です。

semantic-releaseとは?

semantic-releaseとは、コミットメッセージの内容から判断して、自動的に適切にバージョン(セマンティック・バージョニングに従う)を上げてNPMへ公開するためのモジュールです。これを導入すれば、コミットメッセージだけでNPMモジュールを管理できるようになります。コミットメッセージのルールはカスタマイズできますが、デフォルトではAngular Commit Message Conventionsに従う形になり、以下のようになります。

  • feat: 新しい機能の追加(Minor versionを上げる)
  • fix: バグフィックス(Patch versionを上げる)
  • docs: ドキュメントだけ変更
  • style: フォーマットの変更などのソースコードに影響を与えない変更
  • refactor: バグフィックスや機能追加を伴わないソースコードの変更
  • perf: パフォーマンス改善のためのソースコードの変更
  • test: 不足しているテストコードの追加や既存のテストコードの修正
  • chore: ビルドプロセスや補助的なツールやライブラリの変更

自作のNPMモジュールにsemantic-releaseを適用する

それでは、既存の自作のNPMモジュールのプロジェクトに適用してみましょう。ビルドツールはTravis CI、パッケージ管理はYarnを使うことにします。(代わりにビルドツールとしてCircle CI、パッケージ管理ツールとしてNPMを使うことももちろんできます。)

semantic-releaseをセットアップする

まずは、公式ドキュメント通りに、CLIを入れて、セットアップします。

$ yarn global add semantic-release-cli
$ cd my-npm-module
$ semantic-release-cli setup
? What is your npm registry? https://registry.npmjs.org/
? What is your npm username? you
? What is your npm password? [hidden]
? What is your GitHub username? you
? What is your GitHub password? [hidden]
? What CI are you using? Travis CI
Please refer to https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/travis.md to configure your .travis.yml file.
$ cat package.json
{
...
  "version": "0.0.0-development",
...
  "repository": "https://github.com/you/my-npm-module.git",
...
  "devDependencies": {
...
    "semantic-release": "^15.13.3"
  },
...
  "scripts": {
...
    "semantic-release": "semantic-release"
  },
...
}

バージョンにはデフォルトで「0.0.0-development」と書かれますが、semantic-releaseではpackage.jsonのversionは使わず、NPM側のバージョンが使われます。

Travis CI用の設定ファイルを設定する

「.travis.yml」に以下のように設定します。テストを実行し、テストが成功してかつバージョンが上がっている場合にNPMに公開させる設定です。

language: node_js
node_js:
  - 10
  - 8

jobs:
  include:
    - stage: release
      node_js: lts/*
      deploy:
        provider: script
        skip_cleanup: true
        script:
          - yarn semantic-release

Travis CI用の設定方法は公式ドキュメントを参照してください。

commitizenを設定する

コミットメッセージのルールが決まっていても手動で入力するとミスがおきます。なので、正しくコミットメッセージを入力するために「commitizen」の「cz-cli」のモジュールを使います。ついでに、チェンジログを自動で追加してくれる「cz-conventional-changelog」のモジュールも導入します。

$ yarn add --dev commitizen
$ yarn commitizen init cz-conventional-changelog --yarn --dev --exact
$ cat package.json
{
...
  "devDependencies": {
...
    "cz-conventional-changelog": "2.1.0",
  },
...
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}
$ vi package.json
{
...
  "scripts": {
    "commit": "git-cz",
...
  },
...
}

これで設定は完了です。グローバルに導入してもよいですが、全てのプロジェクトに適用することはあまりないと思うので、モジュール内に導入しています。

使い方

最後に、使ってみましょう。今回は何かバグフィックスをしたと仮定してコミットしてみます。

$ git add .
$ yarn commit
...
? Select the type of change that you're committing: (Use arrow keys)
  feat:     A new feature 
❯ fix:      A bug fix 
  docs:     Documentation only changes 
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 
  refactor: A code change that neither fixes a bug nor adds a feature 
  perf:     A code change that improves performance 
  test:     Adding missing tests or correcting existing tests 
(Move up and down to reveal more choices)
...
? Select the type of change that you're committing: fix:       A bug fix
? What is the scope of this change (e.g. component or file name)? (press enter to skip)
 
? Write a short, imperative tense description of the change:
 Fix any bugs
? Provide a longer description of the change: (press enter to skip)
 
? Are there any breaking changes? No
? Does this change affect any open issues? No

[master 043b0c2] fix: Fix any bugs
$ git push origin master

これでTravis CIでテストが成功すれば、Patch versionが上がり、NPMに公開されます。

最後に

いかがでしたか?これで自作のNPMモジュールをsemantic-releaseを使うことで、セマンティック・バージョニングでの管理が自動的にできるようになったと思います。それでは。

環境

  • yarn: 1.13.0
  • semantic-release: 15.13.3
  • commitizen: 3.0.5
  • cz-conventional-changelog: 2.1.0

カテゴリ : 技術 Tips & Tutorials タグ : npm, semantic-release, semantic-versioning

  • 1
  • 2
  • 次のページ »

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)
    DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes