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

Reactの学ぶ日記#1 This is a Instance

今はReactのComponentを学んでいる：

“`
class Tapioka extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ‘tapioka’
tea: ‘black tea’,
mate: ‘creamer’,
sugar: 100%,
ice: 100%,
};
}

render() {
return

{this.state.name}にきめた！

;
}
}

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

React.ComponentはReactが提供するparent classである。上記のTapiokaというchild classように、様々なcomponentsがclassで作れる。React.Componentはt

JavaScriptでアマゾン商品ページから著者を抽出

メモ。

文章やスライド作成時に出典として書籍情報を記載するときなど、できるだけ手間なくAmazonの商品ページから書名、著者名、ASINを取得したい。JavaScriptでの抽出時、書名とASINはページ内に一件なので文字列化が簡単。

“`JavaSCript
title = document.getElementById(“productTitle”).innerText.trim()
asin = document.getElementById(‘all-offers-display-params’).getAttribute(‘data-asin’),
“`

だけど、著者は複数いることもあるので、一人分ずつ文字列化してから連結することになる。配列関数を使えばよさそうと思うけど、実際はもうひと手間必要になる。

1. 該当部分をgetElementsByClassNameで取得する。この時点ではHTMLColection型。
2. **Array.from(htmlCollection)で配列化する。**
3. mapで文字列を抜き出し、joinで連結する

こんな感じ。

【JavaScript / TypeScript】null と undefined の違いと使い分けを考える

# はじめに
“TypeScript“での“null“と“undefined“の使い分け方に対する考えと、“null“と“undefined“の違いについて自分なりに調べて学んだことを書いた記事です。

# 結論どっちを使うべきか
**“undefined“を積極的に利用していくべき**
（“null“の利用を避けられない場合を除いて）

ではないか、という結論になりました。

“TypeScript“の開発チームでも、
>Use undefined. Do not use null.

「“null“は使用せず、“undefined“を使用してください。」
とGithubのコーディングガイドに記載されています。

https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#null-and-undefined

# null と undefined の違い
“null“も“undefined“もプリミティブ型の値の一つ。
どちらも「値が存在しない」ことを表現するものである

【npm】json-serverが起動できない

##　やろうとしたこと
SPAを1から作ってみたく、まずはモックAPIを構築したいと思い、json-serverなる30秒でモックを構築できるものがあると知り、使ってみました。

※下記参照
https://github.com/typicode/json-server

今回はグローバルにはインストールしたくなかったので、ローカルインストールしました。

“`
$ npm install json-server
“`

(色々、手順は端折っていますが)次に、json-serverを起動させるコマンドをpackage.jsonのscriptに書きました。

“`
“scripts”: {
“json-server”: “json-server –watch db.json”
},
“`
db.jsonの中身は、DBそのものです。

## json-serverを起動する

準備が整ったので、いざ起動すべく下記コマンドを叩きました。

“`
$ npm json-server
“`

すると、こんなメッセージがでました。

“`
Usage: np

フードコートで必ず見る”アレ”を再現するWebアプリを作りました

フードコートの”アレ”をスマホで再現できるアプリを作りました。

https://tools.ic731.net/food_court

