TypeScriptのアップデート中に EEXIST のエラーが表示されてちょっと詰まったことの解決手順

今回は今までなぜかグローバルのTSのアプデができずに無視してたところついに立ち向かった（面倒くさがり）
そのせいでバージョン 1.5.3 に甘んじていました。

“`
npm i -g typescript@latest
“`
で最新版のTypeScriptにアプデしようとしたら案の定エラーが表示。

“`
npm ERR! code EEXIST
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/typescript/bin/tsc
npm ERR! dest /Users/myuser/.nodenv/versions/12.16.0/bin/tsc
npm ERR! errno -17
npm ERR! EEXIST: file already exists, symlink ‘../lib/node_modules/typescript/bin/tsc’ -> ‘/Users/myuser/.nodenv/versions/12.16.0/bin/tsc’
npm ERR! File exists: /U

LINEボットでtodoist連携

todoistにやることリストを追加したり、今日のやることリストを取得してくれるLINEボットを作成します。
前回の投稿「 [AlexaとTodoistでやることリスト・お買い物リスト](https://qiita.com/poruruba/items/0af9659808878ad822a3) 」の応用です。


今回作成するのは、Node.jsで作成するLINEボットサーバです。
図の点線矢印は、最初の設定のときのみで、それが終わってしまえば、あとは、何回でもLINEアプリからtodoistの操作ができるようになります。
とりあえず、LINEアプリからは以下ができるようにします。これ以外は、直接todoistアプリから操作してください。

・タスクの新規登録、および担当者のアサイン、期限の設定
・今日、明日、明後日以降、期限切れのタスクの一覧

Nodistコマンド覚書

すぐに忘れてしまうのでメモしておく

# npm

* インストールしたもの一覧

“`
npm ls –depth=0
npm ls -g –depth=0
“`

* npxインストール

Nodistだとnpxがインストールされないので個別にインストールが必要

“`
npm i npx -g
“`

* インストールとpackage.jsonの関係

“`
// package.json（dependencies）に追記
npm i %パッケージ%
npm i %パッケージ% –save
npm i %パッケージ% -S

// package.json（devDependencies）に追記
npm i %パッケージ% –save-dev
npm i %パッケージ% -D

