JavaScript関連のことを調べてみた2020年04月29日

Reactを使ってWebサービスを作るための基礎２

Reactの基礎を学ぶためのメモ．
React Componentを作る上で理解しておかなければならない基本を理解する．

#React Componentの作り方　その１
##JSXについて
Reactにおいて必須なJSXは，JavaScript上でHTMLのコードを使えるJavaScriptの拡張構文．
BabelによってJavaScriptに変換される．

###“`CSS Style“`について
JSX内でスタイルを渡す場合には，キャメルケースで記述する．

“`js:呼び出し側
const rectStyle = {
background: bgcolor,
display: ‘table-cell’,
border: ‘1px #000 solid’,
fontSize: 20,
width: 30,
height: 30,
textAlign: ‘center’,
verticalAlign: ‘center’,
}
“`
“`js:Rect.js

[D3.js] たのしいグラフ描画 – 単純な円グラフ

D3.js を使って単純な円グラフを描画します。

# 元データ

元データです。
キーと値のハッシュになっています。

“`json
testdata = { a: 40, b: 30, c: 20, d: 10 }
“`

# できあがりイメージ

大変単純な円グラフができあがりました。


# プログラム

プログラムの一部です。

“`js
// 描画領域
const svg = d3
.create(‘svg’)
.attr(‘viewBox’, [0, 0, width, height])
.attr(‘width’, width)
.attr(‘height’, height);
// グラフを真ん中にするためのエレメント
const chart = svg
.ap

[D3.js] たのしいグラフ描画 – ラベル付きの単純な円グラフ

D3.jsを使って単純な円グラフを描画します。ラベルも付けてみます。

# 元データ

元データです。
キーと値のハッシュになっています。

“`json
testdata = { a: 40, b: 30, c: 20, d: 10 }
“`

# できあがりイメージ

大変単純な円グラフができあがりました。
扇型の中心にラベルを付けています。


# プログラム

プログラムの一部です。

“`js
// 描画領域
const svg = d3
.create(‘svg’)
.attr(‘viewBox’, [0, 0, width, height])
.attr(‘width’, width)
.attr(‘height’, height);
// グラフを真ん中にするためのエレメント
c

Reactを使ってWebサービスを作るための基礎３

Reactの基礎を学ぶためのメモ．
Reactコンポーネントを作るためにコンポーネントのライフサイクルについて理解する．

#Reactコンポーネントの作り方　その２

##Reactコンポーネントのライフサイクル
Reactコンポーネントには，“`Mounting“`(準備期間)，“`Updating“`(表示期間），“`Unmounting“`(破棄期間)の３つのライフサイクルが存在する．

各ライフサイクルでは，呼び出されるメソッドの流れが決まっている．

###Mounting
UIにコンポーネントが描画されるまでの準備期間．最初の一回のみ実行．
1. “`constructor()“`
2. “`render()“`
3. “`componentDidMount()“`

###Updating
UIにコンポーネントが表示されていて，基本的にユーザが操作できる期間．propsやstateの更新の度に実行．
1. “`render()“`
2. “`componentDidUpdate()“`

###Unmounting
他のコンポーネントに切

【TypeScript】setTimeout 関数を、キャンセル可能な Promise を返す関数にする

[`setTimeout` 関数](https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout) はコールバック方式であり使い勝手が悪いので
これを [`Promise`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) 化する。
キャンセルできるようにもする。

## 準備：型定義

`Promise` オブジェクトとキャンセル関数を次のようなオブジェクトにまとめて返してもよいが、

“`ts
{
promise: Promise,
cancel: () => void,
}
“`

これだと使う際にひと手間かかる。

そこで、`Promise` に `cancel()` メソッドを追加した `CancellablePromise` 型を定義し、
その型のオブジェクトを返すことにする。
こうすれば、キャンセルを使わない場合には単なる `Promise` として扱

コロナで暇だからあつ森株価記録LINE botを作った

コロナでおうち出れないから暇すぎたので，あつ森の株価とか余ってるレシピとかを記録して，他者と共有できるようなLINE botを作成しました．データベースに株価登録したり，余り物記録したり，それを取り出したりするだけの簡単なもの．
備忘録+文章力向上目的で書きます．

#環境
– macOS Mojave v10.14.6
– node.js v12.4.0
– Heroku
– PostgreSQL(HerokuのPosgreアドオンを使用)

#準備
環境構築とか事前準備とかは他の方の記事を見てもらえば十分理解できるので割愛．
サーバ関係は全部Herokuにぶん投げました．

参考にさせていただいたサイト
[LINE BOTをHeroku + Node.jsでやるまで](https://qiita.com/TakuTaku04/items/cb71f10669a9e9cbf71b)

#機能紹介
Reactを使ってWebサービスを作るための基礎１

Reactを基礎から学ぶためのメモ．
まずは，Webサービスを作るにあたってのReactの挙動を理解．

#サービスをつくる構成要素の違い
まずはじめに，どちらも部品という意味を持つ”モジュール（Module）”と”コンポーネント（Component）”という言葉について確認する．
##モジュール（Module)とは
関数などの**機能を提供する**ソースコード中の部品．

##コンポーネント（Component）とは
GUIを構成する一つ一つのそれだけで**完結した部品**．
何かで利用することはできるが，交換可能というものではない．

#React
##React実行の流れ
トップページ（index.html）→index.js→App.js
の流れで処理が進む．

##index.html
下記,“`

