投稿日：2020-07-05T22:23:48+09:00

console.logで配列やオブジェクトが省略されてしまうときはconsole.dirを使おう

console.dirの第２引数にオブジェクト{depth: null}を渡すと深い階層も省略されずに全部見れます。

const menu = {
  main: {
    currey: 500,
    udon: 450,
    rice: 150
  },
  side: {
    soup: {
      misoshiru: {
        wakame: 250,
        asari: 250
      },
      potage: {
        corn: 250,
        potato: 250
      }
    },
    dessert: {
      icecream: {
        vanilla: 100,
        chocolate: 100
      }
    }
  }
}

console.log(menu)
/*
{
  main: { currey: 500, udon: 450, rice: 150 },
  side: {
    soup: { misoshiru: [Object], potage: [Object] },
    dessert: { icecream: [Object] }
  }
}
*/

console.dir(menu, {depth: null})
/*
{
  main: { currey: 500, udon: 450, rice: 150 },
  side: {
    soup: {
      misoshiru: { wakame: 250, asari: 250 },
      potage: { corn: 250, potato: 250 }
    },
    dessert: { icecream: { vanilla: 100, chocolate: 100 } }
  }
}
*/

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T14:35:35+09:00

Node.js: Starttls でメールの送信

こちらと同じことを Node.js で行いました。
Python3: Starttls でメールの送信
hi-ho.ne.jp で試しました。

hi-ho.js

#! /usr/bin/node
//
//  hi-ho.js
//
// ---------------------------------------------------------------
'use strict'

const dotenv = require('dotenv')
const nodemailer = require('nodemailer')

console.error ("*** 開始 ***")

dotenv.config()

const env = {
    server: `${process.env.SERVER}`,
    port: `${process.env.PORT}`,
    usr: `${process.env.USR}`,
    password: `${process.env.PASSWORD}`,
    from: `${process.env.FROM}`,
    to: `${process.env.TO}`,
}

console.log(env.from)
console.log(env.to)

// create reusable transporter object using the default SMTP transport
const url = 'smtps://' + env.usr + ':' + env.password + '@' + env.server 
var transporter = nodemailer.createTransport(url)

// setup e-mail data with unicode symbols
var mailOptions = {
    from: env.from, // sender address
    to: env.to, // list of receivers
    subject: 'Hello Jul/05/2020 PM 14:26', // Subject line
    text: 'Hello world PM 14:26 plaintext', // plaintext body
    html: '<b>Hello world PM 14:26 html</b>' // html body
}

// send mail with defined transport object

transporter.sendMail(mailOptions, function(error, info){
    if(error){
        return console.log(error)
    }
    console.log('Message sent: ' + info.response)

    console.error ("*** 終了 ***")
})


// ---------------------------------------------------------------

.env

SERVER = 'hi-ho.mose-mail.jp'
PORT = 587
USR = '****@hi-ho.ne.jp'
PASSWORD = '****'
FROM = '****@hi-ho.ne.jp'
TO = 'sample@example.com'

実行結果

$ ./hi-ho.js
*** 開始 ***
****@hi-ho.ne.jp
sample@example.com
Message sent: 250 2.0.0 0622YNNb088216 Message accepted for delivery
*** 終了 ***

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T14:35:35+09:00

Node.js: Starttls でメールの送

こちらと同じことを Node.js で行いました。
Python3: Starttls でメールの送信
hi-ho.ne.jp で試しました。

hi-ho.js

#! /usr/bin/node
//
//  hi-ho.js
//
// ---------------------------------------------------------------
'use strict'

const dotenv = require('dotenv')
const nodemailer = require('nodemailer')

console.error ("*** 開始 ***")

dotenv.config()

const env = {
    server: `${process.env.SERVER}`,
    port: `${process.env.PORT}`,
    usr: `${process.env.USR}`,
    password: `${process.env.PASSWORD}`,
    from: `${process.env.FROM}`,
    to: `${process.env.TO}`,
}

console.log(env.from)
console.log(env.to)

// create reusable transporter object using the default SMTP transport
const url = 'smtps://' + env.usr + ':' + env.password + '@' + env.server 
var transporter = nodemailer.createTransport(url)

