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

【個人開発】エンジニアは全員サーフィンやるべきだと思ったので、サーフィンしながらタイピングできるサービスを作ってみた。

# はじめに


エンジニアやエンジニア志望の皆さん、最後に海に行ったのはいつですか？

元々インドアで仕事や勉強をしがちで、コロナ禍もありよほど好きな人でなければ1年以上海に行ってないのではないでしょうか？

申し遅れました、りゅうじと申します。

【Twitter】

[https://twitter.com/otokomigakimasu](https://twitter.com/otokomigakimasu)

【今回作ったサービス】

[https://surf-typing.herokuapp.com/](https://surf-typing.herokuapp.com/)

サーフィンが好きでよく海に行く私は、普段インドアで仕事や学習を頑張っていらっ

Amplifyで条件付きでリアルタイム更新 (subscribe) する

# 概要
Amplifyが `@model` で自動生成してくれるsubscriptionは何でもかんでも通知してくる。チャットを例にすると、チャットメッセージが投稿されたらどのチャットルームだろうが通知してくる。しかし現実的には特定のチャットルームの通知しか受けたくないはずだ。

[公式ドキュメント](https://docs.amplify.aws/cli/graphql-transformer/examples#filter-subscriptions-by-model-fields-andor-relations)にそういう場合の対応が書いてあるのだが、分かりづらいのと最後まで書かれていないのでやり方をメモ。

# 前提
例として、下記のようなスキーマが存在するとする。
Chatがチャットルームで、ChatMessageがその中でやり取りされるユーザのメッセージだ。

“`graphql:amplify/backend/api/myqpi/schema.graphql
type Chat @model {
id: ID!
title: String!
}

type

React ✖️ Typescript Todoアプリ

# 概要
今回はreact × typescriptで簡単なtodoアプリを作成します

# 必要なインストール
– @material-ui/core
– @material-ui/icons
– firebase
– react-router-dom

# 1. firebaseとreactを連携させる
firebaseの初期設定を行い,
firebase.tsファイルでfirebaseのそれぞれのキーを読み取り、initializeします
❇︎今回この内容は省略します

# 2. databaseの内容を表示させる
今回、databaseにあらかじめtasks -> {id: , title: }　というデータを作成
その内容を取得し、表示させることが目的

1 . useStateでtaskの状態を管理する。 初期のidとtitleは空

“`react
const App: React.FC = () => {
const [tasks, setTasks] = useState([{ id: “”, title: “” }]);

return

仕様変更に負けないでWeb版のTinderで自動スワイプする

非エンジニアの方も自動スワイプしましょう
他の記事もたくさんあると思いますが、仕様に負けないように一手間加えます

##ブラウザでスワイプする画面を開く
https://tinder.com/

##Likeボタンを右クリックして開発者ツールを開く

##buttonタグを探す

##末尾をこのように変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1866085/e0a7668b-21dd-ce37-

Node.jsからVOICEVOXを使ってみる。

思い出しながらソースをペーストしているので違ってる部分もあるかも
解説というより思い出す為のメモ程度だと思ってください。

# VOICEVOXとは
つよつよエンジニアが作った音声読み上げソフト、詳しくはここ見て
https://voicevox.hiroshiba.jp/

# こんなツイートがあったので試してみた

「 #VOICEVOX を外部のソフトウェアから使えますか？」という質問をよく貰います。すごく簡単に使えます！

VOICEVOXの音声合成エンジンはローカルにHTTPサーバーが立っているだけなので、こんな感じでPOSTを叩けばテキスト読み上げができます。
詳しくは localhost:50021/docs をご覧ください。 入口に設置しよう！たのしいマスク判定機

#なんのためのもの？

お店に入る時に検温器はありますが、マスク「してる」「していない」を判定するものは無いですよね。
ピクトグラムのような張り紙にお願いが書かれていることはよく見かけます。
例の感染症が流行り始めて1年半くらい経ちますが、この先も暫く気を付けないといけないと思います。
**判定するアプリケーションがあったらきっと役に立つはず…！**

#ということで、つくってみた

丁度いい技術があったので実際にプロトタイプを作成してみました。
　:point_down_tone4:　こちらからお試しいただけます。（読み込みに時間がかかる場合がございます。）

元記事を表示

console.logを一括削除するコマンドを作ってみた

# コマンド
### バックアップを作成し、console系関数が記述された行を削除

“`
find . -name “*.js” -type f -exec perl -ni.rbak -e ‘print if !/console.*/’ {} \;
“`

### バックアップファイルを削除

“`
find . -name “*.rbak” -type f -exec rm -f {} \;
“`

# 注意
このままターミナルに入力すると、現在の階層以下に存在する全てのJavaScriptファイルに対して”console.”の記述がある行が削除されます。特定のファイルにのみ適用したい場合は、-nameオプションに正しくファイル名を指定して下さい。

また、仕組みは単純なコマンドですが、暇つぶしで作ったものなので、正しく動作しない恐れもあります。必ず差分を確認しながら実行するようにして下さい。

最後に、Perlという言語の正規表現を使っております。大抵のPCには最初からインストールされていると思いますが、もしない場合はこちらをインストールしてから実行して下さい。

#

元記事を表示

【JavaScript】「とりあえず」でjavascript:void(0)を使うな！！

# まず初めに
最近よく、

“`html
リンク
“`

というHTMLのコードを見かけるようになりました。
しかし、__void関数の意味を理解せずに適当に使っている人が多く__、

“`html
リンク
“`
のような、__全くもって意味の無い使い方をしている方も見受けられます。__
なので、本記事では__void関数の仕組み、利用目的、利用方法などについて解説したいと思います__。
# void関数ってなんぞや？
まず、void関数について説明したいと思います。
__void関数は、引数に何を渡しても必ずundefinedを返す関数です。__
説明は以上です。

、というのも、__void関数は非常に単純な関数で、「真のundefined」を取得する事を目的に作られています。__
# いや真のundefinedってなんだよ
実は、__古いJava

【LINE Messaging API＆Google Sheets API】プッシュ通知で週末に家計簿を通知

# はじめに
[前回](https://qiita.com/tacchan5424/items/eae56319e9b84692edfe)は応答通知を作成したので、今回はプッシュ通知に挑戦してみました。
正しい実装かどうかは不明ですが参考程度になりましたら幸いです。

# 背景
今年の6月からGoogleのspreadsheetを使って家計簿をつけ始めました。
最初はいくら使ったのか気になって、お金を使ってもいないのに見ていました。
7月は興味が薄れて最終的に何にどれくらい使ったか、把握できていませんでした。

そこで、決まったタイミングで支出がどのくらいになっているのか通知しれくれたら便利だなと思い作成しました。

# アウトプット
このようになります。

# 目次
・[LINE Developersの登録とチャンネル作成](#line-de

【まとめ】クロスブラウザなブラウザ拡張を開発・審査・公開するまで【Chrome拡張】

# はじめに
そのChrome拡張、Firefox や Edge などで出したいと思ったことはありませんか。

しかし、いざやるとなると調べることも多く面倒臭いです。

そこで本記事は「ブラウザ拡張の開発から公開まで」を以下の2点を軸にまとめていきます。

– 開発の工程を減らす
– クロスブラウザ拡張用パッケージによる開発・デバッグ・パッケージ化
– 申請・公開をスムーズに
– 各ベンダーの審査の共通点・相違点をまとめ、準備の負担を軽減

# 対象の読者
– これからChrome拡張などを作りたい方
– ブラウザ拡張のクロスブラウザ対応をしたい方
– ただし Chrome, Firefox, Opera, Edge に限ります
– 各ベンダーの審査の違いについて知りたい方

## 必要な知識
– ターミナルコマンドが打てる
– npmなどが実行できる
– 拡張に必要なJavaScript, CSSなどが書ける

# 作るもの
今回は簡単な例として「Qiita記事のヘッダーを色分けする拡張」を作ります。

Qiita記事の各ヘッダーがこのように表示されるようにします。
!

スクロールアニメーションをvanillaで

## はじめに

前回は、ハンバーガーメニューをvanillaで作成しました。
今回は、スクロールアニメーションを作って見ます。
とは言っても、表示領域に入ったら何らかの処理をすると言う簡単な物です。

コードは以下です。

“`javascript:script
const el = document.querySelector(“.section”);

const options = {
root: null, // viewport
threshold: 0
}
const scrollFunc = (entries) => {
entries.forEach(entry => {
if(!entry.isIntersecting){ return ;}
entry.target.classList.toggle(“inview”)
observer.unobserve(entry.target) // 発火は一回きり
})
}
const observer = new IntersectionObserver(scrollFunc

小技：文字列の文字をランダムに並び替える

非実用的でとてもどうでもいい小技

“`js
‘文字列’.split(”).sort(() => .5 – Math.random() ).join(”)
“`

example

“`js
> ‘L知っているか、死神はリンゴしか食べない’.split(”).sort(() => .5 – Math.random() ).join(”)
“べてっ知死るゴ食、いLリなかし神はいかン”
“`

なんとなくイヌカレー空間ぽい

acornによるAST処理で行端にセミコロンが入らないようにする

# 概要

あんまりニーズないと思いますがacornを使ってJavascriptのAST変換→書き戻しを行う際に、行端へセミコロンを入れたくなかった為、その方法を記載します

# 環境
“`
“acorn”: “8.4.1”
“astring”: “1.7.5”
“typescript”: “4.3.5”
“`

# コード
“`typescript
import { parse } from “acorn”;
import { generate, GENERATOR } from “astring”;
const getCode = (ast: Node): string => {
return generate(ast, {
generator: Object.assign({}, GENERATOR, {
ExpressionStatement: (node: any, state: any) => {
// セミコロンを除外する為、ExpressionstatmentのみExtendsする
const precede

コード内のconsoleを全て無効化する方法【JavaScript】

# コード内のconsoleを全て無効化する方法【JavaScript】

解説は後で付けます

Chromeでしか試してません

“`javascript:remove_console.js

let remove_console_flag=true;//フラグ
let save_console={};//console機能回復用

function remove_console(){

const all_num=Object.keys(window.console).length;//window.consoleのObjectの総数

if(Object.keys(save_console).length){
window.console=Object.assign({},save_console);
save_console={};
}

if(remove_console_flag){
save_console=Object.assign({},window.console);//consoleのオブジェクトをコピー

JavaScript　真偽値　比較演算子　条件式組み合わせ

JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

###真偽値
条件式が成り立つか成り立たないのかを示す出力結果
`成り立つ場合「true」`、`成り立たなければ「false」`になる

###比較演算子

`大小比較`

a `<` b: aよりbが`大きい` a `<=` b: aよりbが`大きい`または`等しい` a `>` b: aの方がbより`大きい`
a `>=` b: aの方がbより`大きい`または`等しい`

または

`左と右の値が等しいかを調べる`

等しい場合　　　a === b
等しくない場合 a !== b

ときに用いる記号

###条件式の組み合わせかた
かつ『&&』 条件式Aと条件式Bが`両方`trueの場合成り立つ
または『||』　条件式Aと条件式B`どちらかのみ`trueの場合成り立つ

JavaScript　条件分岐

JavaScriptの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

##条件分岐とは
ある条件が成り立つ時だけある処理を行えるようにするもの

:::note warn
・セミコロンいらない『;』
・インデントで文字を揃える
:::
##種類と書き方

**if文・・・基本的な条件**

“if(‘条件式’){
　　’処理’
}“

“`js
const tiger = “white”

if(tiger === “white”){
console.log(“ホワイトタイガーが欲しいです”);
}
“`
**出力結果**
ホワイトタイガーが欲しいです

**else if・・・『または』の条件**

if(‘条件式’){
　　’処理’
}“else if(‘条件式’){
　’処理’
}“

“`js
cons

Array.prototype.reduce() の動作確認メモ

## 引数が Reducer のみの場合 ~ reduce(reducer) ~

| arrayの要素数(n) | reducerの実行回数 | 備考 |
|———|————|————|
| n == 0 | – | ❌ エラーがスローされる |
| n == 1 | n-1 (0) | `reducer`は実効されず、`reduce`の戻り値は **`array[0]` となる** |
| n >= 2 | n-1 | n == 2 の場合、引数`array[0]`, `array[1]`で 1 回実行される |

## 初期値も与えられている場合 ~ reduce(reducer, initialValue) ~

| arrayの要素数(n) | reducerの実行回数 | 備考 |
|———|————|————|
| n == 0 | n (0) | `reducer`は実効されず、`reduce`の戻り値は **`initialValue` となる** |

DBDリザルトログアプリ

前回作ったdbdのマップログアプリを拡張したくなったので、いっそのことリザルトをまとめて記録するアプリを作りました。


Githubにあげてみました。

扱う情報

• 勝敗
• キラー
• 残り発電機
• マップ
• キラー使用パーク
• サバイバーそれぞれの使用パーク

開発環境

• node.js
• Ex

[JavaScript]用語一覧

# はじめに
本記事では、JavaScriptを学習した際に、はじめに登場するものを紹介します。
本日、復習したため、アウトプットを兼ねて投稿いたします。

# JavaScriptとは
プログラミング言語の1つで、主にクライアントサイドにおいて使用します。
「ブラウザ上でアプリケーションを便利に使えるように」
「リクエストの送り方の工夫」などをすることができます。

つまり、使い勝手の良いアプリケーションの作成ができるということです。

“`
(ex)カーソルを当てると、ブラウザを更新せずメニュー画面が表示される。
“`

# 用語一覧
### console.log
コンソールにテキストを表示させるメソッドです。
コンソールに引数が表示されます。
Rubyでいう`putsメソッド`と同様の意味があります。

“`js
console.log(“Thank you”)
//コンソール上では、「Thank you」が表示されます。
“`

### var
`再定義、再代入が可能`です。
しかし、誤った記述をすることが多く、現在では、開発現場であまり使われないようです。

“`

M5StickCでまたパスワード入力装置を作った

以前にも、M5StickCでパスワード入力装置を作成しました。一方で、以前パスワード管理アプリ・サーバをPWAで作成していました。
今回は、この2つを組み合わせて、より使いやすいパスワード入力装置を作ります。

以前の記事は以下にあります。

* [PWAを試してみよう](https://qiita.com/poruruba/items/77cbb6448d804e6e996b)
* [M5Stick-Cでパスワード記憶装置 兼 自動入力装置を作る](https://qiita.com/poruruba/items/6e4e29068a28f5ee1711)

ソースコードもろもろは新たに以下のGitHubに上げています。

poruruba/PasswordReminder
※当然ですが、自己責任でお願いします。

https://github.com/poruruba/PasswordReminder

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/48eee577-2