npmのエラーログが分かり辛過ぎるんだが...

f:id:ts0818:20220205171417j:plain

www.itmedia.co.jp

 米Googleは2月3日(現地時間)、「Google Workspace」(旧「G Suite」)の新無料プラン「Google Workspace Essentials Starter Edition」を発表した。Googleアカウントではなく、ユーザーが既に使っている仕事用メールアドレスで利用できる。日本でも向こう数週間中に利用可能になる見込みだ。

Google、仕事メアドでWorkspace(旧G Suite)を無料で使える新プラン「Essentials Starter」 - ITmedia NEWS

 このプランは、仕事用メールアドレスでGoogle Workspaceアカウントを作成することで、無料で15GBのGoogleドライブ、Meet、チャット、ドキュメント、シート、スライド、カレンダーなどを使える。Gmailは使えない。共有できるのは25人まで。クレジットカードの登録は必要なく、完全に無料だ。ドライブやMeetの容量や利用時間を増やしたい場合や招待したい人数が増加した場合は有料プランに移行できる。

Google、仕事メアドでWorkspace(旧G Suite)を無料で使える新プラン「Essentials Starter」 - ITmedia NEWS

⇧ う、う~ん、無償版の「G Suite」で「Gmail」が使えてたとしたら、この変更はなかなか厳しい気が...

workspace.google.co.jp

⇧ そもそも「プランと料金のページ」見ても、無償版の話が無いんだが...

cloud.google.com

The new Google Workspace Essentials Starter Edition is a no-cost solution for business users looking to enhance teamwork and unlock innovation with secure-by-design collaboration. With Essentials Starter, we’re making it easy for employees to choose their own productivity tools and bring modern collaboration to work.

https://cloud.google.com/blog/products/workspace/unlock-collaboration-with-google-workspace-essentials

⇧ なんか、ドキュメントの整備が間に合ってないってことなんかな?

例の如く冒頭から関係ない話でしたが、今回は「npm」などについてです。

レッツトライ~。

npmのエラーログが分かり辛過ぎるんだが...

Vue.jsのプロジェクトのフォルダー構成とかって結局どうすれば良いんかな?って思って調べてたらば、

awesome-vue.js.org

⇧ Vue.jsに関してのscaffoldの特集サイトみたいなのはあったのですが、知りたいのは、やっぱり全体のフォルダー構成とそれぞれのフォルダーが担う役割って部分だと思うんですよ。

フロントエンドにおけるプロジェクトのフォルダー構成の基本形みたいなの知りたいと思った次第で。

で、何だかんだで、

itnext.io

⇧ 前に参考にさせていただいたサイト以外に芳しい情報がヒットしてこないというね...

github.com

⇧ 上記サイト様がGitHubにVue 2.x+TypeScriptのサンプルを公開してくれてたので、ローカル環境で試してみようと、git cloneしてからnpm installしてみたところ、エラーが起こるというね...

f:id:ts0818:20220205151702p:plain

f:id:ts0818:20220205151735p:plain

f:id:ts0818:20220205151801p:plain

コマンドプロンプトだと文字化けしちゃっていて、エラーログが意味ない感じになっちゃてたので、「git bash」で確認したところ、

f:id:ts0818:20220205152002p:plain

f:id:ts0818:20220205152044p:plain

f:id:ts0818:20220205152137p:plain

まぁ、結局、どっちにしろ、ログのどこを見れば良いのかが分からんのだけど...

qiita.com

⇧ 上記サイト様によりますと、エラーログの最後の方を確認すれば、良いらしく、今一度確認してみました。

