What's New Qiita

20200421のNode.jsに関する記事は8件です。

  • 投稿日：2020-04-21T22:29:32+09:00

Linax環境におけるNode.jsの導入から利用

はじめに

投稿者の備忘録としての活用が主です。
Webの作成において役に立つNode.jsを導入します。

環境

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

Editor: VSCode
Shell: bash version 4.4.20
Ubuntu: 18.04.4 LTS

目次

  1. nvmの導入 >>
  2. Node.jsの導入 >>
  3. REPLを使ってみる >>
  4. ファイルを実行してみる >>

1.nvmの導入

Node.jsのバージョンを管理するためにまずnvmを導入します。
これにより、現在利用しているNode.jsのバージョンの把握や
別バージョンへの切り替えなどを行えます。

wsl
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

終了したら、

wsl
$ source ~/.bashrc

で、.bashrcの内容を読み込んでおきます。

wsl
$ nvm

Node Version Manager

Note: <version> refers to any version-like string nvm understands. This includes:
  - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  - default (built-in) aliases: node, stable, unstable, iojs, system
  - custom aliases you define with `nvm alias foo`
以下略。。。

となれば、インストールが成功しています。

2.Node.jsの導入

今回、Ver. 10.14.2 のNode.jsをインストールしました。

wsl
$ nvm install v10.14.2
Downloading and installing node v10.14.2...
Downloading https://nodejs.org/dist/v10.14.2/node-v10.14.2-linux-x64.tar.xz...
###################################################################### 100.0%Computing checksum with sha256sum
Checksums matched!
Now using node v10.14.2 (npm v6.4.1)
Creating default alias: default -> v10.14.2

$ nvm use v10.14.2
Now using node v10.14.2 (npm v6.4.1)

$ node --version
v10.14.2

指定したバージョンのNode.jsがインストールされていることを確認しました。

3.REPLを使ってみる

Node.js版のコンソールだと思えばいいと思います。
(PythonのPythonコンソール的な感じ)
Ctrl+c二回でREPLを終了できます。

REPL
$ node
> 1+1
2
>
(To exit, press ^C again or type .exit)
>

4.ファイルを実行してみる

プログラムの書き方は、JavaScriptと同じかきかたをすればいいと思います。
今回単純な足し算プログラムを書いて動かします。

ソースコード

sum.js
'use strict';
function aAdd(num) {
    var res = 0;
    num[0] = 0;
    num[1] = 0;
    for (let s of num) {
        res += parseInt(s);
    }
    console.log(res);
}
aAdd(process.argv);

実行結果

wsl
$ node sum.js 1 2 3 4
10
$ node sum.js      
0

雑に解説

これは、引数の総和をとるプログラムでした。
process.argvに命令がリストとして入っています。
$ node sum.js 1 1 1 2 3を実行したとすると、
リストの中身は、

[ '/home/yosse95ai/.nvm/versions/node/v10.14.2/bin/node',
  '/home/yosse95ai/sum.js',
  '1',
  '1',
  '1',
  '2',
  '3' ]

といった具合になっています。

だから、

num[0] = 0;
num[1] = 0;

の部分で数字以外の文字列部分(パス部分)を、0に置き換えてます。
多分もっとクレバーなやり方があると思います。

おわりに

今回は、かなり初歩的な解説でした。
まだ自分が初心者なので、頭の整理を兼ねて書きました。
おそらく拙い文章でしたが、お付き合いいただきありがとうございました。
さよなら:wave:

参考

関連記事

～Coming soon～

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T22:29:32+09:00

Linux環境におけるNode.jsの導入から利用

はじめに

投稿者の備忘録としての活用が主です。
Webの作成において役に立つNode.jsを導入します。

環境

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

Editor: VSCode
Shell: bash version 4.4.20
Ubuntu: 18.04.4 LTS

目次

  1. nvmの導入 >>
  2. Node.jsの導入 >>
  3. REPLを使ってみる >>
  4. ファイルを実行してみる >>

1.nvmの導入

Node.jsのバージョンを管理するためにまずnvmを導入します。
現在利用しているNode.jsのバージョンの把握
別バージョンへの切り替えなどを行えます。

wsl
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

終了したら、

wsl
$ source ~/.bashrc

で、.bashrcの内容を読み込んでおきます。

wsl
$ nvm

Node Version Manager

