武田隆志(67)160160件のシェア(すこし話題の記事)こんにちは。サービスグループの武田です。Nodeは現代のフロントエンド開発にはなくてはならない存在となりました。CDKでの開発もNodeを利用します。そのCDKプロジェクトのひな型を作成する際に、npxコマンドを使用している例をよく見かけたのですが、そういえばこのコマンドよく知らないな?ということで調べてみました。次の環境で検証しています。何npxはnpmパッケージを簡単に実行できるコマンドです。具体的には次のようなことができます。run-scriptを使用せずにローカルインストールしたコマンドを実行するグローバルインストールせずに一度だけコマンドを実行するGitHubやGistで公開されているスクリプトを実行するnpxはnpm@5.2.0から同梱されるようになった新しいコマンドです。Node@8.2以降を使用している環境であればデフォルトでインストールされているはずです。npxでインストールできます。新しいと言ってもnpm@5.2.0のリリースは2017年7月なのでもう2年前ですね......。npm/npm用途についてそれぞれ見ていきます。run-scriptを使用せずにローカルインストールしたコマンドを実行する簡潔にローカルインストールしたパッケージを、設定なしで次のように実行できます。||詳しくnpmパッケージはグローバル/ローカルのいずれかにインストールして使います。グローバルには独立したコマンドとして使いたい場合にインストールします。mochaやcreate-react-appなどが代表的でしょうか。ローカルにはプログラム内でrequireして使いたいモジュールや、そのプロジェクト固有のパッケージをインストールします。lodashやreactなど、挙げ始めたらきりがないですね。先述したようにnpmパッケージにはCLIのコマンドを提供するものがあります。実はパッケージがコマンドを提供していれば、グローバル/ローカルのインストールにかかわらず実行可能です。ローカルにインストールした場合、それがやや面倒だったという背景がありました。ローカルインストールしたパッケージは、そのプロジェクトのnode_modules配下にインストールされます。コマンドが提供されている場合、node_modules/.bin/配下にコマンドが配置されます。そのため次のように実行することになります。binはカレントプロジェクトのローカルパッケージPATHを返してくれるコマンドです。この問題をこれまでどうしていたかというと、npmのrun-scriptというしくみを利用することが多かったのではないでしょうか。runで実行できるというものです。||scriptsフィールドではローカルインストールしたパッケージのコマンドを直接実行できるテクニックを使用したものです。"cowsay"のようなコマンドだけの定義が増えていくのはつらいものがありました。npxを使用することでこれらの問題から解放されます。先述したように、scriptsフィールドにコマンドのみ定義していたようなケースは、ほぼ置き換えられるのではないでしょうか。オプションや引数も込みで定義しているものは、無理に置き換える必要はありません。tscグローバルインストールせずに一度だけコマンドを実行する簡潔に事前にパッケージをインストールすることなく次のようにコマンドを実行できます。10個のパッケージを4.373秒でインストールしました。||詳しくnpxコマンドをたたくと次の順番でコマンドを探します。ローカルパッケージ(node_modules/.bin)環境変数PATHnpmレジストリ大事なのは3で、たとえインストールされていないコマンドであっても、自動的にnpmレジストリからパッケージを探してくれます。そのため先述した例のように、環境にコマンドが見つからなかった場合、npmレジストリから探してダウンロードし実行してくれるというわけです。そのため、パッケージ名とコマンドが異なる場合は-pオプションでパッケージ名を明示する必要があります。packages)も増えていますので注意しましょう。2は少しおもしろくて、環境変数PATHからコマンドを探すため、Nodeに関係ないコマンドもnpx経由で実行できます。3.7.0実践例プロジェクトのひな型を作成するユーティリティコマンドは数多く開発されています。npxがないと、それを一度グローバルインストールしてから、コマンドをたたいて作成という流れが普通でした。これらの準備が少し楽になりそうです。いくつか例を見てみましょう。CDKプロジェクトの作成。cdkコマンドはディレクトリを作成してから実行する必要があるため、次のように実行できます。--language=typescriptAngularプロジェクトの作成。ngコマンドは@angular/cliパッケージで提供されています。example-angularReactプロジェクトの作成。このコマンドはReact公式のチュートリアルでも紹介されています。example-reactVueプロジェクトの作成。CLIで作成したプロジェクトは、@vue/cliがローカルインストールされていないため、追加でインストールしておくのがお勧めです。@vue/cliclaspプロジェクトの作成。claspコマンドは必要最低限のファイルしか作成しないため、少しやることが多いです。Example'指定したバージョンのNodeで実行する。私は普段nvmを使用していますが、ワンショットで別のバージョンを試したい場合などに便利そうです。node-sassGitHubやGistで公開されているスクリプトを実行する簡潔にGitHubやGistで公開されているスクリプトを次のように実行できます。1個のパッケージを6.613秒でインストールしました。gist詳しくnpx登場以前から、npmリポジトリに登録されていないパッケージをnpmコマンドでインストールすることは可能でした。https://gist.github.com/1cd52daf43b11e9d2c72aa6ab0be59a3とはいえ、「ちょっと試したい/試してもらいたい」という用途には使いづらさがありました。試したらアンインストールしないとゴミとして残ってしまいます。npxで直接実行できるようになったことで、より手軽さが増したのではないでしょうか。実践例ちょっとした処理の自動化などに活用できそうです。initなども必要になります。これらの処理をあらかじめスクリプトで書いておくと、以降はそれを実行するだけで定型処理を自動化できます。project.はディレクトリの作成、Gitリポジトリ初期化、npmパッケージインストールといった処理をするスクリプトです。エラーハンドリングなど手抜いていますが、まずはあまり作り込まずに使い始めてみてはいかがでしょうか。まとめいつの間にかnpmに同梱されていたnpxコマンド。調べてみたらとても便利なコマンドでした。使ったことのない方がいれば、ぜひ試してみてください。676,101JavaやPython、シェルスクリプト(bash)を書くことが多いです。最近はTypeScriptとかRustを勉強中。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。カフェ店長のオカノです。今日はオフィスに用があるので、通勤ラッシュを避けて出社しました。この子は新メンバーのさめくんです。在宅勤務が推奨されているのでオフィスが閑散としており、すこしさみしそうです。本が出ていたので読んでみたところよかったので紹介させていただきます。使いたいときの注意点を書きました。新井成一64最近Sphinxつかってドキュメントを書いてるのですがなかなかイケています。臼田佳祐295ワークフロー自動化OSSのn8nをAWS環境で建てて検証してみました。非常に期待できるサービスです。Fargateの勉強をしています。使ってみたい方は参考にしてください。洋介255SnowflakeがAWSの東京リージョン上で稼働するようになりました。データを日本に置けます。芳賀健232こんにちは!猫様の忠実なるしもべ、芳賀健です。Tokyoで開催されました。カフェ店長のオカノです。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。