...省略    
5207 error           ] (ソース ファイルをコンパイルしています ..\src\sass_types\list.cpp)
5207 error プロジェクト "C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\build\binding.vcxproj" (既定のターゲット) のビルドが終了しました -- 失敗。
5207 error プロジェクト "C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\build\binding.vcxproj.metaproj" (既定のターゲット) のビルドが終了しました -- 失敗。
5207 error プロジェクト "C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\build\binding.sln" (既定のターゲット) のビルドが終了しました -- 失敗。
5207 error
5207 error ビルドに失敗しました。    
...省略
5208 error gyp verb get node dir no --target version specified, falling back to host node version: 16.13.1
5208 error gyp verb command install [ '16.13.1' ]
5208 error gyp verb install input version string "16.13.1"
5208 error gyp verb install installing version: 16.13.1
5208 error gyp verb install --ensure was passed, so won't reinstall if already installed
5208 error gyp verb install version is already installed, need to check "installVersion"
5208 error gyp verb got "installVersion" 9
5208 error gyp verb needs "installVersion" 9
5208 error gyp verb install version is good
5208 error gyp verb get node dir target node version installed: 16.13.1
5208 error gyp verb build dir attempting to create "build" dir: C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\build
5208 error gyp verb build dir "build" dir needed to be created? C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\build
5208 error gyp verb find vs2017 Found installation at: C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools
5208 error gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.Windows10SDK.17763
5208 error gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.VC.Tools.x86.x64
5208 error gyp verb find vs2017   - Found Microsoft.VisualStudio.VC.MSBuild.Base
5208 error gyp verb find vs2017   - Using this installation with Windows 10 SDK
5208 error gyp verb find vs2017 using installation: C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools
5208 error gyp verb build/config.gypi creating config file
5208 error gyp verb build/config.gypi writing out config file: C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\build\config.gypi
5208 error (node:16840) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
5208 error (Use `node --trace-deprecation ...` to show where the warning was created)
5208 error gyp verb config.gypi checking for gypi file: C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\config.gypi
5208 error gyp verb common.gypi checking for gypi file: C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass\common.gypi
5208 error gyp verb gyp gyp format was not specified; forcing "msvs"
5208 error gyp info spawn C:\python2.7.16\python.EXE
5208 error gyp info spawn args [
5208 error gyp info spawn args   'C:\\Users\\Toshinobu\\Desktop\\soft_work\\vue_work\\vue-git\\vue-typescript-example\\node_modules\\node-gyp\\gyp\\gyp_main.py',
5208 error gyp info spawn args   'binding.gyp',
5208 error gyp info spawn args   '-f',
5208 error gyp info spawn args   'msvs',
5208 error gyp info spawn args   '-G',
5208 error gyp info spawn args   'msvs_version=2015',
5208 error gyp info spawn args   '-I',
5208 error gyp info spawn args   'C:\\Users\\Toshinobu\\Desktop\\soft_work\\vue_work\\vue-git\\vue-typescript-example\\node_modules\\node-sass\\build\\config.gypi',
5208 error gyp info spawn args   '-I',
5208 error gyp info spawn args   'C:\\Users\\Toshinobu\\Desktop\\soft_work\\vue_work\\vue-git\\vue-typescript-example\\node_modules\\node-gyp\\addon.gypi',
5208 error gyp info spawn args   '-I',
5208 error gyp info spawn args   'C:\\Users\\Toshinobu\\.node-gyp\\16.13.1\\include\\node\\common.gypi',
5208 error gyp info spawn args   '-Dlibrary=shared_library',
5208 error gyp info spawn args   '-Dvisibility=default',
5208 error gyp info spawn args   '-Dnode_root_dir=C:\\Users\\Toshinobu\\.node-gyp\\16.13.1',
5208 error gyp info spawn args   '-Dnode_gyp_dir=C:\\Users\\Toshinobu\\Desktop\\soft_work\\vue_work\\vue-git\\vue-typescript-example\\node_modules\\node-gyp',
5208 error gyp info spawn args   '-Dnode_lib_file=C:\\Users\\Toshinobu\\.node-gyp\\16.13.1\\<(target_arch)\\node.lib',
5208 error gyp info spawn args   '-Dmodule_root_dir=C:\\Users\\Toshinobu\\Desktop\\soft_work\\vue_work\\vue-git\\vue-typescript-example\\node_modules\\node-sass',
5208 error gyp info spawn args   '-Dnode_engine=v8',
5208 error gyp info spawn args   '--depth=.',
5208 error gyp info spawn args   '--no-parallel',
5208 error gyp info spawn args   '--generator-output',
5208 error gyp info spawn args   'C:\\Users\\Toshinobu\\Desktop\\soft_work\\vue_work\\vue-git\\vue-typescript-example\\node_modules\\node-sass\\build',
5208 error gyp info spawn args   '-Goutput_dir=.'
5208 error gyp info spawn args ]
5208 error gyp verb command build []
5208 error gyp verb build type Release
5208 error gyp verb architecture x64
5208 error gyp verb node dev dir C:\Users\Toshinobu\.node-gyp\16.13.1
5208 error gyp verb found first Solution file build/binding.sln
5208 error gyp verb using MSBuild: C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe
5208 error gyp info spawn C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe
5208 error gyp info spawn args [
5208 error gyp info spawn args   'build/binding.sln',
5208 error gyp info spawn args   '/nologo',
5208 error gyp info spawn args   '/p:Configuration=Release;Platform=x64'
5208 error gyp info spawn args ]
5208 error gyp ERR! build error
5208 error gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
5208 error gyp ERR! stack     at ChildProcess.onExit (C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-gyp\lib\build.js:262:23)
5208 error gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
5208 error gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
5208 error gyp ERR! System Windows_NT 10.0.19043
5208 error gyp ERR! command "C:\\nodejs\\node.exe" "C:\\Users\\Toshinobu\\Desktop\\soft_work\\vue_work\\vue-git\\vue-typescript-example\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
5208 error gyp ERR! cwd C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-git\vue-typescript-example\node_modules\node-sass
5208 error gyp ERR! node -v v16.13.1
5208 error gyp ERR! node-gyp -v v3.8.0
5208 error gyp ERR! not ok
5208 error Build failed with error code: 1
5209 verbose exit 1