Note: <version> refers to any version-like string nvm understands. This includes:
  - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  - default (built-in) aliases: node, stable, unstable, iojs, system
  - custom aliases you define with `nvm alias foo`
以下略。。。

となれば、インストールが成功しています。

2.Node.jsの導入

今回、Ver. 10.14.2 のNode.jsをインストールしました。

wsl
$ nvm install v10.14.2

Downloading and installing node v10.14.2...
Downloading https://nodejs.org/dist/v10.14.2/node-v10.14.2-linux-x64.tar.xz...
###################################################################### 100.0%Computing checksum with sha256sum
Checksums matched!
Now using node v10.14.2 (npm v6.4.1)
Creating default alias: default -> v10.14.2

$ nvm use v10.14.2
Now using node v10.14.2 (npm v6.4.1)

$ node --version
v10.14.2

指定したバージョンのNode.jsがインストールされていることを確認しました。

3.REPLを使ってみる

Node.js版のコンソールだと思えばいいと思います。
(PythonのPythonコンソール的な感じ)
Ctrl+c二回でREPLを終了できます。

REPL
$ node
> 1+1
2
>
(To exit, press ^C again or type .exit)
>

4.ファイルを実行してみる

プログラムの書き方は、JavaScriptと同じかきかたをすればいいと思います。
今回単純な足し算プログラムを書いて動かします。

ソースコード

sum.js
'use strict';
function aAdd(num) {
    var res = 0;
    num[0] = 0;
    num[1] = 0;
    for (let s of num) {
        res += parseInt(s);
    }
    console.log(res);
}
aAdd(process.argv);

実行結果

wsl
$ node sum.js 1 2 3 4
10
$ node sum.js      
0

雑に解説

これは、引数の総和をとるプログラムでした。
process.argvに命令がリストとして入っています。
$ node sum.js 1 1 1 2 3を実行したとすると、
リストの中身は、

[ '/home/yosse95ai/.nvm/versions/node/v10.14.2/bin/node',
  '/home/yosse95ai/sum.js',
  '1',
  '1',
  '1',
  '2',
  '3' ]

といった具合になっています。

だから、

num[0] = 0;
num[1] = 0;

の部分で数字以外の文字列部分(パス部分)を、0に置き換えてます。
多分もっとクレバーなやり方があると思います。

おわりに

今回は、かなり初歩的な解説でした。
まだ自分が初心者なので、頭の整理を兼ねて書きました。
おそらく拙い文章でしたが、お付き合いいただきありがとうございました。
さよなら:wave:

関連記事

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T18:08:49+09:00

セマンティックバージョニングを正規表現で評価する

公式リンク↓↓

セマンティックバージョニング2.0.0(最後の方に載ってます)

見るのが面倒な人向け↓↓