// package.jsonに追記しない
npm install %パッケージ% –no-save
“`

# Nodist

* Node.jsとnpmの対応
* https://nodejs.org/ja/download/releases/

* インストール済みバージョン

Docker Desktopを使ってNode.jsアプリをコンテナ上で動かしてみた

#Docker Desktopを使ってみたい！

先日、[こちらの投稿](https://qiita.com/gahoh/items/7b21377b5c9e3ffddf4a “【入門】はじめての Docker Desktop for Windows のインストールと CentOS の仮想環境構築のセットアップ”)を拝見し、Docker Desktop for Windowsを無事にインストールできました。
せっかくなので、最近勉強しているNode.jsのアプリケーションをDocker Desktop上で動作させてみたいと思います。

参考サイト：[Node.js Web アプリケーションを Docker 化する](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)

| 利用環境 | バージョン |
|:-:|:-:|
| Windows 10 Pro 64bit | 1909 |
| Visual Studio Code | 1.51.1 |
| Docker Engine | 19.03.13 |
| N

N高のキャンフェスのサイトを作った話

この記事は [N 高等学校 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/n-highschool)の 7 日目の記事です。初めてアドベントカレンダーに投稿しますがよろしくお願います。

今年のキャンパスフェスティバルがオンラインでやることになったのでそのために web サイトを作ったのでそれについて振り返ります。

## どんなサイトを作ったの?

自分の通ってる[キャンパスのキャンフェスのサイト](https://campus-festival.vercel.app/)を作りました。

ソースコード→https://github.com/Mochichi2003/Campus-festival


上の画像みたいな感じです

# 作るのに使ったもの

–

Node.jsでも綺麗なコードでWebAPIを作る（routing-controllers）

# はじめに
Node.jsでWebAPIを作ると、その自由度の高さからコードが綺麗に書けないことが多いと思います。
そんなときにはrouting-controllersを使うのがおすすめです。
今回はrouting-controllersを使ったモダンなWebAPIの書き方を紹介します。

## routing-controllersとは
https://github.com/typestack/routing-controllers
>Allows to create controller classes with methods as actions that handle requests. You can use routing-controllers with express.js or koa.js.

いわゆるMVCのコントローラーをTypescriptのクラスベースで書くことができるライブラリで、express.jsやkoa.jsなどのフレームワークに適応しています。
クラスベースであることにより、構造的かつ綺麗なコードを書くことができます。
例として、以下のようにク

Riot.js でローカルに HTML を生成する環境を作ってみた。

これは [Riot.js Advent Calendar 2020](https://qiita.com/advent-calendar/2020/riotjs
) の 6 日目の記事 ? です。

## 動機

いままで、HTML を書くときは共通部分を一元化したりするために EJS とか Nunjucks などの HTML を生成するテンプレートエンジンを使っていました。

そんな折に、Riot.js の公式 Twitter アカウントの以下のツイートを目にします。

Riot.js from now on can be used also as #javascript server side engine https://t.co/

【nodejs】No ‘Access-Control-Allow-Origin’ header is present on the requested resourceを優しく解説

お疲れ様です、ラスカルです。

私は仕事でバックエンドもフロントエンドも担当しているのですが、実装した両者をGraphqlを使って繋ごうとしたときに次のエラーに遭遇しました。

“`
Access to XMLHttpRequest at ‘http://localhost:4000/graphql’
from origin ‘http://localhost:3000’ has been blocked by CORS policy:
Response to preflight request doesn’t pass access control check:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
“`

ふむ、どうやらフロント側のリクエストに対して、バックエンドが何やら**CORS**なる規約に則って、
**「おい、リクエストはちゃんと決まりを守って投げてこい?」**
とお怒りの様子です?

##状況説明

###バックエンド
バックエンドはNode.j

GitHub Hacking ~GitHubを容量無制限のクラウドストレージとして使用する試み~

# 警告

今回紹介している内容は[GitHub](https://github.com/)の公式からは「やるなよ!!」と言われている内容を紹介しています
[私のディスク容量はいくつですか？](https://docs.github.com/ja/github/managing-large-files/what-is-my-disk-quota)
これを理解した上で以降を読み進めてください

# 問い

“`
GitHubを容量無制限のクラウドストレージとして使用できるのか?
“`

[GitHub](https://github.com/) には `git push` した場合には容量制限があり、`1ファイル100MB` を超える場合は [Git LFS](https://git-lfs.github.com/) を使って `git push` を行わないとエラーが発生してしまい`git push` することができません。
この仕様については共通の認識としてよく出てきますがリポジトリの総計の容量の上限については言及されていま

子どもに嫌われないように小言をCLOVAに代弁してもらった

#「そろそろご飯出来るよ～」
の後に秘められた母親の言葉を代弁してくれるclovaスキルを作りました。

#なぜ作ろうと思ったのか
どこの家庭でもある夕飯時の一コマでもある
「そろそろご飯できるよ～」という一見やさしそうに見える声掛けの裏には

●片づけなさい
●机をふきなさい
●箸や食器の準備を手伝いなさい

などなど、実は沢山の意味が含まれています。

これを毎日言い続けて「うるさいな～」と思われない為に、clovaに代弁してもらおうという企画です。
きっとclovaから声を掛ければ子どもたちも動いてくれるはず！

clova 頼みます！

#LINE CLOVAの設定
CLOVAの設定方法については今後再利用できるように別記事にさせていただきました。
[CLOVAの設定方法](https://qiita.com/misa_m/items/76d3a43bb3b82d389ff2)

#登録した呼び出し名は
・ねぇCLOVA、夕飯出来たよを起動して
・ねぇCLOVA、夕飯出来たよをひらいて
・ねぇCLOVA、夕飯出来たよにつないで
・ねぇCLOVA、夕飯出来たよ

この4パターンで

npm-check-updates (ncu) v10 の引数まとめ

# はじめに
[npm-check-updates](https://github.com/raineorshine/npm-check-updates) は、package.json に書かれている依存性を、特定されているバージョンを無視して最新版へと書き換えます。通常は`ncu`と`ncu -u`でそれぞれ更新のチェックと書き換えを行ってくれるのですが、引数を付けて細かい設定をしたい場合があります。引数については日本語の記述が無かったり、古いバージョンに対する記述があったりするので、まとめました。

用いた ncu のバージョンは`10.2.2`です。

# 使い方
グローバルインストールする

“`shell
npm i -g npm-check-updates
“`

基本的な使い方

“`shell
ncu # 更新の確認するが、package.jsonの書き換えはしない
ncu -u # 更新を確認して、package.jsonを書き換える
npm i # 書き換えたpackage.jsonを元にインストールする