⇧「CWD (current working directory) 」を見るに、「node-sass」っていうnpmモジュールでエラーを起こしているということらしい。

ただ、エラーログを見ても、どうすれば良いのかが分からないのですが、

qiita.com

サイトを見ると、node-sassのバージョンに対応しているnodeのバージョンは決まってる様子。

npm install時にnode-sassでcommand failed - Qiita

⇧ 上記サイト様によりますと、「node-sass」というnpmモジュールのバージョンと「Node.js」のバージョンを合わせればOKということらしい、う~ん...エラーログからはたどり着けない情報な気がしてならない...。

そして、なかなかの衝撃...「package.json」や「package-lock.json」でnpmモジュールのバージョンとか指定していたとしても、「Node.js」のバージョン違っていたらアカンということみたいね...

実際に確認してみると、

www.npmjs.com

⇧ 対応表を掲載してくれてました、なかなか良心的。

で、参考サイト様のサンプルの「node-sass」のバージョンを確認してみたところ、

■package.json

"node-sass": "^4.9.0"

f:id:ts0818:20220205154500p:plain

■package-lock.json

    "node-sass": {
      "version": "4.11.0",
      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
      "dev": true,
      "requires": {
        "async-foreach": "^0.1.3",
        "chalk": "^1.1.1",
        "cross-spawn": "^3.0.0",
        "gaze": "^1.0.0",
        "get-stdin": "^4.0.1",
        "glob": "^7.0.3",
        "in-publish": "^2.0.0",
        "lodash.assign": "^4.2.0",
        "lodash.clonedeep": "^4.3.2",
        "lodash.mergewith": "^4.6.0",
        "meow": "^3.7.0",
        "mkdirp": "^0.5.1",
        "nan": "^2.10.0",
        "node-gyp": "^3.8.0",
        "npmlog": "^4.0.0",
        "request": "^2.88.0",
        "sass-graph": "^2.2.4",
        "stdout-stream": "^1.4.0",
        "true-case-path": "^1.0.2"
      },

f:id:ts0818:20220205160423p:plain

ということで、「package.json」と「package-lock.json」で「node-sass」のバージョンが異なってますと...

qiita.com

package-lock.json は npm install 実行時に作成・更新されるファイルです。

npm install 実行時は以下のような挙動をしています。

  1. package.json の内容を更新する
  2. package.json の内容をもとに node_modules のディレクトリにパッケージをインストールする
  3. node_modules に実際にインストールされたパッケージのバージョン情報が package-lock.json に記述される

package-lock.json ってなに? - Qiita

まとめ

  • package-lock.json は npm install 実行時に新規作成・更新される
  • package-lock.json には npm install で実際にインストールしたパッケージ情報が記載されている
  • package-lock.json を使用してパッケージをインストールする際には npm ci コマンドを実行する
  • npm ci コマンドを実行する主なユースケースとしては CI 実行時や git clone 後の動作確認などで使用する
  • 上記の用途があるので package-lock.json は Git で管理したほうがいいファイルである

package-lock.json ってなに? - Qiita

⇧ 上記サイト様によりますと、git clone後の動作確認とかしたい場合は、「package-lock.json」を使用する「npm ci」コマンドを使った方が良いそうな。

「package-lock.json」に記載の「node-sass」のバージョンが「4.11」なので「Node.js」の「version 11」系で動くということらしい。自分の環境では、「Node.js」の「version 11」系がインストールされてないので、

f:id:ts0818:20220205154949p:plain

インストールが可能な「Node.js」の「LTS(Long Term Support)」版の確認をしてみたところ、「nvm-windows」コマンドだと、「version 11」系の情報がそもそも確認できなかったので、

f:id:ts0818:20220205161614p:plain

https://nodejs.org/download/release/」にブラウザでアクセス。「Node.js」のバージョン一覧が表示されてるので、「latest-v-11.x/」のリンクをクリック。

f:id:ts0818:20220205161540p:plain

バージョンが「11.15.0」が存在するということらしいので、

f:id:ts0818:20220205161853p:plain

「nvm-windows」でバージョン「11.15.0」の「Node.js」をインストールして、使用する「Node.js」を切り替えます。

f:id:ts0818:20220205162103p:plain

で、今度は「npm ci」コマンドで、トライ。

f:id:ts0818:20220205162524p:plain

f:id:ts0818:20220205162605p:plain

「npm run serve」で、Vue.jsのプロジェクトに同梱されてる開発用サーバーを起動。

f:id:ts0818:20220205162824p:plain

ファイアウォール」のダイアログが表示された場合は、「アクセスを許可する(A)」で。

f:id:ts0818:20220205162744p:plain

開発用サーバーが起動したので、ブラウザで「http://localhost:8080/」にアクセス。

f:id:ts0818:20220205162901p:plain

サンプルのアプリケーションの画面が表示されました。

f:id:ts0818:20220205162942p:plain

適当な値を入力して、「SIGN IN」ボタンを押下したところ、

f:id:ts0818:20220205163401p:plain

ログインできました。

f:id:ts0818:20220205163502p:plain

「Vue Router」を使っての「SPA(Single Page Application)」になってるようです。「Vuex」も利用してるようです。

2022年2月6日(日)追記:↓ ここから

「Vuex」はフロントエンド側でデータを保持する仕組みらしいのですが、サンプルの初期表示のデータをどこから引っ張て来てるんだろう?と疑問に思って調べてみたところ、

<template>
  <div id="app"><router-view /></div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ApiCalls } from '@/common-js/modules'

