Node.js関連のことを調べてみた2021年09月19日 │ f@ctor

1. 【結論】
2. ハマった時の状況
3. まとめ

Cypress を用いたE2Eテスト方法メモ

* E2Eテストツールの調査をする際にCypressに少し触れたためメモしておく。

## Cypressとは

* JavaScript製のブラウザテストに特化したE2Eテストフレームワーク。

## Cypress インストール

“`shell
npm install cypress
“`

## Cypress プロジェクト作成

* `cypress`という名称のプロジェクトディレクトリを作成する場合

“`
npx cypress open
“`

## テストコード

* `test.js`

* `{project名}/integration`配下に配置する。
* `cypress.io`でGoogle検索を行い、検索結果の1番上のページにアクセスし、タイトルの値を確認する。

“`javascript
describe(“Test Suite”, function(){
it(“Test 01”, function(){
// Googleページへ
cy.visit(“https://www.google.com

元記事を表示

色々な機能を追加したタイマーを作りたい

#初めに
　Guildという名前でwebサイトを作ろうと四苦八苦しておりますが、そもそもGuildが何を目的に作成しているのか忘れかけていたところで、ギリギリで何を作ってたのが今日この頃です。
　依頼を気軽に受けれる場所をネットで作りたいなと思ってGuildを作成していたのですが、たまには息抜きもいいかなと、とにかく機能を盛りだくさんにしてタイマーを作っていこうと思います。デザインに関しては例の如く。
因みにNode.jsをサーバーサイドで利用しています。だからせっかくなのでNode.jsのプログラムも載せておきましょう。

　最終的には、以下のを作ったよってお話です。

https://guild.click/timer
#バージョン
・Node.js　　　　　　15.11.0
・MongoDB　　　　　4.4.6
#仕様書
　考えつく限りタイマーに付けれる機能を考えていきます。
・無難にアラーム付きタイマー
・タイマーの設定
・タイマーアラームの変更
・周期的なタイマー
　あれ？案外思い浮かばないな、とりあえずこれらを作っていきましょう。思いついたら後から付け足すか、後日の記事の

元記事を表示

JAMStack作成の軌跡Part1(仮)

## はじめに

– 最近業務ではAWS x サーバレスの構築が多い
– APIGW + Lambda + DynamoDBは構築するが、フロントを触ってないから練習したい…
– 過去にReact経験が少しあるが、いきなりNext.jsは厳しい…?
– ~~出来るだけお金かけたくない~~
– JAMStackというものがあるらしいからやってみるか
– Javascript + APIs + Markupの頭文字を組み合わせたもの
– [参考: Jamstackって何なの？何がいいの？](https://qiita.com/ozaki25/items/4075d03278d1fb51cc37)
– ~~S3の静的ホスティングで済むなら低コストじゃん！~~
– ※基本的には自分用の備忘録として残します

### 動作確認環境

– Amazon Linux2
– Node: v14.17.6
– Gatsby: v3.13.1

## Node.jsの環境構築

– Node.jsをダウンロードする
– Pythonの[pyenv](https://github.c

元記事を表示

【Node.js】【Express】req.bodyが取得できない

Progateを参考に`Node.js`、`Express`、`ejs`でアプリを作成していたのだが、
POST処理の`req.body`でFromの値を取得することができない。

“`app.js
app.post(‘/edit/:id’,(req,res) => {
connection.query(
‘UPDATE users SET name = $1 WHERE id = $2’,
[req.body.nname, req.params.id], //ここでキャッチしたい〜
(error,result) => {
res.redirect(‘/top’);
}
);
});
“`

なんでや〜

いろいろ調べた結果、2つの原因が判明したので、メモ( ・∇・)

#原因1：body-parser
Expressでクライアントからデータを取得する場合、`body-parser`をインストールして`req.body`経由でデータを取得する必要があった。
なので以下の処理を実施

####1.body-parser のインス

元記事を表示

CodeceptJSとPuppeteerでE2Eテスト（AutoLogin）

#初めに
[前回の記事](https://qiita.com/abe_n/items/5ae8cc17179dd27683d4)の続きです。
今回はAutoLoginの機能を触ってみました。

公式の通りにやろうとしてうまく動かず、他サイトを参考にコードを書きました。
fetchなどいろいろと理解が怪しいですが、できたところまでまとめていきます。

#AutoLogin
AutoLoginというプラグインがCodeceptJSにはあり、Cookieをメモリまたはファイルに保存することで自動的に再度ログインすることができます。

##コードを書く
インストールは前回記事と同様です。
追加でcodecept.conf.jsへの追記をすることで自動ログインさせることができます。

“`
//codecept.conf.js