const regex = new RegExp(/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/);
if(regex.test(hogehoge)){
  console.log("OK")
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T17:58:20+09:00

Box APIを使い始める。JWT認証でBOXにつないでみる。

はじめに

Box APIの使いかたについて、簡単に導入方法を紹介します。

Box APIを利用するための前提

前提として、BOXテナントの管理者権限を持っていることを前提としています。
この記事ではBox Node SDKを利用しますが、基本の考え方は他のSDKを利用する場合、またはSDKを使わずに、REST APIを直接実行する場合でも共通しています。

リソース

参考にしたリソースはこちら。

Box DEV
https://developer.box.com/
API、各種SDK等、開発に関して様々な情報がまとまっています。

Box Support
https://support.box.com/hc/en-us
Boxの標準環境での使いかたなどがのっています。

どちらも、英語版の他、日本語版が用意されています。

BOX側でのアプリの作成（開発の事前準備）

Box側でアプリ作成

  1. Box DEVを開いて、マイアプリをクリックします。
    https://ja.developer.box.com/
    まだBoxにログインしていない場合は、ここで管理者としてBoxにログインしてください。この操作でBoxの画面の左ナビゲーションの中に「開発者コンソール」というリンクが表示されるようになります。

  2. 開発者コンソールを開きます

  3. アプリの新規作成をクリックします

  4. アプリの種類を聞かれるので、「カスタムアプリ」を選択します。
    このアプリの種類は、アプリ作成のウィザードを選択しているだけです。あとから設定を変更することでアプリのタイプを変えることができます。何も考えずにカスタムアプリで大丈夫です。

  5. 認証方法の選択をします。ここでは「JWTを使用したOAuth 2.0（サーバー認証）」を選択します。
    このガイドではBox Platformの中心的な認証方法である、JWT方式で説明していきます。

  6. アプリケーションの名前をつけます。

  7. アプリが作成されるので、アプリの表示ボタンを押します。
    この画面で表示されているcurlのコマンドの使用例は単なる例なので、無視して次に進んでください。

  8. 作成したアプリの構成画面が表示されます。以下ざっくりと説明です。

  • Developerトークン
    • 正規の認証を経なくとも、このDeveloperトークンを利用することでAPIを試すことができます。
    • 60分しか使えないので、再発行する必要があります。
    • 今回は利用しません。
  • OAuth2.0資格情報
    • クライアントIDはあとでアプリケーションを承認する時に必要になります。
    • 公開キーの追加と管理で「公開／秘密キーペアを生成」を押した時に作られるConifgファイルにこれらの情報が含まれます。
  • アプリケーションアクセス
    • とりあえずデフォルトのままで。
    • 既存ユーザーとコンテンツにアクセスする必要があればEnterpriseを選びます。
  • アプリケーションスコープ → 一旦デフォルトのままにします。
  • 高度な機能 → 一旦デフォルトのままにします。
  • 公開キーの追加と管理
    • こちらで公開／秘密キーペアを生成します。
    • 「公開／秘密キーペアの生成」をクリックすると、configファイルがダウンロードされるので後で利用します。config.jsonとリネームしておきます。
    • git等で共有しないようにします。このファイルの中身は、プロダクション環境では環境変数等に保存するようにするのがおすすめです。

Box側でアプリの承認

  1. マイアプリ > 一般 > アプリの承認で、承認用に送信ボタンを押します。

    • クライアントIDが表示されるのでコピーしておきます。
    • または、マイアプリ > 当該アプリ > 構成 > OAuth2.0資格情報 のクライアントIDをコピーします。
    • 管理コンソールにアクセスできるのであれば、この送信ボタンを押す必要はありません。

  2. 管理コンソール > アプリ > カスタムアプリ・タブを開き、 「新しいアプリケーションを承認」ボタン押して、コピーしたクライアントIDをペーストし、承認します。

    • ここで、構成の中で指定した各種スコープ等を確認されるので、承認ボタンを押します。

これでBOX側の準備は最低限ととのいました

サンプルコードの作成手順

ここからはカスタムアプリケーションの作成です。

前提

  • node.jsが導入済みで、nodeコマンドが実行できること

  • 筆者の環境では、nodeのバージョンは、v12.16.1を利用しています。

  • npmまたはyarnが導入済みであること

nodeプロジェクトの作成

# 任意の名前でフォルダを作成し、入ります。
mkdir box-quick-start 
cd box-quick-staret 
# nodeのパッケージの初期化をします。yarn / npmお好みで。
yarn init -y

Box-node-sdkを追加

# box-quick-staretフォルダで実行。box-node-sdkを導入します
yarn add box-node-sdk

参考：SDKはこれを利用しています。 https://github.com/box/box-node-sdk

生成されたpackage.json

package.json
{
  "name": "box-quick-start",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "box-node-sdk": "^1.32.0"
  }
}

ダウンロードしておいたconfig.jsonをコピー

box-quick-staretフォルダにconfig.jsonをコピーします。
プロダクション環境ではこのファイルの内容が漏洩しないように気をつけてください。

ファイルを追加

# box-quick-staretフォルダで実行。ファイルを追加します。
touch index.js

Index.jsの編集

任意のエディタを開き、以下のコードをペースト

index.js
const boxSDK = require("box-node-sdk"); // SDKです
const config = require("./config"); // config.json: Boxからダウンロードしたファイルです。