// setup e-mail data with unicode symbols
var mailOptions = {
    from: env.from, // sender address
    to: env.to, // list of receivers
    subject: 'Hello Jul/05/2020 PM 14:26', // Subject line
    text: 'Hello world PM 14:26 plaintext', // plaintext body
    html: '<b>Hello world PM 14:26 html</b>' // html body
}

// send mail with defined transport object

transporter.sendMail(mailOptions, function(error, info){
    if(error){
        return console.log(error)
    }
    console.log('Message sent: ' + info.response)

    console.error ("*** 終了 ***")
})


// ---------------------------------------------------------------

.env

SERVER = 'hi-ho.mose-mail.jp'
PORT = 587
USR = '****@hi-ho.ne.jp'
PASSWORD = '****'
FROM = '****@hi-ho.ne.jp'
TO = 'sample@example.com'

実行結果

$ ./hi-ho.js
*** 開始 ***
****@hi-ho.ne.jp
sample@example.com
Message sent: 250 2.0.0 0622YNNb088216 Message accepted for delivery
*** 終了 ***

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T14:15:56+09:00

Node.jsのAPIをまとめてみた

はじめに

先週ぐらいからNode.jsの参考書を読み始め、途中から
「■■ = require('〇〇')」
というのが連発してきて、いろんな種類のAPIが使えるのだと知りました。

参考書の最初は「require('events')」や「require('http')」を使っていて、
他にどんなAPIが使えるのか気になり、一覧としてまとめてみました。

※初学者のため誤りがあると思います。
　間違いはコメントしていただけると幸いです。

本題の前に

本題の前に、「require」について少しだけ触れておきます。

requireとは、モジュール化されたJavaScriptのファイルをNodeから読み込んで利用できるようにしてくれるものです。

npmを使ってインストールしてきたパッケージを利用する際にもこの「require」を使用します。

著者は普段、C言語を使用していますので、この「require」はC言語のインクルードみたいなものだと理解しています。(あくまでもイメージです。)

本記事は、Nodeをインストールしたらデフォルトで使用できるモジュールについて一覧にしてみました。

Nodeモジュール一覧

下表はNode.js v12.18.2 ドキュメントを参考にまとめました。
公式ドキュメントにはそのAPIの安定性が記載されています。
簡単にまとめると、

安定性：0 - 非推奨
安定性：1 - 実験的
安定性：2 - 安定
(詳しくは ⇒ 公式ドキュメント)

使いたいAPIは、「require('下表のAPI名')」を書けば使えます。

API API名安定性説明

Assertion Testing assert 2 アサーションモードの使用

Async Hooks async_hooks 1 非同期リソースの追跡

Buffer buffer ※1 2 バイナリデータを一連のバイト形式に変換

C++ Addons ./build/Release/addon ※2 2 C++で記載されたアドオンをロード

Child Processes child_process 2 子プロセスを生成

Cluster cluster 2 サーバポートを共有する子プロセスを生成

Console console ※1 2 単純なデバッグコンソール

Crypto crypto 2 暗号化機能

DNS dns 2 名前解決

Domain domain 0 複数の異なるIO操作の処理

Events events 2 イベント処理

File System fs 2 ファイルシステム操作

HTTP http 2 HTTPインタフェース

HTTP/2 http2 2 HTTP/2プロトコルの実装

HTTPS https 2 httpsインタフェース

Inspector inspector 1 V8インスペクターとの対話

Net net 2 TCPまたはIPCサーバ・クライアントの作成

OS os 2 OS関連のユースティリティ

Path path 2 ファイルおよびディレクトリパス操作

Process process ※1 記載なしプロセス制御

Punycode punycode 0 Punycodeモジュールのバンドル

Query Strings querystring 2 食える文字列の解析及びフォーマット

Readline readline 2 ストリームから１行ずつデータ読み取り

REPL repl 2 REPLの実装

Stream stream 2 ストリーミングデータの操作

String Decoder string_decoder 2 文字列にデコード

Timers timers ※1 2 スケジュール操作

TLS/SSL tls 2 TLSおよびSSLプロトコルの実装

Trace Events trace_events 1 トレースイベント操作

TTY tty ※3 2 tty操作

UDP/Datagram dgram 2 UDPデータグラムソケットの実装

URL url 2 URL解決および解析

