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

【JavaScript初心者】ババ抜きを作った。

JavaScriptの勉強のため、ババ抜きを作りました。
遊んでみるのもよし、自作して私のものと比較してみるのもよしだと思います。
#本記事の環境
※PCに環境構築を行う必要はありません。
WEBブラウザ(Google Chome)
テキストエディタ

# ババ抜きとは
ババ抜き（Old Maid、Lose with the Joker、Joker Game）とは、複数人で行うトランプの遊び方のひとつ。始めに同数のカードを人数分配り、一枚ずつ他者から抜き取り同じ札があれば捨て、最後にジョーカーを持っている人が負け。
https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%90%E6%8A%9C%E3%81%8D

#要件・仕様
* 言語の勉強が主目的なので、見た目はこだわらない。
* 言語の勉強が主目的なので、処理は小分けにするし、コメントも残す。
* フレームワークは使わない。
* 基本的なババ抜きのルールに準ずる。
* 4人対戦とする。
* 勝敗くらいは表示する。
* プレイヤー1人、CPU3人とする。
* プレイヤー01がプレイヤー02の手札を

[js]文字列操作、配列操作

# ?[js]文字列操作、配列操作

≪いろいろ≫ 見つける系、etc…、2次元配列を1次元配列、配列かどうか判定、etc…
≪エンコード/デコード≫ URL形式、Unicode形式、base64形式
≪文字列切り出し≫ substr、substring、charAt、indexOf、search、mutch
≪配列操作≫ slice(n1,n2), splice(n1,n2,n3…), toString, split, join, pop

なんだかんだしょっちゅう見返してる…
詳しい解説とか説明とかないです、見返し用なので(自分が)見たらわかる程度の説明文…
なのである程度jsが分かってる人向けかも…

## ※前書き
・jsのコードを、色付きとか変数を図形類(例:○や△や□など)でメモることが多く、それが自分にとって一番わかりやすいので、個人的メモをQiitaに移行する意味合いが大きいこの記事ではmarkdown記法の｢コード｣をコード部分で使ってないことが多いです。
・これは、初めの頃、一言一句(大文字と小文字さえ)違ったらいけないカ所と、(引数,変数など)自

定期的にネットワーク速度を計測してスプレッドシートにまとめる part2

## できたもの

こんな感じで1時間ごとに自宅のネットワーク速度を計測してGoogleスプレッドシートにまとめてくれるようになりました。


ネットワーク計測とGASにPOSTをリクエストするスクリプトの作成とGASでウェブアプリの作成が主な作業内容です。

下記を参考に作成しました。

https://qiita.com/tomatosum/items/40cc34015b1aa96bfc63

part1でネットワーク速度の計測までできたので、
スプレッドシートにまとめられるようにウェブアプリケーションを作成します。

## GASでウェブアプリケーション作成

スプレッドシートをひらいて 拡張機能 -> App Script を選択します。
開いた先で、下記のコード記述します。

“`jav

定期的にネットワーク速度を計測してスプレッドシートにまとめる part1

## できたもの
こんな感じで1時間ごとに自宅のネットワーク速度を計測してGoogleスプレッドシートにまとめてくれるようになりました。


ネットワーク計測とGASにPOSTをリクエストするスクリプトの作成とGASでウェブアプリの作成が主な作業内容です。

下記を参考に作成しました。

https://qiita.com/tomatosum/items/40cc34015b1aa96bfc63

## ネットワーク速度の計測
pythonのツールであるspeedtestを使用して計測します。

https://github.com/sivel/speedtest-cli

まずはインストールします。

“`bash
$ pip install speedtest-cli
“`

これで計測できる

Reactのstate hookに値を変更した配列を渡してもre-renderされなかった

タイトル通りです。
JSのArrayは参照渡しということがわかっていなかったのと、ReactのuseStateの理解が浅かったことが原因で若干時間をとってしまいました。

# 起こったこと

(コンポーネントの設計が色々とアレなのは許してください…)

一覧表示画面を実装していました。

“`jsx
//色々略

const App = () => {
//略

const [blogs, setBlogs] = useState([])

//略

return (

{/*略*/}

{user && }

)
}

export default App;
“`

↑のBlogListというのが一覧です。中身はこうなっています

“`jsx
const BlogList = ({ blogs, setBlogs}) => {
return (

{blogs.map(b

(JS) 　Strorageオブジェクトでストレージデータを保存する

#はじめに
Webアプリでは、クッキーを利用することで、クライアントに対して、小さなデータ（テキスト）を保存することができます。
しかし、JavaScriptでは、クッキーを操作しにいので、代わりにWebStorageを利用し、データを保存することがおすすめです。
ストレージは、データを特定するキーと値の組み合わせで保存されます。

#ストレージにデータを保存する
“` storageData.js
// localStorageプロパティの戻り値を変数に格納
let storage = localStorage;
// 保存方法①
storage.setItem(‘lang1’, ‘JavaScript’);
// 保存方法②
storage.lang2 = ‘PHP’;
// 保存方法③
storage[‘lang3’] = ‘Ruby’;

// 取得方法①
console.log(storage.getItem(‘lang1’)); //JavaSciript
// 取得方法②
console.log(storage.lang

関数の省略記法(returnの省略)

#関数の省略記法
関数の省略記法は、今回使っている返り値のある場合を想定します。

“`
//省略しない場合
const add1= (a) =>{
return a + 1
}

//省略した場合1
const add2= (a) =>( a + 2 )

//省略した場合2
const add3 = a => a + 3
“`

以上の様にreturnを書き、その中に返り値を書くのが基本的な書き方ですが、returnを省略することができます。
ただ省略した書き方の場合は()で書いた中身全てがreturnの中という状態になりますので、定義等がかけません。
つまり、

“`
const add4 = (a) => (
const b = 1
a+b
)
“`

の様には書けないということです。

それでは本題のコード。

“`
messages.map((message, index) => ( //<-ここが普通のかっこになっている const formatTime = `${message.timestamp.getFullYear()

いつも邪魔してくるturbolinksとはなんぞや

こんばんは、たにーです。

最近チーム開発と色々やることが多くなかなか書けずに、、、
とりあえず今日時点まで学んだことを振り返りながら記事にしていきます。

今日は、タイトルの通り、
####「turbolinks」とはなんぞや
です。

Rubyのフレームワークである**Ruby on Rails**を使ったことがある人なら
恐らく、**こやつ(turbolinks)**のせいで、上手く動かない、反応しないなどの経験があると思います。
私自身も経験があり、turbolinksに邪魔されてきた初学者です。泣

だだ、私自身こやつのことを何にもわかっていません。
なので、今回は、tubolinksの正体？機能？必要？不必要？について
書いてきますのでよろしくお願いします。

#そもそものturbolinksって？

**Asset Pipeline を活用しているアプリケーションにおいて画面遷移を高速化するライブラリです。**

、、、僕はいまいちピンと来ず理解できません。

なので、分解します。

##Asset Pipelineとは

**複数のディレクトリやファイルに分かれたass

Java script 学習１

##console.log##

・「console.log(“○○”);」というコードを書くと、()の中の○○という文字がコンソールに出力される。

・console.log() は丸括弧 () 内に入力された文字をコンソールに出力する。

・文字列は、シングルクォーテーション（ ‘ ）かダブルクォーテーション（ ” ）で囲む必要がある。

・文の最後はセミコロン（;）をつける

““
console.log(“hello world”);
→//hello world という文字列で表示
““

##四則演算##
**演算子**（計算の為の記号）を用いて計算する

““
console.log(10 + 3); 　//足し算 (13)
console.log(10 – 3);　//引き算 (7)
console.log(10 * 3);　//掛け算 (30)
console.log(10 / 3);　//割り算 (3.33333….)
console.log(10 % 3);　//整数のあまり（この場合１）
console.log(10 ** 3);　//10の３

web audio api を使い、audioタグから取得した音声の音波を表示する ( javascript )

タイトルのとおり、audioタグから音声を取得し、web audio api を用いて音波を表示できるようにします。（ついでに、音量、再生位置、panをユーザーがブラウザを通して動的に操作できるようにします。）
本記事の大まかな流れは以下の通りです。
　１，　開発環境の準備
　２，　web audio api を使った音声の再生、音波の表示

最終的なディレクトリは次の通りとなります。

“`
root/
├ html/
│ ├ index.html
│ └ index.js
│
├ audio/
│ └ audio.mp3
│
├ nginx/
│ └ default.conf
│
├ DockerfileNginx
└ docker-compose.yml
“`

1　開発環境の準備

　最初にwebサーバーを立てて、httpによってhtmlファイル、オーディオファイルを開けるようにします。web audio apiということだけあって、webサーバーを立てないと、オーディオフ

Google Blocklyを使って、ブロックの組立てた後、プログラミング言語（JavaScript,PHP, Python.. etc）を自動生成してみた

#### Google Blocklyとは？
– 2013年にgoogleにて、公開されたビジュアルプログラミングツールです。
– 様々なコンテンツがありますが、その一部を紹介します。ブロック組み立て後は、プログラミング言語（javascript, PHP, Python.. etc）を自動出力できるページです。
– 今回の利用したページ： [Blockly > Demo > Code Editor](https://blockly-demo.appspot.com/static/demos/code/index.html)

#### 今回のお題
4桁の入力チェック

#### 今回の処理のイメージ

#### 今回のブロック
1. 入力ウィンドウ
2. 三項演算子
3. 文字列の出力

#### 今回組み立てたブロック

【React】関数コンポーネントとクラスコンポーネント

ここ２，３ヶ月Vue、Laravel、Docker、AWS、Stripe、Firebaseを中心に禿げるくらい学習をしてきましたが、最近Reactの学習にも手を入れています。

今日はそんなReactで**関数コンポーネント**と**クラスコンポーネント**の違いを初心者なりに解説していこうかなと思います。

#this問題の解決#

まず初めに、関数コンポーネントとクラスコンポーネントの大きな違いは何か。。。

それは、、、

**this**を使わなくていい！！

Javasciprtの“this“って保守性に欠けますよね。

Vueをやっていて特に感じました。

見直したときに“this“は何を示しているのか。

汎用性が高い分保守性にかけてしまう。

コードを綺麗に書けない僕にとっては致命的です。

それを解決してくれるのが**クラスコンポーネント**！！！

実際に書くとこんな感じ。

“`App.jsx
const App = () => {
const [count, upCount] = useState(0)

const counter = ()

シンプルで使いやすい画像Base64変換ツールを作ってみた

# はじめに

こんにちは、システム開発チーム「presto」です。
開発業務（プログラミング中）に「こんなツール、あんなツールが身近なところにあったらいいなぁ」と思ったことはありませんか？

ここではそんなツールをVuetifyを使って作ってみたので紹介させてください。

# 画像Base64変換ツール

今回紹介させていただくのは、画像Base64変換ツールです。

## 機能

機能は２つあります。これらの機能はタブで切り替えて使用します。

– [画像からBase64文字列へ変換](#画像からbase64文字列へ変換)
– [Base64文字列から画像へ変換](#base64文字列から画像へ変換)

画面は以下の通りです。
![Base64から画像へ変換](https://qiita-

備忘録: Django REST frameworkとReact(TypeScript)でInstagramのクローンアプリを作成

#事前知識
– anaconda navigatorはPython開発のためのディストリビューション(コンパイル済みのソフトウェアの集まり)
– jwtという認証トークンを使用する
– djoserとはjwtトークンを簡単に使用するためのサードパーティー
– django-cors-headersはReactからのアクセスを許可するために必要になってくる
– Pillowは画像データを扱うために使用する

#仮想環境を構築する
1. Environments項目のCreateを選択
2. Nameを入力し、Packages(Python 3.7)を選択
3. 再生ボタンをクリックし、ターミナルを開く
4. anaconda navigatorにて仮想環境（python3.7）の作成し、必要なものをインストール(下記コマンド)

“`
$ pip install django==3.0.7
$ pip install djangorestframework==3.10
$ pip install djangorestframework-simplejwt==4.6.0
$ pip i

Ransackで全角半角不分別の検索を行う

*600 Contributions達成記念*

# TL;DR
入力されたキーワードを加え、全角、半角バージョンを追加して、`_any`をつけて検索します。

“`rb
User.ransack({name_cont_any: [‘テストﾃｽﾄ123abC’, ‘ﾃｽﾄﾃｽﾄ123abC’, ‘テストテスト１２３ａｂＣ’]})
“`

# 全角<=>半角変換
## 英数字
### 半=>全
“`rb
“abc123”.tr(‘0-9a-zA-Z’, ‘０-９ａ-ｚＡ-Ｚ’)
=> “ａｂｃ１２３”
“`

### 全=>半
“`rb
“１２３ａｂＣ”.tr(‘０-９ａ-ｚＡ-Ｚ’, ‘0-9a-zA-Z’)
=> “123abC”
“`

## カタカナ
### 全=>半
“`rb
require ‘nkf’

NKF.nkf(‘-w -x -Z4’, ‘イロハ’)
=> “ｲﾛﾊ”
“`

### 半=>全
“`rb
NKF.nkf(“-w -X”, “ｲﾛﾊ”)
=> “イロハ”
“`

# `OR`検索
こんなレコードがあると仮定します

“`js
#

a == 1 && a == 2 && a == 3を成立させる

# 初めに
この記事は前回の記事の[ゼロ幅を利用した難読化](https://qiita.com/ikesou/items/033c4afbdec3c4ea0323)の小ネタの内容です。

javascriptの == を利用した比較は以下のとおりに評価が行われます。
この評価方法を利用して条件を成立させます。

# 成立させる方法
### 1. ToPrimitiveの動作を利用
“`js
var a = {
value : 1,
valueOf: function () {
return this.value++;
}
};
if (a == 1 && a == 2 && a == 3) {
console.log(‘ok’);
} else {
console.log(‘no’);
}
// ok

“`

【AWS＆Firebase】SESとTrigger Emailを連携してみた

どうもアッキーです。

毎日記事を更新しており、ついに１００個近くまで迫ってまいりました。

やっぱりアウトプットはいいですね。

と言うことで今回は、AWSのSESとFirebaseのTrigger Emailを連携させてみたいと思います。

SESでの設定は割愛します。

もしまだSESでの設定を行っていない方は以下の記事をご覧ください。

・[【AWS】AWS初心者がRoute53＋SES＋S3＋Lambdaを使って、独自ドメインに送られてきたメールをGmailに転送してみた](https://qiita.com/akki-memo/items/71cab2a38a0c5a6d904f)
・[【AWS】AWS初心者がRoute53＋SESを使って、独自ドメインでGmailからメールを送信してみた
](https://qiita.com/akki-memo/items/616671ccb009a0202113)

SESの設定が済んでいる艇で話を進めていきますのでご了承ください。

それでは参りましょう！

#認証情報の作成#

恐らくSESで既に設定を終えている方は、１度SMTP

useEffectとは

#useEffectとは

外部(APIなど)との通信や、DOMの直接的な更新等、関数の外のスコープに影響を与えるような処理は、副作用と呼ばれる。
Reactコンポーネントにおいて副作用を扱わなければならない場合、useEffectを使用して記述することが推奨されている。

“`javascript

useEffect(() => {
firebase.auth().onAuthStateChanged(user => {
setUser(user)
})
}, [])
“`

第一引数には、副作用として実行する関数を与える。
useEffectに指定することで、副作用は、コンポーネントの描写が終わった後に実行される。

また、第二引数には、副作用を実行する頻度を設定することができる。
第二引数を与えなかった場合、コンポーネントの描写後、毎回実行される。
第二引数に配列を与え、要素として変数を指定すると、指定した変数に変更があった場合のみ実行される。
今回のように空の配列を与えた場合には、初回描写時にのみ実行される。

今回は指定の頻度で十分だった

kintone上でWebSpeechAPIを利用して音声認識して文字起こしする。

### 本記事を読むにあたっての注意点
動作実行を確認できた段階でのコードになりますので、記法の不統一、コーディングの不備不足、機能の少なさなどがございます。実装は可能でしたので参考にしつつあなた自身のコーディングをしていただけたら幸いです。

### 前提知識
– kintone
– JavaScript (kintone JavaScrip API)
– HTML
– WebSpeechAPI

### 実装後イメージ

### プロセス
1. 録音開始、終了ボタンを設置
1. 認識した音声を表示させる\を設置
1. WebSpeechAPIを設定しボタンを機能させる（録音開始、録音終了、同時に文字起こし）
1. kintone JavaScript APIで、レコード保存するとkintoneのフィールドに文字列が転記させ

stringやnumberがtruesyかfalsyかでbooleanを代入したい時

stringやらnumberやらがtruesyかfalsyかでbooleanを代入したい時があると思うが、
そういう時に

“`typescript
if (str) {
object.bool = true
} else {
object.bool = false
}
“`
とか

“`typescript
object.bool = str ? true : false
“`
と書くのがとても煩わしく感じた。

これは、実は

“`typescript
object.bool = !!str
“`
これで対応できる。

## しくみ
特別な構文を使っているとかそういうわけではない。

“`typescript
!str
“`
こう書くと「””」ならtrue、「”hoge”」ならfalseになる。
それをさらに反転しているだけ。

“`typescript
!!str
“`
「””」なら!true、つまりfalseが取れるというわけ