目的

Yarnやnpm(node package manager)に関する情報を要点を抑えて簡単にまとめる。
Yarnやnpmに関する記事は既にたくさんあるので参考になりそうな記事もまとめて網羅的に調べやすい記事にしたい（いろいろ動きがあれば更新していく）。

npm?

• npmはNode.js（後述）のパッケージ管理ツール。
• 必要なパッケージをインストールする際に、そのパッケージが動くために必要な他のパッケージも合わせてインストールすることができる。
• モダンな開発を行いたいなら必須。

参考記事

フロントエンド開発の３ステップ（npmことはじめ）
npmの導入方法などのシンプルでわかりやすい記事。

Node.js?

• ブラウザ上でしか動けなかったJavaScriptをパソコン上で動かせるようにする。
• JavaScript実行環境。プラットフォーム。Webサーバの役割を担うことができる。
• 開発に便利なパッケージを使うのに必要。

参考記事

Node.jsとはなにか？なぜみんな使っているのか？
Node.jsを利用することでフロント側でできることが増え、開発を効率的に行えるようになった。
その背景を説明しています。

Yarn?

• npmとほぼ同じような用途に使う。
• npmと互換性があり、npmで使用していたプロジェクト設定ファイル（package.json）がそのまま使える。
• npmと比較するとインストールが速い、セキュリティが高いという特徴がある。
• npmとコマンドが似ているので学習コストは低い。

Yarnをインストールするためにnpmをインストールするってなんか変な感じですよね。

参考記事

npmとは　yarnとは
npmとyarnの違いを箇条書きで簡潔に紹介しています。

yarnチートシート
Yarnのコマンドがまとめられてます。npmのコマンドと似ているので導入しやすい！2017年の記事。

前書き

この記事は翻訳記事になります。

近年、JSで書かれてるプロジェクトをTSに書き直すことが業界内で一種の風潮になって、
この記事で敢えてTSからJSに戻そうとする事例が目新しいと思ったので、翻訳してみました。

出処: 5 reasons why Deno will stop using TypeScript - StartFunction
原作者: eliorivero
Denoの紹介:
V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、
JavaScript及びTypeScriptのランタイム環境である。Node.jsの作者であるライアン・ダールによって作成され、セキュリティと生産性に焦点を当てている。 --ウィキペディア

DenoがTypeScriptの使用をやめる5つの理由

最近、Denoが内部コードでTypeScriptの使用を停止することを指摘する文書が浮上しました。
言及されている問題には、TypeScriptのコンパイル時間、構造化、コード編成などが含まれます。
今後、Denoは内部コードに純粋なJavaScriptを使用されるそうです。

TypeScriptを使用するDenoの既存問題

現在、DenoチームがTypescript使用上、好ましくないと思う主な理由は以下になります。

• ファイルを変更するときのTypeScriptのコンパイル時間は数分かかるため、継続的なコンパイルは非常に遅くなります。

• 実際のDeno実行可能ファイルを作成するソースファイルで使用しているTypeScript構造と、ユーザー向けAPIがランタイムパフォーマンスの問題を引き起こしています。

• TypeScriptは、Denoコードの整理に役立ててない。それどころか、逆効果とも言える。
  言及された問題の1つは、2つの場所で重複した独立したBodyクラスになってしまったことです。

• TypeScriptコンパイラはd.tsファイルの生成に役立たないため、内部コードとランタイムTypeScript宣言は手動で同期を保つ必要があります。

• 2つのTSコンパイラホストを維持しています。
  1つは内部Denoコード用で、もう1つは外部ユーザーコード用ですが、どちらも用途としては近いです。

DenoコードからTypeScriptを削除する

Denoチームの目的は、ビルド時の全ての内部DenoコードのTSの型チェックを外すこと。
彼らは、すべてのランタイムコードをJavaScriptファイルに移動する。
ただし、タイプ定義とドキュメントを保持するために、d.tsファイルを引き続き使用します。

Denoチームは内部のコードに対してのみ、TypeScriptの使用を停止することに言及するが、
Denoのユーザーは引き続きTypeScriptを使用できますし、タイプチェックももちろんされます。

TypeScriptはJavaScriptの改良版と見なされることもありますが、実際はそうではない。
他の言語と同じように欠陥があります、最も重要なものの1つは、コンパイル時間が遅いことです。
小さなプロジェクトでは、純粋なJavaScriptからTypeScriptに切り替えるときにコンパイル時間が大幅に増加することはないかもしれませんが、複雑な、例えばReactのような大規模なプロジェクトでは顕著になります。
ランタイムのサイズが大きいことを考えると、DenoがTypeScriptを止めるのも当然のことです。

