- 1. はじめに
- 2. そもそもvar let constとは
- 3. var let constの違い
- 3.3. これからReact始めたい人のための今日だけでできるTODO #4
- 3.4. kintoneで計算フィールドとJavaScriptカスタマイズの計算を一緒にしちゃだめ！という話
- 3.5. forEachの中で非同期処理を行う際、awaitやPromiseを使ってすべての作業が完了するまで待ちたい。
- 3.6. 画像素材共有サービス「フォトフリ」を爆速開発した話
- 3.7. Chart.js 3系と2系のオプションの違い 2021/9/21
- 3.8. 非同期関数のループ処理にforEachを使うとどうなるか – Part4
- 3.9. 非同期関数のループ処理にforEachを使うとどうなるか – Part3
- 3.10. 【Jest】テストのスキップ
- 3.11. これからReact始めたい人のための今日だけでできるTODO #3
- 3.12. 非同期関数のループ処理にforEachを使うとどうなるか – Part2
- 3.13. 非同期関数のループ処理にforEachを使うとどうなるか – Part1
- 3.14. Array.fromの第1引数のarrayLikeって配列じゃなくてもいいのか
- 3.15. axiosを使った簡単な実装
- 3.16. Undo/Redoが出来るお絵描きチャット”えんぴつチャット”をWasmで作った
- 3.17. JavaScriptの基礎まとめ
- 3.18. 【React】面白いhooksを作ったよ！【全員が同じstateを共有する】
- 3.19. クリーンなReactプロジェクトの21のベストプラクティス
- 3.20. Alpine.jsを始めよう！
AudioWorkletでレコーダーを作る
AudioWorkletで録音します。
“`audio.js
class RecorderNode extends AudioWorkletNode {
constructor(audioCtx){
super(audioCtx, ‘recorder-processor’);
this.buffers = [];
this.port.onmessage = e => this.buffers.push(e.data);
}mergeBuffers(buffers){
const sampleLength = buffers.reduce((acc, buf) => acc + buf.length, 0);
const samples = new Float32Array(sampleLength);
let sampleIdx = 0;
for (let i = 0; i < buffers.length; i++) { for (let j = 0; j < buffers[i].length;
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の値変更時に計算をすることにします。“`js
ki
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
画像素材共有サービス「フォトフリ」を爆速開発した話
ども！「**だるだるし**」です
今回は先日公開した [株式会社NEXS](https://top.nexsjp.com) の「**フォトフリ**」という画像素材共有サービスについて書いていきます．
Nuxt.js使っててなんでバックエンドはNode.jsじゃないねん，とか思われると思いますがその辺りも含めて
まあ，自論詰込みの読み物です# 画像素材共有サービス「フォトフリ」を作成した
まず「[フォトフリ](https://service.nexsjp.com/photofree/)」とは何ぞや，というのはリンクを参照してください．
を使用してテストします。
説明：フェイク非同期関数（fakeDatabaseQuery）を作成し、その関数がプロミスオブジェクトをリターンする形にします。また、Array.prototype.map()を使用して、プロミスオブジェクトがarrayに詰め込まれた100回分の処理のひな型（const promises）を作り、それに対して、Promise.all()で100回分の処理を一気に行います。
結論：このような非同期関数のループ処理において、シンプルなsyntax（構文）と処理の速さにおいて、最もおすすめな方法です。
その他：下記のサンプルコードは、すべてNode.js v14.15.5でテストしたものです。また、私が利用している環境（Ubuntu + Node.j
非同期関数のループ処理にforEachを使うとどうなるか – Part3
【パターン3 非同期関数のループ処理において、async/awaitなしでforLoopを実行、ただし非同期関数内でthenメソッドを使用】
パターン1ではforEach + async/await、パターン2ではforLoop + async/awaitを使いましたが、今回は、async/awaitなしでforLoop + （Promise + thenメソッド）を使用します。
説明：フェイク非同期関数（fakeDatabaseQuery）を作成し、forLoopでこの非同期関数を100回実行します。パターン2（Part2）との違いは、async/awaitなしでforLoopを回している点、および、フェイク非同期関数内部でPromiseとthenメソッドを使い連続した非同期の処理を行っている点となります。
結論：async/awaitなしでforLoopによりフェイク非同期関数（fakeDatabaseQuery）を実行していますが、そのフェイク非同期関数内部でPromiseとthenメソッドを使用した処理を行うことにより、パターン2のようなサスペンドされた状態が生じないため
【Jest】テストのスキップ
# はじめに
Jestを使っていて、処理が重い処理のテストを一時的にスキップしたい場合、skipを追加することで回避することができます。
[公式ドキュメント](https://jestjs.io/ja/docs/api#describeskipname-fn)# 検証
* “`describe“`、“`test“`、“`it“`関数に“`.skip“`追加するとテストの実行をスキップすることができます。
“`javascript:sum.js
export const sum = (a,b)=> a + b;
“`“`javascript:sum.test.js
import { sum } from “./sum”;//skipを追加した。
test.skip(`add 10 + 20 to equal 30`, () => {
expect(sum(10, 20)).toBe(30);
});“`
実際にテストを実行すると、テストがスキップされていることが確認できます。
“`sh
yarn test /Users/jest-
これからReact始めたい人のための今日だけでできるTODO #3
## CodePenでReact DevToolsを使いたい時
– ログインする or 登録してメール認証する
– [チュートリアルのコードにアクセス](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)
– 画面右下に「Fork」ボタンがあるのでクリック
– 画面上の「Change View」から「Debug mode」を選択
– 新しいタブが比較のでDevツールを起動すればReactタブが出現する画面右下に「Fork」ボタンがあるのでクリック
画面上の「Change View」から「Debug mode」を選択
）には、forEach does not wait for promises. と書いてあるので
Array.fromの第1引数のarrayLikeって配列じゃなくてもいいのか
[オライリーの プログラミングTypeScript](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0TypeScript-%E2%80%95%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8BJavaScript%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-Boris-Cherny/dp/4873119049) P.81に出てきた`Array.from`の以下のような使い方を見て、最初意味が分からなかったため、調べてみました。
“`typescript
function fill(length: number, value: string): string[] {
return Array.from({length}, () => value)
}
fill(
axiosを使った簡単な実装
# axios get postメソッドについて
開発環境
windows10 home
Ruby 2.6.3
Ruby on Rails 5.2.6
vue.js 2.6.14## axiosとは
ブラウザや node.js で動く Promise ベースの HTTP クライアントである｡インストール
“`
yarn add axios
“`Vueファイルにインポート
“`
import axios from ‘axios’;
“`
## getメソッド
“`js
import axios from ‘axios’;methods: {
setMemo: function () {
// axios.HTTP動詞(‘url’)
axios.get(‘/api/memos’)
// .then()で通信が成功した際の処理を書く。
.then(response => (
// Axiosで呼び出したAPIの情報をmemosに代入
this.memos = response.
Undo/Redoが出来るお絵描きチャット”えんぴつチャット”をWasmで作った
# 公開先
https://minordaimyo.net/pencilchat/# えんぴつチャットの主な特徴・使い方
– 高解像度の256色キャンバス(A3 600dpi、9921x7016pixel)で軽快な描き味
– 多人数参加でもUndo/Redo可能
– 筆圧と傾き検知に対応
– 参加人数は8人まで(見学参加は現状40人まで)
– 2本指のタッチ操作でキャンバスのスクロール・拡縮
– 2本指タップでUndo、3本指タップでRedo
– キ
JavaScriptの基礎まとめ
jsの基礎知識をまとめた学習記事です。
##JavaScript
JavaScriptとは、ECMAscriptの使用に基づいて実装される言語。
“`
ブラウザ
|-JavaScript
|-ECMAscript
|-WebAPI
“`##オブジェクト
キーと値をペアで管理する入れ物。
“`js
{ num1: 1, num2: 10 }
“`##メソッド
オブジェクトの中に格納された関数。
“`js
{ funA: function a(){
console.log(“ok”);
} }
“`##グローバルオブジェクト
ｊｓエンジンによって生成されるコード内のどこからでもアクセスできる（あらかじめ設定されている）オブジェクト。ｊｓの実行前には、グローバルオブジェクト（window）とthisが用意される。
##コンテキスト
文脈。コードの現在の実行状態。
“`
・グローバルコンテキスト → 関数の外側。
・関数コンテキスト → 関数の内側。
“`##コールスタック
jsがどのように処理を進めたのか追
【React】面白いhooksを作ったよ！【全員が同じstateを共有する】
# useStateってありますよね
“`typescript
const [state, setState] = useState({count:0, boolean:true})
“`Reactで最もよく使う状態管理を行うhook、 `useState`。めちゃくちゃ使い心地いいですよね。
でもこの`useState`は、当たり前ですが、**共有されません**。 沖縄県在住のAさんが`setState`で状態を変更しても、東京都在住のBさんの`state`には影響を与えません。 **当たり前ですね**。# でもそれができたら面白くない？
誰かが`setState`を実行したら、それが**同じページを見ているすべての人に反映されたら**何か面白いことができそうじゃないですか？
# 例え
クリーンなReactプロジェクトの21のベストプラクティス
本記事は、[Mohammad Faisal](https://56faisal.medium.com/)氏による「[21 Best Practices for a Clean React Project](https://betterprogramming.pub/21-best-practices-for-a-clean-react-project-df788a682fb)」（2021年4月23日公開）の和訳を、著者の許可を得て掲載しているものです。
#クリーンなReactプロジェクトの21のベストプラクティス
>コード品質向上のための実践的アドバイス
Photo by [Diana Polekhina](https://unsplash.com/@diana_pole?utm_source=medium&utm_medium=referral) on [Unsplash](https://unspla
Alpine.jsを始めよう！
# はじめに
みなさま、Alpine.jsをご存知でしょうか？
まあ、ものすごく簡単に言うと **かんたんなVue.js** です。
ただでさえJSフレームワークの中では比較的簡単目なVue.jsですが、さらにかんたんです。
どんぐらいかんたんかというと **jQueryと同じかそれ以上** ってレベルです。
しゅごい！
今回はこれを紹介していこうと思います。https://alpinejs.dev/
# JSフレームワークとは
**SPAとかJSでなんかすごいことやりたいときに入れるやつ** 、くらいの雑な認識で大丈夫です。
いわゆる3大フレームワークと言われているのがお互い影響し合いつつ、競い合っている感じです。
概ねデータバインディング（JS内の変数の値をそのまま出したり、formから書き込んだり）がしたいときに使われることが多いかと思います。* Angular
* おそらく一番初めに出たJSフレームワーク
* Google製で、Google内で燃えに燃えている案件を鎮火させる過程で生まれたリアル銀の弾丸
* ver1の頃は「AngularJ