Utilities util 2 APIのユースティリティ

V8 v8 記載なし V8固有のAPI

VM vm 2 V8仮想マシン

Worker Threads worker_threads 2 スレッド作成

Zlib zlib 2 圧縮機能

※1. グローバルスコープ内にあるため、requireを使用する必要はほとんどない
※2. build/Release/addon.nodeという名前でアドオンが作成
※3. ほとんどの場合、直接操作する必要はない

さいごに

調べてみると、使っていないAPIがたくさんあることに気づきました。
フレームワークもたくさんあるのでそこら辺も一回整理したいですね。

参考

サーバサイドJavaScript Node.js入門

Node.js v12.18.2 ドキュメント

API	API名	安定性	説明
Assertion Testing	assert	2	アサーションモードの使用
Async Hooks	async_hooks	1	非同期リソースの追跡
Buffer	buffer ※1	2	バイナリデータを一連のバイト形式に変換
C++ Addons	./build/Release/addon ※2	2	C++で記載されたアドオンをロード
Child Processes	child_process	2	子プロセスを生成
Cluster	cluster	2	サーバポートを共有する子プロセスを生成
Console	console ※1	2	単純なデバッグコンソール
Crypto	crypto	2	暗号化機能
DNS	dns	2	名前解決
Domain	domain	0	複数の異なるIO操作の処理
Events	events	2	イベント処理
File System	fs	2	ファイルシステム操作
HTTP	http	2	HTTPインタフェース
HTTP/2	http2	2	HTTP/2プロトコルの実装
HTTPS	https	2	httpsインタフェース
Inspector	inspector	1	V8インスペクターとの対話
Net	net	2	TCPまたはIPCサーバ・クライアントの作成
OS	os	2	OS関連のユースティリティ
Path	path	2	ファイルおよびディレクトリパス操作
Process	process ※1	記載なし	プロセス制御
Punycode	punycode	0	Punycodeモジュールのバンドル
Query Strings	querystring	2	食える文字列の解析及びフォーマット
Readline	readline	2	ストリームから１行ずつデータ読み取り
REPL	repl	2	REPLの実装
Stream	stream	2	ストリーミングデータの操作
String Decoder	string_decoder	2	文字列にデコード
Timers	timers ※1	2	スケジュール操作
TLS/SSL	tls	2	TLSおよびSSLプロトコルの実装
Trace Events	trace_events	1	トレースイベント操作
TTY	tty ※3	2	tty操作
UDP/Datagram	dgram	2	UDPデータグラムソケットの実装
URL	url	2	URL解決および解析
Utilities	util	2	APIのユースティリティ
V8	v8	記載なし	V8固有のAPI
VM	vm	2	V8仮想マシン
Worker Threads	worker_threads	2	スレッド作成
Zlib	zlib	2	圧縮機能

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T12:57:47+09:00

Node jsでCMSを作る part1

はじめに

この記事は僕がNode jsでCMSを作りながらメモ代わりに更新していく予定です。
なので過度な期待はしないでください。

作りたいもの

速度に全振りした低スペックでも動くCMS

要件定義を決める

さて、作ると決めたもののどうしよう状態に陥ったのでCMSの作り方を調べてみた。

CMSを検討する際に一番大事なこと！
CMS構築をするうえで一番重要なことは、ずばりこの一言に尽きます！
【要件定義をしっかりと、漏れなく、実施すること】
です。
下の解説で、なぜ要件定義が必要なのか、わかると思います。

と書いてあったので要件定義したいと思います。

機能面の要件定義

要件定義なんてしたことないので、テキトーに書いていきます

必須

サイトを公開できる
HTML,Markdown,独自のエディタでページを書ける
プラグインなどを読み込める
ページごとにjavascript,cssを設定できる
高度な高速化機能を搭載している
word pressの記事を読み込める
pjaxを標準搭載

あればいいかな的なもの

テーマを読み込める
IoTなどと連携できる

動作環境の要件定義

conohaのRAM1GBプランで快適に動作できる
Node js 12

こんな感じでいいんですかね?(言いわけない)

終わりに

とりあえず今日はここまでにします。
少しずつ作っていくので、アイデアや意見があれば教えてほしいです

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T12:20:02+09:00