“`の中に後述するindex.jsの中身が動的にレンダリングされることになる．
また，ここで読み込まれるbundle.jsはwebpackでビルドされたファイルである．

“`html:index.html

TypeScript は import か export が無いと module として扱ってくれない

## これは何

TypeScript は import か export が1つも無いと module として扱ってくれない

## 困ってたこと

htmlAでは“`“`
htmlBでは“`“`
htmlCでは“`“`

を読み込むツールを作っていた際

特にimportもしないちっちゃなスクリプトで同じ関数名を利用していると
“`Duplicate identifier “hogehoge”“`と怒られる

とりあえずスクリプト全体を“`{ hogehoge }“`みたいに囲っていたが
かっちょよくなかった(；_；)

## 気づき

ふと「これプロジェクト単位の衝突か？全部エクスポート扱いになってるのか？」と思いつつ
でも同名のエクスポートって衝突しないよな？と適当にエクスポ

ブラウザのXMLHttpRequest(xhr)で今日の東京の天気を取得する

Open Weather Mapを試してみます。livedoorの天気APIはhttpsが使えない模様でそろそろブラウザからアクセスするのには厳しそうでした。

## 東京の今日の天気を取得するサンプルリクエスト

こちらをブラウザから叩くと取得できます。 appidはユーザー登録をして取得しましょう。

“`
https://api.openweathermap.org/data/2.5/weather?id=1850147&units=metric&appid=**************
“`

Open Weather Mapは初めてでしたが、[OpenWeatherMapで気象情報をゲットしよう](https://www.sglabs.jp/openweathermap-api/)が参考になりました。返却値のオブジェクトはここをみるとだいたいわかります。

## ブラウザのxhrでGETリクエスト

“`js
function getWeather(){
const url = ‘https://api.openweathermap.org/data/2.5/

プログラマラブルに動画制作ができるnpmパッケージのediltyでHelloWorld

プログラマルブに動画制作ができるnpmパッケージ

CLIでの操作でも出来るし、functionを渡してあげればプログラマラブルに動画制作できてるhttps://t.co/v6xp958tT1

— Nash⚡️ReactNative書いてる (@snamiki1212) April 28, 2020

## 概要

[GitHub – mifi/editly: Slick, declara

how to search by english

1 .delete child element mdn
-> Node.removeChild()

ブラウザのXMLHttpRequest(xhr)でSlackとDiscordのWebhook URLにPOSTするサンプル

最近触っていて、それっぽい簡易サンプルがなかったのでメモしておきます。

jQueryやaxiosでやっても良いのですが、xhrでシンプルに。

## to Slack

Slackはこれまでのincoming webhookと作り方が変わったのでSlack側の設定で苦戦するかも。

“`js
function toSlack(message) {
const url = ‘Webhook URL’;
const data = {
text: message
};

const xhr = new XMLHttpRequest();
xhr.open(“POST”, url, false);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded;charset=UTF-8”);
xhr.send(‘payload=’ + JSON.stringify(data))
}

const msg = `hello sla

ポケモンのAPIでasync/awaitを使って見た

今回はasync/awaitの学習をしたので、その備忘録としてポケモンデータをasync/awaitを用いて取得するまでの過程を記事にしていきます。

##async/awaitとは
[以前書いた記事](https://qiita.com/Taiki-Y/items/77bfe16dadf6a30929f4)では非同期でのデータの取得として、Promiseのthenメソッドを繋げてデータの取得をしていましたが、async/awaitを用いるとthenメソッドを使わず、シンプルな同期関数と同じような記述で、非同期でのデータの取得ができます。

同期関数のように扱えるということはメソッドの返り値を変数に代入するようなイメージです。すごくシンプルですが以下のような形になります。（通常の関数と同じ扱い方です。）

“`javascript
function intoroduction(name){

return ‘こんにちは、私は’ + name + ‘です。’;
}
const result = intoroduction(“山田太郎”);