const main = async () => {
  // config.json を元に、sdkを作成。
  const sdk = await boxSDK.getPreconfiguredInstance(config);

  // Service AccountのClientオブジェクトを取得。
  // 管理者ユーザーとは別。管理者ユーザーのコンテンツはこのままでは見れないので注意。
  // Service Account/App Userのどちらでもコンテンツを操作可能だが、
  // 複数ユーザーで利用する場合はコンテンツの所有者や変更履歴の明示化のためAppUserを作成することが望ましい。
  const saClient = await sdk.getAppAuthClient("enterprise");

  // App Userを作成する。本来は再利用のために、戻ってきたappUserのIDを保存する必要がある。
  const appUser = await saClient.enterprise.addAppUser("Mike Morris");

  // 作成したAppUserのスコープでClientを作成
  const auClient = await sdk.getAppAuthClient("user", appUser.id);

  // アップロードのサンプル。
  // package.jsonを、AppUserのホームフォルダにアップロードしてみる
  const fs = require("fs");
  const stream = fs.createReadStream("./package.json");

  // AppUserでホームフォルダにファイルをアップロード
  const file = await auClient.files.uploadFile("0", "package.json", stream);

  // アップロードされたファイルの情報を確認
  console.log(file);

  // AppUserのホームフォルダを一覧
  const auItems = await auClient.folders.getItems("0");

  // アップロードしたpackage.jsonがリストに入っていることを確認
  console.log(auItems);
};
main();

上記ファイルの実行方法

# box-quick-staretフォルダで実行
node index.js

まとめ

以下のことが簡単に実現できました。

  • box-node-sdkの導入方法と、JWT認証の利用の仕方
  • Service Accountの利用の仕方
  • App Userの作成の仕方
  • ホームフォルダ以下のコンテンツの一覧の取得方法

この他様々な操作は、以下のbox-node-sdkと、API Referenceを調べることで使いかたはすぐにわかると思います。

box-node-sdk: https://github.com/box/box-node-sdk

API Reference: https://developer.box.com/reference/

以下、認証方法に関してのおまけ情報です。

BOXの認証方法について

カスタムアプリケーションからBOXにAPIで接続する場合、基本的に以下の２通りの方法があります。（厳密にいうとWeb統合やBox Skillsの方式の認証などもありますが、ここでは割愛します。）

  • 標準OAuth 2.0 （ユーザー認証）
  • JWTを使用したOAuth 2.0（サーバー認証）

２つの認証方式には、以下のような特徴があります。

標準OAuth 2.0 （ユーザー認証）

  • https://ja.developer.box.com/guides/authentication/oauth2/

  • Box Devガイドにかかれている、OAuth 2.0を使用する最適なパターン

    • 既存のBoxアカウントを持っているユーザーを使用する
    • ユーザーにBoxを使用していることを知らせる必要がある
    • ユーザーのBoxアカウントにデータを保存し、アプリケーションのBoxアカウントには保存しない

  • 注意：BoxにはFair Use Policyというものがあり、実際に人間が使っていないアカウント（ロボットやプログラムのみが利用）が、この認証方式を利用してはいけないとされている。 https://cloud.box.com/s/cotkk9k3op6zw07rmr6jb3mhgv2dix4a

JWTを使用したOAuth 2.0（サーバー認証）

  • https://ja.developer.box.com/guides/authentication/jwt/
  • Service Accountと呼ばれるAPI専用の管理者のようなユーザーに対して認証を行う。バックエンドサーバー内で認証しておく。
  • 一度Service Accountが認証されると、以降はService Accountを利用して、App Userと呼ばれる、利用者用アカウントをBoxの管理対象ユーザーとは無関係に自由に好きなだけ払い出すことができる。BoxはService Accountだけを認証し、App Userの認証を行わない。
  • この方式を利用し、個々のユーザーに利用させるパターンにする場合は、App Userとカスタムアプリのユーザーのマッピングを独自に管理する必要がある
  • バックエンドサーバー内から認証されることを想定（技術的には可能だが、強力な権限を持つService Accountのパスワードやアクセストークンが漏洩してしまうので、ブラウザ上だけでこの方式の認証を行うべきではない）
  • Box Platformというプラン体系の中心的な位置づけの認証モデル。上記のFair Use Policyは適用外。
  • Box Devガイドにかかれている、JWT認証を使用する最適なパターン
    • Boxアカウントを持たないユーザーを使用する
    • 独自のIDシステムを使用する
    • ユーザーにBoxを使用していることを認識させたくない
    • アプリケーションのBoxアカウントにデータを保存し、ユーザーのBoxアカウントには保存しない
  • ガイドの説明以外で、JWT認証が活用できそうなパターン
    • 業務に特化した専用UIを持つカスタムアプリケーションを作成し、コンテンツをBOXに預ける。
    • メールアドレスを持っていない人たち向けのカスタムアプリケーションを作成
    • バッチプログラム等の専用のアカウントとして利用。
    • 既存サービスから利用することで、Boxを内部で利用しつつ、既存Saasの販売を行う。

