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

非同期通信ではない、POSTリクエストをする関数

## はじめに

Form送信を活用して、非同期通信ではなく、POSTリクエストする方法を紹介します。

他のサービスと連携する実装をしていて、AJAXリクエストではなく、リダイレクトを期待されており、POSTリクエストをしたい時などに使えます。

## コード

“`formPost.ts
const formPost = (value, url) => {
const form = document.createElement(“form”);
form.method = “POST”;
form.action = url; //`https://xxxxxxxx`;

const input = document.createElement(“input”);
input.type = “hidden”;
input.name = “submitValue”;
input.value = JSON.stringify(value);
form.appendChild(input);

form.style.display = “none”;

【JavaScript】falsyな値

JavaScriptにおいてfalseと扱われる(`falsy`な)値には以下が存在する。

|値|説明|
|–|–|
|false|true、falseのfalseキーワード|
|0|数値0|
|-0|数値-0|
|0n|BigInt値0|
|””|空文字列|
|null|何も存在しないこと|
|undefined|宣言のみされた変数などの未定義値|
|NaN|どの数値とも一致しない特性を持つNumber型の値|

“`js
if (false) {
console.log(‘trueです’);
} else {
console.log(‘falseです’);
}
// => falseです

if (0) {
console.log(‘trueです’);
} else {
console.log(‘falseです’);
}
// => falseです

if (-0) {
console.log(‘trueです’);
} else {
console.log(‘falseです’);
}
// => falseで

Chrome拡張機能(MV3) × Firebase(RealTime Database)

## 開発する拡張機能の前提
– MV(manifest version)3
– Firebaseを使用
– 「Node.js」, 「npm」を使用しない
– 開発に使用しているのはHTML, CSS, JavaScriptのみ
– contentもしくはbackgroundからFirebaseを使用したい

## 経緯
私は、Firebaseを使用するChrome拡張機能(以降、拡張機能)を開発していました。
MV3の拡張機能開発で、Firebaseを利用する方法を調べて出てくるのは、SDKをnpm経由でインストールする方法ばかりでした。
しかし、私は今回Node.js、npm（React、Vueなど）を使用しないためこれらの方法は適しません。
そこで調査した結果、参考になる文献が１つ(本記事の最後に記載)だけ見つかったのですが、よりわかりやすくしようと思い、執筆に至りました。

## 本題
まず簡単に拡張機能でFirebaseを使用する手順を以下に示します。
1. 使用したいFirebase アプリケーションのコードを取得
1. インポートしたコードを修正
1. Manife

VSCodeでイマドキのJavaScriptの開発環境をサクッと作ろうぜ(デプロイ編)

# はじめに
イマドキのJavaScript開発環境記事第3弾。

過去記事は以下。

– [第1弾 VSCodeの設定～Linter](https://qiita.com/neruneruo/items/c940af6c85519fd63648)
– [第2弾 自動テスト](https://qiita.com/neruneruo/items/edcf02eb0ebdb40a4876)

今回は、モジュールバンドラーを用いてアプリケーションのデプロイをする設定を作っていく。

# モジュールバンドラーの選定
モジュールバンドラーはいろいろあるが、Vue CLIを使った場合は最優先で選択される等、一日の長があるため、Webpackを使う。
なお、Webpackに関する参考記事として以下を読んでおくと導入が早い。

– [いちばんやさしいwebpack入門](https://zenn.dev/sprout2000/articles/9d026d3d9e0e8f)

# 全体のファイル構成
プロジェクトと同列にdist/bandle.jsというアウトプットを作成するようにする。

“`
<

Node.jsのsokect.ioを使ってのPUSH通知を作ってみた

こんにちは、wattak です。

50の手習いで Web アプリを作ってみよう、と色々と調べておりまして、自分の備忘録もかねて作ってみた実装をこちらに投稿しようと思います。
## 今回のプログラム
任意のタイミングでサーバーからクライアントへ PUSH する仕組みを持つ環境を Node.js を使って構築してみました。

なお PUSH の仕組みは記事のタグにも記載しましたが socket.io の仕組みを使っております。
## 処理概要
以下のようなイメージで構築しようと考えております。

1.クライアントから接続要求
2.サーバーにてクライアント情報を追加
3.クライアントから受付要求
4.サーバーにて登録処理して応答
5.以後、任意のタイミングでサーバーからクライアントへ PUSH 通知

