GeoPackageとは

界隈では長らくデファクトスタンダードのフォーマットであったESRI Shapefileを駆逐する可能性を秘めた新世代フォーマット。
OSSの代表的なGISソフトウェアであるQGISでは3系バージョンから標準サポートされている。
その他GDAL、GeoToolsなど標準ライブラリなどもサポート済み。

Shapefileの何が嫌か

1レイヤーを格納するのにファイルが多い

最低でも3つ、場合によってはそれ以上のファイルが必要となり、レイヤー数が増えると煩雑に…
以下ESRIのサイトより引用

ファイルサイズ、属性名のサイズの制限がきつい

ファイルサイズが2GBまでとか、属性名が日本語だと5文字までとか前時代的。
イマドキこんなサイズ制限に悩まされるなんて嫌だ。

GeoPackageの良さ

• 複数のレイヤーを1つのファイルにまとめられる
  • ポータビリティに優れる
• サイズ制限が実質ない
  • あるけどその上限に引っかかる前に他の要因がハードルになるレベルだと思う
• 実体がSQLite

Electronとは

ざっくり言えばWebの技術を用いてクロスプラットフォームアプリケーションを構築できるフレームワーク。
開発者であればVS Code、SlackなどElectronで作られたアプリを使うケースも増えていると思う。

Electron with GeoPackage

ジオ系アプリの開発をしていると、オフライン環境でもデータを閲覧したい、編集したいという要件が出てくることがある。
その場合、インターネット接続が必須となるWebアプリケーションでは要件が満たせない。
単純な閲覧、編集ならQGISで良いのだけど、そこにビジネスロジックが絡んでくると途端にハードルが上がってしまう。

そこで開発が（自分がWebエンジニアなので）比較的容易であり、Webアプリもネイティブアプリも（ほぼ）同じコードベースで実現でき、ポータビリティにも優れるであろうこの組み合わせに興味が湧いたので試してみた。

結果

データには国土数値情報から東京都のバス停をダウンロードし、GeoPackage化したものを使用している。

ソースコードはこちら

今後

現段階ではGeoPackageをロードして表示しだけなので基本的なユースケースを実装して試してみたい。

• 複数レイヤーの対応
  • レイヤースイッチャーを用意する
  • レイヤー順序を入れ替える
• 属性表示
  • 地物をクリックして属性表示
• 検索
  • 対象地物を属性で検索
• 空間演算 & 検索
  • 任意地点から半径1km以内の〇〇を探す、みたいなことをやってみたい
    • SpatiaLiteのエクステンションを入れればいけそう

「Windowsマシンしか持っていないしMacを買う金銭的余裕がない…でもちゃんとした環境でWeb開発がしたい」ということで、Windows環境でもLinuxベースの開発環境を構築する方法を備忘録がてら書いておきます。

今回、React本である『りあクト！』という書籍を参照し、環境構築を進めていきます。

なにはともあれWSL2をインストールしよう

「WindowsでWeb開発なんてオワってる」と言われて久しい昨今、そんな状況を打破するためにMicrosoftが本気を出し、Windows上でLinuxを触る際のシステムを大幅アップデートしてくれました。その名もWSL2(Windows Subsystem for Linux 2)！

WSL 1 と WSL 2 の比較

要約すると、省メモリかつ高速で、完全なLinuxカーネルがWindows上で動くようになったとのこと。

WindowsでUNIX系OSを触りたい場合は、このWSL2を入れておく必要があります。

WSLも動きますが、今後は特に理由がない限りWSL2を使用する流れになりそうです。
WSLを使用するケース：例外的にWSL2ではなくWSL1を使用する場合

WSL2のインストール方法

WSL2のインストールは以下の公式ドキュメントの流れに沿っていけば大丈夫でした。
僕の場合はOSビルドが19042.685で、手動インストールを行いました。執筆時点ではOSビルド20262以降ならコマンドwsl --installで自動インストールができるようです。助かる。

Windows 10 用 Windows Subsystem for Linux のインストール ガイド

インストール時の注意事項はざっとこんなところでしょうか。

• PowerShellは管理者権限で実行する
• WindowsのビルドがWSL2の条件を満たしているか確認する
• 一通りインストールし終わったあとに「Windowsターミナル」も入れておくと後々役に立つかも

WSLの設定を調整する

Linuxを入れたら、最初の設定をしておく。wsl.confというファイルを作り、最初に必要な設定をしておくとあとが楽。

sudo vi /etc/wsl.conf

としてwsl.confを作成し、ファイルの中身を適宜書く。
今回はひとまずアクセス権限に関する部分のみを書いておく。

[automount]
options = "metadata,umask=22,fmask=11"

参考：
https://docs.microsoft.com/ja-jp/windows/wsl/wsl-config#configure-per-distro-launch-settings-with-wslconf
https://www.atmarkit.co.jp/ait/articles/1807/12/news036.html

パッケージの更新

APTとインストール済みのパッケージを更新する。

sudo apt update
sudo apt -y upgrade

ちなみにAPT(Advanced Packaging Tool)は、Linux系によく採用されているパッケージ管理ツール。
参考：https://ja.wikipedia.org/wiki/APT

Gitをインストール

エンジニア必須ツールであるGitもここで入れておく。

sudo apt-get install -y git

シェルをZSHにする場合

ZSH(Z Bash)という、Bashを強くしたものが流行っているらしいので入れておく（俺より強いやつに会いに行く）。
Linux界隈に疎すぎてZSHとかfishとか知らなかった…。

sudo apt-get -y zsh
chsh -s /usr/bin/zsh

Node.jsのインストール

node.jsをインストールする前に、anyenvをインストールします。
anyenvは、複数の**env系を一括で管理できるツール。これを使うことで複数言語の複数のバージョンを管理できるようになるようです。便利！

つまり、anyenv→nodenv→必要なプラグイン→Node.jsの順でインストールしていく感じ。

anyenvのインストールで詰まる

「パスを通していざnode.jsじゃ」と思っていたら、次のようなメッセージが出てきました。

