Vue/Nuxt→React/Nextの共通点,差異,そして世界でのトレンド

教育関連のAIシステムをドイツで研究しているのですが、データ収集のためにインターフェースを作る必要が出てきました。そのために、React/Nextをやる必要が出てきたため、Vue/Nuxtの知識を再利用することを試みます。

# 日本と欧州でのトレンドが微妙に違う!

今ヨーロッパに留学しているのですが、ドイツではNuxtよりNextの方が圧倒的に優勢だそうです。一方、日本では、Nuxtの方もまだ耐えていると聞きます。

そのことを、Googleトレンドから定量的に見てみましょう：

東京とベルリンでの”Next.js”, “Nuxt.js”の２キーワードの割合比較です。（１年間）

## ドイツでは「Nextしか勝たん？」状態


## 日本でもNextが人気だが、Nuxtも頑張っている

ubuntu 22.04LTSで最新のnodejsぶち込む方法

ubuntu 22.04LTSでは
“`
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash –
sudo apt-get install -y nodejs
“`
をしても12ver止まりなので
12verから16or最新verにアップデートする方法
“`
sudo npm install -g n
“`
最新版のNode.jsのコマンド
“`
sudo n latest
“`
最新のLTS版のNode.jsのインストール
“`
sudo n lts
“`
今のnodeのver確認方法
“`
node -v
“`
今のnpmの確認方法
“`
npm -v
“`
最新のnodeやnpmこれで行けると思います。

AWS EC2でnode.jsのバージョンの下げ方

AWS EC2でnode.jsのバージョンが原因で、上手くいかない…。
そんな時の対処方法を記しておきます。
# 準備
SSHを使用してEC2に接続します。
“`
$ ssh ec2-user@255.255.255.255 -i .ssh/qiita-sample.pem
Last login: Wed Apr 20 20:13:54 2022 from qiita-sample.com

__| __|_ )
_| ( / Amazon Linux 2 AMI
___|\___|___|

https://aws.amazon.com/amazon-linux-2/
19 package(s) needed for security, out of 33 available
Run “sudo yum update” to apply all updates.
“`
nvmはnode.jsのバージョン管理ツールです。
“`
$ nvm –version
$ nvm 0.34.0
“`
# nvmの使い方
現在

node.jsのrequireについてよくわからなかったので調べて試してまとめてみた

# 今回の問題
node.jsでサーバー関係のアプリを開発をしていて先達のgithubコードを見ていて node　でヘッダ部分の定義にある require 文の使い方をよく理解していない自分に気づいた。
出くわした問題とそれについて少し調べ、自分なりの結論を得たので書き留めた。

### モジュールを使うということ
node.jsで別ファイルに定義されている変数や関数を利用する。

### モジュールを使ったコードの例（自分にしっくりくるもの）
mymath.js
“`javascript
module.exports.add = (a,b) => a+b
module.exports.subtract = (a,b) => a-b
“`
### 使う側
index.js
“`javascript
const ddd = require(‘./mymath’)

console.log(ddd.add(1,2))
console.log(ddd.subtract(1,2))

“`
“`
node index.js
“`
とする。
同じパスにおいてあれば、require

［きんとーんきほんのき !!!］今日から始める 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