Node.js - セレニウムで遊ぼ！(b ・ω・)b :1日目(設定)

前書き もっと多くの人がプログラミングを楽しめたらいいと思い、JavaScript歴9か月、TypeScript歴3か月の人間が、Node.jsとセレニウム（テストを自動化するためのツール）で遊ぶ記事を記載。 すでに多くの人が関連記事を書いているので今更かも。 実機で確認しながら進めていますが、至らぬ点があるかもしれません。 次記事 Node.js - セレニウムで遊ぼ！(b ・ω・)b :2日目(中身) サンプル置き場 selenium-playground この記事で使うもの Chrome -version 91 Node.js -version 14以上 (fs/promisesの書き方を変えれば、10.17~でも動きます) Visual Studio Code ＊補足情報＊ （筆者は今回、windows10で実行しています。） Chrome: ブラウザと呼ばれる、Webサーバに接続するためのソフトウェア。IEやEdge、Safariなど多種存在。 Node.js: JavaScriptと呼ばれるプログラム言語の実行環境の1つ。 Visual Studio Code: プログラムを書きやすいソースコード編集ツール。 1: Node.js、Chromeのインストール Chromeのインストール １. 以下のリンクから、「Chrome をダウンロード」と書かれた青色のリンクをクリックして、Chromeブラウザをダウンロードします。 ２. 「ChromeSetup.exe」というファイルがダウンロードされるのでダブルクリックしてインストール Node.jsのインストール １. 以下のリンクから、「LTS版」か、「最新版」と書かれた緑のリンクをクリックして、Node.jsをダウンロードします。 ＊LTSとは、「Long Term Support」の略で、長期間セキュリティアップデートが提供されるものです。個人的には、こちらおすすめします。 ２. 「node-v<ヴァージョン>-x<64または32>(例：node-v14.17.1-x64)」というファイルがダウンロードされるのでダブルクリックしてインストール セットアップフロー 「Next」と書かれたボタンをクリック。 　↓ （この場で問われている質問：規約に同意するか？） 「I accept the terms in the license agreement」という項目をクリックしてチェックマークを付与。 その後、「Next」と書かれたボタンをクリック。 　↓ （この場で問われている質問：インストール先を変えるか？） 何も変えずに「Next」と書かれたボタンをクリック。 　↓ （この場で問われている質問：インストールするものを選ぶか？） 何も変えずに「Next」と書かれたボタンをクリック。 　↓ （この場で問われている質問：「C」や「C++」で書かれたモジュールのコンパイラツールを自動インストールするか？） 誰かが作った一部のプログラムコードは、「C」や「C++」と呼ばれる言語をコンピュータ上で実行可能なものへ変える必要がある。 後々便利なのでチェックし、「Next」と書かれたボタンをクリック。 　↓ 「Install」と書かれたボタンをクリック。 　↓ 終了 Visual Studio Codeのインストール １. 以下のリンクから、自分が今お使いのOSの名前が書いてある青色のリンクをクリックして、Visual Studio Codeをダウンロードします。 ２.「VSCodeUserSetup-x<32や64>-<ヴァージョン名>(例：VSCodeUserSetup-x64-1.57.1)」というファイルがダウンロードされるのでダブルクリックしてインストール セットアップフロー （この場で問われている質問：規約に同意？） 「同意する」にチェックを付与。 「次へ（N）>」と書かれたボタンをクリック。 　↓ （この場で問われている質問：ショートカットアイコンなどインストール以外のことしとく？） 「PATHへの追加」というチェックがデフォルトでチェックされているか確認。 「次へ（N）>」と書かれたボタンをクリック。 　↓ 「インストール(I)」と書かれたボタンをクリック。 　↓ 終了 2: Visual Studio Codeを起動し、プロジェクトフォルダ作成を行う。 ここではVisual Studio Codeを起動を起動した状態で話を進めます。 プロジェクトの作成フォルダを選択 「Ctrl + K」を1度目に押し、次に「Ctrl + O」を押してフォルダを開きます。 分かりやすい場所ならどこでもかまいませんが、今回は試しにDドライブ直下に作ります。 プロジェクトフォルダの作成 「Ctrl + Shift + @」を押して、ターミナルを開き、以下のコマンドを入力します。 mkdir javascript/selenium-playground コマンドの意味 mkdir: make directoryの略で、フォルダを作るコマンド。 mkdir <フォルダパス>で子フォルダまですぐ作成できます。 したがって、今回のコマンドは、 「javascriptというフォルダの中に、selenium-playgroundというフォルダを作る。」 という意味です。 フォルダに入り、プロジェクトの設定ファイルを作成。 以下のコマンドを実行します。 npm init -y コマンドの意味 npm: 他の人が作った便利なプログラムのコードをネットからダウンロードし、それを管理するもの。 パッケージマネージャと呼ばれます。Node.jsをインストールすると含まれています。 npm init: プロジェクトを作成するときのコマンドです。 実行すると質問に基づきpackage.jsonというファイルが作られます。 -y: yオプションと呼ばれます。「yes」の略で、npm init実行時の質問をすべてデフォルト設定のままにします。 ここまでで、このようになります。 3: 必要なパッケージのインストール ソース： npm とは何か / Package と module の違い A package is a file or directory that is described by a package.json. This can happen in a bunch of different ways! For more info, see “What is a package?, below. A module is any file or directory that can be loaded by Node.js’ require(). Again, there are several configurations that allow this to happen. For more info, see “What is a module?”, below. パッケージは package.json によって記述されるファイルもしくはディレクトリです。これは様々な方法でブランチを作ります。 モジュールは Node.js の require() によってロードされるファイルもしくはディレクトリです。 モジュール、パッケージ、ライブラリ（パッケージをまとめたもの）の定義はこちらに従うとして、ここからは他の人が作ったプログラムをインストールしていきます。 なお、依存関係を分けていますが、分けていなくても今回のような用途では特に問題にはなりません。 以下のコマンドコピーし貼り付け、実行します。 依存パッケージのインストール package.jsonのdependencies（開発環境・本番環境で使用するパッケージ群）という項目に追加されるパッケージ npm i chalk chromedriver moment selenium-webdriver package.jsonのdevDependencies（開発環境で使用するパッケージ群）という項目に追加されるパッケージ npm i -D @types/jest @types/jest-plugin-context; npm i -D @types/node @types/selenium-webdriver; npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser; npm i -D eslint eslint-config-prettier; npm i -D eslint-plugin-jest eslint-plugin-prettier; npm i -D husky jest jest-plugin-context lint-staged prettier; npm i -D ts-jest ts-node typescript; コマンドの意味 npm i<インストールしたいパッケージ> : 　npm installコマンドの略で、パッケージのインストールに使います。 　npm 5.0.0以降、--saveオプションが自動で付与。(ご使用中のnpmヴァージョンの確認はnpm -v) -D: 　--save(現在のプロジェクトのみで使うパッケージとして扱うというオプション)と--dev（dependencies項目の中に追加するという意味）のオプションの両方を併せ持った複合オプション パッケージについての概要 2021/6/28日現在、筆者がインストールしたものにコメントで概要を記載します。 ドライバ： Google Chromeを操作するために必要なソフト "dependencies": { "chalk": "^4.1.1", // ターミナルへ出力される文字に色を付けます。 "chromedriver": "^91.0.1", // お使いのOS（windowsやMac、Linuxなど）とChrome ver.を自動判別し、Chromeドライバをインストール。 "moment": "^2.29.1", // 日付を求めたり、指定の形式に変換したりしやすいプログラム。 "selenium-webdriver": "^4.0.0-beta.4" // Seleniumブラウザ自動化ライブラリ。 }, "devDependencies": { "@types/jest": "26.0.23", // jest(テストに使うライブラリ)の型定義ファイル "@types/jest-plugin-context": "^2.9.4", // jest-plugin-context "@types/node": "15.12.1", // Node.jsの型定義ファイル "@types/selenium-webdriver": "4.0.14", // selenium-webdriverの型定義ファイル "@typescript-eslint/eslint-plugin": "4.27.0", // TypeScriptで書かれたコードの問題点を指摘してくれます。 "@typescript-eslint/parser": "4.27.0", // ESLintがTypeScriptをサポートできるようになります。 "eslint": "7.29.0", // コードを解析して、問題点を指摘してくれます。 "eslint-config-prettier": "8.3.0", // 不要なルールや、eslintとPrettierが競合する可能性のあるルールをすべてオフに。 "eslint-plugin-jest": "24.3.6", // jest（テスト記述時）のコードの問題点について指摘してくれる。 "eslint-plugin-prettier": "3.4.0", // PrettierをESLintルールとして実行し、個々のESLintの問題として違いを報告してくれます。 "husky": "6.0.0", // 「ある行為を行おうとしたとき、登録したコマンドを自動実行」（フックと呼ばれる処理）をしてくれます。 "jest": "27.0.4", // jestテスト用ライブラリ。 "jest-plugin-context": "^2.9.0", // jestの機能を増やすプラグインの類。contextという囲いを作る関数を定義。 "lint-staged": "11.0.0", // ステージングされたgitファイルに対して構文チェック。 "prettier": "2.3.1", // 自動コ―ド整形。 "ts-jest": "27.0.3", // TypeScriptでjestを使えるようにするためのものです。 "ts-node": "10.0.0", // Node.jsでTypeScriptを直接実行するためのものです。 "typescript": "4.3.4" // javaScriptの構文に型を指定できるようにしたAltJSと呼ばれる類の言語。 ＊マークダウンの記法、「折りたたみ」を試みたのですが、うまくHTMLとして解析されないので断念。 4:各種設定ファイルの作成とその設定を行う 必要となるファイルをまとめて作成 プロジェクトのルートディレクトリで、以下のコマンドを実行し、必要なファイルを作成します。 ＊補足＊ ＊セミコロンで行を区切っているため、複数行を一気にコピーし、貼り付けても正常に動作します。 ＊ignoreと名の付くファイルは、その対象から除外する項目を選ぶファイルのことです。 　例： .eslintignoreは、問題を指摘するeslintを実行しないフォルダまたはファイルを定義できます。 terminal # コードエディタの設定ファイル touch .editorconfig; mkdir .vscode; touch .vscode/setting.json; # コードの問題点を指摘してくれるeslintの設定ファイル touch .eslintrc; touch .eslintignore; # コード整形用の設定ファイル touch .prettierrc.yml; touch .prettierignore; # プロジェクトの概要を書いておくためのファイル touch README.md; # option: Gitを使っている場合。 touch .gitignore; コマンドの意味 touch: ファイル更新日を最新にするコマンドですが、該当ファイルがなければ、作成されます。 この時点でのソースツリー selenium-playground ├─.vscode | └─settings.json ├─.editorconfig ├─.eslintignore ├─.eslintrc ├─.gitignore ├─.prettierignore ├─.prettierrc.yml ├─package-lock.json ├─package.json └─README.md 作成した設定ファイルを記述 .editerconfig ＊色がついていた方がわかりやすいため、下記.editerconfigではjavaのシンタックスハイライト（色付け）を利用しています。 .editerconfig root = true [*] end_of_line = lf charset = utf-8 indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true .vscode/setting.json ＊通常のJsonではコメントは書けません。そのため、VS Code右下のJsonをクリックし、JSON with Commentsを選択してください。 ＊setting.json内部の項目（例：editor.tabCompletionなど）をマウスでホバーした際に解説が出ない場合は、お使いのVS Codeのsetting.jsonをコピーするか、こちらのリンクselenium-playground-sampleからコピーしてください。 ＊グロブ（英: glob）とは主にUnix系環境において、ワイルドカード(*)でファイル名のセットを指定するパターンのことです。 .vscode/setting.json { // --------------------------------------------------------------------------------------------------------------------------- // コードエディター // --------------------------------------------------------------------------------------------------------------------------- "editor.tabCompletion": "on", // 垂直ルーラーを表示する列を指定します。 "editor.rulers": [128], // --------------------------------------------------------------------------------------------------------------------------- // ファイル // --------------------------------------------------------------------------------------------------------------------------- // ファイルやフォルダを除外するためのグロブパターンを設定します。 "files.exclude": { "**/node_modules": true }, // ファイルの監視対象から除外するファイルパスのパターンを設定します。 // この設定を変更するには再起動が必要です。起動時に多くのCPU時間を消費するコードがある場合、 // コードが起動時に多くのCPU時間を消費する場合は、大きなフォルダを除外して初期負荷を軽減することができます。 "files.watcherExclude": { "**/.git/objects/**": true, "**/node_modules/**": true, "lib/**": true }, // --------------------------------------------------------------------------------------------------------------------------- // 言語設定 // --------------------------------------------------------------------------------------------------------------------------- "[javascript]": { "editor.formatOnSave": true }, "[typescript]": { "editor.formatOnSave": true }, "[typescriptreact]": { "editor.formatOnSave": true }, "typescript.tsdk": "node_modules//typescript//lib" } .eslintrc { "env": { "browser": true, "node": true, "es6": true, "jest": true }, "extends": [ "eslint:recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended" ], "plugins": ["@typescript-eslint", "jest"], "parser": "@typescript-eslint/parser", "parserOptions": { "sourceType": "module" }, "rules": { "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-unused-vars": [ "error", { "argsIgnorePattern": "^_" } ], "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/no-non-null-assertion": "off", "@typescript-eslint/consistent-type-definitions": ["error", "type"], "arrow-body-style": ["error", "as-needed"], "no-control-regex": "off", "sort-imports": [ "error", { "ignoreCase": true, "ignoreDeclarationSort": true } ], "no-undef": "off" } } ignoreファイルの設定は3種類とも同じにします。 .eslintignore/.prettierignore/gitignore # ------------------------------------------------------------------------------------------------------------------------------ # 一時ファイル # ------------------------------------------------------------------------------------------------------------------------------ # OSやエディタによって一時的に作成されたファイル *~ *# *.bak .settings .tmp logs lib # ------------------------------------------------------------------------------------------------------------------------------ # 動的に作成されたファイル # ------------------------------------------------------------------------------------------------------------------------------ # Node.jsによって作成されたファイル node_modules npm-debug.log # テストによって作成されたファイル coverage .prettierrc.yml .prettierrc.yml # prettierが折り返す行の長さを指定します。 printWidth: 128 # インデントレベルごとのスペースの数を指定します。 tabWidth: 2 # 行のインデントをスペースではなくタブで行うようにします。 useTabs: false # 文章の最後にセミコロンを表示します。 semi: true # ダブルクォートの代わりにシングルクォートを使用します。 singleQuote: false # オブジェクトのプロパティが引用されるタイミングを変更します。 quoteProps: "as-needed" # JSXでダブルクォートの代わりにシングルクォートを使用します。 # jsxSingleQuote: false # 複数行の場合、可能な限り末尾コンマを表示します（例えば、1行の配列には末尾コンマは付きません）。 trailingComma: "all" # オブジェクトリテラルの括弧間のスペースを表示します。 bracketSpacing: true # 複数行のJSX要素の `>` を、次の行に単独ではなく、最終行の最後に配置します。 # (自分で閉じる要素には適用されません)。 # jsxBracketSameLine: false # 単独の矢印関数のパラメータを括弧で囲みます。 arrowParens: "always" # ファイルの一部分のみをフォーマットする. # この2つのオプションは, 指定された文字オフセットで始まるコードと終わるコードを # フォーマットするために利用できます(それぞれ, 包括的, 排他的です), # 以下の2つのオプションは、与えられた文字オフセットで始まるコードと終わるコードをフォーマットするために使用できます（それぞれ包括的および排他的）。) # rangeStart: 0 # rangeEnd: "Infinity" # 使用するパーサーを指定します。 # babylonパーサーもFlowパーサーも、同じJavaScriptの機能セットをサポートしています（Flowを含む）。 # Prettierは、入力ファイルのパスからパーサーを自動的に推測するので、この設定を変更する必要はありません。 # パーサー "typescript" # 入力ファイルのパスを指定します。これは、パーサーの推論に使用されます。 filepath: "none" # Prettierは、ファイルの先頭にプラグマと呼ばれる特別なコメントを含むファイルのみをフォーマットするように自分自身を制限することができます。 # これは、大きくてフォーマットされていないコードベースを徐々にprettierに移行するときに非常に便利です。 requirePragma: false # Prettierは、ファイルの先頭に、そのファイルがprettierでフォーマットされたことを示す特別な@formatマーカーを挿入することができます。 # これは、--require-pragmaオプションと一緒に使うとうまくいきます。ファイルの先頭に既にdocblockがある場合、このオプションは新しいdocblockを追加します。 # このオプションは、@formatマーカーでそれに改行を追加します。 insertPragma: false # デフォルトでは、Prettierはマークダウンテキストをそのままラップします。なぜなら、いくつかのサービスは改行を考慮したレンダラを使用しているからです。 # 例えばGitHub commentやBitBucketなどです。場合によっては、エディタやビューアでのソフトな折り返しに頼りたいこともあるでしょう。 # このオプションでは、"never"を選択することができます。 proseWrap: "preserve" # HTMLファイルのグローバルな空白の感度を指定します, 詳しくはwhitespace-sensitive formattingを参照してください. # https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting htmlWhitespaceSensitivity: "strict" # 歴史的な理由により、テキストファイルでは一般的に使用される2種類の改行コードが存在します。 endOfLine: "lf" README.md ＊TODOコメント項目は人によって変わるところ、または、追記対象のものです。 README.md <h1 align="center">Selenium playground</h1> <!-- TODO https://shields.io/category/license　のサイトでバッジを作れます。 --> <div align="center"><a href="https://opensource.org/licenses/MIT"><img alt="GitHub" src="https://img.shields.io/github/license/SARDONYX-sard/nodejs-website-autorun-set"></a> </div> ## 目次 <!-- TODO このように記述すると、VS-Codeが「#」を読み取り、自動で目次を作成してくれます --> <!-- TOC depthFrom:2 --> - [目次](#目次) - [このプログラムについて](#このプログラムについて) - [クイックスタート](#クイックスタート) - [必要なもの](#必要なもの) - [インストール](#インストール) - [使い方](#使い方) - [selenium](#selenium) - [テスト](#テスト) - [License](#license) <!-- /TOC --> ## このプログラムについて SeleniumのプログラムをNode.js上で動かしたものです。 Seleniumのプログラムでは、あらかじめ指定したURLを順番に開くことができます。 ## クイックスタート ### 必要なもの * npm または Yarn * Node.js 14 またはそれ以上 * Chrome 91 ## インストール 1. このリポジトリをクローンします。 <!-- TODO あなたのリモートリポジトリのURLをここに記述 --> git clone `<yourRipositoryURL>` <!-- TODO 使い方の欄は、mdのなかで例を書くことができないため、ここでは未掲載 --> ## License The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT). <!-- TODO あなたのユーザ―ネームを記述 --> Copyright 2021 `<yourUserName>` All rights reserved. tsconfig.jsonの作成と設定 typescriptを使用する際の設定ファイル。 tsconfig.jsonの作成 プロジェクトのルートディレクトリ（この記事ではselenium-playgroundフォルダの直下）で、 以下のコマンドを実行 npx tsc --init ここをクリックで実行時の画像表示 コマンドの解説 npx: 　ローカルプロジェクト（selenium-playgroundフォルダ内）のnode_modules内の実行コマンドを実行するためのコマンド。 　ネット上のnpmライブラリ群のコマンドも使用可能。 tsc: TypescriptをJavaScriptに変換するためのコマンド。 --init: tsc --initとするとtsconfig.jsonが作成される。 tsconfig.jsonのの設定 以下をコピペするか同じ項目を選び、includeとexcludeの項目を追記。 コメントを日本語翻訳したものを以下に記載しておきます。 ./tsconfig.json { "compilerOptions": { /* このファイルについての詳細は https://aka.ms/tsconfig.json を参照してください */ /* 基本的なオプション */ "target": "es2015" /* ECMAScript のターゲットバージョンを指定します: 'ES3' (デフォルト), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', または 'ESNEXT'. */, "module": "commonjs" /* モジュールコード生成の指定: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, "lib": ["ESNext", "dom"] /* コンパイル時に組み込むライブラリファイルを指定します。*/, "allowJs": false /* javascript ファイルのコンパイルを許可します。*/, // "declaration": true, /* 対応する '.d.ts' ファイルを生成します。*/ "outDir": "./lib" /* 出力構造をディレクトリにリダイレクトする。*/, "rootDir": "./src" /* 入力ファイルのルート・ディレクトリを指定する。--outDirで出力のディレクトリ構造を制御するために使用する。*/, // "removeComments": true, /* コメントを出力に出さない。*/ // "isolatedModules": true, /* 各ファイルを個別のモジュールとしてトランスパイルする (ts.transpileModule'と同様)。*/ /* 厳密なタイプチェックのオプション */ "strict": true /* すべての厳密なタイプ・チェック・オプションを有効にします。*/, /* 追加チェック */ // "noUnusedLocals": true, /* 未使用のローカルでエラーを報告する。*/ // "noUnusedParameters": true, /* 未使用のパラメータに関するエラーを報告します。*/ // "noImplicitReturns": true, /* 関数内の全てのコードパスが値を返さない場合にエラーを報告する。*/ "noFallthroughCasesInSwitch": true, /* switch文のfallthroughケースのエラーを報告する。*/ // "noUncheckedIndexedAccess": true, /* インデックス署名の結果に'undefined'を含める */*。 // "noImplicitOverride": true, /* 派生クラスのメンバーをオーバーライドする際には、'override'修飾子を付ける。*/ // "noPropertyAccessFromIndexSignature": true, /* インデックス署名から宣言されていないプロパティが要素アクセスを使用することを要求する。*/ /* モジュール解決オプション */ "moduleResolution": "node" /* モジュール解決方法の指定: 'node' (Node.js) 又は 'classic' (TypeScript pre-1.6). */, "baseUrl": "./" /* 絶対的でないモジュール名を解決するためのベースディレクトリを指定する。*/, // "types": [] /* コンパイル時にインクルードされる型宣言ファイル。*/, "esModuleInterop": true /* すべてのインポートに対して名前空間オブジェクトを作成することで、CommonJS と ES モジュール間のエミットの相互運用を可能にする。allowSyntheticDefaultImports' を暗示します。*/, /* 実験的なオプション */ // "experimentalDecorators": true, /* ES7 デコレータを実験的にサポートします。*/ // "emitDecoratorMetadata": true, /* デコレーターのタイプメタデータの出力を実験的にサポートします。*/ /* 高度なオプション */ "skipLibCheck": true /* 宣言ファイルの型チェックをスキップする。*/, "forceConsistentCasingInFileNames": true /* 同一ファイルへの不整合なケースの参照を許可しない。*/ }, "include": ["./src/**/*"], "exclude": ["node_modules", "./src/**/*.spec.ts"] } huskyファイルの作成と設定　＊Gitを使っていなければ、不要な工程となります。 huskyを使って、gitのコミット時にlintとコード整形を行わせます。 .huskyフォルダの作成 以下のコマンドを実行します npx husky-init .huskyフォルダ内の_というフォルダを削除 作成された.huskyフォルダの中のpre-commitファイルを編集 pre-commit #!/bin/sh - . "$(dirname "$0")/_/husky.sh" + npx lint-staged package.jsonの修正 package.json { "name": "selenium-playground", "version": "1.0.0", "description": "", + "repository": { // TODO gitをお使いの場合 + "type": "git", + "url": "<あなたのリモートリポジトリ>" + }, - "main": "index.js", + "main": "src/main.ts", "scripts": { + "selenium": "npx ts-node src/main.ts", // セレニウムの実行 + "lint": "eslint ./src/**/*.ts", // 拡張子がtsのものの問題点を探す + "lint:fix": "eslint ./src/**/*.ts --fix", // --fix　オプションで自動修正可能なら実行するの意味 + "test": "jest --coverage", + "clean": "rm -rf ./src/logs ./coverage ./lib", // removeの意味で、ファイルやフォルダの削除に使用 // -r: 再帰的(フォルダの中のフォルダも)、 -f:強制的にというオプション // rmは本来unix系(MacやLinux)のコマンドですが、 // windowsでもエイリアス(長いコマンドを簡単に実行できるようにした別名)として登録してあるので、これを使用 - "prepare": "husky install" }, "keywords": [], + "author": "<あなたのユーザー名>", - "license": "ISC", + "license": "MIT",　 // 自由に改変、使用してOKだけど、責任は一切負わないし、使用時は著作権明記してねのライセンス "dependencies": { // 略 }, "devDependencies": { // 略 - } + }, + "husky": { // huskyでgitのコミット時にlint-saged（この項目の下の項目）の内容を実行 + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { // 先ほどインストールしたlint-stagedの設定 + "src/**/*.{js,jsx,ts,tsx}": [ // srcフォルダ以下、、js,jsx,ts,tsxの拡張子の付くファイルに + "eslint --fix ./src/**/*", // 問題点のチェックと、 + "prettier --write ./src/**/*" // コード整形を行う + ] + }, + "peerDependencies": {}, + "engines": { + "node": ">=14" // Node.jsの対応バージョンの記述 + } } コピペ用 「TODO」書かれたコメントは削除する必要があります package.json { "name": "selenium-playground", "version": "1.0.0", "description": "", "repository": { "type": "git", "url": "https://github.com/SARDONYX-sard/selenium-playground" // TODO: あなたのリポジトリを記述 }, "main": "src/main.ts", "scripts": { "selenium": "npx ts-node src/main.ts", "lint": "eslint ./src/**/*.ts", "lint:fix": "eslint ./src/**/*.ts --fix", "test": "jest --coverage", "clean": "rm -rf ./src/logs ./coverage ./lib" }, "keywords": [], "author": "SARDONYX", "license": "MIT", "dependencies": { // TODO バージョンはお使いのものによって変わるので省略。ここはコピーしないようにご注意 }, "devDependencies": { // TODO バージョンはお使いのものによって変わるので省略。ここはコピーしないようにご注意 }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,jsx,ts,tsx}": [ "eslint --fix ./src/**/*", "prettier --write ./src/**/*" ] }, "peerDependencies": {}, "engines": { "node": ">=14" } } セッティング終了 次回は、srcフォルダとその中身を作成していきます。 Node.js - セレニウムで遊ぼ！(b ・ω・)b :2日目(中身)