0
1

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 1 year has passed since last update.

WSL環境におけるNode.jsのためのyarn導入から利用

Last updated at Posted at 2020-04-21

はじめに

投稿者の備忘録としての活用が主です。
Webの作成において役に立つNode.jsのパッケージマネージャーとして
yarnを導入しました。(Node.jsの導入はこちらから)
(Pythonでいうところのpip的な感じ)
yarnを使って様々なライブラリなどを自分のプログラミングに活用していけます。

環境

wsl(Windows Subsystem for Linux)にインストールします。

Editor: VSCode
Shell : bash version 4.4.20
Ubuntu: 18.04.4 LTS
node  : v10.14.2

目次

  1. yarnの導入 >>
  2. yarnについて >>
  3. npmパッケージ作成 >>
  4. 作成したパッケージの利用 >>

1.yarnの導入

wslのコンソールを開き、

wsl
$ curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.21.1
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     

中略
> Successfully installed Yarn 1.21.1! Please open another terminal where the 
`yarn` command will now be available.

最後の一行が表示されればインストール完了です。

次に、.bashrcファイルを読み込むか、VSCodeを立ち上げなおします。

wsl
$ source ~/.bashrc

2.yarnについて

詳しい使い方(CLI)は公式サイトでみてほしいです。

yarnによるnpmパッケージのインストールには、
グローバルインストール:Node.js実行環境全体で使う
ローカルインストール:カレントディレクトリ内でのみ使う
の二種類ありますが、今回試していくのはすべてローカルインストールであると
理解してください。

3.npmパッケージの作成

このパッケージは、フィボナッチ数列とトリボナッチ数列を出力するパッケージです。
どのような場面で活躍するかな知りません。
あくまでパッケージ作成の練習です

〇パッケージを作成するディレクトリを作成

wsl
$ mkdir trib
$ cd trib 

以下tribディレクトリで作業を行います。


〇npmパッケージ作成のチュートリアル

今回は特に変更などしません。

wsl
$ yarn init
yarn init v1.21.1
question name (trib):

Enterを押下して、パッケージ名をtribにしました。

question version (1.0.0):

Enterを押下して、バージョンを 1.0.0 にしました。

question description:

Enterを押下して、パッケージの説明をつけませんでした。

question entry point (index.js):

Enterを押下して、ライブラリとして読み込まれるファイル名を
index.jsにしました。

question repository url:

Enterを押下して、Gitリポジトリは公開しません。

question author:

Enterを押下して、npmの著者名は設定しませんでした。

question license (MIT):

Enterを押下して、MITライセンスに従うものとしました。

question private:

Enterを押下して、

success Saved package.json
Done in 3.45s.

これでパッケージの内容が書き込まれたpackage.jsonというファイルが作成されました。

wsl
$ ls
package.json
$ cat package.json
{
  "name": "trib",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

〇パッケージtribの実装

任意の方法(touchとか)でtribディレクトリ内にindex.jsを作成し、
実際に実装していきます。

index.js
'use strict';
// フィボナッチ数列
function printFib(length) {
    console.log(length+'番目までのフィボナッチ数列');
    const memo = new Map;
    memo.set(0, 0);
    memo.set(1, 1);
    function fib(n) {
        if (memo.has(n)) {
            return memo.get(n);
        }
        const value = fib(n - 1) + fib(n - 2);
        memo.set(n, value);
        return value;
    }
    for (let i = 0; i < length; i++) {
        console.log(fib(i));
    }
}

// トリボナッチ数列
function printTrib(length) {
    console.log(length+'番目までのトリボナッチ数列');
    const memo = new Map();
    memo.set(0, 0);
    memo.set(1, 0);
    memo.set(2, 1);
    function trib(n) {
        if (memo.has(n)) {
            return memo.get(n);
        }
        const value = trib(n - 1) + trib(n - 2) + trib(n - 3);
        memo.set(n, value);
        return value;
    }
    for (let i = 0; i < length; i++) {
        console.log(trib(i));
    }
}
module.exports = { printFib, printTrib };

関数の内容はさておき...(すみません)

module.exports = { printFib, printTrib };


この部分で、`module.exports`オブジェクトのプロパティとして関数を登録します。
これはプロパティ名と値の変数名が同一である場合の略記法なので、
プロパティ名と値の変数名が異なる場合などは、

module.exports = {
printFib: printFib,
printTrib: printTrib
};

のように書いてください。

#4.作成したパッケージの利用
パッケージを利用する(インストール)するための、
ディレクトリを作成します。 (∵ローカルインストール)

```bash:wsl
$ cd ..
$ mkdir trib-run
$ cd trib-run/

以下、trib-runディレクトリで作業を行います。


先ほど同様に、チュートリアルを行います。

$ yarn init
yarn init v1.21.1
以下略

完了したら、先ほど作成したパッケージをインストールします。

wsl
$ yarn add ../trib
yarn add v1.21.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ trib@1.0.0
info All dependencies
└─ trib@1.0.0
Done in 0.28s.

色々メッセージがでて、インストール完了です。

任意の方法(touchとか)でtrib-runディレクトリ内にsample.jsなどの
JSファイルを作成し、実際に活用していきます。

sample.js
'use strict';
const algo = require('trib');

algo.printFib(10);
algo.printTrib(10)

それでは、実行してみます。

wsl
$ node sample.js
10番目までのフィボナッチ数列
0
1
1
2
3
5
8
13
21
34
10番目までのトリボナッチ数列
0
0
1
1
2
4
7
13
24
44

以上のことから、パッケージのインストールと利用を行えました。

おわりに

まだ自分が初心者なので、頭の整理を兼ねて書きました。
知識の更新があり次第、こちらに追加していくつもりです。
まだまだNode.js, yarnに関して浅学なので、内容の薄さはご了承ください。
Gitとの関係などもしっかり理解していこうと思っています。

yarnのネコかわいい...
さよなら:wave:

関連記事

参考

0
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?