自作のnpmパッケージを公開しよう

2024/01/222023/01/19 by Dan

npmはNode Package Manager（ノードパッケージマネージャー）の略で、コマンドラインからJavaScriptのライブラリを簡単にインストール、管理できるアプリケーションです。 ReactもVueもAxiosもすべて、このnpmのライブラリに登録されているパッケージになります。今日は、自作したnpmパッケージを一般に公開する方法を紹介します。npmを使ったことがない人は先にこちらの動画を見ておいてください。なぜパッケージを自作すべきかプログラマーのツールの大多数は無料で使えます。Reactも、Linuxもソースコードを公開してオープンソースとして社会に貢献しています。もし、アイディアがあれば、オープンソースのプログラムを公開することはサイドプロジェクトとして最適です。また、通常、下記の行からライブラリをインポートしますが、実際にその中身がどうなっていることを知ることはとても重要になります。 GitHubのリポジトリを作成まずはGitHubとGitを準備しましょう。使ったことがない人はこちらの動画でGitのインストールの仕方と、GitHubの使い方を説明しています。GitとGitHubはなくてもできないことはないですが、バージョンコントロールと、リポジトリの管理はプログラマーにとって必須のスキルですので是非覚えておきましょう。この作業は後からでもできますが、リポジトリが決まっている場合は先に作っておきます。では、GitHubに行き、リポジトリを作成します。ここで作成（Create Repository）をクリックするとGitをinit（イニシャライズ）できるコマンドがあるのでそれらをコピペしていきます。ではコマンドラインから上記のラインを一行ずつコピペしていきましょう。 git push でrefsのエラーが出た場合はセキュリティ対策としてSSHキーが登録されていないと使用できないものになります。詳しいSSHキーの登録の仕方はこちらの記事を参照してください。 npmパッケージのイニシャライズでは、git initを行ったディレクトリ内にいることを確認して、npmパッケージのイニシャライズを行います。npmがインストールされていることを確認し下記のコマンドを実行していきましょう。すべてを入力するとおなじみのpackage.jsonが作成されました。途中で聞かれたエントリーポイントがnpmパッケージのメインのJavaScriptのファイルになります。早速、index.jsを作成していきます。もしファイル名を変更したい場合は、package.jsonの中にある”main”の対象先を編集してください。では、index.jsにサンプルとして、下記の行を書いてみます。ストリングが一致するとtrueを返す関数です。 npm link npmのパッケージができたら、コマンドラインからnpm linkのコマンドを使い{prefix}/lib/node_modules/<package>の場所にリンクさせます。シンボリックリンクといいますが、これで、npmパッケージがインストールされたかのようになり毎回ビルドをすることなくテストを行うことができます。 npmパッケージのテストでは、npm linkを行ったら、適当な場所にフォルダを作成して、テストを行います。コマンドラインで、テストディレクトリに移動して、先ほどのasameshiパッケージのリンクをインストールします。コマンドを実行するとnpmのnode_modulesディレクトリが作成され先ほど作成したasameshiパッケージがインポートされました。ではコマンドラインからJavaScriptファイルを実行します。画像のようにtrueが返ってきました。これでパッケージが問題なく作動していることが確認できましたね。 npmアカウントの作成 npmのパッケージを公開するためにはアカウントが必要になります。無料でできるので作っておきましょう。ではnpmの公式サイトからSign Upをクリックします。では、下記の様にアカウント情報を入力していきます。これでnpmのアカウントが作成できました！ npmのアカウントをローカルの環境に接続では下記のコマンドでローカルのnpmにユーザーを追加します。ではEmailでワンタイムパスワードを確認してnpmにユーザーを追加しましょう。ちなみに登録したEmailは一般に公開されるので要注意！ npmパッケージの公開ではnpmにユーザーを追加したところで、下記のコマンドでnpmのパッケージを公開しましょう。これで下記の様にエラーがでなければ成功です。ちなみに、パッケージ名がすでに取られている場合はエラーが出るので、ユニークなものにしてください。公開したnpmを確認では公式サイトからasameshiのパッケージを確認しましょう。 https://www.npmjs.com/package/asameshi … Read more

イントロ

皆さん、CSSライブラリは使ったことがありますか？

もちろん、自身で全てのUIデザインを一から作ることができれば素晴らしいのですが、そんな時間はありません！

CSSライブラリで有名なのはBootstrapとかTailwindがありますね。

今日は、Vueのバージョン３に対応したAnt Designを使ってみます。

Vue3に対応していないCSSライブラリ

ここで２つ注目したいCSSライブラリを紹介しておきます。

これらはまだVue３に対応していないので今後のリリースが待ち遠しいですね。

Bootstrap-Vue https://bootstrap-vue.org/
Vuetify https://vuetifyjs.com/en/

Ant Designとは

Ant DesignはReactのUIデザインのライブラリを提供していることでも知られているCSSライブラリです。

特にVueに対応したライブラリは通常のBootstrapとかと違い、データの扱いが少し楽になっているので今日、それを試してみたいと思います。

公式サイト

https://www.antdv.com/docs/vue/introduce/

Ant Designのインストール

今日はWebデベロッパーから満足度の高いViteを使って環境を作ります。

ViteはVue Cliに代わるデベロップメントツールのことです。

特にBabelというコンパイラを除いたことでめちゃちゃ早くなりました。

その代わりに古いブラウザでのサポートができなくなるとかのデメリットもありますが、それはいたしかたないでしょう。

まずはVueアプリを作ります。

npm create vite@latest

では初期状態のVueアプリが起動できることを確認しましょう。

それから、Ant Designのライブラリをインストールします。

npm install ant-design-vue@next --save

では、後からエラーが出るのでこれも入れておきましょう。

エラーが見たい人は出たら入れてください。

npm i vite-plugin-components -D

http://localhost:3000/

npm run dev

ライブラリのインポート

ではmain.jsからライブラリをグローバルにインポートします。

コンポーネントからインポートしたい人はそのやり方も可能です。

import { DatePicker } from "ant-design-vue";

app.use(DatePicker);

CSSライブラリもインポートしましょう。

カレンダーをインポートしたい場合。

import DatePicker from "ant-design-vue/lib/date-picker"; // for js

import "ant-design-vue/lib/date-picker/style/css"; // for css

Viteのデベツールのコンフィグファイルを更新して使えるようになります。

import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';



export default {

  plugins: [

    /* ... */

    ViteComponents({

      customComponentResolvers: [AntDesignVueResolver()],

    }),

  ],

};