APIの実行、SDKの利用ともに、認証方法はどちらでも構いません。

この記事では主にJWT認証を利用した方法を説明しています。

参考： https://ja.developer.box.com/guides/authentication/jwt/with-sdk/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T17:00:32+09:00

AWS Lambda関数でNode.js レイヤーを作る

対象者

AWSでLamdbaを使っている人/どんなことができるのか調べている人
LINEBotをサーバーレスで作りたい人
Lambdaのレイヤーという機能を知らない人/興味ある人

下準備

とりあえずデスクトップに移動
$ cd Desktop
ディレクトリ作る
$ mkdir nodejs
nodejsディレクトリに移動
$ cd nodejs
初期化
$ npm init -y
レイヤーにしたいパッケージをインストール
$ npm i xxxxx
ex)LINEBotのSDKをインストールする場合
$ npm i @line/bot-sdk
nodejsディレクトリ自体をzipファイルに圧縮して下準備完了

AWSコンソール

ログイン→Lambda→レイヤー→レイヤーの作成
スクリーンショット 2020-04-21 16.53.40.png
名前はそのパッケージが分かる名前ならなんでもいい。
↓例えばの完成図
スクリーンショット 2020-04-21 16.55.11.png

Lambda関数で読み込む

index.js
const line = require('@line/bot-sdk')

こんな感じでレイヤーを使うことができます！
毎回全ファイルをZipしてアップロードしている人には超おすすめです（これを知ってから超楽になった。）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T16:42:27+09:00

初心者がNightwatchの導入からチュートリアル終了までやってみる

はじめに

この記事はほぼ全てnightwatchjs.orgの内容そのままです。
余力があるならそちらをご覧になってもよいかと思います。
想定する読者は、（自分のように）初めてプログラミングするという方です。

Nightwatchとは？

Nightwatch.js is an automated end-to-end testing framework for web applications and websites.

Nightwatch.jsは、WebアプリケーションおよびWebサイト用の自動化されたエンドツーエンドのテストフレームワークです。
要は、ブラウザを実際に動かして自動テスト（操作）してくれるって事のようです。
エンドツーエンド(E2E)についてはこの記事が分かりやすかったです。

Node.jsのインストール

  1. nodejs.orgから環境にあったインストーラーをダウンロード
  2. インストーラーを起動
  3. インストーラーの指示通りに進める（npmのインストールを外さないこと、デフォルトでチェックが入っています）

Node.jsとnpmがインストールできたか確かめる

Node.jsの確認

コマンドプロンプトで以下のように入力します。

$ node -v

で、結果がこんな感じになればOKです。

$ node -v
v12.16.2

npmの確認

npmも同じようにコマンドプロンプトで以下のように入力します。

$ npm -v

こちらもこんな感じに表示されればOKです。

$ npm -v
6.14.4

うまくいかない場合は、インストールできていないかpathが通っていない可能性があるので、
エラーログを読みつつ、再度Node.jsのインストールを試してください。

npmをつかってNightwatchをインストールする

ここからNightwatchをインストールしていきます。
さっくり消せるように専用のフォルダを作って作業していきます。

Nightwatch用のフォルダを作る

好きな場所にフォルダを作ってください。
今回は以下のようにドキュメントの下に作りました。
フォルダ名はNightwatchにしています。

C:\Users\(ユーザー名)\Documents\Nightwatch

作業用フォルダにNightwatchをインストールする

作業フォルダでコマンドプロンプトを起動

作業用フォルダのアドレスバーにcmdと打ち込めばそのフォルダで起動します。
こんな感じになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>

package.jsonを作る

npmを使ってインストールするために、作業フォルダにpackage.jsonをつくります。
package.jsonについてはこの記事が分かりやすかったです。
作業フォルダのコマンドプロンプトで以下のように入力してください。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm init -y

結果は以下のようになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm init -y
Wrote to C:\Users\(ユーザー名)\Documents\Nightwatch\package.json:

