JavaScript関連のことを調べてみた2023年02月03日

JavaScript で矢印キーで移動する枠をつくってみる

JavaScript で矢印キーで移動する枠を簡単につくってみる
出来上がったやつのイメージはこんな感じ


– HTML 3×3 のマス用意
“`html:index.html

矢印キーで移動

押したキー

軽量暗号をJavaScriptで実装してみた

実は私は３０年前から監視社会の到来を見抜いていて、実際そうなったのですが、それが動機でこんなに暗号に詳しくなれたという事情があります。
で、２０年前当時のコードのファイルが見つかったので、ギットハブに公開しました。
Web用の暗号はすでにAESやchachsa20などがありますが、そもそもJSは実行速度が遅いので、より軽量な暗号を使っ他方がいいと思い、軽量暗号のファイナリストであるasconをjsに移植しました。
チャットの自動暗号化拡張機能をブラウザに作ってみようというのが今回の事案です。
JSってなんで６４ビットに対応しないんでしょうね？

まだ思いつきの段階なのでなんとも言えませんが、やはり自分には暗号が一番楽しいのだということです。
次はRustに移植しようかなと思います。
竹槍くんの機能はメッセージ暗号化、ファイル暗号化、通信路暗号化くらいならやります。
AsconはSSLには含まれないと思うので独自拡張ですね。

https://github.com/anang0g0/takeyari_ascon_implementation

終わったらまた書きます。

画面キャプチャ API と MediaStream 収録 API を使ってみた

画面をキャプチャしたり、それを収録できる面白そうな API を見つけたので使ってみました。

https://developer.mozilla.org/ja/docs/Web/API/Screen_Capture_API

https://developer.mozilla.org/ja/docs/Web/API/MediaStream_Recording_API

## 作ったもの

[恐竜ゲーム](chrome://dino)をキャプチャしている様子です。?
GitHub Pages で公開しています。

https://mikrogeophagus.github.io/screen-recorder

https://github.com/mikrogeophagus/screen-recorder

## Scr

ReactのuseStateを徹底的に理解する


Reactを学び始めてからSPA（シングルページアプリケーション）の良さが理解できたところでState Management（状態管理）を学んでいる方、useStateが理解できない方、このコンセプトを理解することは、コンポーネントのレンダーにもかかわる重要な部分になります。

Reduxなどのライブラリを使う前にも理解しておきたいです。
※この記事はReactを学習しながら書いています。もし不適切な用語や解説などありましたらお知らせしてもらえるとありがたいです。

## **State Management**

**State Management**はデータを管理するフロントエンド側のデータ倉庫をイメージしたシステムのことです。これらはReact Hookの機能のうちのひとつです。React Hook（フック）は

CookieとLocalStorageについて調べて比較した【JavaScript】

# この記事は？
## 主な内容
– Cookieとは何か？
– LocalStorageとは何か？
– CookieとLocalStorageをJavaScriptで操作する方法
– CookieとLocalStorageの違いは何か？

# Cookie
## Cookieとは？
> HTTP Cookie (ウェブ Cookie、ブラウザー Cookie) は、サーバーがユーザーのウェブブラウザーに送信する小さなデータであり、ブラウザーに保存され、その後のリクエストと共に同じサーバーへ返送されます。一般的には、 2 つのリクエストが同じブラウザーから送信されたものであるかを知るために使用されます。例えば、ユーザーのログイン状態を維持することができます。 Cookie は、ステートレスな HTTP プロトコルのためにステートフルな情報を記憶します。

**＜[HTTP Cookie の使用 / MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies)より＞**

主に、サイトのログイン機能やユーザ設定

【GAS】スプレッドシートの値をjson化する

# やりたいこと
以下のような「1行目がヘッダー、2行目以降がデータ行」の形式で入力されているスプレッドシートの値を
ヘッダー行の項目名をkeyに、値をvalueにしたjson形式に変換します。
そして、カラム・データの増減にも対応できるようにしていきます。

| |A | B | C | D |
|:-|:-|:———|:——|:—|
|1 |ID|購入日 | 商品 |価格|
|2 |1 |2023/02/01|りんご |100|
|3 |2 |2023/02/02|ねぎ |110|
|4 |3 |2023/02/02|キャベツ|138|
|5 |4 |2023/02/03|りんご |110|

“`json:json出力イメージ
[
{ “ID”: “1”, “購入日”: “2023/02/01”, “商品”: “りんご”, “価格”: “100” },
{ “ID”: “2”, “購入日”: “2023/02/02”, “商品”: “ねぎ”, “価格”: “110” },
{ “ID”: “3

Video.js完全マニュアル part12 〜プラグイン〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart12です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

今回はVideo.jsのプラグインという機能について解説します。

前回
[Video.js完全マニュアル part11 〜言語設定〜](https://qiita.com/manzoku_bukuro/items/30c9493d81378975dc2b)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人

# この記事の解説する章
[Plugins](https://videojs.com/guides/plugins/)

# プラグイン
Video.jsの強

[React]コンポーネントをpdf出力させる

Reactのコンポーネントをそのままpdf表示したいときあると思います。
動的なuiをそのまま変換できるので便利。

次の手順で進める。
1.componentをcanvasに変換
2.canvasをpdfに変換

# 1. package install
“`
$ npm i html2canvas jspdf
“`

# 2. pdf表示ロジック
“`tsx:usePdf
import html2canvas from ‘html2canvas’
import { jsPDF } from ‘jspdf’
import { useRef } from ‘react’

const usePdf = () => {
const targetRef = useRef(null)

const pdfOpenHandler = () => {
if (targetRef.current === null) return

html2canvas(targetRef.current).then((canvas) => {

useStateの実装とuuidを用いたユニークなキーの設定

この記事は前回の続きです。Todoアプリを再現する際などはこちらを先に参考にしてください。

https://qiita.com/ysk-s/items/dc8c18de2de8d1154476

前回、”Todo”というコンポーネントでuseStateを用いてtodosという変数に保存されているタスクを表示することは出来た。

ただし、ブラウザ上のコンソール画面にはエラーが表示されている。


これは、Todoのコンポーネントで表示されるタスクにはユニークなキーが割り振られておらず、識別できないためにエラーが起こっている。
そのため、TodoListからTodoを呼び出すときkeyの割り振りも行う。

return todos.map((todo) => (

教えてGPT: Flutterでjavascriptのライブラリを使うためにはどうしたら良いか？

Flutter で JavaScript のライブラリを使用するには、以下の 2 つの方法があります。

Dart JavaScript Interop：Dart は JavaScript との互換性があります。そのため、Dart アプリケーションから JavaScript ライブラリを呼び出すことができます。これは Dart の「dart:js」パッケージを使用することで実現されます。

WebView widget：Flutter アプリケーション内に WebView widget を埋め込んで、JavaScript ライブラリを呼び出すことができます。この方法は、JavaScript ライブラリを利用するには最も簡単な方法ですが、パフォーマンスに問題がある場合があります。

この 2 つの方法を使用すると、Flutter アプリケーションから JavaScript ライブラリを利用することができます。開発者は、アプリケーションの要件に応じて最適な方法を選択することができます。

Regenerate response

【ServerlessFramework】API GatewayのWebSocket通信を利用してリアルタイムに変化するTodoアプリを作成した

# はじめに

ServerlessFrameworkを用いて、ApiGatewayのWebsocket通信を利用したリアルタイムアウトTodoアプリを実装した時のメモ。

# 環境

* Svelte
* 3.54.0
* ServerlessFramework
* 3.27.0

# 完成画面


# 環境について

## 構成図

## WebSocket説明

### 1. connect / disconnect時にはDynamoDB

ChatGPTでNCMBのコードを書いてみる

何かと話題なChatGPTですが、読める文章以外にもプログラミングコードの生成も可能です。

ということで、ニフクラ mobile backend向けのコードをどれくらいの精度で書けるのか試してみました。

## 1回目

一回目は以下のように日本語で入力しました。

“`json
NCMBのJavaScript SDKを使ってデータストアからデータを取得するコードを教えてください
“`

生成されたコードは以下の通り。これは普通に動くコードですね…

“`jsx
var NCMB = require(“ncmb”);

var ncmb = new NCMB(“your_application_key”, “your_client_key”);
var TestClass = ncmb.DataStore(“TestClass”);

TestClass.fetchAll()
.then(function(results){
console.log(results);
})
.catch(function(error){

No1_ググったこと投稿(5分)_React系

# きっかけ
ググった内容って、
「あー！こんなかんじね！」と理解した気になってませんか？？
結局数日後、あれ・・・この前のなんだっけ・・・となることが多くないですか？?

そんなある日、ネットサーフィンをしていたら、こんな記事を見つけました

エンジニアの書類選考でQiitaが評価される？！現役転職エージェントが語る活用術

この記事の内容を要約すると
“ 「ググったことを5分書いたら投稿する（中途半端でも）」 “

おー！！これめっちゃいいやん！！

## ということでNo1_ググったこと投稿します(5分)_React関連

### その前に背景を・・・
自分はバックエンドエンジニアでPHPを使用してます。(Laravel/ CodeIgniter/ Slim経験有)
ある過去の経験があり、フロント側に苦手意識を持っています。
それを払拭するために、MENTAというサービスを使ってJS ~ React.js を教えてもらってます。
なぜこんな事をしてるかというと、身銭を切った行動をしないと本当に行動しないから
＋自分で参考書や、動画を見て勉強

【japan-map-js × Laravel】jQueryプラグインで都道府県ごとに選択できる日本地図を表示

こんにちは！
現在エンジニアを目指して勉強中の一般男性です。

突然ですが、かっこいい日本地図を画面に表示させたい、、、
誰しも一度は思ったことがあるのではないでしょうか（）

今回、jQueryプラグインのjapan-map-jsを利用したところ
かなり簡単かつ扱いやすい日本地図を表示させることができました。
自分と同じ初心者の方向けに参考になればと思い、まとめておきます。

## 環境
・macOS Monterey 12.6
・PHP 8.1.13
・Laravel 9.3.12
・jQuery 3.6.0

## 前提

作っているものは、旅行の記録ができるWebアプリ。
白地図は以下のイメージで表示させたい。

__①トップページに白地図を表示__
各都道府県はクリックができ、遷移先はそれぞれのページ

__②マイページに白地図__
「訪問済み」の記録を残した都道府県と「未訪問」の都道府県を区分。
こちらもクリックができ、
「訪問済み」の県の遷移先は、自分が残したその県の記録。
「未訪問」の県は、他ユーザーの記録一覧。

## 実装
### 導入

まずは __jQueryを

JestとVue.jsでsetIntervalやsetTimeoutのテストを書く

# はじめに
“`setInterval“`を使ったポーリングのテストを書こうとした時に、なかなか動くテストを書けずに詰まりました。

# テストしたいコード
今回テストしたかったのは、下のようなコードです。
5分ごとに“`testFunction()“`が呼ばれるようになっています。
“`javascript:component.js
const Comp = {
// …
created() {
setInterval(this.testFunction, 300000);
},
// …
methods: {
testFunction() {
console.log(“foo”);
}
}
}
“`
# 動いたテストコード
最終的に動いたのは、“`jest.spyOn()“`でモック関数を作成する方法でした。
“`javascript:component.test.js
import { expect, describe, test }

YouTubeの登録チャンネルページにおけるショート動画を非表示にするchrome拡張機能を作ってみた

## はじめに
タイトル通りです。
せっかく作ったし備忘録的な感じで記事に残そう！ってことで書きました。
JavaScriptは基礎文法知ってる程度です。
普段このような記事を書くことはないので拙い文章になると思いますがお許しください。
## 経緯
勉強がてら何か作りたい
　　　　↓
JavaScriptでchrome拡張機能を自作できるらしい
　　　　↓
YouTubeの拡張機能を作ってみよう

だいたいこんな感じです。
とりあえずショート動画を非表示にする機能を作ってみました。
なぜ登録しているチャンネルのショート動画かというと、
たまたま僕が登録しているチャンネルがそういうスタイルなだけかもしれませんがショート動画ってメイン動画の切り抜きなことがほとんどなので見ないんですよね。
それとショート動画ってスマホだからだらだら見ちゃうみたいなところあると思うんですよ。
PCでショート動画をみることはないので非表示にしてメイン動画や配信アーカイブを見つけやすくしようってことです。

## 今回作成したファイル

script.js

navigator.taintEnabled()ってなんだ？

かつては、JavaScriptの`navigator`オブジェクトのプロパティには`taintEnabled()`という関数がありました。

# TL;DR
JavaScript 1.2において、Data Tainting（データ汚染）をチェックする機能が有効か無効かをチェックするためのものだったようです。
現在のブラウザ(Safari 14、Chrome 108)では、すでに削除されています。

# リファレンスを見てみる
[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/taintEnabled) によると、
>Tainting was a security method used by JavaScript 1.2. It has long been removed; this method only stays for maintaining compatibility with very old scripts.

（意訳）
> Taintingは、JavaScript 1.2で

Reactで使用するファイルの詳細と用途、そしてコンポーネントの実装

Reactの基礎を学びながらTodoアプリを作成していく。

まず、Reactの雛形を作成していく。
ターミナル（Windowsの場合はcommand prompt)を開いて以下のように打つ。

npx create-react-app react-tutorial
cd react-tutorial
code .

まず最初の一行で、Reactの雛形を作成していく。そのとき、プロジェクトをまとめておくディレクトリ内で実行すると良い。
最初の行の最後 “react-tutorial”という部分はプロジェクトが作成されるディレクトリ名。そのため、自分で自由に決めていい。
そうしたら、作成されたディレクトリに移動して、その階層でコードエディタを開く。

作成されたディレクトリ内でindex.htmlの記述を見る。
シンプルな構造でheadタグのtitleの要素をいじるとWebページのタイトルを変更することが出来る。

bodyタグのdivについているrootというidがついているがそれが重要である。この後説明する。

そして、src(ソース)/App.jsの中のAp

?未経験エンジニアが学習においてつまずいたポイント

# JavaScriptの学習を始めて2ヶ月弱
Udemyの教材を使って、フロントエンドエンジニアに必要な知識を学習しています。

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

12月頭から学習を始めて、総学習時間は１００時間を超え、セクションも残り１０％くらいになってきました。
これまでの学習でつまずいたポイントを残しておきたいと思います。

### 1\. テンプレートリテラル
JavaScriptのオブジェクトデータへアクセスし、それをテンプレートリテラルを使ってstringで別の変数へ代入するのに手こずった。一つ一つ見れば簡単だが、問題が重なると出来ることも出来なくなってしまう。エラーが出ている原因を一つずつ潰していく重要性を感じた。

### 2\. 関数（関数式、高階関数、アロー関数）
いまだに理解しきれていないが、何度も見返しながら徐々に理解を深めていきたい。アロー関数は学んだはずなのに、関数をみるたびに初めて見た感覚に陥る。構造の理解が難しい。

### 3\.　非同期処理
この

【基本シリーズ】タブメニューの実装

See the Pen
tab UI(js) by wataruNakai (@wataruNakai)
on CodePen.

<