Vue.config.devtools = true;

@Component
export default class App extends Vue {
  @ApiCalls.Action initialApiCalls!: any
  created() {
    this.initialApiCalls()
  }
}
</script>
<style lang="scss">
@import 'assets/scss/main';
</style>    

⇧ 上記のApiCallsってのが、

import { namespace } from 'vuex-class'

export const ApiCalls = namespace('apiCalls')
export const PostsModule = namespace('posts')
export const UsersModule = namespace('users')
export const CommentsModule = namespace('comments')
export const TagsModule = namespace('tags')    

で、定義してるものらしく、「App.vue」にあった@ApiCalls.Actionってのが以下のファイルのことらしく、

import { ActionTree } from 'vuex'
import { ApiCallsState } from './interfaces'
import { RootState } from '@/vuex/types'

export const actions: ActionTree<ApiCallsState, RootState> = {
  initialApiCalls({ dispatch }) {
    dispatch('users/fetchUsers', null, { root: true })
    dispatch('posts/fetchPosts', null, { root: true })
    dispatch('comments/fetchComments', null, { root: true })
  }
}    

⇧ 上記の試しに、

dispatch('users/fetchUsers', null, { root: true })    

⇧ の部分は、

import { ActionTree } from 'vuex'
import { UsersState } from './interfaces'
import { RootState } from '@/vuex/types'
import { httpGetRequest } from '@/vuex/modules/common-js/api-requests'
import { FETCH_USERS } from './mutations-types'

export const actions: ActionTree<UsersState, RootState> = {
  fetchUsers({ commit }) {
    httpGetRequest('users/').then(users => {
      commit(
        FETCH_USERS,
        users.map((user: any) =>
          (({ id, name, phone }) => ({ id, name, phone }))(user)
        )
      )
    })
  }
}  

⇧ のメソッドを呼んでるということらしく、上記のhttpGetRequestメソッドは、

const BASE_URL: string = 'https://jsonplaceholder.typicode.com/'

export async function httpGetRequest(url: string) {
  return fetch(BASE_URL + url).then(res => res.json())
}

⇧ 呼ばれていて、

jsonplaceholder.typicode.com

⇧ って外部サイト(サーバー)で用意されてるAPIを叩いていたってことらしい。

無料ってのが確認できたから良いですが、サンプルを試すのも事前に確認しないと怖いですね...

blog.a-1.dev

https://my-json-server.typicode.com/

同じ人が作っているサービスで、自分で用意したJSONデータを返すようにできます。
使い方はすごい簡単でGitHubリポジトリを作成してdb.jsonと言う名前でファイルを置くだけです。

JSONPlaceholderを試してみた - A1 Blog

ちなみにFreeプランでは下記の制限があって、大量データなどは使えないようですが課金すれば少し上限は上がるようです。

JSONPlaceholderを試してみた - A1 Blog

⇧ 上記サイト様によりますと、自分でレスポンスのJSONデータを作ることもできるサービスを同じ方が作られてるそうです。

それにしても、「Vuex」でファイル名は「actions.ts」って複数形なのに、「@ApiCalls.Action」で紐づけしたりしてるルールが分かり辛いですね...

2022年2月6日(日)追記:↑ ここまで

「Ctrlキー」+「Cキー」で開発用サーバーを停止します。

f:id:ts0818:20220205172345p:plain

とりあえず、npmのエラーログが分かり辛いということは分かりましたかね...

毎度モヤモヤ感が半端ない...

今回はこのへんで。