“`
async/awaitを使う

RPGツクール入門（ちょっと変化球）

色々作りたいものがありながらも、デザインが全くできない・・・
対処法の一つとして、使えないかと考えたのが、RPGツクール。
しかも、今のバージョンでは基本となっている言語がJavaScriptになったということで、最近勉強していた成果も生かせるのではないかということで入門してみました。

## 入門情報
まずは、下記で基礎を学習しました。

[RPGツクールMV 初心者講座](https://tkool.jp/mv/guide/001_001.html)
恐らくこれが公式だし、最初に読むべきものですよね。駆け足で一通り読みました。

[RPGツクールMVゲーム製作講座](https://tkool.jp/mv/movie/index.html)
動画説明で、分かりやすい。ニコニコ動画は、無料コースだと1.25倍速までにしかならないので、途中ダレルところもありますが、全部見て損はないなと思いました。
個人的には最初に作る犬ゲームが楽しかったので、とりあえずそれをベースに作ってみました。

## オンライン化（いきなり！）
なんとなく作り方が分かったところで、オンライン化に挑戦します。
究

JavaScriptで重複排除を自分で実装してはいけない（Setを使う）

若者とプログラミングをしていて非常にショックを受けたのだが「JavaScript 配列 重複 削除」で検索するとfilterとindexOfを使ったアルゴリズムが検索結果上位に出てくる。これはO(N^2)。計算量の概念がないというのはとても恐ろしい。Big Techがアルゴリズム偏重の試験を課すのは合理的だと確信した。

— 父? (@fushiroyama) March 10, 2020

先日このようなツイートが流れてきたので、$O(N^2)$、つまり**計算量が $N^2$

【React Native】Google AdMob導入方法【iOS&Android両対応】

React NativeにGoogle AdMobを導入する際、情報が古かったり同様の方法でやってもうまくいかないことが多かったので、詳細に導入方法をまとめてみます。
Google AdMobを利用する際には現時点で2つ方法があります。

– react-native-admobを利用する方法
– react-native-firebaseを利用する方法

今回はreact-native-admobを利用する方法について説明します。

#### 導入した環境
React Native 0.62.2（2020年4月時点最新）
iOS 13.3 CocoaPods
Android 6.0
実装した広告: バナー広告

# iOS
[react-native-admob](https://github.com/sbugert/react-native-admob)のREADMEと同様に進んでいきます。

1. **npm or yarnでreact-native-admobをインストール**
`npm i –save react-native-admob@next` もしくは `yarn

JavaScriptのString.lengthをPHPで実装する

## TL;DR

PHPでは以下のように実装する。

“`php
strlen(mb_convert_encoding($string, ‘UTF-16’)) / 2;
“`

## JavaScriptのString.lengthの仕様

JavaScriptの内部ではUTF-16が用いられているが、PHPでは一般的にデフォルトがUTF-8である。
さらにJavaScriptの`String.length`とPHPの`mb_strlen`などではカウント方法が異なるため、バリデーション周りで問題を起こしやすい。

[String.length – JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length) にはこう書いてある。

> このプロパティは、文字列内のコード単位の数を返します。UTF-16（JavaScript によって使われるフォーマット）は、基本的な文字を表すためには 1 つの 16 ビットを使用します

【JavaScript】ある文字列のn番目の位置から、特定の文字あるいは単語が入っているかどうか調べたい

## はじめに
JavaScriptで、ある文字列のn番目の位置から、特定の文字あるいは単語が入っているかどうか確認したい。
そんな時、ありますよね。（競プロで使っただけです。）

そんな時に使えるのが、**startsWith**です。

## startsWithとは
文字列のn番目からみて、指定した単語が含まれているかどうかを判定します。返り値はbooleanです。

“`js
// word.startsWith(‘調べたい文字列’, 文字列の中の位置)

const word = ‘私はずんだもちが食べたい’

console.log(word.startsWith(‘私はずんだもち’))
// => true
console.log(word.startsWith(‘ずんだもち’))
// => false
console.log(word.startsWith(‘ずんだもち’, 2))
// => true
console.log(word.startsWith(‘食べたい’, 8))
// => true
“`

これで、ある文字列のn番目の位置から、特定の文字ある

TypeScriptで学ぶデザインパターン〜Composite編〜

# 対象読者

– デザインパターンを学習あるいは復習したい方
– TypeScriptが既に読めるあるいは気合いで読める方
– いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
– UMLが既に読めるあるいは気合いで読める方

# 環境

– OS: macOS Mojave
– Node.js: v12.7.0
– npm: 6.14.3
– TypeScript: Version 3.8.3

# 本シリーズ記事一覧(随時更新)

– [TypeScriptで学ぶデザインパターン〜Iterator編〜](https://qiita.com/junkimatsuda/items/c5b016b9762f29ef6f50)
– [TypeScriptで学ぶデザインパターン〜Adapter編〜](https://qiita.com/junkimatsuda/items/e8523185d14e53279fb8)
– [TypeScriptで学ぶデザインパターン〜Template Method編〜](https://qiita.com/junkimatsud

Chrome で documentFragment をつかって DOM 上に存在しなくなった要素を再度DOMに追加すると表示されないことがある

# 概要

Chrome で documentFragment をつかいつつ `appendChild` すると存在してるはずの要素が表示されないことがある。

# 条件

調べた限りだと、以下の全てを満たしてると起きる。

– Chrome 81.0.4044.122
– 他のバージョンは調べてない
– 子要素が隠れる可能性のある要素
– `` と `` とか
– [`` とその子要素とか](https://developer.mozilla.org/ja/docs/Web/HTML/Element/details)
– 一つの関数内で、親要素を空にして子要素をいったんdocumentFragmentにいれてから本物のDOMに追加する処理を行う
– DOM上にかつて存在したが今は存在していない子要素を追加する

つまり以下のいずれかのケースを満たすと起きない。

– Firefox
– 常にブラウザ上に表示される親子要素に対する操作
– `

` と `
• ` とか
  – `
  `

  元記事を表示