ANYENV_DEFINITION_ROOT(/home/user_name/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init

これを実行してもうまく走らず困り果て、いろいろ調べるとしょぼいミスが原因でした。
それは.zshrc内の記述の順番。

PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"

上記のようにすべきところを上下逆に書いていました。その後、メッセージにあるようにanyenv install --initを実行したらうまくいきました。

anyenvの導入については以下の記事が参考になりました。

anyenv + macOS環境構築

（Windows畑育ちなので、大学の授業で触ったきりのLinuxにとても苦労します…。）

nodenvのインストール

nodenvはNode.jsのバージョン管理ツールですね。
先程の問題が解決できればnodenvのインストールは一発です。

anyenv install nodenv

インストールしたらexec $SHELL -lでシェルの再起動を忘れずに。

必要なプラグインのインストール

このタイミングで、便利なプラグインたちをインストール。
今回はanyenv-updateとnodenv-default-packagesを入れます。それぞれルートディレクトリ直下にpluginsディレクトリを作ってそこに入れましょう。

anyenv-updateは「**env系」をまとめてアップデートしてくれるanyenvのプラグイン。
nodenv-default-packagesはnpmのインストール時に一緒にインストールするパッケージを指定できるnodenvのプラグイン。

そして、nodenv直下にnodenv-default-packagesの設定ファイルも作ります。
今回は以下のように設定しました。

yarntypescriptts-nodetypesync

Node.jsのインストール

Node.jsのインストールは以下。
書籍に倣ってバージョンは14.4.0にしました。

nodenv install-l
nodenv install 14.4.0
nodenv global 14.4.0

やっていることは以下のとおりです。

1. バージョン一覧を見て
2. 目当てのバージョンをインストールして
3. デフォルトのバージョンを設定

まとめ

WindowsでもMac勢みたいに開発をするため、なんとか環境を整える事ができました。
やっとこさスタートラインの一歩手前に立った…という気持ちです。
今回やってみて、UNIX系コマンドの知識が圧倒的に足りていないことを痛感しました。

楽しみつつがんばります。

このポストで簡単なSMSバッチ送信方法を紹介したいと思います。

最近SMS送信できるAPIが増えてきていると思いますが、大体1通ずつの送信になっています。APIを提供されている会社の中、Vonageという会社があります。VonageのSMS APIも1通ずつの送信になっていますが、バッチ送信のサンプルコードも提供しています。このサンプルを使ってみようと思っています。https://github.com/nexmo-se/simple-sms-blaster

このサンプルはNode.jsで書かれていて、マイクロサービスとしてデプロイするのは簡単にできると思います。このSMSバッチ送信サービスにCSVをPOSTしたら、VonageのSMS APIをコールしてSMSを送信します。

SMSバッチ送信を試しましょう

事前に準備するもの

• Vonage（Nexmo）のAPI Key（ここから作れます）＊NexmoがVonageに買収されました。
• git
• npm
• curl

サンプルのSMSバッチ送信サービスを用意

1）コードをCloneします。

git clone https://github.com/nexmo-se/simple-sms-blaster.git

cd simple-sms-blaster

2）パッケージをインストールします。

npm install

3）コンフィグファイルを作ります。

cp .env.example .env

テキストエディターでパラメーターを設定します。少なくともAPI_KEYとAPI_SECRETを設定する必要があります。

# Nexmo SMS API Endpoint
API_URL=https://rest.nexmo.com/sms/json# Nexmo API Key
# ここを設定して下さい
API_KEY=key# Nexmo API Secret
# ここを設定して下さい
API_SECRET=secret# Sender ID used for sending out SMS
# SMSの送信元　＊11文字まで、アルファニューメリック
SENDER_ID=NXSMS# Text per second. Rate of sending out SMS Request
# マックスの送信レート
TPS=30# Number of lines to skip when reading CSV. Useful if there are header lines
# ヘッダーがあれば、適切な値にして下さい
CSV_SKIP_LINES=0

4）サーバーをスタートします。

npm start

SMSを送信

5）CSVファイルを準備します。
SMSバッチ送信サービスにアップするCSVを準備します。utf8エンコーディングが期待されると思います。簡単なフォーマットで、2カラムしかないです。ヘッダーも必要ないです。

test_20210107.csvというファイルにしています。知らない人にいきなり送信すると良くないので、自分の手元にある電話番号に変えて下さい。

819011111111,テストSMSです。

ここでちょっと注意しないといけないのはtoの電話番号がE.164フォーマットで書かないといけないことです。Wikipediaを読んでも分かりにくいと思うので、簡単に言うと、日本の電話番号（090-1111-1111）からスタートして、最初の「0」と「-」を消して、「81」を頭に追加すると、E.164フォーマットになります。電話のプロに聞くと、最初の「0」が国内プレフィックスだからE.164（インターナショナルフォーマット）で使わないです、、、など、、、色々詳しく教えてくれると思いますが、下記の例を見て真似するのは一番早いと思います。

6) バッチサービスにPOSTします。
やっとSMSを送信します。「file」というパラメーターとしてPOSTします。

curl -F'file=@./test_20210107.csv' http://localhost:8080/upload

SMSが届きました。

最後にノートと注意

• CSVでは送信先の電話番号をE.164で書く。
• .envの「SENDER_ID」がわりと自由に設定できるが、キャリア（特に海外の場合）のルールがあるので、要注意。
• .envの「TPS」について、デフォルトだと、30を越えられない。https://help.nexmo.com/hc/en-us/articles/203993598-What-is-the-Throughput-Limit-for-Outbound-SMS-
• このポストのスコープ外ですが、エンドユーザーに迷惑かけずスパムしたりしないで下さい。

追加

コードを見ると、src/server.jsに「POST /blast」というエンドポイントもあります。実は、さっき「POST /upload」をコールしたんですが、バッチ送信サービスはcsvを読んだ後「POST /blast」を使っているそうです。「For Internal Use」と書いてありますが、適切なjsonを/blastにポストしたら、csvがなくてもSMSの送信はできそうです。ざっと見た感じでは送信先番号とSMSの内容を「records」というパラメーターにArrayとして入れればいけそうな気がします。

Apple Silicon M1 arm64 aarch64 Mac 環境の node.js v15 では、
npm v7 によって package-lock.json が "lockfileVersion": 2になる。

従来の Intel x64 amd64 Mac 環境などの node.js v14 では、
npm v6 によって package-lock.json が "lockfileVersion": 1になっていた。

v14 と v15 を併用する場合は、npm のバージョンを揃えたほうが良さそう。
当面 production で npm v6 を使うなら

npm install-g npm@6

として、M1 Mac 側を v6 にダウングレードすることで、バージョンを揃えることができる。

はじめての投稿です。
今年は母艦もMacBook Pro M1 にしたので（10年ぶりのmac更新）
発信を積極的にしてみようかなという目標です。

仕事でIoTデバイスの開発をしていますが、
自分の子供たちにも電子工作ちっくなものに触れさせようという事で
「暮らしを良くするIoT」と銘打ち、
自宅の困った事を電子工作を使って解決していこうと思いました。

困りごと

子供がテレビの近くから離れない。目が悪くなる！

解決方法

テレビに近づいたら怒られるようにする。（怒り疲れたので）

設計

手持ちのデバイスを色々見回して、下図のような感じで設計。

※　余りものの消費を一番に考えているので、非効率な部分はご容赦。

開発

仕組みはラズパイとUnoをシリアル接続して、
近い距離になったらシリアルに「近づきすぎよん」と送信し、
ラズパイからWifi経由でGoogle Homeに音声を送り怒らせるという感じです。
以下、参考にして組み合わせました。

-ArduinoとNode.jsでシリアル通信で文字列を送受信するスクリプト
https://qiita.com/sifue/items/69d8a6f56671588ce1ba
-RaspberryPi で castv2-client を使ってGoogleHomeをしゃべらす
https://qiita.com/nori-dev-akg/items/751e7d9bf2728afda28a

結果

無事、子供をビビらせる　＆　電子工作に興味を持たせる事に成功。
ただし面白がって、わざと喋らせようとして近づく不具合が発生中。
※　超音波距離センサだと直線しか取らないので、人感センサに変えれたら良さそう。

はじめに