Vue.jsを使ってFirebaseのデータを削除する

Vue.jsを使ってFirebaseのデータベース firestore のデータを削除する方法をお伝えします。

概要確認

こんな感じのfirestore のデータベースがあります。

このときHPはこんな感じです。

今回のゴールはHP上の×ボタンを押したらデータベース上のデータも連動して消えるです。

手順

このゴールを達成するためには以下の手順でコードを書いていきます。

×ボタンを押すとindexをトリガーに、その項目のidをゲットする

その項目のidを変数に設定

さらにその変数をトリガーにして、削除ボタンで項目削除

1. ×ボタンを押すとindexをトリガーに、その項目のidをゲットする

削除ボタンを押すとその項目のindexをゲットします。
book-management.vue
<tr v-for="(book, index) in books" :key="book.bookId">
          <td>
            <input v-model="book.title" type="text" />
          </td>
          <td>
            <input v-model="book.type" type="text" />
          </td>
          
          <td>
            <select v-model="book.rental">
              <option v-if="book.rental === 'ok'" value="ok">
                OK
              </option>
              <option v-else value="ng">
                NG
              </option>
            </select>
          </td>
          
          <td>
            <input v-model="book.currentPlace" type="text" />
          </td>
          
          <td>
            <button
              v-if="book.rental === 'ok'"
              type="button"
              @click="onRentBookClick()"
            >
              借りる
            </button>
            <p v-else-if="book.rental === 'ng' && book.currentPlace !== '自分'">
              レンタル不可
            </p>
            <button v-else type="button" @click="onReturnBookClick()">
              返す
            </button>
          </td>
          
          <td>
            <input v-model="book.owner" type="text" />
          </td>
          
          <td>
            <button
              class="delete"
              @click="switchDelateAlarm(), getIndex(index)"
            >
              ×
            </button>
          </td>
</tr>
上記の中にあるコチラ↓
book-management.vue
<button class="delete"
        @click="switchDelateAlarm(), getIndex(index)">
 ×
</button>
2. その項目のidを変数に設定

ここから関数getIndex()に引数indexを渡します。

そして関数getIndex()はコチラ。
book-management.vue
    getIndex(index) {
      this.delateId = this.books[index].id
    },
これによりdelateIdが定義されました。

3. さらにその変数をトリガーにして、削除ボタンで項目削除

さて、下記の1番上の×ボタンを押します。

すると、このようなポップアップが出ます。

実は×ボタンを押すことで関数getIndex()以外にもうひとつ関数switchDelateAlarm()が起動するようになっています。

このポップアップはそれによるものです。

次はこのポップアップ上の削除ボタンを押すと実際に項目が削除されるようにしていきます。

下記がポップアップのtemplateです。
book-management.vue
    <div v-show="showDelateAlarm" id="overlay">
      <div id="delateAlarm">
        <p>この本の情報を削除します</p>
        <button @click="switchDelateAlarm">
          戻る
        </button>
        <button @click="switchDelateAlarm(), deleteItem(delateId)">
          削除
        </button>
      </div>
    </div>
関数deleteItem()の引数に先ほど定義した変数delateIdを渡していますね。

では関数deleteItem()の内容はというと……
book-management.vue
    deleteItem(deleteId) {
      db.collection("books").doc(deleteId).delete()
    }
こんな感じです。

まとめ

以上でfirestoreと連動した削除ボタンの完成です。

　 Tweet
Qiitaで続きを読む

20200705のNode.jsに関する記事は6件です。

console.logで配列やオブジェクトが省略されてしまうときはconsole.dirを使おう

Node.js: Starttls でメールの送信

Node.js: Starttls でメールの送

Node.jsのAPIをまとめてみた

はじめに

本題の前に

Nodeモジュール一覧

さいごに

参考

Node jsでCMSを作る part1

はじめに

作りたいもの

要件定義を決める

機能面の要件定義

必須

あればいいかな的なもの

動作環境の要件定義

終わりに

Vue.jsを使ってFirebaseのデータを削除する

概要確認

手順

1. ×ボタンを押すとindexをトリガーに、その項目のidをゲットする

2. その項目のidを変数に設定

3. さらにその変数をトリガーにして、削除ボタンで項目削除

まとめ

日付別

タグ一覧