モダンスタックでつくる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)についての説明は巷に沢山あるため省きます。
:::

# 環境
– サーバー
CentOS Linux release 7.6.1810 (Core)
node.js v16.18.0

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

# インストール
サーバーはnode.jsを利用します。
node.jsで静的ファイルとWebSocketを処理します。WebSocketではクライアント同士でメッセージをやり取り(WebRTCのシグナリング)をします。
Chromeでカメラとマイクを使うためにはHTTPSで通信をする必要があります。SSL証明書は[Let’s Encrypt](https://lets

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

【javascript】とにかくはじめたい

# はじめに: Javascript がとにかく分からない

何度も挫折している、役立たずで仕事ができなかったのが、このjava script を用いたfrontend 開発です。今回、少し、心を落ち着けてメモしておきたいと思います。

とりあえず、node.js の導入をメモしておきます。

WSL2で作業しています。下記にある通りの内容をなぞっています。

https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl

# 内容

## インストール

WSL2 ubuntu20.04 で、下記を行います。パッケージ管理ソフトでnode.js を導入することが推奨
されているようです。ここではnvm が使われていましたが、他にもあるそうです。まぁ面倒くさい。

– nvm をインストール
– nvm を利用してNode.js と Node Package Manager (npm) をインストールする

“`
$ sudo apt-get install curl
$ curl

Typescript備忘録~Google mapへheatmapを描写~

## Typescriptとは
TypeScriptは、JavaScriptの拡張版言語(2014年~@[Microsoft](https://learn.microsoft.com/ja-jp/training/modules/typescript-get-started/2-typescript-overview))。Javascriptから、静的型付けなどが改善されている。TypeScriptは、JavaScriptとシームレスな関係にあり、TypeScriptで書かれたコードをコンパイルすることで、JavaScriptのコードに変換される。コンパイル時に型チェックなどを行い、開発段階でエラー判定を行える。

## Node.js npmとは

Node.jsとはJavaScriptを、サーバーサイドで動作させるプラットフォーム。Webブラウザ上で動作するJavaScriptを、Node.jsを使いサーバー上で動作させることで大量アクセスによる不具合の軽減などが行える。

インストールは以下のホームページから、インストーラーをダウンロードして、実行する。

https://n

【2022年10月版】 macOS で node をインストールする

# はじめに

macOS で node をインストールするメモです。ここでは nvm と nodebrew を使います。

# brew のインストール

まずは　brew をインストールします

“`terminal
> /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
“`

# nvm 版

## nvm のインストール

“`terminal
> brew install nvm
> echo ‘export NVM_DIR=”$HOME/.nvm”‘ >> ~/.zshrc
> echo ‘[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm’ >> ~/.zshrc
> echo ‘[ -s “$NVM_DIR/bash_completion” ] && \. “$NVM_DIR/bash_completion” # This loads nv

Node.js(axios)からQiita APIを利用して指定したユーザーの記事を取得するメモ

たまに書くけどまとめてなかったので自分用メモとして残しておきます。

axiosを使ってQiita APIをアクセストークン付きで利用します。

## アクセストークンの取得

https://qiita.com/settings/tokens/new

> 

スコープのチェックは`read_qiita`だけでOK

> ![スクリーンショット 2022-10-22 17.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/38fbb336-831f-142c-23ed-e19466ed23b9.png “スクリーンショット 2

【Puppeteer】スクリーンショットを撮る／ページのソースを取得する方法

Puppeteerを使用する機会がありました。

https://github.com/puppeteer/puppeteer

デバッグの際、以下の２つのコマンドがすごく便利だったのでメモしておきます。

スクリーンショットを撮る
“`
await page.screenshot({ path: ‘screenshot.png’ });
“`

ページのソースを取得する
“`
const bodyHandle = await page.$(‘body’);
const html = await page.evaluate((body) => body.innerHTML, bodyHandle);
console.log(html);
“`

MacにNode.jsをインストール

# 環境
“`
% sw_vers
ProductName: macOS
ProductVersion: 12.6
BuildVersion: 21G115
%
% brew -v
Homebrew 3.6.6
Homebrew/homebrew-core (git revision c6c9e681ea6; last commit 2022-10-19)
“`

# インストール
## 1. nodebrew をインストール
“`
% brew install nodebrew
Running `brew update –auto-update`…
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).

You have 1 outdated formula installed.
You can upgrade it with brew upgrade
or list it with brew outdated.

==> Downloading https://ghcr.io/v2/homebrew/cor

2022年度のTypeScript製ES Modulesレシピ

## はじめに

この記事は、2022年におけるTypeScript製ES Modulesの作成方法を解説、共有するためのものです。

node.jsにおけるCommonJSの歴史は長く、それに関する記事が大量にあります。どの設定がCommonJSに関わり、どの設定がES Modulesに関わるのかを読み解くには労力がかかります。この記事ではPure ESM作成の最小限構成を通して、ES Modulesの設定を整理します。

### 想定する読者

– JavaScript、TypeScriptの開発経験者
– node.jsおよびnpmの基礎的な知識がある
– CommonJSのサポートは考えず、新規にPure ESMのパッケージを開発したい

### 想定する環境

– node.js v16.18.0 ~ v18.11.0
– TypeScript v4.8

::: note warn
ES Modulesに関わる環境は頻繁に更新されます。この記事は2022/10/15時点での環境設定をまとめたものです。
:::

node.jsのメジャーバージョンが更新された場合、この記事の

gRPCのサーバーが空配列を返してくれない

サーバー側から送信されているはずのオブジェクトのキーが排除されていたので原因を調べた。
そもそも LEFT JOIN を使っていたということもあり、レコードがない場合でも下記のようにオブジェクトを返していたので、空の配列を返すことにした。
## SQL
CASE WHEN THEN を使って値がない場合は空の配列を返すという条件を追加。
“`sql:sql
SELECT
g.id, g.name, g.orignal_extra_fields, CASE WHEN g.key is NULL THEN JSON_ARRAY() ELSE JSON_ARRAYAGG((JSON_OBJECT(‘key’, g.key, ‘title’, g.title, ‘gameId’, g.gameId, ‘adminId’, g.adminId,

gRPCで3テーブル結合したデータを取得する

gRPCで少し複雑なJSONを取得する方法に時間がかかったのでメモ。

## 環境
* Window10
* Go
* Node.js
* MYSQL8.0

## JSON
最終的に下記のようなJSONが欲しい。

“`json:game.json
{
“id”: 1,
“name”: “BLACK JACK”,
“tables”: [
{
“key”: “cf955e95-360b-43dd-bc0f-2d4569604a13”,
“title”: “Hello world”,
“gameId”: 1,
“adminId”: 3,
“limit”: 5,
“extraFields”: {
“turn”: “”
},
“players”: [
{
“i

Error: Failed to lookup view “index” in views directory “/Users/***/views”

Error: Failed to lookup view “index” in views directory “/Users/***/views”

`Node.js` + `Express` でテンプレートエンジンを`ejs`で設定するとエラーとなった

## フォルダ構成
エラー時のappフォルダ以下の構成
“`
├── package.json
├── src
│ ├── index.ts
│ ├── routes
│ │ └── index.js
│ └── views
│ └── index.ejs
├── tsconfig.json
├── yarn-error.log
└── yarn.lock
“`

## 解決した方法
`app.set(‘views’, __dirname + ‘/views’)`を追加

“`javascript:index.ts
import express from ‘express’;

const app: express.Express = express();
app.set(‘view engi