Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ対応はしてません。

タグ: VS Code

npm installがENOENTとか変な失敗をするとき、VS Codeを閉じると良いかも。

投稿日時:
カテゴリー: 開発環境
タグ: , ,

Windows/WSL1 + Ubuntu + VS Code という組み合わせでやってるんですが、しばしば npm install が失敗します。

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/semver
npm ERR! dest /mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/.semver.DELETE
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, rename '/mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/semver' -> '/mnt/c/Users/ginpei/xxx/node_modules/@typescript-eslint/typescript-estree/node_modules/.semver.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ginpei/.npm/_logs/2020-09-30T18_57_36_471Z-debug.log

なんか一時ファイルっぽいし謎ですね。

原因はよくわかってないんですが、どこか（どこだっけ）で「VS Code のファイル監視が悪さをしている」ような話を聞いたことがあって、実際 VS Code を閉じた状態でこういうエラーに出くわしたことはないです。

というわけで VS Code を閉じてみてください。

  1. VS Code を閉じる
  2. VS Code 以外のターミナルから npm install
  3. 完了したら、VS Code を開く

[Windows] VS Code を閉じた状態でターミナルを利用する

VS Code 内のターミナルで実行しているのに VS Code を閉じるとそのまま npm install も終了してしまうので、他のターミナルが必要です。

  1. cmd.exe … Windows 標準の黒い画面。wsl コマンドとかで WSL を開く
  2. Windows Terminal … Microsoft 謹製のターミナルアプリ。複数タブ等、諸々便利でおすすめ
  3. tmux … Linux 内で動くターミナル多重化アプリ。一言で言うと「閉じても終了しないセッションを作る」ことができる

tmux が一番便利だけど CLI に慣れてないとつらいと思うので、一般には Windows Terminal をお勧めしておきます。いずれにしろ入れておいて損はないです。

おしまい

「VS Code のファイル監視が～」の件、ちゃんとした情報源があれば教えてください。

@ ts-checkを付けると、VS Codeが普通のJavaScriptもTypeScript扱いで見てくれるんだって。

投稿日時:
カテゴリー: JavaScript
タグ: , ,

// @ts-check を書くと、JSファイルでもTSとしてvalidateしてくれるそうです。

（@tsのひとごめん。）

DOMノードどーすんの問題

引数もらって計算して結果を返すだけの関数ってならこれすげー便利で良いんだけど、 querySelector() 使うと対応が面倒な感じになる。これどうしたら良いかなあ。というかTSでもよく分からないや……。

const input = document.querySelecter('input#the-input');
console.log(input!.value); // -> Property 'value' does not exist on type 'Element'.

querySelecter() が返すのは Element 型なので、 <input> 用のプロパティが定義されていない。

一応、解決策としては instanceof で確認してやることで型が固定します。

const input = document.querySelecter('input#the-input');
if (!(input instanceof HTMLInputElement)) { return; }
console.log(input!.value);

ついでに null チェックもできて一石二鳥ではある。

JSじゃなくてTSの場合はジェネリクス <T> で書ける。

const input = document.querySelector<HTMLInputElement>('input#the-input')!;
input.value = 'Hello World!';

ただしこの場合は null の確認が必要。（これ↑は ! ですっ飛ばした。）

なんかもっと楽々書けないかなあ。そもそもReactやVueが全盛期の現代で querySelector() 自体をあんまり使わないか……。

Nuxt.js他で時計アプリ (PWA) を作ってみたよ。

投稿日時:
カテゴリー: JavaScript
タグ: , , , , , ,

ええいや時計って……という感じはあるんだけど、とにかくNuxt.jsを使ってみたかったのです。あと自分では使う。

できあがったもの

アナログ時計が左に、デジタル時計が右に。あとポモドーロタイマー付き。

使った技術

ライブラリ、フレームワーク

ツール

ウェブ標準API

サービス

技術系感想

Nuxt.js

この記事の影響。

なんか久しぶりに「動くものがさくさく作れる」という快感を味わうことができたフレームワーク。Ruby on Railsにこなれてきた頃の快感を思い出しました。

vue-cli使って入れたんだけど、最初からディレクトリとか開発用サーバーとか、各種ビルドとか即時部分更新 (HMR) とか、追加のあれこれなしに書くだけですぐ動く。黒魔術的な感じなのもRailsっぽい。いや別にRailsと比べるものじゃないんだけど。

今回は静的HTML (SSR) でやったけど、そのうち動的なやつもやってみたい。Firebaseでホストすればできると聞いたような気がする？　未調査。別に # なURLでも構わないけども。

vue-cilで入れるやつのコマンド（公式ドキュメントより）:

$ npx vue-cli init nuxt-community/starter-template my-project

Nuxt + PWA

こいつを yarn add するだけでわりとすぐ動いた。お手軽便利。これを導入するだけで用が済んでしまったので、ServiceWorkerも自前では書いてないです。

ドキュメントはあんまり親切じゃない感じがする。まだ使い方とかがあんまりわかってない。

Visual Studio Code

ずっとVimを使ってきたんだけど（最近はNeoVim）、ちょっと人に教えるのにこれはあれだよなーと思って「普通のエディター」として使い始めてみました。あらでも良いじゃない。

スクリーンショット。公式サイトから。

後発なうえに開発体制が盤石なだけあって、さすがに出来が良い。各種OSに対応している点、インストールしてすぐ使える点、プラグインが豊富かつ導入や管理も楽な点、日本語対応している点から、今後は人様にお勧めしていこうかなと思っております。

最初に導入してほしいプラグイン:

  • Code Spell Checker
  • EditorConfig
  • ESLint（JS系のひと向け）

ただ、スクロールがなかなかちょっと。これはCodeじゃなくてたぶんElectron for Windowsの問題で、Slack.exeなんかでも起こる。どうも onscroll で何かやってるとうまくスクロールが動かなくなるみたい。詳細未調査だけど、たしか自分が作ったアプリだとそんな感じだった。まあだいたいの人はMacだから問題ないね……。

あとVimプラグインはキー操作が衝突するんで、案の定アレでした。

CSS Grid

何度か使ったことあったかな。気がつけば一通りのブラウザサポートが揃っていたので。

CSS Gridは全てのモダンブラウザで動作する。画像はgrid-templateプロパティの場合。

今回複雑なレイアウトをしてはいないけれども、別にそんじょそこらの細かいところでも割と気軽に使えるので、今後はがしがし使って行きたい。

今回使ったのは右側半分。”T”の字に区切ってます。

GitHub Pages + Cloudflare

今回は全部静的ファイルなので、GitHub Pagesで公開してCloudflareでhttps化。

これも簡単にできて楽だったので、今後は同じようにサブドメインにどんどん生やしていく感じで色々作っていこうかなと思いました。

作業内容はこれ↓。

yarn

普段はnpmの方を使っているんだけど、今回はなんとなくこっちに。インストールが早いとかは聞いてるけれども、うーん特に不満はないけど利点を感じるほどでもなかった。npmも今はロックファイルあるし、普通にインストールしたら記録されるしなあ。

アプリの紹介

時計です。

ポモドーロのタイマー付きです。

おしまい

楽しかった。