JavaScript関連のことを調べてみた2021年09月20日

【React】面白いhooksを作ったよ！【全員が同じstateを共有する】

# useStateってありますよね

“`typescript
const [state, setState] = useState({count:0, boolean:true})
“`

Reactで最もよく使う状態管理を行うhook、 `useState`。めちゃくちゃ使い心地いいですよね。
でもこの`useState`は、当たり前ですが、**共有されません**。 沖縄県在住のAさんが`setState`で状態を変更しても、東京都在住のBさんの`state`には影響を与えません。 **当たり前ですね**。

# でもそれができたら面白くない？

誰かが`setState`を実行したら、それが**同じページを見ているすべての人に反映されたら**何か面白いことができそうじゃないですか？

# 例え

クリーンなReactプロジェクトの21のベストプラクティス

本記事は、[Mohammad Faisal](https://56faisal.medium.com/)氏による「[21 Best Practices for a Clean React Project](https://betterprogramming.pub/21-best-practices-for-a-clean-react-project-df788a682fb)」（2021年4月23日公開）の和訳を、著者の許可を得て掲載しているものです。

#クリーンなReactプロジェクトの21のベストプラクティス
>コード品質向上のための実践的アドバイス

Photo by [Diana Polekhina](https://unsplash.com/@diana_pole?utm_source=medium&utm_medium=referral) on [Unsplash](https://unspla

Alpine.jsを始めよう！

# はじめに

みなさま、Alpine.jsをご存知でしょうか？
まあ、ものすごく簡単に言うと **かんたんなVue.js** です。
ただでさえJSフレームワークの中では比較的簡単目なVue.jsですが、さらにかんたんです。
どんぐらいかんたんかというと **jQueryと同じかそれ以上** ってレベルです。
しゅごい！
今回はこれを紹介していこうと思います。

https://alpinejs.dev/

# JSフレームワークとは

**SPAとかJSでなんかすごいことやりたいときに入れるやつ** 、くらいの雑な認識で大丈夫です。
いわゆる3大フレームワークと言われているのがお互い影響し合いつつ、競い合っている感じです。
概ねデータバインディング（JS内の変数の値をそのまま出したり、formから書き込んだり）がしたいときに使われることが多いかと思います。

* Angular
* おそらく一番初めに出たJSフレームワーク
* Google製で、Google内で燃えに燃えている案件を鎮火させる過程で生まれたリアル銀の弾丸
* ver1の頃は「AngularJ

#0 TypeScriptでTA○IR○Nを作ってみた ~環境構築編~

## 本記事の内容
こんにちは、エンジニア志望の大学生です。
今回は最近学習をしているTypeScriptのアウトプットのために、とあるパーティー用ゲームを作ってみようと思います。
TA○IR○Nというゲームなのですが、たまたまこのゲームを知る機会があったときに、「これなら割と簡単に作れてTSのアウトプットにもなるんじゃないか？」と閃いたので作ってみようと思います。
本来は2~4人用の対人ゲームなのですが、流石に対人でリアルタイムに通信できるように作るのはハードルが高い（完成までに時間がかかり過ぎそう）ので、対CPUを想定して作ろうと思います（アウトプット程度の気楽な開発なので…）。

完成までにつまずいた箇所や勉強になったこと、エラーの対処などを書き記していけたらと思っています。というか本当に完成できるのか急に不安になってきましたが、これからよろしくお願いします。

## 動作環境
MacOS catalina: 10.15.7
VSCode: 1.60.1
node: v14.3.0
npm: 7.20.3
*書籍: オライリー「プログラミングTypeScrip

eslintを導入したけど、指摘箇所が多すぎて導入しにくい!という困りごとに対処する

## 要約
[eslint-todo-generator](https://www.npmjs.com/package/eslint-todo-generator) を導入しよう

## 困りごと

eslintをプロジェクトの途中から導入したり、運用していく中でルールを途中から変更するとなったときに、指摘箇所が多くて適用しにくい、できないということはありませんか?

eslintは優秀なので `eslint –fix`で規則的な構文は人が手を動かさなくても修正することが可能です

しかし、autofixには稀にバグが潜んでいて意図しない挙動になることもないとは言い切れません
参考: [ESLintの–fixはソースを破壊する！本当？？ – Qiita](https://qiita.com/uk-taniyama/items/a84034e16835e5e63c25)

※ サービスのQAチームが優秀だったり、テストコードがちゃんと整備されているプロジェクトでautofixすることは怖くないというチームはどんどんautofixして行きましょう!

## 対処方法

:boy:

【Laravel】エスケープした文字列をマークアップする方法

#はじめに#
　ポートフォリオ制作の過程で、データベースから取得したデータをマークアップしたい、という課題にぶつかり、見事にハマりましたので備忘録を残していきます。

#Laravelのbladeテンプレート#
　例えば、データベースにこのようなデータを挿入したとします。

>昔々あるところに、おじいさんとおばあさんがおりました。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。

これをmodelで取得、controllerからviewに渡して表示すると、当然そのまま表示されます。そこで、改行を入れたり、おじいさん、おばあさんを赤字で表記したい場合、どうすればいいでしょうか。

データベースから取得したデータをviewで表示する際、bladeテンプレートでは{{ $data }}などとしますが、取得したデータはデフォルトでHTMLエスケープ処理がされているので、自動的にXSS対策がされています。
　実は、{!! $data !!}とするとHTMLエスケープをせずに出力することが出来ます。なので直接HTMLタグを入力すればマークアップすることが出来ますね！！

・・・という

nodeからvueで深みに嵌った件。docker(160)

macOSでdocker起動。

“`macOS:bash
$ docker run -it node /bin/bash
“`

docker 上で

“`ubuntu:bash
# apt update; apt -y upgrade
# npm install -g @vue/cli
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo

銀の弾丸ではないTypeScriptを、何故使うべきなのか

# <まず簡単に>　 TypeScript とは


TypeScript は、JavaScript でも`大規模なアプリケーションを開発しやすくする`ことを目的に開発されたプログラミング言語である。
JavaScript の上位互換であり、JavaScript の文法のまま型などの様々な恩恵を受けることができる。
トランスパイル [^1] することで JavaScript に変換され、これまで通りのブラウザや既存の環境でも動作させることができる。

[^1]: トランスコンパイルの略。別の言語に変換すること。他の言語（C 言語や Java など）のコンパイルのようにマシン語や中間言語に変換しない。

# <技術革新の影に政治的な対立> TypeScript の登場背景

【React】npx create-react-app 直後の npm start でエラーが出た時の対処法

## はじめに

この記事による解決法は M1 Mac 特有の問題だと思われます。

## 結論

Node.js のバージョン変更によって解決出来た。
**v14.16.1 -> v14.17.6**

## どこでエラーが起きたか？

[React のチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)
オプション 2: ローカル開発環境の

“`zsh
npx create-react-app my-app
cd my-app
npm start
“`

を実行するとエラーが発生した。

## ターミナルの表示内容

“`zsh
Starting the development server…

<--- Last few GCs --->

[4684:0x158008000] 1684 ms: Scavenge 73.2 (97.2) -> 64.1 (99.4) MB, 2.7 / 0.0 ms (average mu = 0.990, current mu = 0.990) al

【覚書】ReactDOM.render がコケたかどうかを取得する

React のレンダリングがエラーで失敗したときに
代わりの DOM を表示したいと思ったので調べた

どうやら ReactDOM そのものに
そういうエラーハンドリング機能はなさそうなので、App を細工する。

# というわけでこうした

“`jsx
class App extends React.Component {
constructor() {
super();
}
componentDidCatch(error, errorInfo) {
// ここにエラー時の処理
console.log({ error, errorInfo });
}
render() {
return (

Hello!

);
}
}

ReactDOM.render(, document.getElementById(“app”));
“`

hooks とかはないもよう

firebaseのTimestamp型を日付をnuxtで日付表示する

firebaseからデータ取得するとtimestamp型で帰ってくるので2021/1/11 00:00:00の形式に変換します。
絶対わすれるのでメモ

“`javascript:index.vue

{{ comment[1].name }}

{{ comment[1].comment }}

{{ postedDay(comment[1].posted) }}

methods: {
postedDay (timestamp) {
return (
timestamp.toDate().toLocaleString(‘ja-JP’)
)
}
}

“`

【JavaScript】値を重複させずに配列をマージする

#はじめに
キーをもたない配列をマージする際、同じ値が重複してしまいます。
最初から連想配列(オブジェクト)を使えよ！という話な気もするのですが、念のため、通常の配列で値を重複させずにマージする方法をメモとして残します。

#問題
配列をマージする際に同じ値が重複してしまう。

“`js:array.js
const array1 = [1, 2, 3];
const array2 = [3, 4, 5];
const array3 = […array1, …array2];

console.log(array3);
“`

“`
$ node array.js
[ 1, 2, 3, 3, 4, 5 ]
“`

#解決策
マージした配列を`new Set([…array1, …array2])`でSetオブジェクトにし、一意な値が格納されるようにします。
さらに`Array.from`メソッドでラッピングすることで、オブジェクトから新しいArrayインスタンスを生成します。

“`js:array.js
const array1 = [1, 2, 3];
c

【初学者向け】JavaScriptの三項演算子『?』について

今回はJavaScriptの三項演算子について解説していきます。

#三項演算子とは

三項演算子とは**if文(if~else)の記述を省力して使えるようにした演算子です。**

省略できるといっても
『条件式』『trueの場合の処理』『falseの場合の処理』は**必ず必要**になってきますのでご注意ください。

##if文と参考演算子の記述する際のイメージ

**①if文の場合**

if (条件式) {
trueの場合の処理
} else {
falseの場合の処理
}

[解説]条件式が
trueなら→【覚書】React.lazy で import を使わない

Dynamic import を何が何でも使いたくなかったので調べた。

# こうする

“`jsx
const Hello = React.lazy(() =>
Promise.resolve({ default: () =>

Hello!

})
);
“`

# async/await を使いたいならこう

“`jsx
const Hello = React.lazy(() =>
(async () => {
return { default: () =>

Hello!

};
})()
);
“`

# API からデータを持ってくるときはこう

“`jsx
const Response = React.lazy(() =>
(async () => {
const res = await (await fetch(API_URL)).json();
return { default: () =>

{JSON.stringify(res, null, 2)}

};
})()
);

元記事を表示

PHPとJavaScriptの制御構文の差異まとめ

普段の業務では、JavaScriptをガッと書く時と、PHPをガッと書く時が交互に訪れます。

例えば検索して、結果を表示する機能を作るときは
JavaScriptで見た目部分を作る
↓
PHPでサーバサイドを作る
↓
JavaScriptで見た目部分を作る（再）

といったように、交互にやっているので、
制御構文のちょっとした違いがある2つの言語で
「あれ、これってjsの仕様だっけ、PHPの仕様だっけ」となる自分のための差異まとめです。

PHPとJavaScriptの制御構文は似ている。でも同じじゃない！
（※**そもそも言語が違うだろ**というセルフツッコミ）

# 分岐
## if ~ else
**PHPは’elseif’。JavaScriptは’else if’**

ifの条件には当てはまらないが、条件を指定したい時に使う**えるすいふ**。
PHPでは`elseif`がありますが、JavaScriptに`elseif`はありません。

### PHP: elseif
“`php:php
if ($score > 80) {
echo “優”;
} elseif ($

元記事を表示

JavaScriptで外部画像ファイルを一括ダウンロード

chromeのみで確認
外部ファイルを表示させているサイトから画像をダウンロードしたい時、download属性だけでは機能しないので
クロスドメイン制限回避の為にこれを使うといいかも

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

“`javascript:sample.js
function geturl(index) {
const gallery = document.getElementsByClassName(“classname”);
let url = gallery[index].getAttribute(“href”);
return url;
}

function galleryDownload(i) {
return new Promise((resolve) => {
setTimeout(() => {
let url = geturl(i);
cons

元記事を表示

ブラウザ上の p5.js のプログラムで OSC を使う（サーバー・クライアントは osc-js で実装）

以下の記事の続きです。

●ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】 – Qiita
　https://qiita.com/youtoy/items/efe9b07be57454dec5d5

上記の記事の中で記載していた「[osc-js](https://www.npmjs.com/package/osc-js)」を使い、Node.js でサーバーを用意しつつ、ブラウザ上で動くクライアントも実装してみます（osc-js を使いつつ、p5.js と併用する形）。

## OSC のサーバー（WebSocket を利用するもの）を Node.js ＋ osc-js で準備
[osc-js の Wiki の「Node.js Server」の項目](https://github.com/adzialocha/osc-js/wiki/Node.js-Server)を見つつ、サーバーを準備してみます。

Node.js の npm コマンドで、osc-js を準備します。
今回、グローバルインストールではなくロー

元記事を表示

ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】

こちらの、非公式の toioユーザーコミュニティのもくもく会を開催してる中、試した内容を記事にしてみました。
「JavaScript を使って、かつブラウザ上でも動くもの」というのが自分のやりたい内容です。

こちら、開催中！

●toioで作ってみた！友の会（非公式）第10回オンラインもくもく会 – connpass
　https://t.co/wUZJsZ8657#toio #toiotomo

— you (@youtoy)

元記事を表示

[Javascript] コールバック関数のおさらい

# はじめに
Javascriptでコーディングする時避けて通れないのが非同期処理の実装です。
今回Javascriptで非同期処理を行う際に使用するコールバック関数について復習したのでメモとして残しておきます。
同じようにコールバックの仕組みでつまづいている方の参考になれば嬉しいです。

# コールバック関数とは
「コールバック関数とは」でググると、次のように出てきます。

> コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。
> 引用元: [MDM Web Docs](https://developer.mozilla.org/ja/docs/Glossary/Callback_function)

これだけだと正直意味が分からないので、順を追ってコールバック関数を作成してみます。

# コールバック関数を作成
### 関数とは
そもそもJavascriptにおける関数(function)とは何かからみてみます。

実はこれが一番重要なんですが、
Javascriptでは関数(function)も**値**です。

つまり、N

元記事を表示

これからReact始めたい人のための今日だけでできるTODO #2

TODO#2は「チュートリアルスターターコード」をやってみます。
スターターコードを開きながらチュートリアルを読んで進めるみたいです。
[スターターコードはこちらです。](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)

以降コード例はチュートリアルから抜粋してます。

## データをProos経由で渡す
データの送り元では渡した値の名称を記述今回は「value」を渡します。

“`js
renderSquare(i) {
return ;
}
“`

データの受け先では

“`js
{this.props.value}
“`
と記述することで表示できます。

## コンポーネント内でイベントを付与する
“`js
alert(‘click’)}>
“`
onclickで渡しているのは関数。
`() =>`を記述し忘れるとコンポーネントが再レンダーされるたびにアラートが出ます。。

## sta

元記事を表示