Node.js関連のことを調べてみた2021年10月14日

Node.jsの基本

# はじめに
Node.jsの基本を備忘録として残しておきます。

# 目次
1. [Webアプリケーションの基本の３ステップ](#Chapter1)
1. [EJSテンプレートの使い方](#Chapter2)
1. [ルーティングの基本](#reference)

# Webアプリケーションの基本の３ステップ

– requireでhttpオブジェクトを用意する。
“`const http = require(‘http’);“`

– createServerでサーバーを作る。
“`let server = http.createServer(ルーティング処理などを書いた関数);“`

– listenで待ち受け開始する。
“`server.listen(3000);“`

# EJSテンプレートの使い方
Webページの画面は基本的にEJSなどのテンプレートエンジンを利用します。
fsのreadFileSyncで読み込み、ejs.renderでレン

ウェブページは作れませんでした　【RESTART】

#ウェブページは作れませんでした（結論）
「progate」にて学習すること約1か月
「Web開発パス（Node.js)」を一通りこなしてみて
とりあえず何かウェブページ作ってみるかと思った

結論、__どうやって作ればいいのか解らず__…

#学習プロセスの見直し

「progate」だけ行ってしまうと__自分の場合は__
__インプット__のみになってしまい、定着しないと反省
そこで以下のようなプロセスの仮説を立てて実行することにした

#学習プロセスのフェーズ詳細

###フェーズ１_学習
Qiitaの記事の”勢い”を調べる　～もしかしたらまだ見ぬ掘り出し記事が見つかるかも～

配信者勢いランキング、５ちゃんねる勢いランキングなど、インターネットをうろうろしているとよく”勢い”という言葉を目にしますよね。
というわけでQiita記事の勢いを調べてみました。（QiitaAPIを使って）
参考になる記事をストックすることがスキルアップの近道のはず、”勢い”のある記事はきっと参考になる記事だと思うのです。

#前調べ
５ちゃんねるの勢いの計算方法は次の通りだということを調べました。
勢い＝レス数/（現在のunix時間-スレッド内の１番目の投稿のunix時間）÷86400

なるほど、これを参考に今回は、
■レス数＝いいねの数
■現在の時間＝現在の時間
■１番目の投稿時間＝記事の投稿時間
と定義してやってみます

#結果
####単月部門
集計期間：2021/9/13～2021/10/2

| 順位 | いいね | 投稿日 | 期間（日） | 勢い | URL |
|:-:|:-:|:-:|:-:|:-:|:-:|
| 1 | 893 | 2021-09-29 | 15 | 61 | [エンジニア200人に聞いて、業務委託単価表を作りました](https

バイクで走るタイムリミットをLINE_BotとWeb_APIを組み合わせて実装してみた～

#近ごろ私達は～いい感じ♪
これが私の生きる道ですね！
見出しだけでピンきて懐かしさを感じた方はおそらく30代Overでしょう笑
（何故いきなり冒頭に？といった疑問は記事を読み進めるとわかりますので、お付き合いください～）

さてさて、
10月からプログラミングを習い始めて毎日勉強中の私ですが、
LINE_BotとWeb_APIを組み合わせて何か試したいと思い、
大好きなバイクを例に作ってみました！

#これが私の走る道
学生時代からバイクで峠を走るのが大好きで、ヒマさえあれば埼玉県飯能市の自宅から
奥多摩湖（東京都西多摩郡）まで友人と走りに行っています。
しかし、1車線の道が続く田舎道なので日中は渋滞ばかりで気持ちよく走れません(´；ω；`)ｳｩｩ
特に朝方と夕方は渋滞がひどく、それなら真夜中に気持ちよく走ろう！
ということで、夜が更けてから朝方までひたすら峠を走るということを、
学生時代はよくやっていました（あの頃は若かった、、、）

奥多摩の夜は、空気が澄んでいて星が本当に綺麗なんです(￣ー￣)
![奥多摩_星空.jpg](https://qiita-image-store.s3

APIとLINE Botを組み合わせることで、患者さんが必要な情報にアクセスできる仕組みを目指す　その１-天気を伝える

#患者さんご家族にとって便利なLINE Botを作りたい
福岡で在宅医療を中心とした[医療機関](https://taro-cl.com/)を運営しています。
当院の患者さんやご家族、もしくは当院に診察を依頼したいと考えてくださっている方向けに、必要な情報にアクセスできるLINE Botを作ろうと思い取り組んでいる経過です。

#環境・利用API
node v16.10.0
Visual Studio Code 1.60.2
axios 0.22.0
ngrok 2.3.40

#お薬APIは有料のため断念

API連携の方法を学び、在宅医療で役にたちAPIで持って来れる情報に何があるかを考えました。
当初、薬の情報がAPIでもってこれれば、お薬の表面に書いてある文字や、色形で薬が何の薬か判断できるようなり、治療の経過で「血圧の薬だけ明日から抜く」などを患者さんご家族でもやりやすくなるかと考えましたが、薬の情報を使えるAPIは有料のものばかりのようで断念（いいAPIがあれば教えてください）。

#お天気APIとの連携

次に考えたのが、お天気APIとの連携です。
病院で入院や外来を担当

長崎県民の為に！ディズニーのお勧めアトラクションを教えてくれるLINEBotを作ってみた！

##長崎県民に、ディズニーのお勧めアトラクションを伝えたい！！
私は、長崎県出身で、東京に上京してきて13年目。
東京にきて、ビックリした事の一つに、東京都民は、ディズニーランド、ディズニーシーのアトラクション事に妙に詳しいこと。
平然と、ビックサンダーマウンテン、センターオブジアース、スプラッシュマウンテン、タワーオブテラーなど言われるが、田舎者の私には、全然分からなかった事を今でも覚えております。
旅行できた地元の友達達からもよくディズニーのお勧めの場所やアトラクション、宿泊先など、よく聞かれます。そんな友達達の為に、今回ディズニーリゾートのお勧めのアトラクションを教えてくれるLINEBotを作ってみました！

##作成した仕組み
ディズニーリゾートのお勧めアトラクションを教えてくれるLINEBot

##開発環境
・LINE公式アカウント開設
・LINE Developersアカウント登録
・Visual Studio Code
・ngrok
・LINE Bot

##共通テンプレート
テンプレートをもとに作成しました！

サンプルコード　<

初心者向けの記事って多すぎん？？（javascript初心者向けQiitaAPIでLGTM数TOP10を出してみる）

#はじめましての自己紹介
はじめまして！超ウルトラスーパー初心者のぜらちんです。
JavaScript？新しい紅茶？というくらいにチンプンカンプンな30オーバー限界ヲタク女が
JavaScriptで何かを作り始めてみる、という記事をこれからいくつか投稿していこうと思います。

#何を作ろうか
まずはQiitaのAPIを使用して、（この言い回しがあっているかも分からない……。）
初心者が読むべき記事を抽出してみることにします。
そう。自分のために作るのです！
Qiitaは記事が多すぎる……。初心者向けだけでも無数にある中から良さそうな記事だけ読みたいんじゃー！
何をもって良い記事とするか。そう。他者からの評価が多い記事だけを読むのです。

#作成するものの概要
・QiitaAPIを使って、記事タイトル、本文、タグに「javascript」と「初心者」が含まれる記事を取得する。
・2021年9月までの記事を取得することにする。（実行の度に結果がブレるため日付を区切る。）
・結果を手動集計しLGTM数で並び変える。（アナログ・・・！）

#環境
Node　v16.10.0
axios　0.2

いまさらながらNode.jsとLINE Messaging APIを使って簡単なLINEBOT作ってみた（入門）

# やりたいこと
LINE上でメッセージを送信すると指定の応答をするBot作成。

## 1. LINE Developers
まずはLINE developerというMessaging APIが使用できる開発者向けのサイトで準備をします。**LINEアカウントが必要になりますので、持ってない方は先に作成しておきましょう。**

### ログイン
まずは[LINE Developers](https://developers.line.biz/ja/)にアクセスし、`ログイン` ＞`LINEアカウントでログイン`でログインページへ。

LINEアカウントに登録しているメールアドレスとパスワードを入力しログインすると認証コードが発行されるので、LINEアプリを立ち上げ該当コードを入力してください。

認証が成功したら
`developer name`
`your email`
に任意の名前とメールアドレスを入力し、`create my account`しましょう。

### Provider作成
ログインができたら、Providerを作成します。
`create new provider

LINE Message API を活用して、ポケモン対戦がやりやすくなるツールを作成

前回初めて書いた記事は真面目に考察したので、今回は自分の趣味の一部を交えて、少し読みやすいテーマ・内容としてみました。

#ポケモン対戦は覚えることが多い
　ポケモン対戦をやったことある方は、この章については読み飛ばしていただいて問題ありません。
　なぜそもそも、ポケモン対戦を題材としたのかということについてです。自分の趣味ということもありますが、最大の理由として、**ポケモン対戦は覚えることが非常に多く、初心者の参入障壁が高い**という問題点があると考えているためです。
　現在、ポケモン対戦は毎年世界大会が実施され、国内でも新作が発売されると、10万人程度が参加するコンテンツとなりました。youtubeなどの動画サイトでも対戦の模様は動画として上がっており、もし興味が湧いたら検索してご覧いただきたいのですが、まあ覚えることが多い。

– 種族値・個体値・努力値（公式名称では無いです。）
– ポケモンの特性
– 技の効果
– 対戦でよく使われる育成方法、いわゆる型 などなど

　初心者が負けて覚えるのは当然ですが、それでも少しでも勝つ喜びを味わってもらう補助ができないかと考え、ツールの

デブ活必需品!?　お菓子の虜LINE bot

## とにかく甘いお菓子が好き?
　おしゃれなスイーツも、手作りケーキもおいしいけれど、私は断固「お菓子」推し!!
　なんと数百円で楽園へひとっとび…わかる人にはわかりますよね・・・？
　

　https://twitter.com/okinakamasayos1/status/1447864486598103041
　https://twitter.com/okinakamasayos1/status/1423594038947500036
## 私の神サイト[「お菓子の虜」](https://sysbird.jp/toriko/)?
　メーカーが書いた記事じゃなく、実際に食べ歩いたレビューがなんと2,600種類以上!
　お菓子好きにはたまらない「新商品」「期間限定商品」を重点的に紹介してくれます。
　短くも美しく、想像力を掻き立てるレビューは必見

DeepL API の使用方法

auth_key と text, source_lang, target_lang を指定して GET or POST するだけ
参考: https://www.deepl.com/docs-api/introduction/

## シェルスクリプト

“`bash:deepl.sh
#!/bin/sh
DEEPL_API_URL=”https://api-free.deepl.com/v2/translate”
YOUR_API_KEY=”__DEEPL_API_KEY_HERE__”
SOURCE_TEXT=”
I’m a lumberjack and I’m OK.
I sleep at night, I work during the day.

He’s a lumberjack and he’s OK.
He sleeps all night and he works all day.

I cut down trees, I eat my lunch.
I go to the lavatory.
On Wednesdays I go shopping and have

【node・git】リリース操作周辺

初書：2021/10/12
mac : 11.6
node：v16.6.1

# 前書き
node.jsでアプリケーションをリリースする際によく調べ直すことが多い項目をメモしておく。

# package.jsonのバージョンを更新する

参考サイト：[npm versionコマンドで出来ること。 – Qiita](https://qiita.com/minamo173/items/8b8b27bc6ecd17ad925e)

`% npm version xxx`でパッケージのバージョンを更新することができる

xxxは、
`major`で1.0.0
`minor`で0.1.0
`patch`で0.0.1
の部分を更新する。

また、先頭に`pre`をつけることで、各部分を更新した上で、x.x.x-0と、最後に-0を追加する。
また`-0`は、`prerelease`で更新することができる。

# タグをgithubにpushする

参考サイト：[git tagの使い方まとめ – Qiita](https://qiita.com/growsic/items/ed67e03fda5a

Rails * Vue の歴史を辿ってみる

# Rails * Vue の歴史を辿ってみる

—

# この話を読み終えてわかること

– Rails * Vueの歴史ってまだまだ浅いこと
– Rails * Vueの情報はググってみると、やり方が２つに別れていること
– 初学者でも、全然戦えるフィールドであること

—

# Railsの歴史

– 1995(26年前)
– Ruby誕生、割と古くからある
– 割と泣かず飛ばずの言語だった
– 2005(16年前)
– RubyOnRailsが誕生
– 有名企業が次々採用
– Airbnb
– twitter
– GitHub
– Rubyが注目され始めるタイミングが瞬間がここ

—

# Vueの歴史

– 2009年(12年前)
– 土台であるnode.js誕生
– WEB業界に衝撃を与えた
– front, backの完全分業化の実現に大貢献
– 2014(7年前)
– Vue.js誕生

varでできてletでできないこと（偏向報道）

#遭遇した背景
「Node.js超入門第3版」という本を借りていた。p.104を写経し、実行すると、

“`
… let content = ejs.render(other_page,{
…
$ SyntaxError: Identifier ‘content’ has already been declared
“`
というエラーが現れた。
読んでそのまま「contentはすでに定義されている」ということだろう。
しかし、プログラムは全く同じだった。

ある一部を除いて。
#解決編１
どこぞのYouTuberがvarよりもletが使われているとか言っていたので、
調子に乗って私もletを使っていた。

試しに問題の変数の定義をletからvarに変えると、
__完全に解決したッ！__

#解説
私はurlパースを使ってswitch-case文でルーティングをしていました。

“`javascript:app.js
let url_parts = url.parse(request.url);
switch(url_parts.pathname){

package-lock.json の lockfileVersion が変更されてしまう場合の対処法

## 解決策
チーム内でnpmのバージョンをv6かv7に合わせる。

## 発生した問題

### npmをアップデート
npmで作業中に以下のようなアップデートガイドが表示されたため、npmをv6からv7にアップデートしました。（Node.jsはv14）

“`
Update available 6.14.15 → 7.24.2
Run npm i -g npm to update
“`

### lockfileVersion 1 → 2
すると、その後に `npm i` を実行した際、以下のような警告が表示されました。

“`
npm WARN old lockfile:
The package-lock.json file was created with an old version of npm,
so supplemental metadata must be fetched from the registry.
“`

通常より時間がかかり、installは成功しますが、 `package-lock.json` の `lockfileVersion` が 1 →

【公式ドキュメント和訳】TypeORM Migration

:::note warn
この記事は、2021/10/10時点のTypeORMの仕様に依存します。
TypeORMのバージョンが違ったり、記事の公開から長い時間が経っている場合、正確ではない可能性があります。
:::

> typeorm: v0.2.38
> 翻訳元: [migrations.md](https://github.com/typeorm/typeorm/blob/91d5b2fc374c2f7b1545d40ee76577272de21436/docs/migrations.md)
> ライセンス: [The MIT License](https://github.com/typeorm/typeorm/blob/91d5b2fc374c2f7b1545d40ee76577272de21436/LICENSE)

## 目次

* [マイグレーションとは](#マイグレーションとは)
* [マイグレーションを作成する](#マイグレーションを作成する)
* [マイグレーションを実行する](#マイグレーションを実行する)
* [マイグレーションを自動生成する](#マイグレ

npmとyarnとNode.jsについて

# はじめに
VueやReactを使ってWeb開発をする際、`npm`や`yarn`といったコマンドを使ってプロジェクトの作成やパッケージのインストール等を行っていると思います。
自分はこの`npm`や`yarn`についてなんとなく使っていたので理解を深めるため、主に以下の3点について調べてみました。

* そもそも`npm`, `yarn`とは何か
* Node.jsとは何か
* npmとyarnで何か違いはあるのか

# npm, yarn とは
共に、**Node.js上で動く**JavaScriptの**パッケージマネージャー**のことを指します。

## まず 「パッケージマネージャー」とは
コンピュータに何のソフトウェアがインストールされたかを記録し、新しいソフトウェアのインストール・新しいバージョンへのソフトウェアの更新・以前インストールしたソフトウェアの削除を容易に行えるようにするプログラムのこと

参考
[パッケージマネージャとは](https://www.debian.org/doc/manuals/aptitude/pr01s02.ja.html)

###

React メモ

## 目次
1. [コマンド](#1-コマンド)
1. [JSX](#2-jsx)
1. [props](#3-props)
1. [条件分岐と繰り返し処理](#4-条件分岐と繰り返し処理)
1. [Stateとイベント処理](#5-stateとイベント処理)
1. [ルーティング](#6-ルーティング)

## 1. コマンド

“`shell
# create-react-appをインストール
$ npm install -g create-react-app

# 新規作成
$ npx create-react-app [プロジェクト名]

# TSX(JSXのTypeScript版)で作りたい時
# –template typescriptをつける
$ npx create-react-app –template typescript [プロジェクト名]

# 開発サーバー起動
$ npm start

# ビルドしてHTML/CSS/JSファイルを生成
$ npm run build
“`

## 2. JSX
* classはclassName, forはhtmlF

package.jsonとpackage-lock.jsonのバージョン指定や必要性について

# はじめに
業務内でpackage.jsonやpackage-lock.jsonを使う機会があり、学んだことをまとめる。

# Node.jsとnpm
メインの話ではないので細かい説明は省略。

・Node.js
Node.jsは、「JavaScriptの実行環境」。Node.jsを使うことで、サーバー側でJavaScriptを使うことが出来るようになる。

・npm
npmは、Node Package Manuagerの略でNode.jsのパッケージ管理ツール。

詳しい説明はこちらを→[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)

npmはNode.jsをインストールする際に一緒にインストールされる。

# package.jsonとpackage-lock.jsonについて

## Semantic Version
Semantic Versionとは、バージョン番号を付けるにあたり決めたルールのこと。

細かい仕様については、下記サイトでまとまっている

node.jsでchart.jsを使う

expressを使ったWebAPIでグラフの画像を生成したかったので、Javascsriptで有名なchart.jsをNode.jsで動かすnpmモジュール「chartjs-node-canvas」を使いこなします。

以下の点を意識しています。

・Node.jsでchart.jsを動かす場合も日本語がちゃんと表示されるようにする
・chart.jsの凡例やデータの指定方法がグラフの種類によってまちまちなのを統一する
・背景に色を塗ったり、前景全体に文字列を重ね合わせられるようにする

上記をクラス化して、使いやすい形にしていきます。

ソースコードもろもろは、GitHubに上げておきました。

poruruba/MakeChart_test

https://github.com/poruruba/MakeChart_test

※node-fetchは、v2系を使った方がよいかも。

“`
> npm install node-fetch@2.6.5
“`

＜参考URL＞
・https://www.chartjs.org/docs/latest/
・https://gith