- 1. Hello React
- 2. aaa
- 2.1. はじめに
- 2.2. アロー関数 vs 関数 違いは?
- 2.3. はじめに
- 2.4. そもそもvar let constとは
- 2.5. var let constの違い
Vueのpropsと$emitを使ってコンポーネント間でデータをやりとりする
# はじめに
Vue で親コンポーネントと子コンポーネントの間でデータをやり取りする方法について、今まで何となくやっていたので改めて勉強しました。
分かりにくい部分だと思うので、よかったら参考にして頂ければと思います。# 対象者
* 基本的な JavaScript のコーディングができる方
* Vue で開発をしたことがある方# 環境
* Vue.js 2.6.10
* Vuetify 2.1.0# 勉強しながら作ったもの
名前と血液型を入力する子コンポーネントを作りました。
親コンポーネントから初期値を渡して初期表示したり、子コンポーネントで入力した名前・血液型を親コンポーネントに渡したりできるようにしています。下の画像がスクリーンショットで、氏名から【反映】ボタンまでの３段が子コンポーネントで、`parent:` の段が親コンポーネントです。
で行こうと思います。
参考
https://prog-8.com/courses/react
#Hello World
“`react
import React from ‘react’;class App extends React.Component {
render() {
return (Hello React
);
}
}export default App;
“`– Reactからreactをimportする
– R
【Javascript】オブジェクトの配列をuniqueにする（重複を削除する）ときはfilterではなくMapオブジェクトを使う
# はじめに
単純な配列は以下のように`Set`を使うと重複を削除できるというのがよく知られてます。
“`js
const numbers = new Set([1, 2, 1, 1])const uniqueNumbers= Array.from(numbers)
//uniqueNumbers は [1, 2]
“`以下のようなオブジェクトの配列の重複を削除する方法はあまり紹介されていなかったのでメモとして書きます。
“`js
const users = [{“id”: 1, “name”: “Alice”}, {“id”: 2, “name”: “Bob”}, {“id”: 1, “name”: “Alice”}, {“id”: 1, “name”: “Alice”}]
// [{“id”: 1, “name”: “Alice”}, {“id”: 2, “name”: “Bob”}] にしたい
“`# Mapを使って重複を削除する
データ量が多いときは[Array.prototype.filter()](https://developer.mozil
React Testing Library 入門編
# まず始めに
テストでReact Testing Libraryを検討している方へ向けて、[公式ドキュメント](https://testing-library.com/)を参考に作成しています。
記事内容に関して間違っていることがあれば、気軽にコメントしていただけると助かります。
# 目次
| 項目 |
|:————-|
| [1. React Testing Library とは](#react-testing-library-とは) |
| [2. 何ができるのか](#何ができるのか) |
| [3. 使用するメリット](#使用するメリット) |
| [4. Jestとの違い](#jestとの違い) |
| [5. 導入方法](#導入方法) |
| [6. 実際に使ってみる](#実際に使ってみる) |# React Testing Library とは
Reactコンポーネントをテストするための非常に軽量なライブラリで、ユーザーが操作するテストに近いテストを行うことができます。`Dom Testing Library`というライブラリがベースにあ
[iOS15 Safari] Canvas2Dの文字列描画でページがクラッシュする場合がある
# クラッシュする条件
* iOS 15 で Safari などの AppleWebKit エンジンを使用しているブラウザ。
* Canvas2D で ASCII 文字以外を描画しようとしている。
* フォント設定値が `20px -apple-system` のように、文字の大きさと `-apple-system` が隣接している。# 問題のコード
“`main.js
let ctx = canvas.getContext(“2d”);
ctx.font = “20px -apple-system”;
ctx.fillText(“日本語文字列”, 20, 20);
“`# 解決方法
`20px normal -apple-system` のように、文字の大きさとフォント名の間に必ずフォントウェイト指定を挟むようにする。# その他
html2canvas もこの問題に巻き込まれるので、この場合は CSS に対して上の解決方法を適用すると良い。
jQueryを用いたHTML, CSS要素の操作の基本
この記事は以下のUdemyの講座のSection58~65の内容をまとめたものです（お世話になってます、、
https://www.udemy.com/course/javascript-kouza/
#### 1. **要素内の文字の取得、書き換え**
“`jsx
// 文字列はtextメソッドを用いる
$(“h1”).text(); //=> “Template” // 取得
$(“h1”).text(“aaa”); //=>aaa
// 変更
“`#### 2. **要素内の HTML の取得、書き換え**
“`jsx
// HTMLはhtmlメソッドを用いる（以下ではclass=”form-group”が複数個あるページを扱う
$(“.form-group”).eq(0).html(); //=> ‘\n \n\n’
// 指定の要素のページ内の数を求め
勉強 4日目
#議事録
5時間
今日から○✖ゲームを作る。#addEventListenerのつまずき。
“`javascript
//エラーコード
const points = document.querySelectorAll(‘a_point’);points.addEventListener(‘click’, () => {
});
“`
**addEventListenerは単一のノードにしか使えません**
だから、document.querySelectorAll(‘a_point’)ですべてのa_pointoを指定しても、addEventListenerに直接書き込むことはできません。
ですが、今回の場合は一切関係ありませんでした（笑）下記コードにしたらいけました！“`javascript
//正解コード
document.querySelectorAll(‘a_point’).addEventListener(‘click’, () => {
});
“`今日までの進捗↓
HTMLのコード
“`html
[Javascript]アロー関数についてちょい調べる
はじめに
またも「アロー関数とは？？」という質問をもらったときに、よくわからなかったので
調べて理解を深めつつ、学んだことをアウトプットしてみる。✊アロー関数 vs 関数 違いは?
ES6から導入された***新しい関数の書き方***。
前の関数と比べて、その特徴は….
1 functionより短く書ける
“`javascript
//関数
function test(x) {
}//アロー関数
const arrowFunc = (x) => x + 1“`
2thisの扱い方に注意
this….オブジェクト。どのオブジェクトであるかは、関数の呼ばれ方によって変わる。
普通の関数
…thisの参照先が、呼び出した関数によって変わる
“`javascript
param = ‘global param’;function testFunc(){
console.log(this.param);
}const test = {
param
fetch呼び出しでasync/awaitを使わないパターン、使うパターン
# 目的
fetchを呼び出す際にasync/awaitを使うパターンと使わないパターンをまとめます。
もっとこう書くとスマートだとか、この処理忘れてるとかあったらコメントでご指摘ください。# Promiseのまま扱うパターン
“`javascript:エラー処理を考えないシンプルなパターン
// Promiseのまま扱う際のfetchの使い方
function fetchNormal(){
// 気象庁の今日の東京の天気API(JSON)
const url = ‘https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json’;const promise = fetch(url);
promise
.then(response => response.json())
.then(jsondata => {
showResult(“result: ” + JSON.stringify(jsondata));
});
}
“`– f
コールバック関数について、mapメソッドとsetInterval関数を使って考えた。
#コールバック関数とは
>引数に関数をとる場合の呼ばれる関数のことをコールバック関数という。:arrow_up: この定義のことは知ってたけど、それがどういう意味なのか、なんで名前がついているのか理解していなかった。:baby_bottle::baby_tone2:
#この記事を書いた経緯
アロー関数についてブチ切れながら:rage::rage::rage::rage:理解を深めようとしていたら、コールバック関数を用いることで書き方が違うことに気づいた。:bulb:
この記事では、コールバック関数を第一引数にとる**mapメソッド**と**setInterval関数**について説明していくよ。#その前に結局アロー関数ってどんな形？
これを
“`js
function 関数名(){〇〇};
“`
こう“`js
関数名 = ()=>〇〇;
“`
**`()=>〇〇`**これが一つの塊。
いくら`()`がたくさんあっても、惑わされないように。
`=>`の右と左の関係は、`(必要時左側で使う引数)=>処理`#mapメソッドって何？
配列オブジェクトに用意されている
PLATEAU（3D都市モデル）のデータをdeck.glで表示してみました
# はじめに
– インディゴ株式会社さんが公開してくださっている[PLATEAU（3D都市モデル）](https://www.geospatial.jp/ckan/dataset/plateau)の[建築物 (bldg:Building)のデータ](https://github.com/indigo-lab/plateau-tokyo23ku-building-mvt-2020)を[deck.gl](https://deck.gl/)で表示してみました。
– deck.glの表示部分は、下記のブログの記事を参考にさせていただきました。### インディゴ株式会社さんが公開してくださっているPLATEAU（3D都市モデル）のデータ
https://github.com/indigo-lab/plateau-tokyo23ku-building-mvt-2020# アウトプットイメージ
みてねの画像・動画をまとめてダウンロードするアプリを作ってみた
# 概要
みてねは子供の写真や動画を無料で共有できるサービスです。夫婦でそれぞれ iPhone やデジカメで撮影した写真や動画を手軽にアップロードして共有できるので重宝しています。しかし、アップロードした写真や動画をダウンロードしようとすると、公式の方法だと 1 つずつ手動でダウンロードするしかなくて、非常に大変です（2021年9月現在）。ぐぐってみても、まとめてダウンロードする方法は見つかりませんでした。
そこで、ないなら自分で作ろう！ということで、みてねにアップロードした写真や動画をまとめてダウンロードするアプリケーションを作りました。ビルドしたアプリケーションはこちら（Win/Mac）：
https://github.com/miworky/miteneDownloader/tree/main/bin使用方法：
https://github.com/miworky/miteneDownloader/blob/main/README.mdアプリケーションを使いたいだけの人はここでおさらばです。
コードはこちら（JavaScript, Electron）：
https:
Javascriptのスプレッド構文
#スプレッド構文を使ってできること
配列やオブジェクトを展開できる。
##展開とは？:thinking:
配列やオブジェクトを
配列はそのままでは使いづらいことがしばしばある。
簡単にバラして、配列じゃない形で配列の順番のまま使えるようにできるイメージ！
詳しくは実際に使っているものを見てみて:point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2::point_down_tone2:
#スプレッド構文の書き方
ドット３つのあとに、展開したいものを持ってくる“`
…定数
“`
“`js
const point =[67,88,54,99,78];
const MaxP=Math.max(…point);console.log(‘最高得点：’+MaxP);
>最高得点：99
“`##配列の場合
“`js
const AIU=[‘あ’,’い’,’う’];
const Agyou =[…AIU,’え’,’お’];console.log
SWRの機能を簡単にまとめる
[SWR](https://github.com/vercel/swr)とは、Vercel社（Next.jsやVercelを作っている会社）が作成した
React Hooksで作成されたデータフェッチ用のライブラリです。# SWR何が嬉しいのか
– ライブラリが軽い!(48.9kB)
– Reactにおけるfetch処理のデータがキャッシュにより簡単に再利用できる。(Reduxなしで!）
– エラー時は自動でいい感じに再取得してくれる!
– ポーリング（一定間隔でAPIを叩く）も簡単な設定で可能!
– フォーカス時に勝手に再取得して最新のデータに更新してくれる!
– TypeScriptデフォルトサポートものすごーーく便利です。
# Get Started
[公式でいうこのページ](https://swr.vercel.app/ja/docs/getting-started)適当にReactの環境を作る
“`bash
$ npx create-react-app my-app –template typescript
$ cd my-app
“`SWRをインス
AudioWorkletでレコーダーを作る
AudioWorkletで録音します。
“`RecorderNode.js
export default class RecorderNode extends AudioWorkletNode {
constructor(audioCtx){
super(audioCtx, ‘recorder-processor’);
this.buffers = []; //processorから受け取ったFloat32Arrayを貯める
this.port.onmessage = e => this.buffers.push(e.data);
}//Float32Arrayの配列を繋げて新しいFloat32Arrayを返す
mergeBuffers(buffers){
const sampleLength = buffers.reduce((acc, buf) => acc + buf.length, 0);const array = new Float32Array(sampleLength);
let sample
var vs let vs const
はじめに
ふとvar let const の違いを聞かれたときにはっきりと分からなかったので、
調べてここにアウトプットします。そもそもvar let constとは
全てJavascriptにて***変数宣言をする際に使うキーワード***
その中で、letとconstはECMAScript2015から採用された***新しい宣言記法***。
var let constの違い
全て変数宣言に使われる記述ですが、3つの要素に違いがあります。
１再代入、再宣言が可能か
再代入…すでに宣言していた変数に、値を再び入れなおすこと
再宣言…すでに宣言していた変数の名前を、キーワードごと丸っと宣言しなおして、上書きすること再代入
var
“`javascript
var techacademy = ‘代入1回目’;
techacademy = ‘代入2回目’ //再代入時にvarのキーワードを書かない
“`let
“`javascript
let techacademy
これからReact始めたい人のための今日だけでできるTODO #4
“`js
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = ‘X’;
this.setState({squares: squares});
}
“`
[全体のコード](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)Boardのstateが変更されると個々のSquareコンポーネントも自動的にレンダリングされる。
全てのマス目の状態をBoardコンポーネントで保持できるようになった。SquareコンポーネントはBoardコンポーネントから値を受け取って、
クリックされた時はそれをBoardコンポーネントに伝えるものになりました。
React用語だとSquareコンポーネントは **制御されたコンポーネント（controlled component）** と呼ばれるみたいです。## イミュータビリティ？（immutability; 不変性）
“`js
const squares = this.state.
kintoneのフィールド値変更時イベントで計算フィールドとJavaScriptカスタマイズの計算を一緒にしちゃだめ！という話
今回は、「フィールド値変更イベント」で計算フィールドとJavaScriptカスタマイズの計算を一緒にしないようにしましょう！というお話です。
ためしに、アプリを作ってみましょう。
# アプリの準備
数値フィールドのA,Bに値を入力したら、
計算フィールドCと数値フィールドDに自動的に計算値が入る。という仕組みにします。| フィールド種類| フィールドコード | 計算式 |
|:-:|:-:|:-:|
| 数値 | A | |
| 数値 | B | |
| 計算 | C | A + 10 |
| 数値 | D | JavaScriptで B+C を計算する |
# JavaScriptの準備
計算フィールドはフィールド値変更時イベントで指定できないので、
数値フィールドのA,Bの値変更時に計算をすること
forEachの中で非同期処理を行う際、awaitやPromiseを使ってすべての作業が完了するまで待ちたい。
## はじめに ～ 非同期forEachは一斉に処理が始まる（並列処理？）
非同期処理とforEachについての簡単なプログラムを以下に示す
“`javascript:sample.js
const array = [1, 2, 3, 4, 5]array.forEach(n => {
setTimeout(() => {
console.log(`${n}秒待ちました。`)
}, n*1000);
});
“`これを実行すると以下のように出力される。
“`
1秒待ちました。
2秒待ちました。
3秒待ちました。
4秒待ちました。
5秒待ちました。
“`さて、この出力は1秒おきに1行ずつ表示されるため、5種類の “`setTimeout(() => {})“` が同時に実行されていることが分かる。（正確には同時ではないが）
## つまづいた点 ～ 処理が終わってないのにforEachがスルーされている？（←勘違い）
とりあえずforEachの後ろに出力を追記する。
“`javascript:sample.js
con
