0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Node.jsのnpxでBusiness Card(電子名刺)を作る方法

Last updated at Posted at 2021-06-23

##はじめに
先日、仕事でご一緒した方が、npxを使ったBusiness Cardで自己紹介をされていて、素敵だな〜と思ったので、真似させていただき作ってみました!!

##デモ
まず、早速デモをご紹介します。

ターミナルで

npx misa335

と入力してみてください。

ターミナル上にBusiness Cardが表示されるはずです!

npmパッケージのリンク
https://www.npmjs.com/package/misa335

##作り方
① プロジェクトの作成
  npm initで新規プロジェクトを作成します。

② package.jsonの編集
  package.jsonを編集して、npx <your-project-name>を実行すると、npmパッケージを落として、package.jsonに記載された"main": "index.js"が実行されるように設定します。

package.json
{
...
"main": "index.js",
  "bin": {
    "misa335": "index.js"
},
...

③ Business Cardの作成
Business Cardとして表示させたい項目を、index.jsconsole.log内に記載します。
また、1行目に#!/usr/bin/env nodeと、nodeのインタプリタを実行する記述をします。

index.js
#!/usr/bin/env node
console.log('
      Business Cardとして表示する項目
');

ローカルでBusiness Cardが表示されるかどうか、
node index.jsで確認することができます。

④ Githubにpushする
任意のGithubレポジトリにpushします。

##npmに公開する方法
① npmアカウントの作成
https://www.npmjs.com/ で、npmアカウントを作成します。

② npmへのログイン
 ターミナルでnpm loginと打ち、Username, Password, Email Addressを順に入力してnpmにログインします。

③ プロジェクトの公開
npm publish --access publicと入力すると、npm上でプロジェクトが公開されます。

最後に、<npx your-project-name>を試して、Business Cardが表示されるか確認します。

##おわりに
簡単にnpxを使ったBusiness Cardが作成できました!
よかったらぜひ試してみてください♪
また、SNSでつながっていただけると嬉しいです😆

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?