{
  "name": "Nightwatch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npmを使ってNightwatchをインストールする

作業フォルダのコマンドプロンプトで以下のように入力します。
単体で使うなら--save-devは不要ですが、Nightwatchの存在理由(テストフレームワーク)を踏まえてマニュアル通りにしておきます。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm install nightwatch --save-dev

結果は以下のようになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm install nightwatch --save-dev
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

> ejs@2.7.4 postinstall C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN Nightwatch@1.0.0 No description
npm WARN Nightwatch@1.0.0 No repository field.

+ nightwatch@1.3.4
added 264 packages from 669 contributors and audited 439 packages in 11.678s

15 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

npmを使ってWebドライバーをインストールする

今回はChromeのみでのテストを予定しています。
なので、seleniumドライバーは不要です。
Webドライバーは使うブラウザのバージョンと対応する必要があるので、調べてからインストールしていきます。

使っているChromeのバージョンを確認する

以下の手順で確認できます。
より詳しい説明は公式のヘルプにあります。

  1. パソコンで Chrome を開きます。
  2. 右上のその他アイコンをクリックします。
  3. [ヘルプ] 次に [Google Chrome について] をクリックします。
  4. [Google Chrome] という見出しの下に表示される番号が現在のバージョン番号です。

このバージョン番号と一致したChromeドライバーのバージョンをインストールします。
（Chromeを最新バージョンにしていれば、Chromeドライバーも最新バージョンで良いはずです。）

対応したバージョンのChromeドライバーのインストール

対応したバージョンのChromeドライバーインストールしていきます。

# 最新バージョンの場合
C:\Users\(ユーザー名)\Documents\Nightwatch>npm install chromedriver --save-dev

# 特定のバージョンの場合
C:\Users\(ユーザー名)\Documents\Nightwatch>npm install chromedriver@XX.XX.X --save-dev

結果は以下のようになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm install chromedriver --save-dev
> chromedriver@81.0.0 install C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceeding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/81.0.4044.69/chromedriver_win32.zip
Saving to file: C:\Users\(ユーザー名)\AppData\Local\Temp\81.0.4044.69\chromedriver\chromedriver_win32.zip
Received 1040K...
Received 2080K...
Received 3120K...
Received 4160K...
Received 4290K total.
Extracting zip contents.
Copying to target path C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
npm WARN Nightwatch@1.0.0 No description
npm WARN Nightwatch@1.0.0 No repository field.

+ chromedriver@81.0.0
added 58 packages from 95 contributors and audited 539 packages in 8.679s

17 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Nightwatchの実行

インストールが終わったので、テストを実行してみます。

Nightwatchの設定ファイルを作る

Nightwatchの設定ファイル(nightwatch.conf.js)を作っていきます。
チュートリアルのこのパートにあたります。

設定ファイル(nightwatch.conf.js)を作る

作業フォルダ（Nightwatch）の下にnightwatch.conf.jsというファイルを作ります。
中身は以下のようにします。
nightwatch.jsonではなくnightwatch.conf.jsにした理由は、拡張性が高く、両方存在したときに優先されるらしいためです。

nightwatch.conf.js
module.exports = {
  src_folders: ["tests"],

  webdriver: {
    start_process: true,
    port: 9515,
    server_path: require("chromedriver").path,
  },

  test_settings: {
    default: {
      desiredCapabilities: {
        browserName: "chrome",
      },
    },
  },
};

自動テストを作る

実際に動かすテストを書いていきます。
既に入っているサンプルテストでも良いのですが、せっかくなので作ります。

テストフォルダを作る

先ほど作った作業フォルダの下にテストフォルダを作成します。
この中に作った自動テストを格納していきます。
フォルダ名はtestsとして、以下のように作りました。

C:\Users\(ユーザー名)\Documents\Nightwatch\tests

このテストフォルダが、設定ファイル(nightwatch.conf.js)のsrc_folders: [tests]にあたります。
src_foldersにテストフォルダを記載しない場合は、テスト実行時の引数で指定することになります。

テストを作る

テストを実際に作ります。
以下のコードはサンプルテストほぼそのままです。
google.jsでも良いですが、わかりやすそうので、ecosia.jsを利用しました。

以下のファイルをテストフォルダ(tests)の中に入れてください。

ecosia.js
describe("Ecosia.org Demo", function () {
  before((browser) => browser.url("https://www.ecosia.org/"));

  test("Demo test ecosia.org", function (browser) {
    browser
      .waitForElementVisible("body")
      .assert.titleContains("Ecosia")
      .assert.visible("input[type=search]")
      .setValue("input[type=search]", "nightwatch")
      .assert.visible("button[type=submit]")
      .click("button[type=submit]")
      .assert.containsText(".mainline-results", "Nightwatch.js");
  });

  after((browser) => browser.end());
});

テストを実行する

作ったテストを実行して、動作するか見ていきます。

Nightwatchのpathを通す

Nightwatchを簡単に実行できるようにpathを通します。
pathを通すの意味についてはこの記事が分かりやすかったです。

  1. windowsの検索窓に「path」と入力
  2. 「環境変数を編集」が出てくるので選択
  3. 「ユーザーの環境変数」の「Path」を選択
  4. 「編集」を選択
  5. 「環境変数名の編集」が出てくるので「新規」を選択
  6. 以下のパスを追加（nightwatchの実行ファイルがある場所です）
C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\.bin

サンプルテストを実行してみる

作業フォルダでコマンドプロンプトを起動し、以下を入力してください。

C:\Users\(ユーザー名)\Documents\Nightwatch>nightwatch

Chromeが起動し、ecosia.orgを開き、nightwatchと検索してくれるはずです。
また、結果は以下のようになります。
ここまでできれば、チュートリアルに記載されている内容は完了となります。

C:\Users\(ユーザー名)\Documents\Nightwatch>nightwatch

[Ecosia.org Demo] Test Suite
============================
\ Connecting to localhost on port 9515...

DevTools listening on ws://127.0.0.1:53905/devtools/browser/a6462e23-1c06-4ce8-9d1b-2cbba2c0e66d
i Connected to localhost on port 9515 (2615ms).
  Using: chrome (81.0.4044.113) on Windows platform.

Running:  Demo test ecosia.org

√ Element <body> was visible after 28 milliseconds.
√ Testing if the page title contains 'Ecosia' (12ms)
√ Testing if element <input[type=search]> is visible (28ms)
√ Testing if element <button[type=submit]> is visible (26ms)
√ Testing if element <.mainline-results> contains text 'Nightwatch.js' (131ms)

OK. 5 assertions passed. (2.17s)

おわりに

これでNightwatchのチュートリアルは終了です。
内容の不備などあればコメントしていただけますと大変勉強になります。
ここまで初心者の記事を読んでいただきありがとうございました。

次回は開発ガイドを読みながら、テストを書いてみたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T16:24:16+09:00

-bash: npm: command not found の普通じゃない対処法

環境

Mac OS X ver10.14.5

経緯

nodebrew でインストールしたあと、パスを通して、一通り npm -v や node -vでバージョン確認できていました。
PCを再起動が原因と思われるが、-bash: npm: command not foundが出るようになってしまった。
パスの設定を見直して、ターミナルの再起動、Macの再起動を図るも改善せず。
ただ、nodebrew -vは認識する。。。なぜ？？？

調査する過程で、インストールの参考サイトを見ているときに、別な確度に気づいたので共有します。

nodebrew インストール参考サイト

https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498

解決方法

結論から書くと、パスの指定方法を変更しました。
~/.bash_profileに以下を追記。

mac
export PATH=/usr/local/var/nodebrew/current/bin:$PATH

通常、どの参考サイトを見ても以下の記述が一般的です。というか、僕もこれで動いていたんですが・・・。

mac
export PATH=$HOME/.nodebrew/current/bin:$PATH

（ちなみに、わかってると思いますが、:$PATHを省略すると、大変なことに・・・ｗ）

これを何度も行いますが、一向に改善せず。
ファイルも実際にあることを確認してます。
ターミナルも再起動。
なんなら、source ~/.bash_profileも・・・。

うーん、なんでだろう？

参考サイトの手順をもう一度見直す。。。
試しに、以下を実行してみました。

mac
nodebrew setup

nodebrewのセットアップです。

すると、以下の記述が・・・！

mac
Fetching nodebrew...
Installed nodebrew in /usr/local/var/nodebrew

========================================
Export a path to nodebrew:

export PATH=/usr/local/var/nodebrew/current/bin:$PATH
========================================

あれ、、、
PATHの記述がちょっと違う・・・？
まさか・・・と思い、冒頭の通り追記すると、無事にnpm -v node -vが確認できました。

めでたしめでたし。。。

なんだか行き詰まった方の参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T11:32:45+09:00

Shikha Dating Services in bangalore

image.png
image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