- 1. EJS
- 2. node.js実践編(Markdown導入編)
- 3. Nest.jsでGraphQL + Passportを使って認証処理を作る。
- 4. 「Denoにはnpmがない」の誤解
- 5. CodeceptJSとPuppeteerでE2Eテスト(データ駆動、並列実行)
- 6. Node.js 使用流れ
- 7. yarnの処理でEACCESエラーが出たときの対処法
- 8. 【TypeScript】jestでioredis-mockを正しくインポートする
- 9. node.js実践編(メッセージボード編)
- 10. GMOあおぞらネット銀行のsunabarAPI実験場を使ってLINEのチャットボットを作ってみた
- 11. TypeScript NodeJS websocket client
- 12. TURNサーバーの動作をパケットをモニタリングして確認
- 13. プロジェクトの Yarn (v1.x) のバージョンを固定する(小ネタ)
- 14. Firebaseのホスティング-デプロイしたい。
- 15. Node-RED 2.0の新機能: Flow Linter
- 16. node.js超入門ノート11(Sequelizeでのバリデーション編)
- 17. node.js超入門ノート10(SequelizeでのCRUD編)
- 18. Node.js: docxをhtmlにするMammoth
- 19. リアルタイムなWebアプリを簡単に作れるOSSを作ったので、立ち上げからリリースまでを時系列に書いていく
- 20. Reactをexpressにホストする
EJS
Node.jsの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います!!##EJSとは
HTMLとJavaScriptのコード両方を記述できるNode.jsのパッケージ**インストール**
npmからインストール“npm install ejs“**JavaScript利用**
<% %>または<%= %>でかこう
<% %>:ブラウザに何も表示されない(変数の定義などに使用)
<%= %>:ブラウザに表示される“`ejs
<%const items = [ {id:1,name:'じゃがいも'}, {id:2,name:'にんじん'}, {id:3,name:'玉ねぎ'}, ];%><% items.forEach((item) => {%>
- <% = item.id %>
<% = item.name %>node.js実践編(Markdown導入編)
# 準備
以下のコマンドで必要なパッケージをインストールします。“`
npm install markdown-it
“`
1から作る場合は以下のパッケージをインストールします。“`
npm install express-session
npm install express-validator
npm install sqlite3
npm install knex
npm install bookshelf
npm install markdown-it
“`# モデル作成
以下のコマンドでモデルを作成します。“`
npx sequelize-cli model:generate –name Markdata –attributes userId:integer,title:string,content:text
“`
モデルファイルを修正、追記します。“`javascript:models/markdata.js
‘use strict’;
module.exports = (sequelize, DataTypes) => {
conNest.jsでGraphQL + Passportを使って認証処理を作る。
Nest.jsで認証のライブラリであるPassportを使用する方法は[公式ドキュメント](https://docs.nestjs.com/security/authentication#implementing-passport-strategies)に載っており、GraphQLでの実装も参考程度に乗っています。
しかし、GraphQLでの実装はあくまでも参考程度なので、これだけでは動作せることができません。
今回は実際にGraphQLでusernameとpasswordでの認証ができるところまで実装してみます。# 1. ベースプロジェクトの作成
下記コマンドでNest.jsのプロジェクトを作成します。“`terminal
$ npm i -g @nestjs/cli
$ nest new passport-sample
$ cd passport-sample
“`プロジェクト作成後、[Authentication requirements](https://docs.nestjs.com/security/authentication#authentication
「Denoにはnpmがない」の誤解
Node.jsとDenoを比較する際の特徴として、「npmがない」というのがよく言及されています。
これ自体は正しいのですが、まるでパッケージ管理が貧弱かのように聞こえてしまい、誤解を生んでいるので、改めて整理していきたいと思います。# Denoのパッケージ管理についての誤解
### 誤解①:npmのパッケージが使えない
DenoはランタイムとしてNode.jsとの互換性を切ったものの、Node.js向けのコードをブラウザ向けのコードに変換するツールは沢山あります。Denoはブラウザ向けのコードがそのまま動くので、npmパッケージをDenoで利用することが可能です。
現時点では以下のレジストリを経由して**Denoでnpmパッケージを使用できる**ことが知られています。
– https://esm.sh/
– https://unpkg.com/
– https://www.skypack.dev/
– https://jspm.org/ただし注意点として、Node.jsの標準ライブラリは[Denoの標準ライブラリでポリフィルされている](https://deno.
CodeceptJSとPuppeteerでE2Eテスト(データ駆動、並列実行)
#初めに
CodeceptJSとPuppeteerを使ってE2Eテストを書いてみました。
コードの書き方も独特ですが便利な機能が多いと思います。途中詰まってしまった部分もあり、それらを含めて備忘録的にまとめていきます。
内容に間違いがあればご指摘ください。#目次
– CodeceptJSとは
– 準備
– テストコードを書く
– コード詳細
– I.amOnPage
– I.fillField
– I.pressKey
– I.wait
– I.grabTextFrom
– I.see
– 躓きポイント
– スクリーンショットで記録
– データ駆動してみる
– 並列実行してみる
– テストレポートを見る
– 終わり
– 参考##CodeceptJSとは
まずCodeceptJSとはなんなのか。
最後に記載しました参考サイトにわかりやすく書いてありました。ざっくりいうとCodeceptJSはNode製のE2Eテストフレームワークで、
いろいろなブラウザ操作ライブNode.js 使用流れ
Node.jsの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います!!###Node.js 手順
1 npmインストール(パッケージ管理システム)
2 パッケージインストール“npm install パッケージ名“
3 パッケージ読み込み“const パッケージ名 = require(“パッケージ名”);“
&
使用準備“const app = パッケージ名();“
4 サーバー起動“app.listen(localhost);“
5 ファイル実行“ターミナルで『node ファイル名』“**ルーティング作成(URLに対応する処理)**
“`node.js
app.get(‘/URL’,(req,res) => {
処理内容
});
“`**見た目を表示する処理**
ルーティング処理の中で“res
yarnの処理でEACCESエラーが出たときの対処法
## 参考
https://qiita.com/Gaddict/items/8c76d92bd0adec2bfb6a
## エラー内容
EACCESのpermission deniedエラーが出ました。
“`
FATAL EACCES: permission denied, mkdir ‘/home/xx/Documents/xxx-toC/frontend/node_modules/.cache/nuxt’╭──────────────────────────────────────────────────────────────────────────────╮│ ││ ✖ Nuxt Fatal Error ││
【TypeScript】jestでioredis-mockを正しくインポートする
# はじめに
[`ioredis`](https://github.com/luin/ioredis)はNode.jsにおける主要なRedisクライアントパッケージの一つです。
単体テスト等で、Redisサーバーに実際にアクセスすることなく実行するために`ioredis`をモック化したい場合には、[`ioredis-mock`](https://github.com/stipsan/ioredis-mock)を使うことができます。TypeScriptでは単体テストフレームワークとして[`jest`](https://jestjs.io/ja/docs/getting-started)を使用することが多いと思いますが、`jest`で`ioredis-mock`を使用する際には、そのインポート方法を誤ると実行時にエラーが発生してしまします。
私はこれに引っかかってしまったので、本記事では、TypeScript+`jest`を使用している環境において、`ioredis`の型情報を利用できる形で`ioredis-mock`をインポートする際の、正しい方法と誤った方法、そのエラー内容に
node.js実践編(メッセージボード編)
※node.js超入門ノートの続きになります。
https://qiita.com/Glider2355/items/cf368ba789f4f5200e22
# モデルの実装
以下のコマンドを実行します。
“`
npx sequelize-cli model:generate –name Board –attributes userId:integer, message:string
“`
## アソシエーションの設定
作成したファイルを修正します。“`javascript:models/board.js
// 従モデル
‘use strict’;
module.exports = (sequelize, DataTypes) => {
const Board = sequelize.define(‘Board’, {
userId: {
type: DataTypes.INTEGER,
validate: {
notEmpty: {
msg: “利用者は必須です。”
}GMOあおぞらネット銀行のsunabarAPI実験場を使ってLINEのチャットボットを作ってみた
##作ったもの
GMOあおぞらネット銀行のAPIを利用して、Node.jsで銀行チャットボットを作ってみました。
残高照会、口座履歴紹介、振込依頼ができます。
(リアルデータではないです。GMOあおぞらネット銀行のサンドボックスsunabarAPI実験場での架空のデータです)[![Image from Gyazo](https://i.gyazo.com/93b4fd97adce86ff38e3beebac932950.gif)](https://gyazo.com/93b4fd97adce86ff38e3beebac932950)
以前こちらのQiita記事[『三菱UFJ銀行のサンプルAPIを試してみた』](https://qiita.com/tatsuya1970/items/edf45780415169aa145a)で書いた三菱UFJ銀行のサンプルAPIは、固定された数字しか取り出せないですが、GMOあおぞらネット銀行は、sunabarというサンドボックス環境を用意しており、仮想的に入金・振込など試せます。
なお、sunabarを利用するためにはGMOあおぞらネット
TypeScript NodeJS websocket client
# install
“`console
npm i websocket @types/websocket
“`# usage
## 共通化
“`typescript
const websocket =(url: string, onmessage: (t: T) => void, onerror?: (e: any) => void, onclose?: () => void) => {
const webClient = require(“websocket”).client
const client: client = new webClient()
client.on(‘connect’, (con: connection) => {
console.log(`connected ${con.connected}`)
con.on(‘error’, (e: any) => console.error(e))
con.on(‘close’, () => console.log(“websockTURNサーバーの動作をパケットをモニタリングして確認
# 試したこと
![turn_overvirew3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1083912/33b0573b-807e-7a97-a39a-216f7f2174e1.png)
– AWSの異なるリージョンに `webRTC` のクライアントを設置
– tcpdumpでパケットを確認して、
– TURNサーバーが、パケットをリレーしていることを確認# 環境
## オファー側
– AWS Region: Singapore
– Linux Ubuntu 20.04
– node-webrtc
– データチャンネルで通信するサンプルを作成 *1## アンサー側
– AWS Region: Ohio
– Linux Ubuntu 20.04
– node-webrtc
– データチャンネルで通信するサンプルを作成 *1## TURNサーバー
– AWS Region: Tokyo
– Linux Ubuntu 20.04
– Coturn-4.5.2
–プロジェクトの Yarn (v1.x) のバージョンを固定する(小ネタ)
## 結論
“`sh:zsh
% yarn policies set-version $(yarn -v)
“`## 動機
[Yarn 1.x](https://github.com/yarnpkg/yarn) は速くて便利ですが、バージョンや環境の違いにより、`yarn install` が実行されると `yarn.lock` を書き換えてしまうことがあります。
`git pull` でコンフリクトが起きたりして地味に嫌です。## 対策
### その1: `engines` の指定と強制
`.npmrc` へ次のように指定すると、**[`engines`](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#engines)** の設定を強制することができます。
“`sh:.npmrc
engine-strict=true
“`また、 **[`engines.npm`](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#e
Firebaseのホスティング-デプロイしたい。
#はじめに
制作したサイトをfirebaseで公開しようと利用したので、その手順や注意を忘れないよう自分なりにまとめた記事です。##準備
・ Googleアカウント
・ デプロイするサイト
・ firebaseのプロジェクト作成(公開するサイト1つにつき1つ作る。)
・ node.jsをインストール(推奨版)ターミナルでnode.jsがインストールされているか確かめる。
“`
$ node -v
“`続いてnpmも一緒にインストールされているか確認してみる。
“`
$ npm -v
“`##firebase-toolsのセットアップ
firebaseのコマンドラインツールのインストール
“`
$ sudo npm install -g firebase-tools
“`インストールされているか確認する。
“`
$ firebase -V
“`インストールが終わったら、firebaseにログイン
“`
$ firebase login
? Allow Firebase to collect anonymous CLI usagNode-RED 2.0の新機能: Flow Linter
## はじめに: Flow Linterとは
Node-REDは、ブラウザ画面上でノードをつなげていくことで簡単にフローが開発できます。しかし、グラフィカルなプログラミングは記述の自由度が高い反面、パッと見てわからないバグが潜んでいたり、複数の開発者で共同作業をする際のコーディング規約を守らせることがむずかしいという問題があります。
他のプログラミング言語では、Cに対するlint、Javascriptに対するESLint、Javaに対するCheckstyleなど、記述したコードを静的に解析してバグの発見やコーディング規約の遵守状況をチェックするツールがあります。これらのツールと同様に、Node-REDのフローに対して静的解析を行うツールが[Flow Linter](https://github.com/node-red/nrlint)です。私も微力ながら開発に携わっています。
Flow Linterは、Node-RED 2.0から利用可能となりました。ただし、Node-RED本体には同梱されず、Node-RED 1.3から導入された[プラグイン機能](https://qiita.
node.js超入門ノート11(Sequelizeでのバリデーション編)
# バリデーション
## モデルのバリデーション
以下のように修正します。“`javascript:models/user.js
‘use strict’;
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define(‘User’, {
name: {
type:DataTypes.STRING,
validate: {
notEmpty: true
}
},
pass: {
type: DataTypes.STRING,
validate: {
notEmpty: true
}
},
mail: {
type: DataTypes.STRING,
validate: {
isEmail: true
}
},
age: {
type: DataTypes.STRINGnode.js超入門ノート10(SequelizeでのCRUD編)
# レコードの新規作成
以下のファイルを追加します。“`html:views/users/add.ejs
<%= title %>
Node.js: docxをhtmlにするMammoth
## Mammoth .docx to HTML converter
https://github.com/mwilliamson/mammoth.js
## 導入
`npm –save-dev install mammoth`## お試し
`npx mammoth sample.docx output2.html`### Before
*[テンプレート](https://template.k-solution.info/2017/05/18084425.html)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/f217e190-7973-bb3e-09c9-a6d61fe5471c.png)### After
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/fe1f337a-90f3-17f4-6e76-42bd8ae13d04.png)##
リアルタイムなWebアプリを簡単に作れるOSSを作ったので、立ち上げからリリースまでを時系列に書いていく
# まえがき
ちょうど3年前に「[初心者3人でwebサービス(webアプリ)を作ったので、立ち上げからリリースまでを時系列に書いていく](https://qiita.com/yuno_miyako/items/d6595719ae7065927499)」なる記事を書いたことがあり、いまだにいいねをつけてもらえることがあります。そこで、**3年の時を経て**似たような記事を書いてみようと思いました。
Webアプリの開発経験はあるものの、**npmパッケージを公開したことはありません**でした。手探りからどのようにリリースまで、残したドキュメントをもとに振り返っていきたいと思います。
これを読んで「OSSを作ってみたいけどどう進めていけばいいか分からない」という人の一助になれば嬉しいです。誰か0から10までの流れを書いててくれないかな〜と思っていたので、きっと誰かには届く気がします。# 作ったOSSについて
[Realtimely](https://kitaharamugiro.github.io/Realtimely/jp/)という、Reactアプリに楽しい**リアルタイム要
Reactをexpressにホストする
やり方を聞かれて調べたのでメモ。
react-router-domでルーティングされているページをbuildしてexpressにホストしたい。## Reactでの作業
とりあえず何でもいいのですが、react-router-domで最低限のルーティングを設定します。
### 簡易仕様
* / → Home.js
* /about → About.js
* それ以外だと、Page not found.を表示。### プロジェクトの作成
とりあえずcreate-react-appでプロジェクトを作成。
“`bash
npx create-react-app react-test
cd react-test
“`最低限のルーティングを設定したいのでreact-router-domのインストール。
“`bash
npm install react-router-dom
“`Home.jsとAbout.jsを生成。
“`bash
touch src/Home.s src/About.js
“`### Home.js
Home.jsの実装。Hom
関連する記事
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた