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

【JavaScript関数ドリル】中級編のdifference関数の実装アウトプット

## difference関数の課題内容

_. difference関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#difference

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】difference関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例では引数が配列でない場合の処理を実装しているので、その点も考慮できるようにしたい。

## difference関数の実装コード（答えを見る前）
“`javascript
function difference(array, values) {
const diffArray = [];

if (!Array.isArray(values)) {
return […array];
}

for (let i = 0; i < array.length; i++) { if (

[2022年]初心者向けおすすめJavaScriptプログラミング書籍(参考書)

初心者向けおすすめJavaScriptプログラミング書籍を紹介します。
プログラミングやIT系の勉強するときはKindleや電子書籍で勉強するのがおすすめです。
***
[確かな力が身につくJavaScript「超」入門 第2版[Amazon]](https://amzn.to/3aXnGTV)
・ES6（ES2015）に対応。ES6の機能・文法のうち、入門者向けにやさしいところ、便利なところを紹介
・古い情報を2019年現在の状況にあわせて全面的にアップデート
・3章、4章、5章、6章のサンプルの更新。解説内容をより丁寧にわかりやすくブラッシュアップ
・7章は全面刷新し、より現代的・実践的なテクニックを学べる内容に
– Chapter1　イントロダクション
– Chapter2　アウトプットの基本
– Chapter3　JavaScriptの文法と

AxiosでSlack botによる通知を送信する

## 前提
Slack APIでwebhook URLを取得済み

## コード

“`js
import axios from ‘axios’;

