Next.js13のAppDirectoryについてドキュメントを読んでみる

参照元 – Next.js 13 Beta ドキュメント

https://beta.nextjs.org/docs/getting-started

# そもそもAppDirってなんぞや
v13で実験的な機能として、appディレクトリでページを作成していこうという取り組みです
(“実験的”なので、デフォルトの機能はpagesディレクトリ配下)

# pages directoryを振り返る
App Directoryについては下の方で書いていきますが、
まずはデフォルトのpagesの機能についてのおさらい

`pages`配下にページを作っていくことで、そのままURLの扱いになります

サンプルの配置(pages以外は記載しません)
“`text
project
└── pages
├── _app.tsx
├── about.tsx
├── api
│ └── hello.ts
├── blog
│ └── [id].tsx
└── index.tsx
“`

| path | URL |
| — | — |

Denoでdelay()を使って待機処理

Denoで待機処理するのん、どうするんかなと思って試してみた。
こんな感じ。
すごくシンプル。

“`ts
import { delay } from “https://deno.land/std@0.161.0/async/mod.ts”;

console.log(new Date());
await delay(1000);
console.log(new Date());
“`

[delay | /async/mod.ts | std@0.161.0 | Deno](https://deno.land/std@0.161.0/async/mod.ts?s=delay)
[Deno 標準ライブラリ async | Octo’s blog](https://www.ccbaxy.xyz/blog/2022/01/29/js37/)

ちなみに、Nodeではこんな感じ。
“`ts
import { setTimeout } from ‘node:timers/promises’
await setTimeout(1000);
“`
Node v.15から、setTimeo

[Windows対応]Node.jsのバージョン管理をVoltaに任せ、プロジェクトごとにバージョンを自動で切り替える

新規プロジェクトを始めた際、Node.jsのバージョン管理に**Volta**を採用しました。
実際に導入してみて使い勝手がよかったので、導入の背景も含めて紹介しようと思います。
インストール方法・使い方をだけ知りたい場合はこちらを参照ください。

Volta公式：https://volta.sh/

## 導入の背景

単体のプロジェクトであればバージョン管理の必要性はほぼないのですが、以下の理由でバージョン管理を検討することにしました。

### 複数のプロジェクトをまたぐ

現在、私の参画している開発現場ではNode.jsを使用しているプロジェクトが複数あり、Node.jsのバージョンは各プロジェクトごと管理している状態です。
また、普段は担当しているプロジェクトで開発を行うのですが、**必要に応じて別のプロジェクトに社内出張する**場合もあります(実際にしました)
開発メンバーがプロジェクトを横断した際、**Node.jsのバージョンが違えば再インストールが必要になってしまいます。**

### 開発体験の向上

プロジェクトによっては開発用のDockerファイルが用意されてお

WebRTCを利用した複数人でのビデオ通話サンプル(Mesh)

# はじめに
WebブラウザのWebRTC機能を利用して、Mesh接続で複数人とビデオ通話をするサンプルです。

:::note info
[WebRTC](https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API)についての説明は巷に沢山あるため省きます。
:::

1対1のビデオ通話サンプルはこちら。
「[WebRTCを利用した1対1のビデオ通話サンプル](https://qiita.com/nakka_/items/555f0da0289b75edd420)」

# 環境
– サーバー
CentOS Linux release 7.6.1810 (Core)
（Windowsでも動作可能）
node.js v16.18.0

– クライアント(動作確認環境)
Chrome バージョン: 106.0.5249.119
iOS 16.0.2
Android 12
:::note warn
カメラとマイクが必要です。
:::

# インストール
サーバーはnode.jsを利用します。
node.jsで静的ファイルとWebSocke

WSL+nvm(+node+npm)のインストールでエラったときの解決法

WSLでnvmをインストールしたいけど、
ぜんぜんできなかったのでメモ。

# 結論
“`
sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | sudo bash
“`
sudoれ！

# 発生したエラー
“`
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
~ ナイショ ~
node:net:361
err = this._handle.open(fd);
^

Error: EINVAL: invalid argument, uv_pipe_open
at new Socket (node:net:361:24)
at createWritableStdioStream (node:internal/bootstrap/switches/is_main_thread:78:18)

GridDBを使った各国のGDP分析

[GDP][1]とは、「国内総生産」の略で、ある期間（通常1年間）に国内で生産された（市場で販売された）すべての最終財とサービスの貨幣価値の合計です。一国の経済成長を表す指標として用いられます。

GridDBを利用して、各国の経済状況を分析する予定です。GridDBは、高いスケーラビリティと最適化を実現したインメモリNoSQLデータベースで、特に時系列データベースにおいて、より高いパフォーマンスと効率性を実現するために並列処理を可能にします。今回はGridDBのnode jsクライアントを使用します。GridDBとnode jsを接続し、リアルタイムにデータをインポートまたはエクスポートすることができます。さらに、DanfoJSライブラリを使用してデータフレームを操作し、データ解析を行います。

csv形式のデータセットは[Kaggle][2]から入手したものです。このデータが何を表しているかは、後ほど「データ分析」の項で紹介します。

[ソースコードとデータセットの全容はこちら][3]

## GridDBへのデータセットの書き出し

はじめに、GridDB ノードモジュール gr

【javascript】css を node.js のサーバで読む

# はじめに

Node.js でフロントエンド作りたいなー、と思い、勉強しています。
サーバ側のscript で html ファイルを読んで返したり、css を読んだりできるようになりました。

仕組みをわかっていないのですが、とりあえずメモしておきます。

# 内容

以下のようなファイル構成です。

“`
├── app.js
├── css
│   └── test.css
└── index.html
“`

app.js を node で起動してサーバにします。

“`
$ node.js
“`

ブラウザからlocalhost:8080 を見ると test.css で

が修飾されます。

サーバ側として

“`javascript:app.js
var http = require(‘http’);
var fs = require(‘fs’);

var server = http.createServer();
server.on(‘request’, getCss);
server.listen(8080);
console.log(

開発スピードを維持するためのテストの書き方をブログに書きました

エクサウィザーズのテックブログに記事を書きました。

https://techblog.exawizards.com/entry/2022/08/22/172230

せっかくなのでQiitaからリンクしておきます。

Node.js(TypeScript)とAzure FunctionsでサーバレスなREST APIを作り、おまけにCosmosDBのChange Feedを受信してみる。


# はじめに
今回の記事では、azure functionとComsmosDBを使ってサーバレスなREST APIのアプリケーションを作成する。使用言語はNode.js/TypeScript。さらにデータベースとしてCosmosDBを使っているのでChange FeedのイベントをAzure functionのトリガーを使っておまけに受信してみる。

# ソースコード
https://github.com/ryuichi-f/az-function-rest-api

# リソースの作成

## リソースグループの作成

“`bash
az group create \
–name ${AZ_RESOURCE_GROUP} \
–location ${AZ_RESOURCE_GROUP_LOCATIO

MarkdownをHTMLに変換するunifiedインターフェースについての解説

## はじめに

この記事はマークアップ言語変換インターフェイスunifiedについて解説、共有するためのものです。node.js環境でQiitaのマークダウンファイルをHTMLに変換する過程を題材に、unifiedを学習します。

### 対象とする環境

– node.js v16.18.0
– unified v10.1.2
– remark v14.0.2
– rehype v12.0.1

異なるバージョンをご利用の場合、この記事の内容がそのまま適用できないかもしれません。お手元の環境をご確認ください。

### 対象とする読者

– JavaScriptで開発をしたことがある
– node.jsを利用したことがある
– マークダウンを書いたことがある
– unifiedについては知らない / 名前ぐらいは知っている

## unifiedインターフェイスとは

Qiitaの記事は[マークダウン](https://www.markdown.jp/what-is-markdown/)構文で書かれています。まずはこのマークダウンの構造を分解し、HTMLに変換する仕組みが必要です。

モダンスタックでつくるWebアプリケーション 学習ロードマップ 2022/10

## はじめに

この記事を読んでいるということは、何らかの目的でWebアプリケーション開発を学びたい、あるいはその最中であると思います。しかしWeb開発という分野の内容の幅は広く、さらに常にアップデートが行われるため、多くの場合、学習方法は独学によるものになります。

特に独学において問題になるのは、学習すべきことがわからないということが起きることです。世の中には、Webアプリケーション開発用の学習教材や記事は数多存在しますが、それらの情報の殆どはその内容ごとに散在しており、またWebアプリケーション開発において決定的なシラバスというのも存在しません。この記事は、学習すべきことを明確化するため、モダンなWebアプリケーション開発における基礎的な知識、フレームワーク及び参考となる学習教材等を体系的にまとめたものです。

:::note warn

– この記事においてWebアプリケーションは、ブラウザ上で動作するWebアプリケーションのみを対象としています。モバイル用のネイティブアプリケーションに関する情報は含みません。
– この記事は特に初学者を対象としているため、Webに関する初歩

正規表現メモ

よく使う正規表現のメモ

PHP

“`php
$h = ‘Google‘;

if(preg_match(‘!([\\s\\S]*?)!’, $h, $m)) {
print_r($m); // ==> Array ( [0] => Google [1] => https://google.com [2] => Google )
}

“`

Nodejs

“`Javascript
let h = ‘Google‘;
let result = /([\s\S]*?)<\/a>/.exec(h);
if(result){
console.log(result);
/*
[
‘Progate Web開発コース終了

Webアプリ開発完了

Nodejsを用いてデータベース型のWebアプリを作成した。

・スマホから見やすい画面を作る
・ユーザごとに別の買い物メモを作れるようにする

のような機能を追加していきたいなと思った。

とりあえず基礎的なWebアプリを制作した。自分の現状は、レシピを見て料理ができる人に過ぎないのでもっと積極的に知的好奇心をこのまま探求し続けて頑張っていく。どんどん作りたいものが増えていく一方で学ばなければならないことが追い付いていない状況なので物事を順序だてて考えていきたい。(下書きに入れっぱなしで投稿が遅れてしまった)

Next>>My Portfolio webサイトの作成

トライデントコンピューター専門学校ウェブデザイン学科の生徒さんたちのPortfolioをざっと見て、このようなWebサイトを1か月未満で作成したい。以下にリンク。

[Webトライデントコンピュータ専門学校](https://tridentwebdesign.blog.fc2.com/e/protfolio2022?sp)

WebRTCを利用した1対1のビデオ通話サンプル

# はじめに
WebブラウザのWebRTC機能を利用して、1対1でビデオ通話をするサンプルです。

:::note info
[WebRTC](https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API)についての説明は巷に沢山あるため省きます。
:::

複数人(Mesh)のビデオ通話サンプルはこちら。
「[WebRTCを利用した複数人でのビデオ通話サンプル](https://qiita.com/nakka_/items/2d1fd3a941f7c0c1108f)」

# 環境
– サーバー
CentOS Linux release 7.6.1810 (Core)
（Windowsでも動作可能）
node.js v16.18.0

– クライアント(動作確認環境)
Chrome バージョン: 106.0.5249.119
iOS 16.0.2
Android 12
:::note warn
カメラとマイクが必要です。
:::

# インストール
サーバーはnode.jsを利用します。
node.jsで静的ファイルとWebSocke

Google Cloud ShellでNode.js最新版の19をインストールする

https://shell.cloud.google.com/

Google Cloud Shellでは`nvm`がプリインストールされている。nはインストールされてない

“`bash
nvm install node
#nvm use node
“`

“`bash
$ node -v
v19.0.0
“`

GitHub ActionsでNode.js 12のサポートが終了します

## 先に結論だけ

2022年9月22日から、GitHub ActionsでNode.js v12の非推奨化プロセスが始まりました。Node.js v12に依存する`actions/checkout@v2`, `actions/setup-node@v2`をv3に移行しましょう。

## はじめに

この記事は、GitHub ActionsでのNode.js v12サポート終了と、その対処法を共有するためのものです。

### 対象とする読者

– すでにGitHub Actionsを使っている

## サポート終了の告知

いつも通りGitHubで作業をしていると、見慣れない警告がActionsタブに表示されていました。


> build (14.x)
> Node.js 12 actions are deprecated. For more information see: https://github.blog/chan

DartでExpressを使う(型定義なし)

# 概要

[DartでNode.js用のJavaScriptトランスパイルができた](https://qiita.com/riafeed/items/e8f36bb68e7f8ed68eaf)ので、Expressを使ったサーバーを**あえて**型定義なしで作成してみる。

なぜならDart用の型定義なんて全く用意されていないし、わざわざ作るのは面倒なので、型定義しないで作ってみてどうしても複雑で必要になってから型定義を作るか考える方針でやるのがいいんじゃないかと。

# コード

とりあえず型定義なしで最低限サーバーとして動くレベルは作れた。

“`main.dart
import ‘dart:js’;
import ‘package:js/js.dart’;
import ‘package:js/js_util.dart’;
import ‘package:node_interop/node.dart’;

void main() {
var express = require(‘express’);
var app = express();
const port =

DartからNode.js用のJavaScriptを作成する

# 概要

Dartにはdartdevcやdart2jsといったJavaScriptへのトランスパイラが含まれていますが、どちらも出力されたJavaScriptそのままではNode.jsで実行しようとしてもエラーが出て使えません。
しかしながら、[Dart Sass](https://sass-lang.com/dart-sass)はDartコードからJavaScriptのトランスパイルによりNode.js向けのsassコンパイラの作成に成功しているようです。
この記事はDart SassがどのようにしてNode.js向けのJavaScriptトランスパイルを実現したのか自分なりに探った結果を残しておこうというものです。

https://github.com/sass/dart-sass

# 使用パッケージ

### Node.js型定義 node_interop

Node.jsの型定義ファイルです。全部はカバーしていないようです。どれくらいカバーされているかは[GitHub](https://github.com/pulyaevskiy/node-interop/tree/ma

【NodeJS(TypeScript)】標準入力から読み取る

CLIツールを作るときにいつも使っている関数を紹介します。
NodeJSでは、標準の`readline`モジュールを使うことで標準入力から入力を受け取ることができます。

## ソース

“`ts
import * as readline from “readline”;

export const readFromCli = async (message: string, accept?: (input: string) => boolean): Promise => {
while (true) {
const ans = await readFromCli2(message);
if (!accept || accept(ans)) return ans;
}
};

const readFromCli2 = async (message: string): Promise => {
const readlineInterface = readline.createInterface({ input: process.

再帰的にフォルダパスを取得する(node)

## lib xlsx install

[xlsx(SheetJS)()](https://www.npmjs.com/package/xlsx)

“`bash
npm install xlsx
“`

## source

“`js
let XLSX = require(‘xlsx’)
let workbook = XLSX.readFile(‘./xls/ex_-01.xlsx’)
let input_sheet = workbook.Sheets[‘input’]
let input_json = XLSX.utils.sheet_to_json(input_sheet)
// console.log( input_json )
let ab_path = [];

function getPath(json, folder_id) {
var tmp1 = json.find((v) => v.FOLDER_ID == folder_id);
if (!tmp1[‘PARENT_FOLDER_ID’]) {
console.log(`###### PA