JavaScript関連のことを調べてみた2022年05月22日

今週の学び　第6回

# 今週の学び

JavaScriptなど

– sort()で()内に何も入れない時どうなるか
– 何もなければ a – b になる

– reduceメソッド
– 配列のそれぞれの要素に対して順番通りに、ユーザーが提供した「縮小」コールバック関数を呼び出す
その際、直前の要素における計算結果の返値を渡す
– alert()
– Webサイト側からメッセージが表示される機能

– Math.floor
– 対象の値の小数点以下を切り捨てた値を取得する

– 商の余り
– %

– value属性
– HTML要素のvalue属性の値を操作したり、値を参照したりできるプロパティ

jQueryなど

– eqメソッド
– jQueryオブジェクトの中からeqの引数の数字と同じインデックス番号の要素を取得できる

– prevメソッド
– jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を取得する

– nextメソッド
– jQueryオブジェクトの兄弟要素（同じ階層の要素）の中か

JavaScript　セッションに保存・取得

## 用途
JavaScriptでセッションに値を保存したい時、値を取得したい時に使う。

## 使用方法
### 保存方法
“`js:
sessionStorage.setItem(‘hoge’,’保存したい値’);
“`
第1引数 → セッションの名前を自分で決める
第2引数 → 保存したい値や文字列を入力する

### 取得方法
“`js:
sessionStorage.getItem(‘hoge’);
“`
引数に保存した際に決めた名前を入力する

### 保存した特定のデータを削除する方法
“`js:
sessionStorage.removeItem(‘hoge’);
“`
引数に保存した際に決めた名前を入力する

### 保存したすべてのデータを削除する方法
“`js:
sessionStorage.clear();
“`

JavaScriptライブラリ「FlipPlayer」を作りました

自称・画期的なアニメーションライブラリ「[FlipPlayer](http://spice-tortoiseshell-baseball.glitch.me/)」を作ったので、宣伝も兼ねて開発記を書いていきます。

# FlipPlayer
http://spice-tortoiseshell-baseball.glitch.me/

で公開しており、スライドショーやアニメーションなどをHTMLページへ簡単に設置できるというものです。　　

## 開発の動機
2020年に、Flashが廃止されてしまったというのが一番の要因です。実を言うと私は2019からネットを使っていて、その過程でたまにFlashアニメーションを見かけたりしていました。もともと個人サイトなどに興味があり、廃止は名残惜しいな、と思って作ったのがこいつです。

# 開発期間
大体1週間くらいかかりました。いやはや、ライブラリを作るのは大変ですね。

# 仕組み
ざっくりな仕組みは、キー入力の読み取りと画像遷移、オブジェクト生成などのスクリプトでできています。いちいち変数を宣言しなければいけないため一見複雑に見えますが、中

JavaScript　未入力または改行・空白のみの場合に空文字判定

## 用途
textarea などで空白や改行のみが入力された際に、空文字判定にしたい時に使用する。

## 方法
“`js:
var hoge = $(‘#hoge’).val(); // idがhogeのtextareaの値を取得
if (hoge.trim() === ”) {
// 未入力または改行・空白のみの場合の処理を書く
}
“`
`trim()`
対象文字列の両端の空白（スペースやタブ、改行）を削除します。
（コメントでご指摘をいただき追記しました。）

:::note info
Internet Explorer９未満のバージョンではtrimに対応していません。
他の書き方については下記をご覧ください。
:::

### 空白や改行のみの場合に空文字判定
“`js:
var hoge = $(‘#hoge’).val(); // idがhogeのtextareaの値を取得
if (!hoge.match(/\S/g)) {
// 改行・空白のみの場合の処理を書く
}
“`
`!hoge.match(/\S/g)` で「改行・空白のみの場合に空文字判定

aタグ　リンクを無効化　js　javascript:void(0)

## 用途
「aタグ」をクリックした際にリンクの処理を無効化したい時に使う。
onClick での処理は行いたいけど、ページ遷移はさせたくない時に使う。

## 使用方法
“`html:書き方
コメント
“`
`href=”javascript:void(0)”` とすることで、リンク処理を無効化し、ページ遷移しなくなります。
ブラウザ依存はありますが主要ブラウザでは動きます。
1点注意点があり、リンクにカーソルを合わせると `javascript:void(0)` と表示されてしまいます。

## その他
“`html:書き方
コメント
“`
上記の方法でもページ遷移されませんが、ページ内でのリンクが発生してしまいます。
ホバー効果があるまま「aタグ」が使えます。
「現時点ではリンク先が未定で、今後ここにリンクが入る」という意味で使ったり、一旦作業を進めるためなどに使います。

[2022年版]実体験をもとに独学でプログラミング学習するためのロードマップを紹介

# はじめに

今回は「**独学でプログラミング学習するロードマップ**」について紹介していきます。

「**独学でプログラミング学習したいけど何すれば良いかわからない…**」

「**独学でプログラミング学習してるけど、このやり方でいいのかな？**」

「**独学でエンジニアなるに何したら良い？**」

あなたはこんな悩みを抱えていませんか？

この記事を読むことで、「**独学でプログラミング学習する手順**」がわかり、**エンジニアになるにはかなにをすればよいか**までわかります。

前置きは早々に早速ロードマップを見ていきましょう！

# ロードマップ全体

まずは独学でプログラミング学習するロードマップの全体を見ていきましょう。

::: note
– 下調べ
– 動画でインプット
– 書籍でインプット
– 基礎アウトプット
– 応用アウトプット
:::

この５ステップが全体の構成です。

１つ１つ丁寧に確認していくので少し長くなってしまいますが、ぜひエンジニアを目指している方や独学でプログラミング学習しようとしている方、学習中の方の参考になれば幸いです。

# 下調べ

Web Streamを便利にする新しいメソッドたち

Web Streamは便利で性能もいいのですが、まだ新しいAPIということで必要最低限の機能しか実装されていません。
以下で紹介するような新しいメソッドを使うと、シンプルにストリーミング処理が書けるようになります。

## ReadableStream.prototype[Symbol.asyncIterator]

このメソッドはReadableStreamを非同期イテラブルにするものです。
この機能の便利さは導入前後の記述量を比較してもらえれば一目瞭然だと思います。

“`ts:導入前
const reader = readableStream.getReader();
while (true) {
const { done, value } = reader.read();
if (done) break;
console.log(value)
}
“`

“`ts:導入後
for await (const chunk of readableStream) { // 非同期イテレーターなのでfor-await-of文で読める
console.log(chun

Chromeで、aタグのURLとテキストをCSVで取得(自分用メモ)

# jQueryの読み込み
jQueryのバージョンはコピペなので古い。。。

“`javascript:
if(typeof jQuery === “undefined”) {
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘//code.jquery.com/jquery-3.5.1.min.js’;
document.head.appendChild(script);
}

“`

# CSV保存関数

“`javascript
var downloadAsTextFile = function(fileName, content) {
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, content]);
var url = window.