plugins: {

//ここから追記
autoLogin: {
enabled: true,
saveToFile: true,
inject: ‘login’,
users: {

元記事を表示

Node.js非同期処理について超簡略サンプル

以下のNodeを実行すると、順番がぐちゃぐちゃになる。

“`junban.js
function output ( txt){
console.log(“関数処理始まり”); //出力
setTimeout(function(){ console.log(‘hoge’) }, 1000)
console.log(txt); //出力
console.log(“関数処理終わり”); //出力
};

async function main(){
　　console.log(‘読み込み前’);
　　await output(‘処理’)
　　console.log(‘読み込み後’);
}
main()
“`

“`bash
$ node junban.js
読み込み前
関数処理始まり
処理
関数処理終わり
読み込み後
hoge
“`

この状態ではawaitは効かない。
`return new Promise`を使うと、結果は返ってくる。

“`js
function output (txt){
return new Promise((resolve,

元記事を表示

Node.js/Express/routing-controllers+TypeScriptでWeb API作成

# はじめに

[Node.js/Express+TypeScriptでWeb API作成](https://qiita.com/honda28/items/9b0410ecbb1951fd6b00)という記事で、シンプルな Web API を作成してみた。そこではリクエストに対して定型文を返すだけであったが、最終的には PostgreSQL との接続をしてリクエストに応じた適切なデータを返す Web API 作成を考えている。しかし、Express の理解が浅いまま領域を広げるとかえって時間がかかるため、まず Express 単体で見通しをよくしていく。
本記事では、[Node.jsでも綺麗なコードでWebAPIを作る（routing-controllers）](https://qiita.com/tonio0720/items/4694d33b20d05c25c2bf)を参考に **routing-controllers** という Express 対応のパッケージを使用することで、コントローラをクラスで設計した。実行環境は以下。

– Node.js: 14.17.6
– npm

元記事を表示

Node.jsで簡単♪スクレイピング

どうも、**プログラミングは料理に似ている**
白金御行＜プラチナ☆みゆき＞です。

ということで今回は料理レシピみたいなテンションでNode.jsのスクレイピング手順を記述していきます。
参考に本稿では[Cookpadさんのtech blog](https://techlife.cookpad.com)の記事をスクレイピングしてJSON形式で書き出すものを作っていきましょう。

また、本稿はN番煎じ記事なので新規性はなく、主に備忘用の記事になります。

## 材料

– 言語：Node.js(v12.19.0)
– HTTPクライアントライブラリ：node-fetch
– HTMLパーサライブラリ：jsdom
– ファイル操作ライブラリ：fs

## 作り方

まず結論からということでCode全文を以下に記載して、後に個々の説明に入ります。

“`js

import fetch from ‘node-fetch’;
import jsdom from ‘jsdom’;
import fs from ‘fs’;

const { JSDOM } = jsdom;

// HTTP

元記事を表示

playwrightでブラウジングの自動化

[前回puppeteerの記事を書いて](https://qiita.com/bellx2/items/4904c8a3aa13c6242d1c)、使っていたら[playwright](https://playwright.dev)を見つけました。コマンドも同じで、こちらの方が複数ブラウザー対応など便利そうだったのでサクッと切り替えました。python用などもあるようです。

https://playwright.dev

## Dockerファイル

“`docker:DockerFile
FROM mcr.microsoft.com/playwright:focal

WORKDIR /app
“`

…ubuntuベースなので少し大きいですが、公式docker対応は楽ですね。日本語も問題ありませんでした。

## サンプル

“`js:yahoo.js
const playwright = require(‘playwright’)

;(async () => {
const browser = await playwright.chromium.launch()

元記事を表示

LINEのチャットボットでタスクマネージャーを作ってみた！

#作成したタスクマネージャーbot
完成したチャットボットです！

#使用した技術
1.Node.js
2.firebase
3.Messaging API
4.express

##事前準備
[firebase](https://console.firebase.google.com/u/0/?pli=1)のプロジェクトを作成する

↓↓ここ大事
プロジェクトのプランをBlazeプラン（従量制）に変更

無料のsparkプランでは外部APIを実行できないってさ、、、
Blazeプランは使った分だけ支払うという形で、無料枠があるので
個人で動かすぐらいなら無料枠で十分なのでほぼお金はかからないと思って大丈夫です！！

#開発環境構築

元記事を表示

GraphQL + Sequelize でテーブル定義やクエリの実装などをちょっとだけ簡略化する方法

## はじめに

業務でGraphQLを使うことになったんですが、GraphQLのモジュール宣言って面倒くさいですよね。
こういうの。

“`javascript:server/modules.js
const typeDefs = gql`
type User {
id: Int!
name: String!
email: String!
recipes: [Recipe!]!
}

type Recipe {
id: Int!
title: String!
ingredients: String!
direction: String!
user: User!
}

type Query {
user(id: Int!): User
allRecipes: [Recipe!]!
recipe(id: Int!): Recipe
}

type Mutation {
createUser(name: String!, email: String!, pa

元記事を表示

ブラウザからLinuxサーバのログを気軽に参照するWebサーバ

UbuntuなどのLinuxサーバにあるログを参照するためにわざわざSSHでログインするのが面倒なので、ブラウザから参照できるようにした。
適当につくったものなので、セキュリティも何もない。自己責任でお願いします。

画面はこんな感じ。一応行番号も付くようにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/dadc9c26-bdd8-42c0-c07f-e63802fe1864.png)

ログの先頭や末尾をサクッと見れたり、前ページ・後ページに移動できたりします。
なんならファイルダウンロードもできます。
一応、APIKeyで守ってますが、適当実装なので、ローカルネットワークでのみ使てください。

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

poruruba/SimpleLogViewer

https://github.com/poruruba/SimpleLogViewer

#ソースコード(サーバ)

そのままソースコード載せておきます。

元記事を表示

英単語を覚えるための語呂作成マシーンを作ってみた

# はじめに

英単語の覚え方は色々ありますが、個人的には語呂合わせで覚えるのが一番忘れにくい気がします。

英単語の語呂合わせの市販本は多数あるのですが、すべての単語をカバーしている訳でもなく、自分がなかなか覚えられない単語の語呂がそうそう見つかる訳でもありません。

ただ、多くの語呂を見てみるといくつかのパターンがあるように思え、それを組み合わせれば語呂候補を機械的に作成して、語呂文を作るヒントとできないかと思い、自作してみました。

# 英単語語呂作成マシーンの使い方

最新版を[英単語語呂作成マシーン](https://makegoro.web.app/)として公開しています。

入力BOXに英単語を入れて、語呂作成ボタンを押してもらえば、下に語呂の候補が出力されると思います。

例えば、「abrupt」の英単語だと下図のように文字候補と語呂候補が出力されます。

![abrupt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414990/13339e2c-53c9-4b5a-0e90-ed4

元記事を表示

Firebaseの開発環境（local）を作ってみるよ

## 経緯
・firebase-toolsのバージョンが上がってCloud StorageのEmulatorが実装されたみたい
・Node.jsバージョン16がCloudFunctionsでサポートされたみたい

## 必要なもの、必要な知識
・Firebaseとは何か勉強しておいて
・Terminal操作ができるようにしておいて（コマンドコピペできる程度で）
・Homebrew インストールしておいて
・Googleアカウントは作っておいて
・GitHubのアカウントは作っておいて
・Node.jsはインストールしておいて（記事内ではVer.16+でやるよ）
・エディタはVisual Studio Code使うよ
・Gitは使うからインストールしといて

## 環境とか
・MacBookPro ’13 (2017) BigSur
・Homebrew 3.2.11
・Visual Studio Code 1.16.0
・Node.js 16.9.1

## 事前に作成しておくと良いこと
・Googleのアカウント作成とfirebaseのプロジェクト作成、firestoreの作成
・Gi

元記事を表示

Node.jsでJsonを操作する

Nodebrewで入れた`Node.js 14.x`です。

できるだけ環境に依存しないような標準のモジュールで頑張ろうと思ってる。

NodeでJson（文字列）から特定の値を取り出す方法
以下はstatusキーの２００を文字列として取り出す方法。

“`jsonobj.js
//API Response sample
let apiresult = ‘{“header”: {“status”: “200”,”error_message”: “”},”response”: {}}’

let json_obj = JSON.parse(apiresult)

console.info(“オブジェクトすべて:”, json_obj)
// パターン１
// 型チェック
console.info(typeof(json_obj.header.status));
// 出力
console.info(json_obj.header.status);

// パターン２
// 型チェック
co

元記事を表示

Node.js/Express+TypeScriptでWeb API作成

# はじめに

Node.js + Express + TypeScript を使用して Web API を作成する。Express を扱うのは始めてのため、[公式サイト](https://expressjs.com/)を参考に進める。実行環境は以下。

– Node.js: 14.17.6
– npm: 6.14.15
– Express: 4.17.1
– TypeScript: 4.4.3

# TypeScript 環境の作成

まず TypeScript 環境を作成する。

“`bash
$ npm init -y
$ npm install -D typescript @types/node ts-node
$ npx tsc –init
“`

# Express のインストール

つづいて Express とその型定義をインストールする。

“`bash
$ npm install express
$ npm install -D @types/express
“`

# Hello World Example

以下コードで簡単な実行を試すことができる。

元記事を表示

【Laravel】npmコマンドでエラーが出る方へ

Laravelにてnpmコマンド実行時、エラーが出た時にハマったためメモ。
（4時間格闘しました…）

【結論】

再度Laravelのプロジェクトを作り直したところ、npmコマンドがLaravelプロジェクト内で使用可能になった。

ハマった時の状況

composer create-projectで新規プロジェクト作成
↓
laravelプロジェクト内でnpmコマンドが使えない
↓
node.jsのインストール
↓
Ｃ：直下ではnpmコマンドが使用可能。Laravelプロジェクト内ではnpmコマンドが使えない。
nodeとnpmのバージョンも同一。
↓
プロジェクトを作り直したところ、npmコマンドがLaravelプロジェクト内で使用可能になった。

まとめ

途中でnode.jsをインストールしたため、Laravelでは使用不可の状態になっていた…？
詳しいところまで説明できずにすみません…。

分かる方、ぜひ教えてくださいませm(__)m

初歩的なことですけど、ハマる方が一人でも減れば…

元記事を表示

ウマ娘で初めてランクAがでたのでLINEボットにスクリーンショットを投稿してみた

タイトルの通りですが、複数の処理を連携させていまして、結局やってることは、
①ウマ娘プリティーダービーで、ウマ娘のプロファイルを画面キャプチャし、それをLINEメッセージとして投稿
②取得した画像から、Google Cloud Vision APIでOCR（文字認識）して、ステータス値を判別
③ステータス値をLINEメッセージのレスポンスとして返す

大事なのは②です。すなわち、以下の2つです。
・LINEメッセージから画像ファイルを取得
・Google Cloud Vision APIで文字認識

ソースコードもろもろは以下に上げておきます。

poruruba/CloudVision_Test

https://github.com/poruruba/CloudVision_Test

#LINEメッセージから画像ファイルを取得

以下の部分です。

“`js:api/controllers/tsundete/index.js
const { streamToBuffer } = require(‘@jorgeferrero/stream-to-buffer’);

元記事を表示

【Vue.js with TypeScript】propsでObjectを渡すときの型の指定方法

## 概要
propsで親componentから子componentにObjectを渡すときの型を、interfaceで指定する方法。

## 方法
`type: Object as () => SampleType,` のようにinterfaceを返すメソッドを指定する。

## 実装例

“`vue

Back to Top

タグ
その他

© Copyright 2024 f@ctor. f@ctor by FIT-Web Create. Powered by WordPress.