開発中の型チェックは、コンパイル時にコストがかかります。
TypeScriptプロジェクトに、コンパイル時間に対処して改善する方法に関する多くのドキュメントがあるのはそれなりの理由があります。
最も興味深いアプローチの1つは、プロジェクト参照を使用することです。
これにより、開発者はTypeScriptの大きなコードを小さなパーツに分割できます。

DenoがTypeScriptの使用をやめる理由についてもっと読む

TypeScriptを内部Denoコードから削除し、代わりにJavaScriptを使用するという決定についての完全な議論は、このドキュメントにあります。
そこには、Ryan Dahlと共同研究者が、問題、その解決策、およびその実装方法について説明しています。

はじめに

webアプリケーションの実装について、ビュー(画面側)のコードには環境毎に独自の構文を埋め込むことで、webページを動的に生成する機能があります。
しかしこの構文が環境によって微妙に異なります。
いままで色々な環境での開発を経験する中で頭の中がごちゃごちゃになりそうなので、一度種類ごとに構文をまとめてみます。

１．JSP(Java系各種フレームワーク、サーブレット)

jspFile.jsp

<!-- 変数の値表示 -->
<%=(変数) %>

<!-- 処理記載 -->
<% (処理をここに書く) %>

<!-- ディレクティブ(JSPの設定) -->
<%@ (文をここに書く) %>

<!-- コメント -->
<%-- コメント文字列... --%>
<% /** コメント文字列... **/ %>

<!-- EL式 -->
${式}

２．Razor = .cshtml(ASP.net系)

razorFile.cshtml

<!-- 変数の値表示 -->
@変数

<!-- 処理記載 -->
@{ (処理をここに書く) }

<!-- 処理記載の中に、そのままHTML出力したい文字を入れる -->
@{ <text>そのままHTML出力したい文字</text> }
@: そのままHTML出力したい文字

<!-- 名前空間のインポート -->
@using 名前空間

<!-- コメント -->
@* コメント文字列... *@
<% /* コメント文字列... */ %>
<% // コメント文字列 %>

３．EJS(node.js系)

elsFile.ejs

<!-- 変数の値表示 -->
<%=(変数) %>

<!-- 変数の値表示(変数のエスケープをしない場合) -->
<%-(変数) %>

<!-- 処理記載 -->
<% (処理をここに書く) %>

<!-- コメント -->
<%# %>

上記の共通事項

• ここであげた方法でコメントを書くと、出力されるHTMLにそのコメントは出力されません。
• いずれも画面側のファイル単体では正しい画面表示ができません。ファイルはフレームワークのプロジェクト内に入れましょう。

Google Sheet API(Node.js利用)で、複数のシートを「1,2,3,4...」と並べて生成したいのに、
async,awaitで生成しても、シートが2,4,3,1みたいに順不同になってしまうのを、
どう回避できるかなかなかわかりませんでした。

辿り着いた解決策は、
array.reduceとPromiseを組み合わせて、thenでつないでいき、
Promise内でsetTimeoutをする、というものでした。

reduceに慣れていなかったので、
4つの引数の理解（特に第1,4引数)と、thenの理解、
また、初期値にPromice.resolve()を渡すあたりが難しかったです。

以下、実際に動くようになったコードです。
（SheetAPIのラッパークラスを自作していますので、よしなに読み替えてください）

import {Sheet} from './Sheet.mjs'//シート関連の処理を集めた自作クラス
import dotenv from 'dotenv'
dotenv.config()

const spreadsheetId = process.env.SOME_SPREADSHEET_ID

/**
 * 複数のシートを順番に作成する
 */
const main = async function() {
  const sheet = await Sheet.build()//auth取得などはここで処理している
  //複数シート作成のため連番を準備（スプレッド構文便利ね）
  const arr = [...(Array(10).keys())].slice(1)//0は排除

  //関数の中でPromiseオブジェクトを返す無名関数を準備。これをarr.reduceで逐次実行する
  const createWithSleep = (sheetName) => {
    return () => {//ここで無名関数化してPromiseを返すのがreduce.then実行のキモ。無いと動かなかった
      return new Promise(resolve => {
        setTimeout(()=>{
          createSheet(sheetName, sheet)//シート生成メソッド呼び出し
          resolve()//resolve()でreduce内のthenが発火
        }, 2000)//thenで実行していても、一定の時間差がシート順次生成に必要!500などではだめだった
      })
    }
  }

  //ここのarr.reduceでの逐次実行がとても重要！これがないとシートの生成が順不同になる(thenでの処理実行チェーン)
  //シート名は's2'などでは読み取りなどのAPI実行時にカラム名と間違えられ困ったので、'組'というダブルバイトにしている
  arr.reduce((pre, cur) => pre.then(createWithSleep('組' + cur)), 
    Promise.resolve())//最初にthenを発火させるために空のPromise.resolve()をinitialValueとして配置
}