ncu -v # バージョンの表示
ncu -h #

Authorization Code Flow with PKCE Clientの実装（Node.js）

# はじめに
[RFC7636 PKCE（Proof Key for Code Exchange by OAuth Public Clients）](https://tools.ietf.org/html/draft-ietf-oauth-v2-1-00)は認可コード横取り攻撃の対策(authorization code interception attack)として策定された仕様です。

また、PKCEは認可コード横取り攻撃にかかわらず、OAuth2.0におけるCSRFの対策としても機能します。
なお、stateによるCSRF対策ではクライアントが検証を実施するのに対して、PKCEによるCSRF対策では認可サーバーが検証を実施するという違いがあります。（PKCEを利用した場合でも、クライアントが固定値などの脆弱なcode_challenge、code_verifierを利用するとCSRFに対して脆弱になるためクライアントに対策の責務がないわけではありません）

PKCEはスマートフォンアプリなどのPublic Clientにおいて利用が強く推奨されている仕様ですが、現在策定中の[Th

firebase functionsのonCall呼出し時に認証する

思い付きで書くのでアドベントカレンダーに参加できなかった。。。
# この記事の対象者
onCallファンクションの中で認証が必要なDB操作等をしたい人向け。

ググっても出なかったので書き出します。

onCallの中では認証情報が渡されているのでuidを取り出してcustomTokenを作り認証すればOK!!

##以下サンプルソース

### web 側
バッチ実行ボタン等から呼ばれるclickHandler関数の中でfunctions.httpsCallableにfunctions側の関数名(ここでは’hoge’)を渡して非同期で実行する

“`client.js
import firebase from ‘firebase/app’
import ‘firebase/auth’
import ‘firebase/functions’
import firebaseConfig from ‘./firebaseConfig’

const clickHandler = async () => {
const hoge = functions.httpsCallable(‘h

Google Chrome の JavaScript エンジン V8 って？

# はじめに
V8 エンジンは、Google のオープンソースで Javascript, WebAssembly のエンジンです。
V8 は、 C++ で書かれており、Google Chrome や Node.js で動いています。

# Javascript はどうやって動いているの？
V8 エンジンは、２つのコンポーネントで構成されています。

1. Meomry Heap（メモリの割り当てなど）
2. Call Stack(コードを実行するためのスタック)

Javascript から使える API （`setTimeout` など）には様々なものがありますが、これらは V8 エンジンから提供しているものではなく、ブラウザによって、提供されているものです。

## Call Stack
Javascript は、シングルスレッドで動くので、Call Stack もシリアルに動きます。

例えば、このようなコードがあるとします。

“`javascript
function multiply(x, y) {
return x * y;
}
function printSq

Yarnについてまとめ

#Yarnとは？

– 2016年にFacebook社からリリースされたパッケージ管理ツール

– Node.jsのデフォルト搭載のnpmの代替となるツール

なぜあえてnpmでは無くYarnが使われるのでしょうか？

# Yarnのメリット

– 並列処理によりインストールが高速

– yarn.lockファイルによる厳密なモジュールのバージョン管理
– （yarnリリース当初、npmにはpackge-lock.jsonファイルが無かった）

– npmとの互換性
– npmと同じpackage.jsonが使える

#npmとyarnの主なコマンドの違い

##package.jsonの作成

“`:npm
npm init
“`

“`:yarn
yarn init
“`

##依存パッケージのインストール

“`:npm
npm i
“`

“`:yarn
yarn
“`

##新規パッケージのインストール

“`:npm
npm i <パッケージ名>
“`

“`:yarn
yarn add <パッケージ名>
“`

##パッケージのグ

IBM Watson Discovery 便利プログラム

# コレクション内のすべての文書を削除する
collectionに文書を入れていろいろ試したあと、いったんすべての文書を消してまた何かしたい…。
かといってcollectionを再作成すると、collectionIDとかconfigIDとかが変わってしまうのは困る!
ということがあったのでcollection内のすべての文書を削除するプログラムをTypeScriptで作成してみました。

ソースは[git](https://github.com/Ryota-Amano/ibmcloud-discovery)にあります。
Qiitaの記事ではプログラムの仕様や概要を説明します。利用方法はgitをご覧ください。
**ご利用は自己責任でお願いいたします。**
改善点や不明点等ございましたら連絡いただけますと嬉しいです。　
## 仕様
* 資格情報の入力はプログラム実行後に画面から入力
* 入力する資格情報は
* url
* APIkey
* environmentID
* collectionID
* Discovery APIバージョンは固定値(`201

Cannot find module ‘express’の解決法

nodeをインストールしてプログラムを実行しようとした所、エラーが出た。

## エラー文
“`
internal/modules/cjs/loader.js:834
throw err;
^

Error: Cannot find module ‘express’
“`
## プログラム

“`Javascript:app.js
const express = require(‘express’)
const app = express()
const port = 3000

app.get(‘/’, (req, res) => {
res.send(‘Hello World!’)
})

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
“`

https://expressjs.com/ja/starter/hello-world.html

## 対処方法
expressをinstallし、パスを通す。
oh、簡単。。

Node.js & TypeScriptのプロジェクトの開始

こちらに全部書いてあります。
Node.js & TypeScriptのプロジェクト作成
https://typescript-jp.gitbook.io/deep-dive/nodejs

“`
・package.json作成
npm init -y

・TypeScript・node.jsの型ファイルインストール
npm i –save-dev typescript @types/node

・tsconfig.json作成
npx tsc –init

・tsのバージョン確認
npx tsc –version

・ts-node,nodemonをインストール
npm i –save-dev ts-node nodemon

・scriptsにコマンドを記載
“scripts”: {
“start”: “npm run build:live”,
“build”: “tsc -p .”,
“build:live”: “nodemon –watch ‘src/**/*.ts’ –exec ‘ts-node’ src/index.ts”
}
“

Progate Node.js学習

Node.jsとは

**Node.js**とは、Javascriptをサーバーサイドで動かすための言語です。ProgateのNode.js学習コースでは、買い物サービスをつくる過程でNode.jsの使い方を学んでいきます。そして、Node.jsには便利な機能を簡単に使うためにまとめられている**パッケージ**というものがあり、今回は**Express**というパッケージを使います。

Node.jsの基本的な使い方

Expressの導入,サーバーの起動

まず、インターネットから自分のアプリケーションにパッケージをインストールします。そして、Expressを使うには、パッケージの読み込みと、実際に使用するための準備をする必要があります。

“`app.js
const express = require(“express”);
const app = express();
“`
サーバーを起動させるには、`listen`を用いてapp.jsファイルを実行します。

“`app.js
app.listen(3000);
“`

npmについてまとめ

#npmとは

**Node Package Manager**の略

Node.jsの**パッケージ管理システム**である。

2010年に**Isaac Z. Schlueter**氏によって開発された。

#パッケージ管理システムとは

> パッケージ管理システム（パッケージかんりシステム）は、オペレーティングシステム (OS) というひとつの環境で、各種のソフトウェアの導入と削除、そしてソフトウェア同士やライブラリとの依存関係を管理するシステムである。

要は世界の凄い人たちが作って公開しているモジュールをパッケージとして管理し、検索、閲覧、及びダウンロードして使えるよ〜というシステムです。

また、使用したいパッケージの依存パッケージ、そのバージョンまで自動で管理してくれます。

#npmを使わないとどうなる？

例えば**[express](https://www.npmjs.com/package/express)**というパッケージを使用したいとします。
**express**は30ものパッケージと依存関係にあります。
![スクリーンショット 2020-12-04 21