- 0.0.1. WebRTCを利用した複数人でのビデオ通話サンプル(Mesh)
- 0.0.2. WSL+nvm(+node+npm)のインストールでエラったときの解決法
- 0.0.3. GridDBを使った各国のGDP分析
- 0.0.4. 【javascript】css を node.js のサーバで読む
- 0.0.5. 開発スピードを維持するためのテストの書き方をブログに書きました
- 0.0.6. Node.js(TypeScript)とAzure FunctionsでサーバレスなREST APIを作り、おまけにCosmosDBのChange Feedを受信してみる。
- 0.0.7. MarkdownをHTMLに変換するunifiedインターフェースについての解説
- 0.0.8. モダンスタックでつくるWebアプリケーション 学習ロードマップ 2022/10
- 0.0.9. 正規表現メモ
- 0.0.10. Progate Web開発コース終了
- 1. Webアプリ開発完了
- 1.1. Next>>My Portfolio webサイトの作成
- 1.1.1. WebRTCを利用した1対1のビデオ通話サンプル
- 1.1.2. Google Cloud ShellでNode.js最新版の19をインストールする
- 1.1.3. GitHub ActionsでNode.js 12のサポートが終了します
- 1.1.4. DartでExpressを使う(型定義なし)
- 1.1.5. DartからNode.js用のJavaScriptを作成する
- 1.1.6. 【NodeJS(TypeScript)】標準入力から読み取る
- 1.1.7. 再帰的にフォルダパスを取得する(node)
- 1.1.8. 【javascript】とにかくはじめたい
- 1.1.9. Typescript備忘録~Google mapへheatmapを描写~
- 1.1.10. 【2022年10月版】 macOS で node をインストールする
- 1.1. Next>>My Portfolio webサイトの作成
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で静的ファ
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を受信してみる。
![diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822052/d89737b6-b407-5202-528f-2208a8fd1913.png)
# はじめに
今回の記事では、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タブに表示されていました。
![](https://www.evernote.com/l/AAlE00XMoR5H3paA6xy77yXo4I2L8Tuv8scB/image.png)
> 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を使いサーバー上で動作させることで大量アクセスによる不具合の軽減などが行える。
インストールは以下のホームページから、インストーラーをダウンロードして、インストールする。
htt
【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