//シートの生成部分. setTimeoutで十分時間をとっているのでasync,awaitは設定せず
const createSheet = (sheetName, sheet) => {
  //ここのcreateSheetは普通のAPIメソッドの単なるラッパーです
  sheet.createSheet(sheetName, spreadsheetId).then(() => console.log('created'))
}

main()

Google Sheet APIは、サクッとspreadsheetを作れたり、値を書き込んだり読み込んだり、
sheetを作成したり、超便利ですね。
nodeでローカルから楽しく操作できるのが気に入りましたが、
ちょいちょい書き方に詰まったので、同じところで詰まった方に役に立てばと、
恥を忍んでコードを晒してみます。

どなたかの役に立てば幸いにて。
ではでは。

Google Sheet API(Node.js利用)で、複数のシートを「1,2,3,4...」と並べて生成したいのに、
async,awaitで生成しても、シートが2,4,3,1みたいに順不同になってしまうのを、
どう回避できるかなかなかわかりませんでした。

辿り着いた解決策は、
array.reduceとPromiseを組み合わせて、thenでつないでいき、
Promise内でsetTimeoutをする、というものでした。

reduceに慣れていなかったので、
各引数の理解（特に第1とinitialValue)と、thenの理解、
また、初期値にPromice.resolve()を渡すあたりが難しかったです。

以下、実際に動くようになったコードです。
（SheetAPIのラッパークラスを自作していますので、よしなに読み替えてください）

import {Sheet} from './Sheet.mjs'//シート関連の処理を集めた自作クラス
import dotenv from 'dotenv'
dotenv.config()

const spreadsheetId = process.env.SOME_SPREADSHEET_ID

/**
 * 複数のシートを順番に作成する
 */
const main = async function() {
  const sheet = await Sheet.build()//auth取得などはここで処理している
  //複数シート作成のため連番を準備（スプレッド構文便利ね）
  const arr = [...(Array(10).keys())].slice(1)//0は排除

  //関数の中でPromiseオブジェクトを返す無名関数を準備。これをarr.reduceで逐次実行する
  const createWithSleep = (sheetName) => {
    return () => {//ここで無名関数化してPromiseを返すのがreduce.then実行のキモ。無いと動かなかった
      return new Promise(resolve => {
        setTimeout(()=>{
          createSheet(sheetName, sheet)//シート生成メソッド呼び出し
          resolve()//resolve()でreduce内のthenが発火
        }, 2000)//thenで実行していても、一定の時間差がシート順次生成に必要!500などではだめだった
      })
    }
  }

  //ここのarr.reduceでの逐次実行がとても重要！これがないとシートの生成が順不同になる(thenでの処理実行チェーン)
  //シート名は's2'などでは読み取りなどのAPI実行時にカラム名と間違えられ困ったので、'組'というダブルバイトにしている
  arr.reduce((pre, cur) => pre.then(createWithSleep('組' + cur)), 
    Promise.resolve())//最初にthenを発火させるために空のPromise.resolve()をinitialValueとして配置
}

//シートの生成部分. setTimeoutで十分時間をとっているのでasync,awaitは設定せず
const createSheet = (sheetName, sheet) => {
  //ここのcreateSheetは普通のAPIメソッドの単なるラッパーです
  sheet.createSheet(sheetName, spreadsheetId).then(() => console.log('created'))
}

main()

Google Sheet APIは、サクッとspreadsheetを作れたり、値を書き込んだり読み込んだり、
sheetを作成したり、超便利ですね。
nodeでローカルから楽しく操作できるのが気に入りましたが、
ちょいちょい書き方に詰まったので、同じところで詰まった方に役に立てばと、
恥を忍んでコードを晒してみます。

どなたかのお役に立てば幸いにて。
ではでは。

現在、jueryとNode.jsを勉強しています。
それぞれ別々にしていましたが、同じアプリケーションに２つとも入れれば効率いいんじゃない？と思いやってみました。

実践

top.ejs

<head>
//省略
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<head>

ターミナル

$ npm install express ejs

app.js

const express = require('express');
const app = express();
app.use(express.static('public'));

//以下省略

public/script.js

$(function(){
//行いたい処理(jQueryの内容)
});

これでjQueryが使えるようになります。

注意としてはtop.ejsでの
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
と
<script type="text/javascript" src="script.js"></script>
の記述は逆にしてしまうと読み込めなくなります。
必ずこの順番で記述することです。

そして、app.jsでapp.use(express.static('public'));
でpublicディレクトリから読み込んでいるので、必ず
publicディレクトリを作り、publicディレクトリ配下にscript.jsを作成してください。
そうしないとscript.jsが読み込めません。

もしかすると？

最初は$ npm install jqueryで読み込ませようとして失敗し、今に至ります。
もし、上記の記述をやってもjQueryが読み込めない場合は、
$ npm install jquery
をやってみてください。