【公式ハンズオン和訳】Node.js+PrismaをServerless Frameworkを使用してAWS Lambdaにデプロイする

:::note
この記事は、Prisma公式の「Deploying to AWS Lambda」の和訳（意訳）です。
翻訳元とライセンスについてはページ下部に記載しています。
:::

このハンズオンでは、Serverless Frameworkを使用して、AWS LambdaにサーバレスなNode.jsのREST APIをデプロイする方法をお伝えします。

AWS LambdaはAWSのサービスの一つで、これを使うとサーバ管理不要のサーバレス環境でコードを実行できます。一方で、REST APIをLambdaにデプロイするためには、S3でファイルをホスティングしたり、API GatewayでAPIをHTTPで公開する必要もあります。

Serverless Frameworkを使えば、CLIでワークフローを自動化し、AWSリソースのプロビジョニングも行うことができます。

今回作成するREST APIでは、Prisma Clientを使用してデータベースのレコードの取得・作成・削除を行います。具体的には、それぞれの関数はRESTリソースのエンドポイントを表し、Prisma Client

連想配列とは？

JavaScriptの開発で連想配列を使ったので調べてまとめてみました！
間違っていればご指摘お願いします！
# 結論
**「連想配列とは、配列で添字（インデックス）に数字を与えているのに対して、好きな文字を与えることができる配列のことである。」**
“`sample.js
# 配列
var result_array = [
’70点’, # 値１
’60点’, # 値2
’92点’ # 値3
];

# 連想配列
var result_associative_array = {
tarou : ’70点’, # キー1 : 値１
jirou : ’60点’, # キー2 : 値2
hanako : ’92点’ # キー4 : 値3
}
“`
# Hashと同じじゃないの？
それって、RubyでいうHashのことじゃないのかなと思ったので調べたところ、厳密には違うみたいです。
## RubyにおけるHash
Rubyの[リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/class/Hash.h

PG見聞録 ~Javascript編 基礎of基礎5~

仕事が終わり、ご飯作って洗い物して犬の世話してようやく勉強タイムです。
javascriptでは欠かせない、ＤＯＭについて学習しました。

DOM(Document Object Model)

HTMLをJavascriptから参照したり更新したりするためのインターフェースのこと。
HTMLは文章(ドキュメント)なのでこいつをオブジェクト化するモデル。
FEでも勉強しましたが、HTMLファイルをDOMツリーという木構造にして参照したりするようです。
コードはそのまんまdocument.○○という書き方で参照していきます

“`javascript
/**
* DOM操作の例
*/

document.body //など、documentでHTMLにアクセスできる

document.querySelector(‘#[id]’) //一致した最初の[id]を取得できる
document.querySelector(‘.[class]’) //一致した最初の[class]を取得
document.querySelector(‘tag’) //tagを

ブラウザゲームを作ってみよう(その8:サンプルゲーム作成その1)

# はじめに
[その7](https://qiita.com/noji505/items/df0e7e8589a0b8ed9206)では当たり判定処理を行いました。
今回は今までのものを組み合わせて簡単なサンプルゲームを作ってみたいと思います。

# サンプルゲームイメージ

これが今回作成するゲームのイメージになります。
それぞれの要素の詳細は以下です。

| No | 内容 | 説明 | 画像イメージ |
|:-:|:-:|:–|:-:|
| 1 | 雲 | 操作するメインキャラクターです | 

Webブラウザで業務をVRっぽくし表示てみようという試み

# はじめに
XR面白いですよね。
とはいえ、HololensやXRを一般業務に提案するのもなかなか難しそう。

なので、Webブラウザでそれっぽい表示が出来たら業務アプリにしれっとねじ込めていいんじゃないかと、Three.jsを少し齧って作ってみました。
今回は場所が意味を持ちデータと紐づくイメージのしやすい、資産管理、在庫管理　ぽいものです。

## 出来たもの
カーソルをオブジェクトに重ねると情報が表示されたり
表示方法を選択することで、データに合わせて着色したりサイズを変えたりできます。

↓下記のURLにWebページがあります↓

https://ddy.nukenin.jp/stockdemo2022.html

## 開発環境

以下の環境で作成しました。

|項目|使用したもの|
|:-|:-|
|OS|Windwos10|

PG見聞録 ~Javascript編 基礎of基礎4~

javascriptでよく使われるらしいアロー関数とコールバック関数について学習しました。
ビギナーにとってここが少しややこしいところでしょうか。

アロー関数

無名関数を記述しやすくした省略記法、ってことですかね。

“`Javascript
const b = function(name) {
return ‘hello’ + name;
}
“`
みたいな無名関数を
“`Javascript
const b = (name) => ‘hello’ + name;
“`
て感じで1行にまとめることが出来ます。
=>が矢に見えるからアロー関数ですね。
実はこの辺もphpが持っている機能だったりします。似てますね。
“`Javascript
const b = _ => ‘hello’ + name;
“`
引数を取らない場合にこんな書き方も出来ちゃうんですね。

コールバック関数

“`Javascript

function hello(callback, lastname) {
console.log(‘hel

PG見聞録 ~javascript編 基礎of基礎3~

let,const,varの違いと、phpでも学習しましたが型変換について書こうと思います。

let,const,varの違い

変数を宣言する際に使うこれらですが、少し縛りがあります。
再宣言、再代入を許容するかしないかです。

“`Javascript
let a = 0;
let a = 1; //と「再宣言」するとエラーとなる

var b = 1;
var b = 2; //varは再宣言OK

let c = 1;
c = 1; //再代入だとletはOK

const d = 1;
d = 1; //constで再代入はエラー

{//スコープ内では…
let e = 1; //{}内でのみ参照可能
var f = 1; //どこでも参照可能
}

/**
* let => 再宣言:不可　再代入:可
* const => 再宣言:不可　再代入:不可
* var => 再宣言:可　再代入:可
*/
“`
といった具合に、何で宣言したかで再宣言できたり、再代入できなかったりします。
varはどちらも許容してし

useStateの状態管理について

最近“`javascript“`特に“`Next.js“`で個人開発していて、その中で“`useState“`というものを初めて見たので今回はそれをまとめていこうとおもいます

## useStateとは？
[公式ドキュメント](https://ja.reactjs.org/docs/hooks-overview.html)によると状態管理に使われます。めちゃくちゃ簡単にいうとそういうことなんですが、ぼくは思いました
***状態管理***って何？具体的にどういうこと？って思ったので調べた結果を記そうと思います

実際の使い方はこちらの記事が分かりやすいと思うので、[こちら](https://reffect.co.jp/react/react-hook-usestate-understand)の記事を参考にしていただきたいです

## SPA以前のフロントエンドのお仕事
SPA以前のフロントエンドの役割というのは、MVCモデルでいうとデータを持ってきてそれをHTMLに変換することでした。
Railsで例えるなら以下のような感じです
“`
<% @users.each do

PG見聞録 ~javascript編 基礎of基礎2~

Javascript編2 スコープ

Javascriptのスコープについて学習します。

・グローバルスコープとスクリプトスコープ
宣言に使用したキーワードによってスクリプトスコープかグローバルスコープに配置されるかが決まる。
let,const => スクリプトスコープ
var,function => グローバルスコープ(windowオブジェクト)
一般的には使い勝手は変わらず、どちらもグローバルスコープとされる。
ただし、例外があり

“`Javascript
window.d = 1;
let d = 2;
console.log(d); //結果 2

/**
* この場合、letで定義した値が優先して取られる
* ウィンドウオブジェクトはスコープチェーンという考え方の中で
* 一番優先順位が低いという性質があるので
*/
“`
このように優先順位が決まっているので出力結果に違いが生じるので注意が必要。

関数スコープとブロックスコープ

関数での{ }内を関数スコープ

p5.js Web Editor上で「console.log({変数名})」という書き方（変数名＋中身の出力）や「console.table()」のお試し

以下の記事で見かけたconsole.log({変数名})」という書き方をする話と「console.table()」を、p5.js Web Editor上でさくっと試してみた、という話題です。

●console.log(); しか使えなかった自分へ。。。 – Qiita
　https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b



## 動かしたプログラム： console.log({変数名})
さっと試せそうな内容で、まず

【CORSエラー】初心者がJavaScriptから外部APIを叩いたときの話

初心者のつまづきポイントでした。
もし、あやまっている点や補足、実はこんな解決法がある、などありましたらどしどしご指摘ください！

# まずは「フロントから外部APIを叩いたときのCORSエラー」の結論

**3.の場合、フロントエンドからはほぼ無理！バックエンドから処理しましょう！**

フロント言語のJavascriptを使用して、ブラウザからAPIを利用するとき、大まかに以下の3つにわかれます。
1. APIキーを事前に取得し、アクセスできる（Google Map APIなど）
2. APIキー無しにアクセスできる（NHKの番組表取得など）
3. APIキー無しにアクセスできるが、フロントからではCORSエラーで **アクセスが難しい**（なんで！？）

初学者の私は丸1日格闘してしまいまして、 **「なぜ、CORSエラーが起こるか」** → **「そもそもAPIって？」** →APIを使用するための **「HTTPリクエストやHTTPレスポンス」** について調べたことをつらつら書いていきます。

さー行ってみよー！
* * *
### 目次
[そもそもAPIって](#-そも

【React】Function Componentsに型をつけるときFCを使う？それともJSX.Elementを使う？

# この記事を書く動機
メモ
間違っている部分があればコメントで教えてください。

# 前提知識

https://kray.jp/blog/dont-have-to-use-react-fc-and-react-vfc/

https://github.com/typescript-cheatsheets/react#function-components

# 問題
以下、尊敬するエンジニアの方々のツイートを引用させていただきました(いつもツイートから勉強させてもらっています。ありがとうございます！)：

React 限定の話題ですが、18から関数コンポーネントの型 React.FC の props から暗黙の children が除外されました。React+TypeScript Cheatsheets という☆33kのドキュメントでは、FC を使うのをやめて children: ReactNode を props の型に明記することを推奨しています。https://t.co/Ut9rUYi4K4

— 大岡由佳『りあクト! 第3.1版』BOOTHにて／紙本も販売中 (@oukayuka) April 27, 2022

いっぽう、先日公開されたこのブログでは React.PropsWithChildren<P> を props の型に使うことで React.FC を使い続ける方法が紹介されています。
皆さんは今後、どっちの方法で書かれますか？https://t.co/TULFVnWOFI

— 大岡由佳『りあクト! 第3.1版』BOOTHにて／紙本も販売中 (@oukayuka) April 27, 2022

自分はReact.FCを使い続ける派だな。関数の返り値は推論させるより明示したほうが有利という前提はまずあり、
引数と返り値の2箇所の型注釈を書くより変数に型注釈一発のほうが見やすいという個人的嗜好があるので（？） https://t.co/bODPn6fVRO

— ?️うひょ?✒? TypeScript本発売? (@uhyo_) April 27, 2022

# これまでの経緯を振り返る
## React v17までの書き方
* FCとVFCを使い分ける方法
基本はVFCを使い、childrenがprop