[クソアプリ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kuso-app)の**11日目**です。
# アプリについて
皆さんフードコートって行ったことありますか？ありますよね(強制)
イオンモールなどの一区画に多くの飲食店が出店しているやつです。銀だこ、丸亀製麺、リンガーハット、オムライス、ビビンバ、クレープ、アイス…
そんなフードコートですが”アレ”見ますよね？
…そう。**食事ができたことを知らせるブザー**です。(以下いらすとや様画像)
![image.png](https://qiita-image-store.s3.ap

Playwrightを使ったE2E_GUIテスト自動化（環境構築）

​​​​今回はSeleniumのように無償で利用できるテスト自動化ライブラリ「Playwright」について紹介させていただきます。
本記事では、Playwrightのインストールと動作確認までの記事となります。

今後、使い方やちょっとした応用編の記事を自分用としても投稿しようと考えています。

# 1.はじめに
Playwright とは、Microsoftが中心になって開発するNode.js上からブラウザを操作するためのライブラリです。
https://github.com/microsoft/playwright​​​​​​​
2020年冬にリリースされ、以下の言語とブラウザに対応しています。

|言語|対応ブラウザ|
|—|—|
|JavaScript|Chrome|
|TypeScript|Edge|
|Python|Firefox|
|C#|Safari|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/1b4c9ac8-afb1-ed96-594c-

アグリゲート自動連署botでトランザクションをチェックする

#連署botでトランザクションの確認を行う
Symbolでサービスを展開する場合，トランザクションをシステムが発行し，リアルタイムに処理を行えるようにする必要があります．この際，セキュリティを高めるため手段の一つとしてアグリゲートボンデッドを利用して複数のシステムの承認を得てからトランザクションを実行させる手段があります．しかし，人間がトランザクションを一つ一つチェックするのは大変です．そこで今回は簡単な自動連署botを作成してみました．

#トランザクションへの連署
##まず，連署してみる
まず，トランザクションに連署してみましょう．変数aggregateTxにアグリゲートトランザクションがある場合，連署は次のように行います．

“`javascript
const xym = require(‘symbol-sdk’);
const node = ‘https://sym-test-09.opening-line.jp:3001’;
const repo = new xym.RepositoryFactoryHttp(node);
const transactionHttp =

フロントエンド ド初心者へのススメ

はじめまして、リンクアンドモチベーションで主にフロントエンドをやっています、下田です。
本記事では、プログラミング完全未経験だった僕が**フロントエンドエンジニア**として成長するために実際に勉強してよかった記事や本、サイト、やって良かったことを載せています。

新人エンジニアの方で主にフロントを触っていきたいと考えている方が、読んでくださると嬉しいです。

####対象
・プログラミング未経験で今後フロントエンドエンジニアとしてやっていきたいと思っている方向け。
・フロントエンド開発を初めて ~ 2年目くらいまでの新人Webエンジニア向け。

####補足
・あくまで初級者向けの記事になります。
・自分がやったことをベースに話しているので、漏れがあるのはお許しください。
・弊社で使っているのはJavaScript + Vueなので、ReactやTSにはここでは触れていません。

##Lv1: まずはWeb、サーバー、ネットワークの基礎を理解しよう

いきなりコードを書き始めてしまう人が多いですが、しっかりWebの用語を覚えた上で開発に入りましょう！
全ての理解が出来なくても良いの

クリスマスにちなんだブラウザゲームを作ってみた

#はじめに
クリスマスということで、クリスマスにちなんだゲームを作ってみました。
PCとスマートフォンで遊べます。
※音が出るので注意

#ゲーム説明
タイトル画面でクリックするとツリーがたくさん並んだ画面が表示されるので、その中から飾りのついたツリーだけをクリックして下さい。

See the Pen NodejsからArduino IoT Cloudを操作するためのメモ

# はじめに
Arduino IoT Cloudを課金プランにすることでNode-REDで操作できることを確認したので、今回はNode.jsからそのまま操作できるか確かめた。

# 結論
wrapperコードを使いつつもLチカで動作確認できた。

# 準備

**重要：APIキーを取得する都合から、今回はArduino IoT Cloudの課金プランを使用する。最低でも400円/月弱の課金が必要。**一応課金プランからFreeプランに戻すのは可能。

– Arduino IoT Cloudアカウント(Entryプラン以上)
– [Arduino MKR Wifi 1010](https://www.switch-science.com/catalog/7384/)
– ブレッドボード
– [抵抗付きLED(秋月電子通商)](https://akizukidenshi.com/catalog/g/gI-16687/)
– node.jsが使える環境(今回はv14.17.3を使用した。nodebrew/nodist等で切り替えて使用してもOK)

# 知識的な前提

– Freeプランでも

Web フロントエンド開発について超ざっくり知る

こんにちは、[sugar](https://twitter.com/sugar235711)です。

この記事は [初めてのアドベントカレンダーAdvent Calendar 2021](https://qiita.com/advent-calendar/2021/first-try) 11日目の記事です。

# はじめに

### この記事は Web フロントエンドの開発と**フレームワーク/ライブラリの歴史**について超ざっくり解説します。

– 以下のような方が対象読者 ? です。
– Web フロントエンドの開発を勉強してみたい人/歴史をざっくり知りたい人

用語についての詳細なバックボーンは解説せず、ざっくりと流れを掴むことにフォーカスするので、気になった用語についてはぜひ調べてみてください ?

## Web フロントエンドとは？

一般的に(?),Web フロントエンドの言葉が表す範囲は
「ユーザーがブラウザ上の UI を操作し、Web アプリケーションにアクセスするあたり」のことを指します。

つまりWeb フロントエンド開発は、
`ユーザーとアプリケー

GASの doGet と doPost のイベントオブジェクトの型定義

`doGet(e)` と `doPost(e)` の引数`e`の型定義。
ブラウザでサクッと済ませたい時用。

# tl;dr
“`js:typedef
/**
* @typedef ApiEventGet
* @property {string} queryString
* @property {Object} parameter
* @property {Object} parameters
* @property {number} contentLength
*/

/**
* @typedef _PostData
* @property {number} length
* @property {string} type
* @property {string} contents
* @property {string} name
*/

/**
* @typedef ApiEventPost
* @property {string} queryString
* @property

まいばすけっとのレシートをtesseract.jsでOCR読み込みしてみる

スーパーといえばレシートが発行されると思いますが、このデータを上手く読み込んでテキスト情報にできないか試してみたいと思ったのでトライしてみます。

調べるとよく出てくるtesseract.jsを使ってみたいモチベもありつつ、アドベントカレンダー間に合わせよう的な勢いで執筆しています。

https://www.npmjs.com/package/tesseract.js

## レシートの写真はグーグル先生がいっぱい持っている

もう最寄りのまいばすけっとが閉まっている(現在23:30)のでグーグル先生に画像を貸してもらいます。

> 

## tesseract.jsを試す

無料で試せるのが良いですね！

“`
npm i

JavaScriptで簡単なタイピングゲームを作ってみた。

今回はサイトにあるソースコードをまねして、制限時間付きのスコアが出るタイピングゲームを作成しました。
#タイピングゲームについて
###概要
画面上に出てきた英文を、制限時間内に打っていき当たっているとLetterが加算され、間違えるとmissの回数が増えていきます。制限時間を過ぎると文字が打てなくなるので、ブラウザを更新してリスタートすることができるタイピングゲームとなっております。


打った文字が青くなり、打ってない文字はグレーの色となっています。またスペースキーも正解のスコアに含まれます。正解するとLetter scoreが増え、不正解の場合はMiss scoreが増える仕組みとなっています。

###作成に使った参考サイト
こちらのサイトを参考にしました。
[カウント用参考サイト](

Webサイトを設定ゼロで爆速デプロイする Serverless Component を公開しました⚡️


**設定ゼロでウェブサイトを爆速デプロイする [Serverless Component （website-optimized-cloudfront）](https://github.com/daisuke-awaji/website-optimized-cloudfront) を公開しました。**

:::note info
この Serverless Component は React, Vue をはじめとした JS フレームワーク にも対応しており、従来の serverless-component/website と比較するとキャッシュ最適化され、最速 10ms 以内 でコンテンツを表示できます。
:::

I launched new Serverless Compon

中間結果を保持するだけの変数を使わない

#リーダブルコードを読んで
作成したポートフォリオはまだまだ正しいコードの書き方ができていない部分が多くあります。
そこで、リーダブルコードを読んで少しずつ改良していきます。

#修正部分
以下は、閲覧数を受け取り数字が入っていればそのまま返し、nullであれば０を返す関数です。
修正前では、`count`変数を設定し、その中に戻り値を設定しています。

“`javascript:修正前
questionViewsCount: function (view) {
let count;
if (view > 0) {
count = view;
} else {
count = 0;
}
return count;
}
“`

しかしながら、この`count`は使わなくても、関数を作ることはできます。
コードを「短く」「読みやすく」するために変数なしで修正しました。
また、引数も一目でページ閲覧数だとわかるように修正しました。

“`javascript:修正後
questi

boolean型のif判定：処理の状態をフラグで管理する

##はじめに
プログラミングしているときに、次のような処理を書くことはよくあるかと思います。

**「Aの処理を実行したら、Bの処理を実行する」**

たとえば、「続きを読むボタン」を押したら、続きの文章が表示される・・みたいな処理です。
このような場合、「Aの処理が実行されたか否か」の判定を「フラグ」を使って管理する方法があります。

##フラグってなに？
IT用語としてのフラグとは、「真」か「偽」か、どちらかの値を入れておく変数のことです。
条件が満たされれば「真」、満たされなければ「偽」となります。
JavaScriptではboolean型の変数を使い、真であれば「true」、偽であれば「false」といった真偽値を変数に格納します。
条件が満たされ、フラグが真になることを「フラグが立つ」と表現します。
（「死亡フラグが立つ」という表現に馴染みがある人も多いかと思います）

##boolean型のif判定方法
if文では、条件式の結果がtrue（真）かfalse（偽）かで処理を分岐していくため、条件式部分にそのままboolean型の変数を設定することで処理を分岐していくこと

【PixiJS 覚書】第三回 PIXI.Sprite、PIXI.Text（とPIXI.Loaderのほんのさわりだけ）

##これまでのあらすじ
[第一回 PIXI.ApplicationとPIXI.Container](https://qiita.com/geregeregere/items/d8b7b51dd60f22d5e88a)
[第二回 PIXI.Graphics（と、PIXI.DisplayObjectの掘り下げ）](https://qiita.com/geregeregere/items/bc60ffc22618bb2a711e)

第一回でPixiJSの描画の基本構造をざっくり掴み、
第二回でPIXI.Graphicsの使い方を通して描画の仕組みや機能に慣れてもらいました。

この第三回ではいよいよスプライトを扱います。ようやくゲームっぽい表現ができるよ！
そしてPIXI.Spriteの派生クラスであるPIXI.Textもついでに紹介します。
また、「画像を読み込む」必要が発生しますので、データ読み込みの機能であるPIXI.Loaderにも軽く触れます。

##サンプルコード
“`JavaScript:sample_code
//（前略）

app.loader.baseUrl = ‘h

Rails6でJavascriptが上手く動かない事象への対処法

はじめに
—
Railsアプリを作成している中で「application.html.erb」ファイルに記載していたJavascriptのコードを別ファイルに移動させたものの、Javascriptファイルが上手く動かなく、苦戦しましたため、備忘をこめて記載致しました。

開発環境
—
– Mac
– Ruby 2.7.2
– Rails 6.1.3.1

今回実装したいこと
—

以下コードに記載されてある２つ目のscriptタグに記載されているコードを新たにJavascriptファイルを作成して、「app/javascript/packs」下に格納することです。そして、新たに作成したJavascriptファイルをビューである「app/views/users/show.html.erb」から読み込むことです。

“`javascript:app/views/layouts/application.html.erb

【Vue.js】TodoList 編集機能を追加

# 概要

[前回のtodoList](https://qiita.com/Quest_love33/items/30d7473ed9a760e0a8f9)に加えて編集できる機能を追加した。

# まずは全体像

* html

“`html

Todoリスト