「任意のタイミング」については PUSH 用に RestAPI を用意し API コールのタイミングで通知を行うことにしました。
## 処理イメージ
ポンチ画レベルのシーケンスで恐縮ですが1.～5.の処理イメージを描いてみました。
![qiita_image.jpeg](https://qi

Chrome拡張でサイトのHTMLを書き換える

# 概要

+ Google Formsで自分の回答の字数を知りたい！
+ Chrome拡張ってどうできているの？何ができるの？

という思いからGoogle Formsの自分の回答に字数を表示する拡張機能を作りました。

外部(Chrome Web Store)に公開するとなるとお金がかかったり別な手続きが必要みたいですが、自分のChromeで使うだけの拡張であれば、フォルダーをアップロードするだけです。

# manifest.jsonファイルについて

Chromeの拡張機能を作るうえで必須なのが`manifest.json`ファイルです。アップロードするフォルダー(ディレクトリ)の直下に作ります。今回は大したことしないので書くことはあまりありません。

“`manifest.json
{
“manifest_version”: 3,
“name”: “Word Counter for Google Forms”,
“version”: “1.0.0”,
“description”: “This extension shows the n

JavaScriptで作る変則リバーシ③

# はじめに
以前ご紹介させていただいた、下記記事からの続編(第③弾)になります。

https://qiita.com/y-tetsu/items/d1a5c7485cb34ae5c904

プログラムの土台部分については、以下の初回記事で紹介しています。

https://qiita.com/y-tetsu/items/5ba5a5487534e47cc7ca

今回は前回作ったものをベースに、新たに**緑色の石**というものを追加した、**4色の石を使った、3人対戦で遊べる変則リバーシ**を作りましたので、ご紹介したいと思います。

# できたもの
以下のような、ブラウザで遊べるものを作りました。
自身が先手(黒)で、相手(白と灰)はコンピュータ、としています。
ボタンタップで一時的に要素を量産する

# 作ったもの

インスタライブのような同期チャットにエモート機能を載せるということで
JSとCSSアニメーションでひな形の挙動を作ってみました。

## コード

HTML

“`html:html

• M1 macbookでnodebrew installできないとき

  ## いつも忘れること
  – M1　macbookに変えてから、npm使っているとたまに下記サイトのようなエラーに出会う。

  https://zenn.dev/catnose99/scraps/6c9e7ebabb6221

  – それ自体は、Node.jsのバージョンを変えると動くという話なので、nodebrewでバージョンを変えれば良い
  – しかし、目的のNode.jsをインストールしようしてできない、ということをいつも繰り返している

  ## 結局こちらにお世話になる

  https://zenn.dev/naoki_oshiumi/articles/967ce342172ab8

  – ということで備忘録。
  – M1 macbookにして、 `nodebrew install v15.8.0` みたいなことができない時は　`nodebrew compile v15.8.0` みたいな感じにすると環境に必要なバージョンのNode.jsを作ることができる。
  – このコンパイルは記事にもある通り1時間くらいかかると思う（M1頑張ってくれ）
  – あとは `nodebrew use v15

元記事を表示

Next.jsで配列内のJSONデータで必要な部分のみ出力したい

## はじめに
もっと良い方法があるかもしれないですが、調べた中で上手くいったコードをメモがてら記載

## コード

“`index.js
const [qiita, setQiita] = useState(”);
const fetchQiita = async () => {
// データを取得
const response = await fetch(`/api/qiita?query=${keyword}`);
let qiita = await response.json();
　// 配列を1つ出力して別の変数に格納
const listQiita = qiita.map(article =>
<>

{article.title}

{article.body}

);
　// useStateの変数にセットする
setQii

【超簡単】Next.jsでBasic認証を導入してみた

## はじめに
Next.jsでBasic認証を導入しようと思いましたが、TypeScriptで記載されたサンプルしか見つけられなかったため、JavaScript版を作成しました。

## Next.jsでBasic認証を導入する方法

以下を`pages`フォルダ配下に作成する

“`/pages/_middleware.js
import { NextRequest, NextResponse } from ‘next/server’

export function middleware(req) {
const basicAuth = req.headers.get(‘authorization’)

if (basicAuth) {
const auth = basicAuth.split(‘ ‘)[1]
const [user, pwd] = Buffer.from(auth, ‘base64’).toString().split(‘:’)
if (user === process.env.NEXT_PUBLI

今週の学び　第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
– 下調べ
– 動画でインプット
– 書籍でインプット
– 基礎アウトプット
– 応用アウトプット
:::

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

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

# 下調べ

[JavaScript] 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