前回に引き続き、メール機能について学習したのでアウトプットしていきます
今回はAmazon SESを使っていきます
Amazon SESを使う前提として

• AWS にサインアップ
  

  (AWSアカウントをすでに作成済みの方はOKです！）

• E メールアドレスまたはドメインの確認(ID検証)
  

  Amazon SES の使用を開始した時点では、E メールを送受信するためには、Amazon SES メールボックスシミュレーターと検証済み E メール ID のみであるためです。
  今回はEメールアドレス検証を行っていきます。（ドメインの場合も同様）
  
  Email Addressesを選択し、Verify a new Email Address からメールアドレスの検証を行ってください。
  

• アカウントの詳細を入力

が必要になってきます。

メール送信

Amazon SES では、

• Amazon SES コンソール
• Simple Mail Transfer Protocol (SMTP)インターフェイス
• Amazon SES API

など、E メールを送信するためのいくつかの方法を利用できます。

この中でAmazon SES APIを使ってみます

Amazon SES API

Amazon SES APIを用いることで以下のことができます。

• Amazon SES クエリ API を HTTPS 経由で直接呼び出し(ムズイらしい)
• AWS Command Line Interfaceの使用
• AWS Tools for Windows PowerShellの使用
• AWS SDK の使用

aws初心者の私は一番簡単にできそうなAWS SDKを使っていきます！
AWS SDKは Amazon SESオペレーションだけでなく、基本的な AWS 機能 (リクエスト認証、リクエストの再試行、エラー処理など) も提供します。

AWS SDK 経由でAmazon SES API

Node.js 内の AWS SDK for JavaScriptを使用します！(SDKにはPythonやjava,PHPなど様々な言語に対応したものが用意されています)

セキュリティのベストプラクティスについては、AWS アカウントのアクセスキーではなくIAM ユーザーのアクセスキーを使用します。
AWS アカウントの認証情報によってすべての AWS リソースへのフルアクセス権を付与するため、この認証情報は安全な場所に保存しておき、AWS の日々の操作には IAM ユーザーの認証情報を使用するらしいです。

では早速、AWS アクセスキーを作成していきましょう！
awsのベストプラクティスでは、AWS アクセスキーの作成手順として以下のように紹介されています。

1: IAM ユーザーを作成し、そのユーザーのアクセス許可を可能な限り狭く定義します。
2: その IAM ユーザーにアクセスキーを作成します。

AWS アクセスキーは、アクセスキー ID とシークレットアクセスキーで構成されます。

SESの環境を構築

sdkをインストールします

npm install aws-sdk --save

aws-sdkで接続情報の設定

基本的にはIAMロールを使って行うらしいのですが、よくわからないので別の方法で！
クレデンシャル(~/.aws/credentials)もよく使われるらしいですが、今回はenvに設定しました～

dotenv モジュールのインストール

$ npm install dotenv

ルートフォルダーに.envファイルを作り記述します。

aws_access_key_id = アクセスキー
aws_secret_access_key = シークレットアクセスキー

最後にmail.jsをルートフォルダーに作り、最も簡単なE メールテンプレートの作成をします。

node mail.js

を実行すれば…

届きましたね。

おまけ

awsを使うにあたり調べた用語を紹介します

ロール

特定のアクセス権限を持ち、アカウントで作成できる IAM アイデンティティです。IAM ロールは、IAM ユーザーといくつかの類似点を持っています。ロールとユーザーは、両方とも、ID が AWS でできることとできないことを決定するアクセス許可ポリシーを持つ AWS ID です。ただし、ユーザーは 1 人の特定の人に一意に関連付けられますが、ロールはそれを必要とする任意の人が引き受けるようになっています。また、ロールには標準の長期認証情報 (パスワードやアクセスキーなど) も関連付けられません。代わりに、ロールを引き受けると、ロールセッション用の一時的なセキュリティ認証情報が提供されます。

ご無沙汰してます。おおのんです。

URL取得する方法メモ。
現在ページのURLが期待値と比較したいけど、なぜか取得できない。

letpuppeteer=require("puppeteer");letbrowser;letpage;beforeAll(async()=>{browser=awaitpuppeteer.launch({args:["--disable-web-security"],headless:false,slowMo:30});page=awaitbrowser.newPage();jest.setTimeout(20000);});afterAll(()=>{browser.close();});describe("TEST",()=>{test("toMypage",async()=>{//　画面移動awaitpage.goto("http://localhost:8000/mypage");// マイページへ遷移成功awaitpage.waitForTimeout(5000);// location.hrefで完全なURL取得できるから、比較するawaitexpect(location.href).toEqual("http://localhost:8000/mypage");awaitpage.close();});});

● LOGIN TEST › Login
    expect(received).toEqual(expected) // deep equality
    Expected: "http://localhost:8000/mypage"
    Received: "http://localhost/"

・・・アカン。
Received: "http:/localhost/"になる。

こうすると取得できる。

// ～略～　　// location.href => url.path()にするawaitexpect(url.path()).toEqual("http://localhost:8000/mypage");// ～略～

● LOGIN TEST › Login
    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total

通った～。

【puppeteer/puppeteer】 how to get current url ? #2215
で既出でした。

はじめに

前回はJSONファイルの書き込みと読み込みについてまとめました。
今回は、コマンドライン入力した引数をjsファイル上で受け取って使う方法を記事にします。

教材

Udemy
The Complete Node.js Developer Course (3rd Edition)
https://www.udemy.com/course/the-complete-nodejs-developer-course-2/

引数配列の受け取り

まずは、app.jsという名前のファイルを作成します。コマンドラインから引数を受け取るには"process"を使います。
processだけでも作動しますが、入力した以外の膨大なデータを受け取っているので、"argv"を用いて、引数だけに、表示範囲を狭めます。
argvはargument vector（引数の配列）を意味します。今回はconsoleに出力します。

console.log(process.argv)

ターミナルでファイルを実行します。今回は"hello"と引数を入力しました。

node app.js hello

実行結果は以下の通りです。

[
  'C:\\Program Files\\nodejs\\node.exe',
  'C:\\Users\\admin\\Desktop\\node development\\test-app\\app.js',
  'hello'
]

１つ目の要素は、使っているパソコンの中で実行可能なNode.jsへのパス
2つ目の要素は、実行したjsファイルまでのパス
3つ目の要素が、入力した引数になります。

1つ目と2つ目は引数の値にかかわらず、同じものが表示されます。

配列の要素番号を指定することで、入力した引数のみを取り出すこともできます。引数の値は、３つ目の要素になるので、要素番号は２になります。

console.log(process.argv[2])

ファイルを実行すると、引数の"hello"のみが表示されます

node app.js hello

hello

npm を知らない人が、Windows 環境に npm を新規導入してみます。

導入環境

• Windows 10 64bit
• Windows コマンドプロンプト (cmd.exe) をある程度使えることを前提とします

概要

npm (Node Package Manager)

• npm は、元々は Node.js というサーバサイド処理を行う JavaScript プログラムの中で利用されるモジュールパッケージの管理ソフトウェアです。
• つまり、Node.js をインストールすれば npm も一緒にインストールされます。
• npm でインストールできるモジュールパッケージは、オンライン上の npm レジストリサービスに登録されています。
• npm レジストリサービスは、Node.jsで使用するものに留まらず、様々な言語や分野のパッケージが豊富に公開されており、世界最大のパッケージレジストリとなっています。
• npm パッケージはソフトウェア開発者にとって有用な物が豊富にあり、システム開発では必須のものとなっています。
• そのため、フロントエンドやバックエンドを問わず「システム開発者は導入しているのが当たり前」という風潮があるのか npm を導入していることを前提にした記事が多くあり、独学で学んでいる初心者に対しては混乱を招いていると思います。

Node.js

• Node.js は元々はサーバーサイドで動作する JavaScript プログラムです。
• その後裾野が広がり、現在ではコマンドラインやデスクトップアプリケーションなどのクライアントサイドプログラムも実行できる JavaScript プログラムの実行環境となっています。

nvm (Node Version Manager)

• Node.js はバージョン間の互換性がありません。今後他バージョンのインストールが必要になった場合に困りますので、Node.js のバージョンを容易に切り替えられるnvm-windowsを導入し、nvm からNode.js をインストールすることを推奨します。

導入の流れ

1. nvm (Node Version Manager) のインストール
2. nvm 上で Node.js をインストール
3. npm installコマンドの理解
4. npm の設定ファイル (package.json) を作成

1. nvm (Node Version Manager) のインストール

Node.js のバージョンを容易に切り替えられるnvm-windowsを導入します。
こちらの GitHub (coreybutler/nvm-windows) よりnvm-setup.zipをダウンロードし、インストーラーに従いインストールします。

2. nvm 上で Node.js をインストール

インストール可能な Node.js のバージョンを表示します。

nvm list available

表示された一覧の LTS (Long Term Support) の一番上のバージョンをインストールすると良いでしょう。
(本稿ではバージョン14.15.4を選択)

nvm install 14.15.4

次のコマンドでインストールしたバージョンに切り替えます。

nvm use 14.15.4

以上で、npmコマンドを使用することが出来るようになります。

npm -version
6.14.8

3. npm installコマンドの理解

npm でパッケージをインストールするには、npm installコマンドを使います。
パッケージのインストールは、現在 nvm で切り替えている Node.js 環境自体にインストールするグローバルインストールと、カレントディレクトリにインストールするローカルインストールを選択できます。

ポータビリティ性の面からみても、特に事情がない限りローカルインストールが推奨されるようです。
package.jsonを元に環境構築をする場合は、引数なしでnpm installを実行します。

また、パッケージのローカルインストールでは、さらに開発用オプション-Dを付けることができます。

4. npm の設定ファイル (package.json) を作成

パッケージの依存関係を記載する設定ファイルを作成します。
プロジェクトのルートフォルダへ移動した上で npm の設定ファイルを作成します。

cd C:\VSCodeProject
npm init

ルートフォルダにpackage.jsonというファイルが出来ていれば成功です。

  [プロジェクトルートフォルダ]
+   ┝ package.json

package.jsonが存在するディレクトリで npm パッケージをローカルインストールするとpackage.jsonにパッケージの依存関係が自動的に記載されていきます。
なお、package.jsonが存在しない状態でパッケージのローカルインストールをした場合、パッケージの依存関係はどこにも記載されません。

5. 完了

以上で npm パッケージをローカルインストールする準備が整い、npm の導入が完了しました。

参考サイト

• 【初心者向け】NPMとpackage.jsonを概念的に理解する
• Node.jsとはなにか？なぜみんな使っているのか？
• 【package.json】dependencies, devDependencies の使い分けを考える

今回作るもの

1.discord上でURL解析を行うコマンドを実行
2.メッセージからURLを取り出す
3.node-fetchを利用してNortonSafeWebでサイトの安全性をチェック
4.結果をサイトのHTMLから取得
5.1が送信されたチャンネルに結果を送信

必要なもの

・node.js => node.js
・discord.js => npm i discord.js
・node-fetch => npm i node-fetch

コード

constdiscord=require("discord.js");constfetch=require("node-fetch");constclient=newdiscord.Client();constprefix="!"client.on("message",asyncmessage=>{constargs=message.content.slice(prefix.length).trim().split(/ +/g);constcommand=args.shift().toLowerCase();if(command==="url"){try{consturl=args[0];if(!url)returnmessage.channel.send("エラー : URLを指定して下さい。")fetch(`https://safeweb.norton.com/report/show?url=${encodeURI(url)}&ulang=jpn`).then(res=>res.text()).then(norton=>{if(norton.indexOf("安全性")!=-1){message.channel.send({embed:{title:"結果は安全です。",description:`ノートン セーフウェブが ${url}を分析して安全性とセキュリティの問題を調べました。`,footer:{text:"Powered by Norton Safeweb"},color:0xffd700}})}elseif(norton.indexOf("［注意］")!=-1){message.channel.send({embed:{title:"結果は注意です。",description:`［注意］の評価を受けた Web サイトは少数の脅威または迷惑を伴いますが、赤色の［警告］に相当するほど危険とは見なされません。サイトにアクセスする場合には注意が必要です。`,footer:{text:"Powered by Norton Safeweb"},color:0xffd700}})}elseif(norton.indexOf("警告")!=-1){message.channel.send({embed:{title:"結果は警告です。",description:`これは既知の危険な Web ページです。このページを表示**しない**ことを推奨します。`,footer:{text:"Powered by Norton Safeweb"},color:0xffd700}})}else{message.channel.send({embed:{title:"結果は未評価です。",description:`このサイトはまだ評価されていません。`,footer:{text:"Powered by Norton Safeweb"},color:0xffd700}})}});}catch(err){message.channel.send("エラー : 解析中にエラーが発生しました。")}}});

使い方

!url <解析したいURL>
で利用することができます！

最後に

初めての投稿なのでおかしいところや、わかりにくいところがあればコメントで教えて頂きたいです！

目標

Node.jsで現在日時をYYYYMMDDHHmmssの14桁のフォーマットで出力します。
nodeコマンドで下記のような出力が得られるプログラムですね。

$ node index.js
202101082341

前提

Node.js 14.15.4
date-utils 1.2.21
moment 2.29.1

Javascriptで頑張る

constdate=newDate();constcurrentTime=formattedDateTime(date);console.log(currentTime)functionformattedDateTime(date){consty=date.getFullYear();constm=('0'+(date.getMonth()+1)).slice(-2);constd=('0'+date.getDate()).slice(-2);consth=('0'+date.getHours()).slice(-2);constmi=('0'+date.getMinutes()).slice(-2);consts=('0'+date.getSeconds()).slice(-2);returny+m+d+h+mi+s;}

date-utiliesを利用

require('date-utils');constdate=newDate();constcurrentTime=date.toFormat('YYYYMMDDHH24MISS');console.log(currentTime);

Moment.jsを利用

constmoment=require('moment');constcurrentTime=moment();console.log(currentTime.format("YYYYMMDDHHmmss"));

結論

モジュールって便利！！

sequelizeを使ってPostgreSQLと接続したい。

ローカル環境では接続に成功していたが、herokuにデプロイした後は失敗する。

失敗

constSequelize=require('sequelize');// herokuまたはローカル環境のPostgreSQLに接続するconstsequelize=newSequelize(process.env.DATABASE_URL||'postgres://postgres:postgres@localhost/hogehoge');

成功

constSequelize=require('sequelize');constsequelize=newSequelize(process.env.DATABASE_URL||'postgres://postgres:postgres@localhost/hogehoge',{dialectOptions:{ssl:true}});

ログを見るとssl off(うろ覚え)とあったので、このようにオプションを追加してみると接続に成功した。

概要

• NimのコードをJSバックエンドでコンパイルしてNode.jsのスクリプトとして実行してみます
• NimのコードからNode.js用のライブラリを生成してNode.jsから関数を呼び出してみます

NimはJavaScriptを生成できる

Nimは公式でNimのコードからJavaScriptのコードにトランスコンパイル可能です。

例えば、以下のようなNimコードに対して

proc plus*(x,y:cint):cint{.exportc.}=returnx+y

以下のコマンドでコンパイルします。すると、index.nimからindex.jsが生成されます。

$ nim js index.nim

$ ls index*
index.js index.nim

このようにJavaScriptコードを生成できます。

しかしここで生成されるJavaScriptはフロントエンド用で、HTMLから読み込む想定のものです。
Node.jsからは扱うことはできません。

NimはNode.jsのコードも生成できる

しかし、コンパイル時にオプションを渡すことにより、Node.js向けのNimコードを生成できます。
Nim Backend Integration - Nim

前述のコードを手直ししてNode.js用コンパイルを実施し、Node.jsで実行してみます。

proc plus*(x,y:cint):cint{.exportc.}=returnx+yechoplus(1,2)

$ nim js -d:nodejs index.nim

$ node index.js
3

node.jsで実行できました。

NimのコードをNode.js向けライブラリとして生成する

Node.js用の単体のスクリプトとして実行できることがわかりました。
次はスクリプトをNode.jsからライブラリとして読み込めることを確認します。

以下のNimコードを用意します。
以下のNimコードでは、plus関数を定義して、Node.jsからplus関数を呼び出せるようにするものです。

importjsffivarmodule{.importc.}:JsObjectproc plus*(x,y:cint):cint=returnx+ymodule.exports.plus=plus

次に、上記ライブラリを読み込んで使用するindex.jsを定義します。

constlib=require("./lib");console.log(lib.plus(1,2));

これらのファイルがそれぞれ同じディレクトリに配置し、以下のコマンドを実行します。

$ nim js -d:nodejs lib.nim

$ ls lib*
lib.js lib.nim

$ node index.js
3

無事、Node.jsのスクリプトから、Nimで生成したNode.js用ライブラリを読み込んで、関数を呼び出すことができました。

まとめ

以下の内容について記載しました。

• NimのコードをJSバックエンドでコンパイルしてNode.jsから関数を呼び出す
  • コンパイルするときはjsバックエンドで -d:nodejsを付ける
• NimのコードからNode.js用のライブラリを生成してNode.jsから関数を呼び出してみます
  • module {.importc.}: JsObjectでモジュールを読み込んで関数をセットする

以上です

はじめに

先日Node.jsの勉強中にnpmについて改めて学ぶ機会がありました。その際npmにサンプルのモジュールを公開したので、具体的なやり方をシェアします。

npmとは

Node Package Managerが正式な名称です。その名の通りNode.jsのパッケージを管理するためのツールです。ホームページは下記リンク先からアクセスできます。

https://www.npmjs.com/

npmはNode.jsをインストールする際にインストールされます。インストール済みの場合、下記コマンドでバージョンが表示されます。

npm --version

npmに自作モジュールを公開する方法

公開までの流れ

流れは下記の通りです。

• npmのアカウントを作成する。
• 公開したいモジュールを作成する。
• npmへログインする。
• npmへ公開する。

それでは1つずつ見ていきます。

npmのアカウントを作成する

まずはnpmのアカウントを作成します。下記リンク先からSign Upできます。

https://www.npmjs.com/signup

公開したいモジュールを作成する

npm initでpackage.jsonを作成します。package nameを聞かれるので、npmレポジトリ上に存在していない名前を入力します。あらかじめnpmのサイトで利用されていない名前であることを確認しておきましょう。

npm init

package.jsonができたら、private属性をpackage.jsonに追記して公開設定にします。

"private": false

次に、README.mdファイルを準備します。ここにはどういった動きをするモジュールなのか、プロジェクトの概要を記述しておきます。

npmへログインする

ターミナルを起動し、プロジェクトのルートで下記コマンドを入力します。ユーザーネーム、パスワード、メールアドレスを聞かれるので入力します。

npm login

npmへ公開

ログインができたら、下記コマンドで公開できます。

npm publish —access public

※—dry runオプションをつけることで、お試しで実行することができます(実際には公開されません)。

npm publish —access public —dry run

最後に

簡単ですがサンプルのモジュールをGitHub上にpushしたので、package.json等の参考までに見てください。

https://github.com/n199603/npm-study

以上、npmに自作モジュールを公開する方法でした。見ていただきありがとうございました。

はじめに

ml5を利用しようとしたところ、型定義が無く、エラーが発生したため、型定義が無い時のモジュールの読み込み方法について調べました。
＊なお、ml5の型定義は現在draft版を作成中。
https://gist.github.com/dikarel/38a12ce263199a41ad67c15eac7f4b45

型定義が無い時のエラー

ml5を以下のようにモジュールをインポートするとエラーとなる。

import*asml5from"ml5";

具体的には以下のようなコンパイルエラーが発生する。

Could not find a declaration file for module 'ml5'.
Try npm install @types/ml5 if it exists or add a new declaration (.d.ts) file containing declare module 'ml5';

型定義が無い時の読み込み方法

型定義ファイル( d.ts )を自作すれば良いが、面倒な時はrequireでモジュールを読み込みます。
暗黙的に any型になるので、型定義ファイル d.tsが見つからないエラーは消えます。

constml5=require('ml5')

ただし TSLintの設定によっては [tslint] require statement not part of an import statement (no-var-requires)という警告がでます。
// tslint:disable-next-line:no-var-requiresとコメントで require('ml5')についてだけ警告を無効にします。

// tslint:disable-next-line:no-var-requiresconstml5=require('ml5')

この状態では ml5が any型になり、型チェックも賢い補完も行われません。
自分の使う API だけ型付けして置くと、開発がスムーズです。

typeImageClassifierOptions={alpha:number;topk:number;version:number;};interfaceIMl5{imageClassifier(model:"MobileNet"|"Darknet"|"Darknet-tiny"|string,callback?:(error:any,result:any)=>void):undefined|Promise<any>;imageClassifier(model:"MobileNet"|"Darknet"|"Darknet-tiny"|string,options?:ImageClassifierOptions,callback?:(error:any,result:any)=>void):undefined|Promise<any>;imageClassifier(model:"MobileNet"|"Darknet"|"Darknet-tiny"|string,video?:MediaElement|HTMLVideoElement,options?:ImageClassifierOptions,callback?:(error:any,result:any)=>void):undefined|Promise<any>;}constml5=require('ml5')asIMl5;

終わりに

以上。

サーバーから人をBANする方法

荒らす人、イライラする人にはBANができます。
その動作をBOTにさせる方法を教えます！

動作環境

document

公式ドキュメント（英語）：Link

動き方

!ban メンションorID
↓
理由を聞く（BANをする理由）
↓
BAN完了！

コード

constdiscord=require("discord.js");constclient=newdiscord.Client();constprefix="!";//ここは好きに変えてもいいですclient.on("message",asyncmessage=>{if(!message.content.match(/^!/))return;//!が最初にない場合は処理をしないvarcommand=message.content;command=command.replace("!","");if(command=="ban"){if(message.mentions.members.size==1){//メンションがあるかを確認constmember=awaitmessage.mentions.members.first();//メンションの内容constid=member.user.id;//ユーザーIDconstmee=awaitmessage.channel.send({//あとで編集などができるようにawait（非同期処理）をつけるembed:{color:16757683,description:"60秒以内に理由を入力してください。"}});constfilter=msg=>msg.author.id===message.author.id;constcollected=awaitmessage.channel.awaitMessages(filter,{max:1,time:60000});constresponse=collected.first();if(!response)returnmee.edit({embed:{description:"タイムアウト…"}});mee.edit({embed:{description:"BANしています…"}});message.guild.members.ban(id,{reason:response.content});mee.edit({embed:{description:`<@${id}>をBANしました。`}});}else{//IDの場合letme=message.content;me=me.replace("!ban ","");letid=meconstmee=awaitmessage.channel.send({embed:{color:16757683,description:"60秒以内に理由を入力してください。"}});constfilter=msg=>msg.author.id===message.author.id;//検索内容を設定constcollected=awaitmessage.channel.awaitMessages(filter,{max:1,time:60000});constresponse=collected.first();if(!response)returnmee.edit({embed:{description:"タイムアウト…"}});mee.edit({embed:{description:"BANしています…"}});message.guild.members.ban(id,{reason:response.content});//BANをするmee.edit({embed:{description:`<@${id}>をBANしました。`}});}}})

動かない場合

①使うBOTに管理者権限、BANの権限、チャンネルへのアクセス権がない
②tokenが間違っている
③BOTが招待されていない
④コードが間違っている
など…

使う上での注意

※サーバーにいないひとをBANする場合、IDでしかBANができません。一応反応はします。（エラーを出すこともできるけど→別の記事で）サーバー内にいる人ならメンションでOKです。

質問など

Discordの場合：ライグー/racoon#1010
コメントでもOKです

はじめに

前回はコマンドライン引数の受け取りについてまとめました。
今回はnpmモジュールyargsを使ったオプションの変換を記事にします。yargsを利用することで、ターミナルでコマンドを実行する際に、引数のオプションを入れた場合、それを引数として変換できます。

教材

Udemy
The Complete Node.js Developer Course (3rd Edition)
https://www.udemy.com/course/the-complete-nodejs-developer-course-2/

解決したいこと

processを用いることで、コマンドライン引数の受け取りはできましたが、引数のオプションを入力しても上手く変換されません。
まずは、こちらから見ていきましょう。app.jsというファイルを作成し、コマンドライン引数がconsoleに表示されるようにコードを書きます。

console.log(process.argv[2])

それでは、こちらのファイルを引数addBookとオプション title="Kokoro"を入れて実行してみます。

node app.js addBook --title="Kokoro"

結果は以下のようになり、オプションである"Kokoro"をうまく読み込んでくれません。（--title="Kokoro"全体が２つめの引数として認識されている）

addBook

こちらをnpmのyargsを使って解決します。

yargsのインストール

ターミナルにてインストールのコマンドを実行します。npm公式のyargsのページはこちら

//npmを開始していない場合はこちらも実行
 npm init
 npm i yargs

次に、requireを用いて、yargsをapp.js内で使えるようにします。コマンドライン引数をyargs.argvを用いて表示してみます。

constyargs=require('yargs')console.log(yargs.argv);

同じ引数を入れて、ファイルを実行すると、以下のように出力されます。

node app.js addBook --title="Kokoro"

{ _: [ 'addBook' ], title: 'Kokoro', '$0': 'app.js' }

引数 addBookに対して、titleをプロパティとして認識し、Kokoroを値として出力できています。
ちなみに、'$0'は実行されたファイル名を指します。app.jsが実行されていることがわかります。

コマンドをカスタマイズする

次に、yargsのコマンドをカスタマイズしてみます。

constyargs=require('yargs')// 以下のコマンドを作作成します。yargs.command({//コマンド名command:'addBook',//以下で、コメントを残しておきます。describe:'Add a new Book',//以下の処理を実行しますhandler:function(){console.log("Add a new book!");}})//yargsを実行する　yargs.parse()

コマンドが作成されているかターミナルから確認してみます。

node app.js --help

Commands:
  app.js addBook  Add a new Book

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

コマンドに、 addBookと設定したコメントが追加されています。

実際に、コマンドを実行してみましょう。

node app.js addBook


Add a new book!

処理には、"Add a new book!"をコンソールに出力する処理を書きましたが、無事に表示されました。

コマンドに引数のオプションを追加する

作成したコマンドには、builderを用いて、オプションを追加できます。

constyargs=require('yargs')yargs.command({command:'addBook',describe:'Add a new Book',//オプション引数を追加builder:{title:{//処理の内容をメモdescribe:"Add a book title",//必須の引数にするか指定demandOption:true,//データ型を指定type:"string"}},//オプションを表示するように変更するhandler:function(argv){console.log("Adding "+argv.title);},})yargs.parse();

ターミナルでオプションのtitleを入れてファイルを実行します。

node app.js addBook --title="Kokoro"

Adding Kokoro

オプションが上手く変換されて、コンソールに出力されました。

目的

バックエンドをESモジュールで記載できるようにしたい(フロントエンドに合わせる)という目的です。
(babelにするかtypescriptにするかで悩んでいます)

• おまけにsequelizeを追加して、動作することも確認する。

• 完成後ソース(tagのv1がsequelize追加前まで、v2(最新コミット)が最後まで)
  https://github.com/murasuke/express-generator-babel

結果

• ESMとしてexportしたモジュールはimportする、module.exportの場合(node)はrequire()を利用するということに気を付ければ、混在していても問題なく動く。

実現手段

• expessをES6(import)で利用できるようにするため、babelでトランスパイルする。
  ⇒package.json に 「type: module」を追加すればESモジュールを使えますが、jsファイルの拡張子(.cjs、.mjs)の切り分けが面倒なのでbabelにします。

• express-generatorでひな形を生成する。

• 開発時は「babel-node」で実行(ビルド不要)可能とする。トランスパイルしたjsファイルが必要な場合はbuildを行う。

• sequelizeと組み合わせて使用する(sequelizeはnodeモジュール形式で生成される。ES6形式で記載したexpress側で問題なく利用できることを確認する）

前提

• nodeとyarnがインストール済みであること (npmを使う場合は適宜読み替えてください）

利用モジュール

{"dependencies":{"cookie-parser":"~1.4.4","debug":"~2.6.9","express":"~4.16.1","morgan":"~1.9.1"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/node":"^7.12.10","@babel/preset-env":"^7.12.11"}}

手順

①expressのひな形をESモジュールに変更し、babelでコンパイルする

1. express-generatorでひな形を作成(viewは生成しない。.gitignoreは生成する)

npx express-generator express-generator-babel --no-view--git

2. (作成されたフォルダに移動し)必要なライブラリをインストール

yarn install

3. expressが起動することを確認

yarn start

ブラウザで「http://localhost:3000」を表示する

4. babelインストール

yarn add @babel/cli  @babel/core @babel/preset-env -D

5. babelの設定ファイル(.babelrc)を作成する

targetにcurrentを入れることで、インストールされているnode.jsが理解できる形でトランスパイルされます。
(最近のnodeであればawaitやasyncなどがヘルパー関数ではなく、そのまま出力されます(pollyfill不要)）

{"presets":[["@babel/preset-env",{"targets":{"node":"current"}}]]}

6. babelでビルドするため、フォルダ構成を変更する。

• jsファイルを「/src」フォルダ配下にすべて移動する

mkdir src
mv  bin/ routes/ app.js src/

※「bin」「routes」フォルダと、app.jsファイルを「src」フォルダに移動している。

• フォルダ階層が変わったためソースを一部修正する

app.js (publicフォルダの位置を修正)

app.use(express.static(path.join(__dirname, 'public')));↓
app.use(express.static(path.join(__dirname, '../public')));

• トランスパイル先フォルダを作成する

mkdir dist

7. ビルド用コマンドをpackage.jsonに追加する

package.json の "scripts"に下記コマンドを追加する。

"build":"babel src --out-dir dist --copy-files && babel ./src/bin/www --out-file ./dist/bin/www"

※.src/bin/www は拡張子がないjsファイル。フォルダ指定では対象にならないため、個別にトランスパイルをしている。

8. babelでトランスパイルを行う

yarn build

9. トランスパイルしたソースで動作確認を行う

• package.json の "scripts"に下記コマンドを追加する。

"serve":"node ./dist/bin/www"

• サーバを起動する

yarn serve

ブラウザで「localhost:3000」を開き、expressのトップページが開くことを確認する。

10. ESモジュールに変更して動作確認を行う

• require()をimportに変更しても動作することを確認する。

1. module.exportsからES6のexportに変更した場合、読み込み元も「import」に修正する必要がある。
2. ソース内でrequire()をimportに変更しても、外部にエクスポートする「module.export」を変更しなければ、呼び出し元は変更不要。

/src/routes/index.js

// var express = require('express');  //コメントアウトimportexpressfrom'express';//追加varrouter=express.Router();/* GET home page. */router.get('/',function(req,res,next){res.render('index',{title:'Express'});});// module.exports = router;  //コメントアウトexportdefaultrouter;//追加

/src/app.js

// var express = require('express');  //コメントアウト// var path = require('path');// var cookieParser = require('cookie-parser');// var logger = require('morgan');importexpressfrom'express';//追加importpathfrom'path';importcookieParserfrom'cookie-parser';importloggerfrom'morgan';// var indexRouter = require('./routes/index');  //コメントアウトimportindexRouterfrom'./routes/index';//追加varusersRouter=require('./routes/users');varapp=express();app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({extended:false}));app.use(cookieParser());app.use(express.static(path.join(__dirname,'../public')));app.use('/',indexRouter);app.use('/users',usersRouter);module.exports=app;//コメントアウトしない。読み込み元(bin/www)を変更せず、require()のままとするため。//export default app;  // exportに書き換えると、読み込み元をimportに書き換える必要がある。

11. ESモジュール化後の動作確認

yarn build
yarn serve

• ブラウザで「localhost:3000」を開き、expressのトップページが開くことを確認する。

12. 開発用に「babel-node」を導入する（ビルド無しで動作させるため）

• babel-nodeをインストールする

yarn add @babel/node -D

• package.jsonの startを修正する

"start":"node ./bin/www",　↓"start":"babel-node ./src/bin/www",

• babel-nodeで起動することを確認する(build不要)

yarn start

ブラウザで「localhost:3000」を開き、expressのトップページが開くことを確認する。

②sequelize＋sqliteを追加してデータを取得する

sequelize-cliを利用して生成したひな形(node module形式)を、express側から利用できることを確認する。

13. sequelize導入(DBはsqliteを利用する。別にサーバを作る必要がないため）

yarn add sequelize sqlite3
yarn add sequelize-cli -D

• 初期化時に自動生成されるフォルダを「/src」配下にするため、先に「.sequelizerc」ファイルを作成する(プロジェクトルート)

touch .sequelizerc

• sequelize関連ファイルを「/src/seqelize」で管理するように設定する（指定しない場合は、プロジェクトルートに作成される）

constpath=require('path');module.exports={'config':path.resolve('./src/sequelize/config','config.json'),'models-path':path.resolve('./src/sequelize/models'),'seeders-path':path.resolve('./src/sequelize/seeders'),'migrations-path':path.resolve('./src/sequelize/migrations'),};

• マイグレーションのための初期化を行う

yarn sequelize init

※コマンドは、sequelize, sequelize-cli どちらでもよい（エイリアス）

プロジェクトルートではなく、/src/sequelizeに作成されます。

• config.jsonをsqlite用に書き換える。

{"development":{"database":"database_development","dialect":"sqlite","storage":"db/proto_app_dev.sqlite"},"test":{"database":"database_test","dialect":"sqlite","storage":"db/proto_app_test.sqlite"},"production":{"database":"database_production","dialect":"sqlite","storage":"db/proto_app.sqlite"}}

14. sequelize-cli でテーブル定義のひな形を作成後、マイグレーションを行う

• sequelize model:generateでmodel定義と、マイグレーション用のひな形を生成する。

yarn sequelize model:generate --name User --attributes name:string,birth:date,email:string

migrationsにひな形が生成されます。

• マイグレーションを行い、テーブルを作成する

yarn sequelize db:migrate

15. テスト用データを登録(db:seed)する

• ひな形を作成する

yarn sequelize seed:generate --name user

• ひな形を修正(登録データを用意する)

'use strict';module.exports={up:async(queryInterface,Sequelize)=>{constnow=newDate();constbirth=newDate(now);constseeds=[];constsubtractYear=(date,year)=>newDate(date.setYear(date.getFullYear()-year));seeds.push({name:"name1",birth:subtractYear(birth,1),email:"mail1@example.com",createdAt:now,updatedAt:now});seeds.push({name:"name2",birth:subtractYear(birth,1),email:"mail2@example.com",createdAt:now,updatedAt:now});seeds.push({name:"name3",birth:subtractYear(birth,1),email:"mail3@example.com",createdAt:now,updatedAt:now});returnawaitqueryInterface.bulkInsert("users",seeds,{});},down:async(queryInterface,Sequelize)=>{awaitqueryInterface.bulkDelete('users',null,{});}};

• seedを登録する

 yarn sequelize  db:seed:all

※やり直す場合は「yarn sequelize db:seed:undo:all」

16. 作成したmodelをexpress側から利用し、登録したデータが取得できることを確認する

• ./route/users.jsを修正し、sequelizeのmodel(users)を全レコードjson形式で返すように修正する

修正前

varexpress=require('express');varrouter=express.Router();/* GET users listing. */router.get('/',function(req,res,next){res.send('respond with a resource');});module.exports=router;

修正後

importdbfrom"../sequelize/models/index";importexpressfrom'express';constrouter=express.Router();/* GET users listing. */router.get('/',asyncfunction(req,res,next){//res.send('respond with a resource');constusers=awaitdb.User.findAll();res.json(users);});// module.exports = router;exportdefaultrouter;

呼び出し元(app.js)も変更する。

// var usersRouter = require('./routes/users');importusersRouterfrom'./routes/users';

17. ビルド後、データが取得できることを確認する

yarn build
yarn serve

• localhost:3000/users にアクセスして、DBからデータが取得できることを確認する

[{"id":1,"name":"name1","birth":"2020-01-10T09:51:38.737Z","email":"mail1@example.com","createdAt":"2021-01-10T09:51:38.737Z","updatedAt":"2021-01-10T09:51:38.737Z"},{"id":2,"name":"name2","birth":"2019-01-10T09:51:38.737Z","email":"mail2@example.com","createdAt":"2021-01-10T09:51:38.737Z","updatedAt":"2021-01-10T09:51:38.737Z"},{"id":3,"name":"name3","birth":"2018-01-10T09:51:38.737Z","email":"mail3@example.com","createdAt":"2021-01-10T09:51:38.737Z","updatedAt":"2021-01-10T09:51:38.737Z"}]

前提

ProgateのNodejsコース完了程度の知識があること。
Docker使える。
VSCodeでDocker入門

本記事の対象者

ProgateでNodejs学んだ。次は自分のプロジェクトを作ってみたいって人

本記事でやること

• DockerでNodejs環境を作る
• プロジェクトの作成
• ライブラリのインストール
• ブラウザ上でページを確認

環境

Docker
VSCode
Node 14.15
Git

プロジェクトの作成

まず適当な場所にプロジェクトのフォルダを作成。
本記事では nodejs-sample-appという名前で作った。

そして、そのフォルダをVSCodeで開く。

以下のファイルを作成

version:"3"services:node:image:node:14.15volumes:-.:/projecttty:trueworking_dir:/projectcommand:bash

Nodeのバージョンは14.15を指定しておく。

コンテナに入ってバージョンを確認。

root@cf2295d42525:/project# node -v
v14.15.4

そしたらプロジェクトを作る準備が完了。

ここからnpmコマンドを使ってプロジェクトを構築する。

以下のコマンドを打つと、プロジェクトに package.jsonというファイルが作成される。

$ npm init -y


npm init リファレンス

root@cf2295d42525:/project# npm init -y
Wrote to /project/package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json は Nodejsプロジェクトの様々な情報をかくところと把握しておけばOK

次に Webアプリケーション において一番最初に呼ばれるjsファイルを作る。
package.json と同じ階層に以下のように作成

console.log("Hello nodejs");

そうしたら、以下のコマンドで実行されるか確かめる

root@cf2295d42525:/project# node app.js
Hello nodejs

Hello nodejs と表示されたらOK

次に package.json を以下のように変更

{"name":"project","version":"1.0.0","description":"","main":"app.js","scripts":{"test":"echo \"Error: no test specified\"&& exit 1","start":"node app.js"},"keywords":[],"author":"","license":"ISC"}

mainを修正 testの末尾にカンマ追加, scripts.start追加

そうすると、 npm startでscripts.startで指定したコマンドが呼ばれるようになる。

root@cf2295d42525:/project# npm start

> project@1.0.0 start /project
> node app.js

Hello nodejs

これでひと段落。

このタイミングでgit initすると良い。

expressのインストールのルーティング

expressのインストール

$ npm install express

package.jsonに以下のように追記される

{
...
  "dependencies": {
    "express": "^4.17.1"
  }
}

そして、node_modulesというフォルダと package-lock.jsonというファイルができる。

node_modulesにはインストールしたpackageが入る。
これはプッシュしたくないのでgitignoreを作成してつっこむ。

node_modules/

installして差分がでてるのでここでcommit。

ルーティングを作成

constexpress=require('express');constapp=express();app.get('/',(req,res)=>{res.render("index",{message:"うおおおおおお"})});constport=process.env.PORT||3000app.listen(port,()=>console.log(`server started port ${port}`));

npm startすると、以下のように表示される。

root@cf2295d42525:/project# npm start

> project@1.0.0 start /project
> node app.js

server started port 3000

しかし、今のままではブラウザでひらけない

docker-composeにportについて記述する必要がある。

version:"3"services:node:image:node:14.15volumes:-.:/projecttty:trueworking_dir:/projectports:-"3000:3000"command:npm start

portsを追加し、コンテナを立ち上げた時に npm start 実行するように変更した。

docker-compose を編集したら、コンテナを作り直す必要がある。
一度コンテナを消して以下を実行

$ docker-compose up -d

ちゃんとサーバーとして起動しているかログを確認

nodejs-sample-app(main)$ docker-compose logs       
Attaching to nodejs-sample-app_node_1
node_1  | 
node_1  | > project@1.0.0 start /project
node_1  | > node app.js
node_1  | 
node_1  | server started port 3000

いけてそう。

ブラウザで確認

ejs

ejsを使うためにインストール

$ npm install ejs


viewsフォルダを作成し、その中にejsファイルを作成

<!DOCTYPE html><htmllang='en'><head><metacharset='UTF-8'><metaname='viewport'content='width=device-width, initial-scale=1.0'><title>Document</title></head><body><p><%=message%></p></body></html>

constexpress=require('express');constapp=express();app.get('/',(req,res)=>{res.render("index.ejs",{message:"うおおおおおお"})});constport=process.env.PORT||3000app.listen(port,()=>console.log(`server started port ${port}`));

renderでejsを描画し、「message」を埋め込む

Udemyで勉強しようWEBアプリケーション開発！

というわけでして、Udemyさんの講座で勉強させて頂いております。

対象講座

こちらの講座です　：　【Angular11とNode.jsで始める！】JavaScript系 WEBアプリケーション開発コンプリートガイド

成果物

現時点での成果物です　：　Angular & Node.js WEBアプリケーション

（まだ、最後の「デザインを作りこもう」をやっていないです。）

Angularでのフロントエンドの開発と、Node.js、MongoDBによるバックエンドの開発、デプロイまでを学べます。

※　ローカル環境がMacの方向けの教材でして、私はWindows10でやってみているので、ちょっと難しかったです……

ReactとAngularとどっちが良いか？

フロントエンド側については、ReactとAngularとどっちが良いか？　ということを思うかもしれませんが、私は両方やってみた方が良いかなと思いました。

Angularの方が、学習の道筋が示されているので、フロントエンド側の開発でのテンプレート的なものを見出しやすいかもしれません。その後、Reactを勉強するとReactを理解しやすいのでは？　と感じています。