終わりに

結構な時間悩んだ割には簡単な記述で終わりました。

追記

必要な記述が１つ抜けていたので修正しました。

cronせっかく勉強したのに、Macだとlaunchd使いましょうとかいわれてなんやそれってなってます。

---

フルディスクアクセスにターミナル.appと、crontabを追加する。

１，フルディスクアクセスにcrontabを追加
「システム環境設定」→「セキュリティとプライバシ」→「フルディスクアクセス」で鍵を解除 →「+」→「command + shift + G」で /usr/bin/cron/ を入力して開く → crontabを選択して開く

２，フルディスクアクセスにターミナル.appを追加
１と同じように、アプリケーション/ユーティリティ/を開く → ターミナル.appを選択して追加

ここまで行えば、cronを実行できるようになる

---

crontabにcron文を記述する

cronの操作
crontab -e でvimなどで開ける
crontab -l で記入したcron文一覧を見れる

cron文
毎日10時10分にnode ~といったnode.jsファイルを自動実行したい場合

10 10 * * * /Users/~/.nodebrew/current/bin/node /Users/~/programming/Nodejs/sample.js>>error.txt

#分 時 日 月 曜日 nodeコマンドのフルパス 実行したいjsファイルのフルパス

・nodeコマンドのフルパスはwhich node とterminalに入力するだけ
・>>error.txtとすると、jsならconsole.log()での出力内容を取得したtextファイルを作成できる。

これで指定した時間に指定したファイルを実行できる

---

cronを実際に動かしてみてハマったときに確認したこと。
・cronに設定したPATHは合っているか
・logは出力できているか
・logはどこまで出力されているか→原因の場所特定

→結果 .envファイルを読み込むdotenvモジュールのファイルパスが相対パスになっていたことが問題だった。

require('dotenv').config() //動かなかったコード

require('dotenv').config({ path: '/Users/~/JS/Nodejs/scraping/.env' })

---

cronを止める
cronを一時的に止めたい場合は、#でコメントアウトすればいい

cronせっかく勉強したのに、Macだとlaunchd使いましょうとかいわれてなんやそれってなってます。

---

フルディスクアクセスにターミナル.appと、crontabを追加する。

１，フルディスクアクセスにcrontabを追加
「システム環境設定」→「セキュリティとプライバシ」→「フルディスクアクセス」で鍵を解除 →「+」→「command + shift + G」で /usr/bin/cron/ を入力して開く → crontabを選択して開く

２，フルディスクアクセスにターミナル.appを追加
１と同じように、アプリケーション/ユーティリティ/を開く → ターミナル.appを選択して追加

ここまで行えば、cronを実行できるようになる

---

crontabにcron文を記述する

cronの操作
crontab -e でvimなどで開ける
crontab -l で記入したcron文一覧を見れる

cron文
毎日10時10分にnode ~といったnode.jsファイルを自動実行したい場合

10 10 * * * /Users/~/.nodebrew/current/bin/node /Users/~/programming/Nodejs/sample.js>>error.txt

#分 時 日 月 曜日 nodeコマンドのフルパス 実行したいjsファイルのフルパス

・nodeコマンドのフルパスはwhich node とterminalに入力するだけ
・>>error.txtとすると、jsならconsole.log()での出力内容を取得したtextファイルを作成できる。

これで指定した時間に指定したファイルを実行できる

---

cronを実際に動かしてみてハマったときに確認したこと。
・cronに設定したPATHは合っているか
・logは出力できているか
・logはどこまで出力されているか→原因の場所特定

→結果 .envファイルを読み込むdotenvモジュールのファイルパスが相対パスになっていたことが問題だった。

require('dotenv').config() //動かなかったコード

require('dotenv').config({ path: '/Users/~/JS/Nodejs/scraping/.env' })

---

cronを止める
cronを一時的に止めたい場合は、#でコメントアウトすればいい

プログラミング勉強日記

2021年3月1日

proxyとは

　proxyは、npm configコマンドで使用できる代理(プロキシ)サーバー設定のこと。
　開発中にインターネットでアクセスの制限をされた場合など、セキュリティの問題によってアクセス制限された環境でプロキシサーバーを経由した開発を行うことがある。

使い方

　npmでプロキシサーバーの設定をするためには、npm configコマンドでproxyを使用する。npm config set proxyと入力することで、npm config機能の一部であるproxyを利用できる。

$ npm config set proxy http://<proxy-host>:<proxy-port>

proxyを解除する方法

$ npm -g config delete proxy

proxy設定の確認

$ npm -g config list

参考文献

プロキシサーバーを使う際に役立つ！npm proxyの使い方【初心者向け】
Node.js / npm 設定 に プロキシ を 設定 または 解除 する 方法