const notification = (content, image_url) => {

const data = {
“text”: “料理が新しく投稿されました!”,
“attachments”: [{
“fields”: [
{
“title”: content,
“value”: content,
}],
“image_url”: image_url
}]
}

axios.post(
{WebhookのURL},
JSON.stringify(data),
// corsエラー回避
{

【JavaScript】範囲(Range)について図解で理解する。

# JavaScriptのRangeについて、よく分からなかったので、図を交えて理解してみました。

# Rangeについて

Rangeとはざっくり言うと、HtmlにおけるDOMの範囲を保持するオブジェクトです。

例えば、以下のようにDOMの範囲を指定したい時に使用します。
rangeを使用することにより、指定した部分を削除したり別のDOMに置き換えたりする事が可能となります。

Rangeオブジェクトは以下で作成することができます。

“`js
const range = new Range();
“`

Rangeオブジェクトは、6つのプロパティーを持ちます。

1. startContainer
1. startOffset
1. endContainer
1. endOffset
1. collapsed
1. commonA

【React】公式のチュートリアルをやってみる～⑦勝利判定を追加

[【React】公式のチュートリアルをやってみる～⑥プレイヤーの追加](https://qiita.com/asahina820/items/0ec1d8a898cc54179b05) の続きです。
プレイヤーを交互に指定できたので、最後に、勝利判定ができるようにしてみましょう。

## 勝利判定を追加する
### 勝利を判定する関数を追加する
“`diff_jsx
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i =0; i < lines.length; i++) { const [a, b, c] = lines[i]; if(squares[a] && squares[a] === squares[b] && squares[a]

フロントエンドノート

**[ノートリンク](https://github.com/wly130/notes/tree/master/%E7%AC%94%E8%AE%B0/%E5%89%8D%E7%AB%AF)**
### 私が自分で整理したメモは、ほとんどのフロントエンド関連の問題を解決できますが、言語は中国語です

私は中国のフロントエンドエンジニアです

### 私は中国のフロントエンドエンジニアです。語学学校で日本語を勉強しており、将来は日本で働く予定です，フロントエンド関連の担当者のコミュニケーションを歓迎しますHTML

勉強メモ53_JavaScriptの「URLエンコード、デコード」及び「4つのグローバル関数（encodeURIComponent、encodeURI、decodeURIComponent、decodeURI）のエンコード、デコードの処理の違い」

# URLエンコード、デコードとは
・URLエンコードとは、URLに使用できない文字が含まれる場合に、使用できる文字に変換する処理のことです。
・URLデコードは、逆でURLエンコードされた文字を元に戻す処理のことです。
・URLエンコードおよびデコードは、データをクエリ文字列としてWebサーバーに送信する場合などで使われます。
・JavaScriptでは、URLエンコードおよびデコードを行うための関数をグローバル関数として用意しています。

# 以下、URLエンコードおよびデコードを行うグローバル関数（encodeURIComponent、encodeURI、decodeURIComponent、decodeURI）のエンコード、デコードの処理の違いになります。
|関数名 |説明 |
|—|—|
|encodeURIComponent(引数) |引数の文字列をURLエンコードする。
ただし、英数字と「-」、「_」、「.」、「!」、「˜」、「*」、「’」、「(」、「)」は対象外 |
|encodeURI(引数) | 引数の文字列をURLエンコードする。

JS 公開鍵 暗号化 => PHP 秘密鍵 複合

メモ。
[ここ](https://qiita.com/buntafujikawa/items/51de0847232a117b272a)を参考にしたけど、自分の環境だとcrypto モジュールがうまく設定できなかったので、JSEncrypt を使う。

“`shell
# JSEncryptを入れる
$ yarn add jsencrypt
“`

“`JavaScript:JavaScript
import JSEncrypt from ‘jsencrypt’;
import axios from ‘axios ‘;

// 公開鍵取得
const publicKey = await(async()=>{
const res = await axios.get(‘/crypt/publickey’);
return res.data || “”;
})();

// 暗号化
var encrypt = new JSEncrypt();
encrypt.setPublicKey(publicKey);
var encrypted = encrypt.encrypt(“ho

思い立って3時間で画像ダウンロードサイトを立ち上げたときのデプロイ譚

ひょんな事から、画像ファイルの配布（だけの）サイトがあったらいいな。という話になったので、じゃあ久し振りにやってみようという事になったのですが、ここ数年でも意外と色々環境が変わっていたり、すっかり忘れていたりして戸惑った部分があったので、デプロイ譚としてここにまとめ＆公開をさせて頂こうと思います。
いたらない実装や建て付けなどもあると思いますが、意外と必要な要素が凝縮されていると思うので、始めてトライする人や同じようなことをしたいという人には面白い内容になるかも知れません。

# 1. サーバーの準備

自宅のサーバーでサイトを立ち上げる時代はとっくに終わっているので、レンタルサーバーを採用します。
AWSのEC2という手もありますが、必要の無いレイヤーは手放すのが昨今の定石です。
EC2も大好きですが、EC2ですとOSやWeb Serverの面倒まで見なくてはならないので、工数もコストもリスクも増大します。

### 1-1. レンタルサーバーを探す

いつも使っていたQuiccaという100円レンタルサーバーを覚えていたので見に行きました。
既に新規会員登録は終了しているということ

【SolidJS】オブジェクトの状態にはcreateStore

# `createSignal` vs `createStore`
`createSignal`を使い、オブジェクトをシグナルとして保存するのは理想的でない場合がほとんどです。

言葉で説明するよりコードを見たほうが早いと思うのでさっそくいきましょう。

## `createSignal`の場合
“`tsx
import { createSignal, createEffect } from “solid-js”;

const App = () => {
const initialUser = () => (
{ name: { first: “John”, last: “Doe” },
age: 69,
}
)
const [user, setUser] = createSignal(initialUser());

createEffect(() => {
console.log(“My age is”, user().age);
});

createEffect(() => {
console.log(“M

【Vue3】Maximum recursive updates exceeded in component解消備忘録

## Maximum recursive updates exceeded in component
どういうエラーかというと、コンポーネントが再起呼び出しされまくってメモリがパンクしていますよというもの。
これの何が厄介かというと、npm run serveで開発しているときは警告なのに、デプロイするとエラーに化けるところ。

私はこれで３日悩みました。


## 具体例 Vue3-Carousel
今回このエラーに悩まされたのは、Vue3-CarouselというCarouselコンポーネントを使っていて、リストレンダリングをする際にどうしてもこのエラーが消えませんでした。
（どんなコンポーネントかは以下を参照）

https://qiita.com/soh_mitian/items/35207

jQuery を読み込まずに、$.ajax 構文だけは使えるようにするためのポリフィル

作成したコード：

“`JavaScript
const $ = (() => {
if (typeof jQuery === “undefined”) {
return {};
}
return jQuery;
})();

$.ajax =
$.ajax ??
(async (url, options) => {
if (typeof url === “object”) {
options = url;
url = undefined;
}

const controller = new AbortController();
const timeoutId = window.setTimeout(
controller.abort.bind(controller),
options.timeout ?? 10000
);

const

JavaScriptのDateオブジェクトと他のオブジェクト同士の四則演算を可能にするには？

# こんにちは

初投稿です。
おかしな点があるかもしれませんが生暖かい目で見てやってください……

今回は、JavaScriptのDateオブジェクトと他のオブジェクトと四則演算をできるようにしたいと思います。

# 前置き

ここでは、以下の四則演算を扱います。

– \+(加算)
– \-(減算)
– \*(乗算)
– \/(除算)

減算は日付の差を求めるために使うのでDateオブジェクトのみでの演算でも一番使用頻度が高いかもしれません。

そもそもDateオブジェクトは四則演算が行えるのでしょうか？
少し例を示してみます。

“`:JavaScript
let date1 = new Date(‘1985/09/13’); //スーパーマリオブラザーズ(初代)が発売された日。
let date2 = new Date(‘2017/10/27’); //スーパーマリオオデッセイが発売された日。

console.log(date2 + date1);
console.log(date2 – date1);
console.log(date2 * date1);
console

Node.js(Express)で書いたJSONデータの受け渡しプログラムをHeroku上で動かしてみる

Node.js(Express)でGETリクエストに応答するだけのプログラムを作れたので、次はクライアント側からPOSTしてなんやかんやするプログラムを作ります。
JSONデータのPOSTを受け取って、そのままJSONデータを返してもらいましょう。
# 結論
どハマりするポイントもなくすんなり書けます。
JSONデータを受け取る、JSONデータを返すができればDB連携のあるプログラム作成も目前感がしてちょっとした進歩感が出てきて嬉しい。

##### 環境
Win10+VSC@1.68
Node.js@16.14.2+Express@4.18.1
##### やろうとしたこと
– Herokuサービス上でNode.js(Express)アプリケーションを動かす
– JSONデータをポストしてJSONデータを返してくれる実装

## やってみる
Herokuにアプリをデプロイするのはこっち参照

https://qiita.com/shichisan21/items/b163e33669763ca6fffc

POSTされたJSONデータを返すプログラムの作成メモはこっち

https

【React】公式のチュートリアルをやってみる～⑥プレイヤーの追加

[【React】公式のチュートリアルをやってみる～⑤関数コンポーネント](https://qiita.com/asahina820/items/19822a54cac199fa1230) の続きです。
まだ盤面にXしか表示されていません。 Oを追加して、交互にプレイできるようにしましょう。

## プレイヤーを追加する
### stateに手番を判定する変数を追加する
“`diff_jsx
class Board extends React.Component {
// コンストラクタ
constructor(props) {
super(props);
this.state = {
squares: Array(9).fill(null),
+ xIsNext: true,
}
}
(略)
}
“`
– stateに`xIsNext`変数を追加して、次のプレイヤーはXかどうかを判定する
– デフォルトではtrue = 先手を“X にする

### マス目がクリックされる度に手番を変更する

“`diff_jsx
cla

[javascript,cssアニメーション]草からテキストが生えてくるアニメーション

テキストを入力するだけでメッセージ動画が作れるサービス[Teloppy](https://teloppy.com “Teloppy”)を運営しております！
その中で用いたアニメーションのコードを一部紹介したいと思います！

まずは、コードの完成形です。

HerokuでNode.js(Express)で書いたHello worldプログラムを実行したい！

サーバ上でWEBアプリ動かしてみようかな！できればMySQLとかのDBとも連携もしたい！
と思ったのでそれらを使えるサーバにデプロイする事にしました。

AmazonのAWSも無料で使えるので検討しましたが、無料期間が限定(12か月)されているのと利用できるサーバ時間の長さでまずはHerokuを使ってみる事に。

# 結論
__Heroku？なにそれおいしいの？状態からでも結構簡単にWEBアプリをデプロイできました。__
実際に手を動かす時間よりは調べている時間の方が長かったかも。

##### 環境
Win10+VSC@1.68
Node.js@16.14.2+Express@4.18.1

##### やろうとしたこと
– Herokuサービス上でNode.js(Express)プログラムを動かす
## やったこと
まずは小さな小さな成功体験から。

Herokuに登録します。超簡単成功体験。
日本語でしっかり書かれているのは嬉しいです。

https://jp.heroku.com/

Herokuとは何か？については端折ります。
ざっくり言うとWEBアプリを動かせるサーバ環境を

【JavaScript関数ドリル】中級編のchunk関数の実装アウトプット

## chunk関数の課題内容

_.chunk関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#chunk

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】chunk関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例では第二引数が想定通りでない場合の処理を記述していたので、勉強になった。
– 解答例ではWhile文とsplice関数を使用してシンプルに記述されているので、こういった記述ができるように参考にしたい。

## chunk関数の実装コード（答えを見る前）
“`javascript
function chunk(array, size = 1) {
const chunkArray = [];
let tempArray = [];
let currentLen = 0;

for (let i = 0; i < array.length;

【JavaScript関数ドリル】中級編のconcat関数の実装アウトプット

## concat関数の課題内容

_.concat関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#concat

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】concat関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例ではforループ内でも変数をしようしているのを除いては、同じように実装できたので、よかった。

## concat関数の実装コード（答えを見る前）
“`javascript
function concat(array, …values) {
const concatenatedArray = […array];

for (let i = 0; i < values.length; i++) { if (Array.isArray(values[i])) { concatenate