［きんとーんきほんのき !!!］今日から始める kintone カスタマイズ〈コピペで使えるおまけ付き！〉

# ［巻頭特典］ カスタマイズファイル 基本テンプレート

“`JavaScript:基本テンプレート（.js）
(function () {
“use strict”;

kintone.events.on(“イベントタイプ”, function (event) {
// 処理内容
return event;
});
})();
“`

:::note info
イベント名が PC 版，モバイル版で別々でスマホ版忘れそう。。。全部まとめて書いたらコード長い。。。
そんなときは、
　`const viewRecordLists = [‘app.record.index.show’, ‘mobile.app.record.index.show’]`
のように、PC 版 と モバイル版をセットにして、変数に入れておくと、それなりに纏められて、各イベントごとに使い回すこともできるのでおすすめです。
:::

kintone 本体に影響を与えないための **即時関数**，**Strict モード**で記述するための kintone カスタマイズ基本構文です。

Node.js x HerokuでWebアプリを作った

# はじめに
『[存在しないクイズ](https://sonzaisinai.herokuapp.com/ “存在しないクイズ”)』
というアプリを作りました。

▼URL
https://sonzaisinai.herokuapp.com

この世界に存在しないものを四択の中から選ぶクイズアプリです。
同じルームにいる人と対戦ができます。

▼ソースコード
[GitHub](https://github.com/

【TypeScript】TSyringeを用いて5分でDIコンテナを実装する

## はじめに

[TSyringe](https://www.npmjs.com/package/tsyringe)はMicrosoft社のDIコンテナライブラリです。TypeScriptだと[InversifyJS](https://github.com/inversify/InversifyJS)の方が有名ですが、TSyringeの方が後発であることと、シンプルで使いやすいことから、今回はTSyringeを紹介したいと思います。

実際に動作するサンプルコードは[こちら(GitHub)](https://github.com/toginn/tsyringe-tutorial)になります。

### まずはDIパターンのサンプルで確認してみる

次の簡単なサンプルに、TSyringeを用いてみましょう。

“`typescript
interface Database {}

class DatabaseImpl implements Database {}

/* DIパターンにより、Databaseに依存している */
class Application {
/* 初期化

ngrokでローカルに立ち上げたHTTPサーバをHTTPSで公開する

最近では、HTTPサーバを立ち上げるにも、HTTPSでないとChromeでエラーとなったり、他のWebAPIと連携することができない場面が多くなってきました。また、SSL証明書もオレオレ証明書ではだめで、正規のSSL証明書である必要があったりします。
さらに、HTTPSであったとしても、ポート番号が443である必要がある場面が増えてきました。単に、静的なWebコンテンツであれば、GitHubにコンテンツをアップして、GitHub Pagesの機能を使って公開することはできるのですが、Node.js等を使ったWebAPIはできなかったりします。

そこで、ngrokを使うことで、ローカルに立ち上げたHTTPサーバを、正規のSSL証明書でかつポート番号443で公開することができ、WebAPIサーバとしても振舞えるようにします。

# ngrokアカウントの作成

まだの場合は、ngrokアカウントを作成します。以下のページからSign upします。

https://ngrok.com/

作成済みの場合は、Loginします。

# ngrokのダウンロード

ngrokを動作させるOSに

JavaScript(Node.js)における標準入力と文字列解析の方法メモ

JavaScript(Node.js) で簡単な競プロ的課題をやることになったが、なかなかJavaScriptでは標準入出力を行うことがないため調べた。
個人的に使いやすいと感じた使い方を記しておく。

# 結論

“`js
process.stdin.setEncoding(“utf8”);

let lines = [];
const reader = require(“readline”).createInterface({
input: process.stdin,
});

// 改行イベント
reader.on(“line”, (line) => {
lines.push(line);
});

// 標準入力終了時イベント
reader.on(“close”, () => {

// 分割代入で利用する
const [firstLine, …restLines] = lines;
const [n, m] = firstLine.split(” “).map( v => parseInt(v, 10));
console.log(n, m

私の王子さまはどこにいるの？めめに似てる人を教えて～！！（TeachaBleMachineを使った機械学習モデルを作ってみました）

こんにちは。
今回はコロナ自粛期間中にドハマりしたSnow Manの目黒蓮くんこと【通称めめ】を
身近に発見したい！というただ、それだけの気持ちで画像認証できるものを作りました。

せっかくなので、Snow Manの誰に似ているのかも試してみてください！
※Snow Manを知らない方は[こちらをクリック](https://www.johnnys-net.jp/page?id=profile&artist=43)

## まずは実際にSnow Man判定してみてください！
　注)　URL内のボタンを押した後　結果が出るまでしばらくお待ちください！

https://codepen.io/nagaharahitomi/full/ZEvmPXQ

## TeachableMachineの設定
今回は身近なめめを探したかったので、
身近＝会社の人をターゲットに作りました。
（最近仕事が忙しくて友達に会えてない！！！！）

:::note info
会社で会う人はスーツ姿！！
てことで、スーツ姿のSnow Manの写真をTeachableMachineに設定！！
:::

Cloud Functions にシンプルな Node の関数をデプロイする

# 概要

GCP の Cloud Functions を使おうと思って色々調べていたら、サクッとシンプルなファンクションをデプロイしたいだけなのに意外とシンプルな解に辿り着けませんでした。

なので**ここではシンプルな使い方を書きます。**
同時に微妙なハマりどころの解決方法も記載します。

そして Express をデプロイする方法についても書きます。
これくらいならギリギリシンプルです。多分。

ググると Firebase が云々とかの情報が多く、「シンプルにファンクションをデプロイしたいだけなんだ…Firebase は関係ないんだ…」と思いました。

Firebase 使わずに Cloud Functions を使うケースってそんなにないのかな。

もちろん TypeScript です！
ギリギリシンプル！

# 使うもの

– gcloud コマンド
– @google-cloud/functions-framework

特別なものはこれだけです。
gcloud は手元のマシンで使えるようになっている前提で書きます。

## @google-cloud/funct

Node.js v12 -> v16にyumでアップデートしてみた。(CentOS 7)

# Node.js v18がリリース
node.jsのv18（LTS予定)が、リリースされました。

前回インストールしたv12のサポートが2022-04-30で終了するということで、v18にアップデートしようと思ったのですが、ちょっと旨くいかなかったので、取りあえずv16(LTS)にアップデートしてみたいと思います。

以前、v12をインストールした記事は以下。

https://qiita.com/daichi_pd/items/239a7e3eea74c5be6dc9

## セットアップ用スクリプトを利用する

今回は、nodesourceで準備されているシェルスクリプトを利用してアップデートします。
（アップデートでは無く、新規インストールも以下の方法でインストールできると思います。）

curlがインストールされてない場合はcurlをインストールしておきます。
（すでにインストールされている人は飛ばしてください）

“`sh
yum -y install curl
“`

CURLを利用して、スクリプトをダウンロードして、実行します。
“`sh
curl -sL ht

JavaScritptの非同期処理の流れを図に整理してみた。

JavaScriptを使ったPluginを作成しているときに、想定している戻り値が返って来ずに、悩んでいたところ、Promise/aysnc/awaitについて、理解ができていない部分があったために、図にして、流れを整理してみました。

## JavaScriptのコードの基本的な流れ

上記に関数A、関数B、関数Cと順に並んだコードがあるとします。
基本的に、コンピューターは、コードを処理するときに、関数Aから順番に処理していきます。
最近では、複数の処理をできるコンピューターもあります。片方で、関数A→関数Bを処理し、もう一方で、関数A’→関数Cの処理を実行するなど、マルチで処理できるようにアレンジできます。

しかしながら、JavaScriptは、シングルスレッドと言われる単一の流れとなるので、基本的にマルチスレッドではできま

Nodeのコアモジュール名についている「node:」プレフィックスとは何か

## これはなに

Node.js 18 がリリースされましたね！

https://nodejs.org/ja/blog/announcements/v18-release-announce/

変更の中には、`node:test`というコアモジュールが追加されていたりしますが、そもそも`node:`ってなんなんだと思ったので、調べてみました。

## `node:`って何？

Node.js のコアモジュールを`require` / `import`する際に、`node:`プレフィックスをつけ、Node のコアモジュールであることを明示できるものです。
以下のような感じです。

“`js:CommonJS
// 以下2つは同じ
const fs = require(“fs”);
const fs = require(“node:fs”);
“`

“`js:ESM
// 以下2つは同じ
import fs from “fs”;
import fs from “node:fs”;
“`

Node.js のコアモジュールに対してつけることができ、 **`node:`をつけるつ

Volta のインストールと使い方

数年前から anyenv と nodenv で node のバージョン管理を行なっていたのですが、結局 node しか使いませんでした。
この度、別環境を構築したのを機に、他の node バージョン管理ツールを使うことにしました。

いろいろ比べたのですが、volta が一番オシャレ（名前がオシャレ、公式サイトがオシャレ、使っている人がオシャレ：2022年4月時点での私感）だったので volta を採用しました。

※以前 Node や Node のバージョン管理ツールを使っていた人は Volta をインストールする前に削除しておいてください。

“` shell
# 環境
# MacOS : Monterey 12.3.1
# SHELL : zsh
# Homebrew : 3.4.5
“`

# インストール
## Homebrew から volta をインストールする
Homebrew からでなくともインストールできますが、Homebrew からのインストールした方がオシャレ度 UP ✨ です。
### 1. インストールと確認
“`Shell
brew install

nuxt.jsとlaravel8とmysqlで認証機能付きSPAを作る（nuxt編）

# 前提
フロントをnuxt.js、API側をlaravel8、DBにmysqlを使って認証機能付きSPAの環境構築をしていきます。

私の環境は下記の通りです。

OS: windows10
node.js: 14.17.6
php: 8.0.13
laravel: 8.83.8
nuxt: ^2.15.7
mysql: 8.0.13

※尚、本記事は下記記事の続きとなっております。

https://qiita.com/ryuki1126/items/b52b879912f1466c1ef0

# nuxt.jsの構築
前回作成した`sample-app`ディレクトリ配下に新しくnuxtプロジェクトを作成する

“`shell
$ npx create-nuxt-app sample-web

// 質問は適当に答えました…
✨ Generating Nuxt.js project in sample-web
? Project name: sample-web
? Programming language: JavaScript
? Package manager: Ya

Web開発ど素人がNode.jsで多言語Webニュースアプリ作ってみた

# 目的

筆者自身はトリリンガル（自称）のため、簡単に日本語、英語、中国語などの複数の言語のホットニュースを読めるサービスがほしいです。「Google Newsで良くない？」って言われそうなところですが、Google Newsはじゃっかん使いづらいと感じました。

例えば、
– 言語を切り替えるのに「言語地域→候補から選ぶ→更新」3回クリックする必要がある
– 本当にヘッドライトしか閲覧したくないのに、「おすすめ」や「ピックアップ」などがうるさい
– モバイルのweb版が見づらい・アプリをダウンロードしたくない
– 芸能ニュースにまったく興味がないため、ニュースの表示をカスタマイズしたい

また、やってみないと（何かを残さないと）学んだ技術はすぐ忘れるのはもったいないのも考えて、多言語ニュースWebアプリを自作するという発想に至りました。

## 使った技術

– バックエンド
– NodeJS
– Express
– フ

node.jsでpresigned_urlを使用して画像データをs3に保存、表示する方法

この記事ではpresigned URLを使用してs3に画像を保存、表示する方法を学んでいきます。

### Presigned Urlとは？

presigned URLは、特定のS3オブジェクトへの一時的なアクセスを許可するために,
ユーザーに提供することができるURLです。URLを使用して、ユーザーはオブジェクトをREADするか、オブジェクトをWRITEする（または既存のオブジェクトを更新する）ことができます。

### 環境,事前準備
– “aws-sdk”: “^2.1116.0”
– バックエンド(express（Node.js)), フロント（vue, react, angluar, Svelte　etc)
– awsのアクセスキー　（IAMでs3の操作権限を持つユーザーを作成し、アクセスキーを取得してください）
– s3にbucketを作成

### Presigned Urlを作成するAPI

“`
const AWS = require(“aws-sdk”);
const uuid = require(“uuid/v4”);

const s3 = new

2段階でちょっと面倒！ボットからユーザにダイレクトメッセージを送る方法（Slack API編）

React、node.js、Google Cloud Platform (App Enigine)で[SORTFUL](https://sinceretech.app/ “SORTFUL”)というチームビルディングゲームを作る際に出てきた疑問を、備忘録として記事にまとめています。

はじめに

SORTFULは参加者それぞれにダイレクトメッセージで「数字」を送るところから始まります。

この「メールアドレス情報から、ダイレクトメッセージを送る」というのが、今回の目的です。
Webexとslackを使いたいので、以下のような感じになります。

Webex
![Webex6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388662/31a9aeb

NestJSでアプリを構築する際に気をつけたいこと

# はじめに

NestJSバックエンドアプリはデフォルトのままだと、サーバ情報がバレます。
下記のResponse HeadersのX-Powered-Byをご覧ください。Expressだとバレます。

例えば、Expressの脆弱性が発見された場合、サーバに対して攻撃を受ける可能性があります。
そこで、サーバ情報を隠す方法があります。

—

### main.tsにimport文を１行追記します。

“`js:main.ts
import { NestExpressApplication } from ‘@nestjs/platform-express’; // 追記
“`

### NestFactory.createを修正して、更にコードを１行追記します。

“`js:main.ts
// const app = await

Express の CORS 対応

こちらで作成したサーバーを CORS に対応させます。

必要なライブラリーのインストール

“`bash
sudo npm install -g cors
“`

フォルダー構造

“`text
$ tree
.
├── app.js
└── routes
└── index.js
“`

app.js のみ書き換えます。

“`js:app.js
//————————————————————————-
// app.js
//
// Apr/17/2022
//————————————————————————-
‘use strict’

const express = require(‘express’)
const routes = require(‘./routes’)
const bodyParser = require(“body-parser”)
cons

Node.jsと JavaScriptの違いについて

今さらながらNodeについての知識を整理する

## Node.jsとJavaScriptの違い
・JavaScriptはフロントエンド、Node.jsは主にサーバーサイドで利用される(Nodeはフロントで使われることもある)
・JavaScriptはブラウザ側で実行され、Node.jsはサーバー側で実行される
## Noe.jsとは
大量の同時接続をさばけるネットワークアプリケーションの構築を目的に設計されたJavaScript実行環境。
JavaScriptでWebアプリケーション（Webサーバ）が作れるという特徴からNode.jsは「サーバサイドのJavaScript実行環境である」としばしばいわれている。近年ではBabelやwebpackなどを用いた「ブラウザで実行するJavaScript」を開発するための環境にもNode.jsが使われている。

### なんでNode.jsが使われているのか
1. 新しい仕様のJavaScriptまたはTypeScriptでクライアントサイドのプログラムを書きたい。
2. Webアプリケーションを作りたい。
3. モバイル/デスクトップ用のア

Puppeteerをnode.jsで動かし、Webページにjsの処理を加えたスクリーンショットを自動で連続撮影する

大量のスクリーンショットを撮影する必要があるときに、ヘッドレスブラウザを使うと楽ですが、撮影の際にjsで少し処理を加えたうえで撮影をするような場面で、Puppeteerを使ったら便利だったのでメモ。

# Puppeteer

[https://github.com/puppeteer/puppeteer](https://github.com/puppeteer/puppeteer) によると、以下のように謳われている。

> Puppeteerは、 DevToolsプロトコルを介してChromeまたはChromiumを制御するための高レベルAPIを提供するノードライブラリ。ブラウザにて手動で実行できるほとんどのことは、Puppeteerを使用して実行できます。

ヘッドレスChromeをシェルで扱うような方法より細かい調整が楽そうだったので今回使ってみた。

## スクリーンショットを撮影

まずは適当なページを開いてスクリーンショットを撮影するところまで。

適当なディレクトリにnodeの環境を用意し、index.jsを配置。

“`zsh
% npm init -y
%

DIについて考えてみた(クリーンアーキテクチャ×TypeScript)

久しぶりに記事投稿します！
最近、実務でNode.js+Typescript×クリーンアーキテクチャで開発していて
その中でDI(依存性の注入)を使っている部分があるのですがメリットがあまりわかっていなかったので本記事で纏めてみようと思います。

## クリーンアーキテクチャについて軽く

DIを語る前に軽くクリーンアーキテクチャについて少し説明します。
クリーンアーキテクチャは関心事の分離をするという目的を達成するための1つの手法として提唱されています。
クリーンアーキテクチャでは、4層の円が描かれており、各円はソフトウェアの領域を表しています。そして、最も重要なルールとして、依存性は内側だけに向かっていなければならないとしています。


具体的にいうと、
Domain層(Entities)はUseCase層に依存してはいけない。
UseCa