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

【Rails】ページ遷移せずにいいねをしたい/取り消したい

みなさん、こんにちは！
筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！
興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください?

https://geek-salon.com/?utm_source=Direct&utm_medium=attract&utm_campaign=3Q&utm_content=Fukuoka_B1_3Q

さっそく今回の本題に入っていきます！
今回は投稿に対するいいねを、ページ遷移せずともできる/取り消せるようにしていきたいと思います。

なお、いいね機能は実装済みという前提で話を進めていくため、いいね機能をまだ実装していない人は先にそちらの実装をお願いします。

また今回の実装では部分テンプレートを用いています。部分テンプレートについての理解が怪しい方は、[参考となる記事](https://qiita.com/okamoto_ryo/items/026b43e965a1180113ba)を載せておきますので、そちらも参照してください！

##実装環境
ruby 2.7.4p191 (2021-07-07

React + TypeScript: Facebookの状態管理ライブラリRecoilを使ってみる

[Recoil](https://recoiljs.org/)はReactの状態を管理するライブラリで、Facebook改めMetaが実験的に開発しています。本稿執筆時の[最新バージョン](https://github.com/facebookexperimental/Recoil/releases)は0.5.2です。状態をひとまとめにするのではなく、ひとつひとつ細かく分けて管理します。ざっくりとお伝えするなら、`useState`の状態をコンポーネントツリー内にまたがって共有するイメージです。

本稿は公式サイトの「[Getting Started](https://recoiljs.org/docs/introduction/getting-started)」で紹介されたコードサンプルを、モジュールに分けた作例に書き替えて解説します(サンプル001)。また、TypeScriptによる型づけも加えました。

#### サンプル001■React + TypeScript: Recoil example
[![2201001_001.png](https://qiita-image-s

WebCrypto APIがundefinedになることがあるのは仕様でした

WebCrypto API (window.crypto.subtle)が’undefined’になって悩んで色々調べたら
WebCrypto APIは「Secure Contexts」でないと使えないとのことだった。

##

#詳細
MDN:

https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts

WebCrypto APIが非安全なコンテキストで使用できないことを問題にする話は、
chromiumやらFireFoxのIssueに出てくるが
既にW3Cで決めていることらしいのでそこを変えない限りは各ブラウザは仕様通りということなので正常な動作。

このコメントみたいに社内システムで使おうとして、引っ掛かりました。

https://github.com/w3c/webcrypto/issues/28#issuecomment-622006127

MDNには上記の通り「安全なコンテキストに制限されている機能」のページはあるの

N予備プログラミング　〜冬コンテスト作品制作過程を晒してみる②〜

みなさんこんばんわ。
昨日つくった”covidリスク確認くん（開発用）”のアプリ設計書にしたがって、ぐいぐいコードを描いて行きます。
”4ｰ17.【サービス開発2】プロジェクトの作成と認証の実装”のテキストの通りに何も考えずに手を動かす。そーれ、ワン・ツー・写経！！

さすがにdocker-compose.ymlだけは書き換えなきゃでしょ。
—quote—
version: ‘3’
services:
app:
build: .
tty: true
ports:
– 8000:8000
volumes:
– .:/app
depends_on:
– db
db:
build:
context: “.”
dockerfile: “db.Dockerfile”
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_DB: covid

Jest でタイムゾーン考慮

# 概要

– unixtime を取得する関数のテストを書きたかった
– ローカルと Github 上で挙動が違った（ローカルでは通るけど Github 上だと落ちた）

# 詳細

– **2022-01-01 01:01:01** を表す `Date` を用意
– 変換サイトを使い、 **UTC+9** の状態での unixtime が **1640966461** だとわかる
– 以下の記事を参考に、そのままテストを書いた

https://qiita.com/mima_ita/items/558ec8cee2c0e1005ffd

“`typescript
describe(“テストしたい関数名”, () => {
jest.useFakeTimers(“modern”);
jest.setSystemTime(new Date(2022, 0, 1, 1, 1, 1));
it(“”, () => expect(現在時刻の unixtime を取得する関数).toBe(1640966461));
});
“`

– 出たエラーは以下の通り

“`zsh
●

javascriptで既存の同期関数を非同期で実行させたい

# やりたいこと
関数A (重い)
↓
関数B (軽い)

同期処理を上から順に実行していたが、`A`と`B`に順序性はなく`A`は非同期でもいいと気づいた。

非同期の関数を作るとかではなく、いかにシンプルに非同期にできるかに重点を置いて考えてみた。

# 既存の処理例
“`main.js
// 重い処理
function heavy() {
// …
console.log(‘heavy’);
}

// 軽い処理
function light() {
console.log(‘light’);
}

// メイン
function main() {
heavy();
light();
}

// 実行
main();
“`

実行結果は当たり前だが以下の通り

“`実行結果.
heavy
light
“`

# 改善案
“`main.js
// 重い処理
function heavy() {
// …
console.log(‘heavy’);
}

// 軽い処理
function light() {
console.log(‘

【Laravel】非同期通信のデバッグ【JavaScript】

※この記事は初学者が書いています。おかしな部分などありましたら教えて頂けると嬉しいです※

Laravelとjsを繋いで何らかの非同期通信処理を行う場合、
jsのエラー等は通常通りconsoleで確認できるが
Laravel側のエラーメッセージやdd等の内容はどこで確認できるのか。

##検証ツールのNetworkタブで確認できる

chrome検証ツールのNetworkタブを開いた状態で
非同期通信処理を行う（いいねボタンを押すなど）と、
該当のメソッド名がName欄に表示されます。
（下記画像で言うと「like」の部分）
この箇所を選択するとエラーメッセージやddの内容が確認できます。


CORS（オリジン間リソース共有）とは？

# エラー発生
フロントエンドとバックエンドを通信させた時、このようなエラーが発生したことはありませんか？
なんだかコードは間違ってなさそうだな、なんのエラーだろう、CORSって書いてある、、、と初見の人は思うと思います。

# CORSって？
**CORS(Cross-Origin-Resource-Sharing)オリジン間リソース共有**
追加の HTTPヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

ふむふむ、、、

オリジンとは？
何かしないとアクセス権がないのか？

# オリジン
URLの「スキーム」「ホスト」「ポート」の3つの組み合わせたものです。
![ス

【フリップ】画像をアニメーションで切り替えたい！オシャレに！【くるっと】

[画像をアニメーションで切り替えたい！オシャレに！](https://qiita.com/drooooopp/items/5d7ef537461ae3f23c3b) の詳細記事となります。

今回は【フリップ】でクルッと回転するアニメーションです。
実際の挙動は以下のようになります。

早速実装です！

## 1. HTMLの追加

“`{html}

折線グラフ（d3.js 、ウィンドウ内領域一杯にプロット、ウィンドウリサイズ対応）

こんにちは。
d3.js を利用し、折線グラフ[^1] [^2] をウィンドウ内領域一杯にプロットし、ウィンドウ・リサイズにも対応させました。

[^1]: line chart + scatter plot です。
[^2]: 横軸変数は日付です。

ソースおよび動作例は下記です（ウィンドウ・フルスクリーンで動かす必要があります）：

* “[d3.js responding to window’s resizing](https://bl.ocks.org/kkdd/52603c5b4fc9c5ffb905da6ecdd734c5)” (bl.ocks)
* **[同](https://bl.ocks.org/kkdd/raw/52603c5b4fc9c5ffb905da6ecdd734

【スライド】画像をアニメーションで切り替えたい！オシャレに！【縦 横 斜め】

[画像をアニメーションで切り替えたい！オシャレに！](https://qiita.com/drooooopp/items/5d7ef537461ae3f23c3b) の詳細記事となります。

今回は【縦 横 斜めにスライドする】アニメーションです。
実際の挙動は以下のようになります。(以下は横にスライドする挙動です。)

CSSの `mask-image` を利用しての実装になります。
早速実装です！

## 1. HTMLの追加

“`{html}

React状態管理ライブラリ Jotai と Jotai Friends

## はじめに
React状態管理ライブラリの１つであるJōtaiをご存知でしょうか。数々の状態管理ライブラリを開発してきた[Daishi](https://qiita.com/daishi)さんの代表作であるJōtaiは世界的に注目されているライブラリの一つです。([2021 JavaScript Rising Stars – State Management](https://risingstars.js.org/2021/en#section-statemanagement))

この記事は、JotaiとJotaiファンになった私が立ち上げたJotai Friendsの紹介記事となります。

## Jotaiとは
Jotaiは以下のような特徴があります。

“`
– ボトムアップアプローチ型の状態管理ライブラリ（単一のStateではなく複数のStateを自由にグローバル定義・利用する。1つのStateをAtomと呼称する）
– ミニマルなAPI
– AtomにユニークなKeyを設定する必要は無し（Recoilは必要）
– Providerレスモードで利用可能
– TypeScr

Symbolブロックチェーンを使ってクラウドレス環境でターン制ゲームを作る

ゼロ知識証明、自律分散型組織、自己主権型アイデンティティ…

とかく難しい分野への取り組みに利用されがちなブロックチェーンですが、実は既存のシステムを柔軟に拡張することが可能で、こういった用途に優れた特徴を生かせるブロックチェーンもあります。

Symbolブロックチェーンもその一つで、ノードと共に稼働しているREST APIやWebSocketを使ってブロックチェーンを利用契約不要なゼロダウンタイムのデータベースサーバのように活用することができます。
今回はサーバを構築することなく、ブロックチェーン上に”価値”と”状態”を記録することで運用可能な「ターン制ゲーム」をテーマにブロックチェーンの活用方法について検討してみたいと思います。

##### クラウドレスとは？

今のところ、「特定のクラウド業者に依存せずに」という私の造語ですが、同じキーワードで深く洞察されている記事を見かけましたので紹介しておきます。

[クラウドは「クラウドレス」へ ｜ HPE 日本](https://www.hpe.com/jp/ja/japan/insights/articles/cloudles

wordle のヒントサイトをJavaScriptのテキストファイル操作と正規表現で作る

## 人気の wordle …… でも英単語知らな過ぎてぴえん?

https://www.powerlanguage.co.uk/wordle/

とっても面白いのですがさすがに知らない英単語はきつい・・・ちょっとくらいヒントが欲しい。
ということでヒントを出してくれるサイトを作ってみます。
（場合によってはほぼ答え）

wordle の説明は省略。

:::note
JavaScript使ってプログラムを組むチュートリアルとしてもお使いください。
fetch でデータ取ってきて正規表現で検索するサンプルです。
:::

最終的なサイトはここにしばらくアップしておきます。しばらくしたら消します…。
https://wonderful-mahavira-53578c.netlify.app/

## まず戦略を考える

バックエンドの準備が手間なのでデータベースは使わない。
インメモリでフロントエンドだけで力技でどうにかしたい。
? **テキストファイルの英単語一覧から正規表現で検索をかけよう！**

## インタフェース（UI）を考える

まずインタフェースを考えます。
機能はインタ

Javascriptの連想配列をpushするときに詰まった話

# ポイント
1. `Array.push(original)`は参照になる。
1. `Array.push(Object.assign({}, original))`を使おう。

# はじめに

次のようなプログラムを作成したときに、正しいnoが得られないトラブルが発生した。

“`javascript
result = [{a: ‘a’}, {a: ‘b’}, …];
for (let i = 0; i < result.length; i++) { a.push(result); if (適当な条件) { b.push(result); } else { c.push(result); } } // Aに対する処理 for (let i = 0; i < a.length; i++) { // ... a[i].no = i; } // Bに対する処理 for (let i = 0; i < b.length; i++) { // ... b[i].no = i; } // Cに対する処理 for (let i =

ブラウザマイニングといふものを我もしてみむとてするなり

> 他人のパソコンを無断で使って暗号資産（仮想通貨）のマイニング（採掘）をするプログラムをウェブサイトに置いたとして、不正指令電磁的記録保管の罪に問われたウェブデザイナー、諸井聖也被告（34）の上告審判決が20日、最高裁であった。第1小法廷（山口厚裁判長）は「パソコンに与える影響はネット広告と大差なく、社会的に許容できる範囲内だ」として、逆転無罪を言い渡した。無罪が確定する。

引用：日本経済新聞

https://www.nikkei.com/article/DGXZQOUE178IR0X10C22A1000000/?utm_source=pocket_mylist

普段僕は新聞記事を読まないのですが、ネットサーフィンをしているときに偶然にもこの記事を見つけて、「ブラウザマイニング」というものを知りました。

##ブラウザマイニングとは

仮想通貨の取引記録の更新のために計算処理を行うことを「マイニング」といい、マイニングを成功させた場合、新規発行された仮想通貨が報酬として支払われます。

これをブラウザで行うそうです。具体的には、HTML等にマイニングを行うスクリプトを

ReactとFirebaseでギターマニアのためのSNSを作った話

Qiita初投稿です。

#いきなりですが
今回作ったSNSはこちらになります。

https://my-newgear.web.app/

https://github.com/rokina/mynewgear

####その名もmy new gear…
####新しく手に入れた楽器や機材を共有するためのSNSです。

#my new gear…って何？
「__my new gear__」とは、新しい楽器や機材を手に入れたことを
Twitter等のSNSに投稿する際に使われる文言です。


Twi

create-react-appを使わないでReact環境構築してみる。

## create-react-appを使わないワケ
12月初旬に、「create-react-app」を使ってプロジェクトを作成し、eslintのルールを変更しました。

“`
npx eslint –init
“`

で、「.eslintrc.js」を作成しルールを書き、VSCodeで指摘されることを確認しました。

ある程度コードを書いて

“`
npm start
“`

としたところエラーが発生しました。

原因は、「create-react-app」で使われている「eslint」がV7系で、「eslint –init」で追加されるプラグインなどが「eslint V8系」なためでした。

2021年12月14日に、webpack5、eslint8が採用した「create-react-app　V5」がリリースされ問題は解決しました。

「create-react-app」は、

– コマンド一発で環境構築できる
– テンプレートが豊富
– eslint、webpackなど全て設定済み

なのは良いのですが、少し設定を変えようと思うと今回のようにエラーが起こります。

ことのはたんご – 単語推測推理ゲーム「Wordle」日本語版

# この記事の内容
　[Wordle](https://www.powerlanguage.co.uk/wordle/)の日本語版である「ことのはたんご」を作製する際に利用した辞書の説明および辞書の解析。

# 作製したゲーム紹介

ことのはたんご

https://plumchloride.github.io/tango/index.html


HIT & BLOW (マスターマインド)」や「ヌメロン」といったゲームを初めとした推理ゲームの単語版
推定プレイ時間：5～30分 /日
ジャンル：推理ゲーム

# 注意書き

　本アプリケーションは営利目的での展開はしていません。
　著者によるリンク先でのアクセスログの取得や広告の掲示は行っていません。

:::note warn
ここより下は本ゲームの開発における技術的な話等を記述し

pm2のインストールではまってしまった人へ

# 結論

お使いのyarn.lockやらpackage-lock.jsonを削除してみよう。

# どうしてこうなったか

インストール時にyarnがダメだったからnpmとかまたはその逆とかでインストールしていたなあ。という記憶が蘇ってきたので多分それ。