- 1. デモページ Formを使ってtweet機能を作成 [JavaScript]
- 2. # map処理の本質は写像【JavaScript/TypeScript】
- 3. js スプレッド構文について知ろう
- 4. ISBNでAmazonの商品ページに飛ぶ方法
- 5. 4.JavaScript特殊文法
- 6. 3.JavaScript演算子
- 7. 適応型Range符号
- 8. 2.JavaScriptデータの種類
- 9. Fitbit Web API：歩数の取得
- 10. 好みのフレーバーから日本酒を探すWEBアプリをNetlifyでデプロイ
- 11. 【Next.js】middleware.tsのfetch failedについて
- 12. Android ChromeでJavaScriptのscrollIntoViewを使う時は注意しよう
- 13. LWC 子コンポーネント 画面読み込み時の処理方法
- 14. JavaScript での多重比較におけるp値補正の実装
- 15. Fitbit Web APIで生体情報を取得
- 16. [Javascript]Promise.all()は結果を返さない件
- 17. テキスト落下アニメーションを作ってみる（HTML/CSS/JS）
- 18. ブラウザでのJavaScirptの動作について
- 19. ジュニアエンジニア備忘録：アルゴリズム(2) – バブルソートについて
- 20. １.Javascript基本文法
デモページ Formを使ってtweet機能を作成 [JavaScript]
通常、HTML FORMでは、
入力したinputの内容を付加してボタンを押した時に、その情報を送信し、別のページに移動します。usernameにkei
passwordに123456
と入力して登録ボタンを押してみます。
hogeというformのaction先に対して、
username=keiとpassword=123456が付加された情報が送信され、別のページに遷移しました。
しかし、今回は、JavaScriptを使用し、ページが切り替わるのをやめ
# map処理の本質は写像【JavaScript/TypeScript】
# はじめに
新しい職場で初めてTypeScriptを書くことになり、日々新しい文法と格闘していたら、先輩がマップ処理についての個人講義を開いてくれました！
その一言目が、**「map処理の本質は写像」**…
先輩のサポートもあり、講義が終わる頃には自分も、「map処理のホンシツハ…シャゾウ…」と言えるくらいには理解が進んだのでその復習も兼ねてのアウトプットになります！### この記事の到達点
– 「map処理の本質は写像」とドヤれる
– map処理の使いどころが分かる
– （オマケ）map処理とMap型の違いが分かる### この記事の対象者
– map処理は複雑そうで苦手意識がある
– Flutter/DartのMapと混じるな…（自分）### 開発環境
今回は環境構築不要なオンラインエディターを使いました！（他言語もあり便利）https://www.programiz.com/javascript/online-compiler/
### 目次
1. [map処理の本質は写像](#Chapter1)
1. [map処理の使いどころ](#Chapte
js スプレッド構文について知ろう
## 概要
条件付きでオブジェクトや配列を展開できるスプレッド構文なるものを知ったので簡単にまとめる。
## 例
まずは記載方法の例をあげる
“`
…(真偽値 && {真偽値がtrueの場合に展開されるオブジェクトや配列})
“`## 使用例
下記のようにクエリパラメーターから得られた値によってDBからデータ取得するときの発行クエリを制御したいとき
“`ts
const tasks = await context.db.tasks.findMany({
where: {
deleted_at: null,
…(isComplete !== null && { is_complete: isTrue }),
},
});
“`## 参考文献
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
ISBNでAmazonの商品ページに飛ぶ方法
特定の書籍のISBNがわかっている場合に、その書籍のAmazon商品ページに簡単にアクセスする方法を紹介します。この方法を使えば、JavaScriptなどを使ってISBNからAmazonの商品ページURLを生成し、直接アクセスすることができます。
## ISBNからAmazonのURLを生成する
Amazonの商品ページにアクセスするための基本的なURL構造は以下の通りです：
“`
https://www.amazon.co.jp/exec/obidos/ASIN/{ISBN}
“`
`{ISBN}`の部分を実際のISBN番号に置き換えます。:::note
ISBN13ではなく、ISBN10に変換する必要があるので注意が必要です。
:::### JavaScriptを使った実装例
実際にJavaScriptを使ってISBNからAmazonの商品ページに飛ぶ方法を見ていきましょう。
“`js
const isbn10 = “4873115655”;
const amazonUrl = `https://www.amazon.co.jp/exec/obidos/ASIN/$
4.JavaScript特殊文法
# データ型変換
> 警告: 記事は機械翻訳があるため、学習参考用のみ
## 概要
JavaScriptは、変数にはタイプの制限がありません。
“`javascript
var x = y ? 1 : ‘a’;
“`上記のコードでは、変数`x`別の変数に応じて、それは数値ですか、それとも文字列ですか`y`価値。`y`のために`true`時間、`x`それは数値です。`y`のために`false`時間、`x`それは文字列です。`x`タイプのタイプは、コンピレーション段階ではわかりません。
変数のデータ型は不確かですが、さまざまな演算子が必要です。オペレーターのタイプは期待と一致しません左右になると予想されますが、サイドオペレーターは値である場合は、自動的に値に変換します。
“`javascript
‘4’ – ‘3’ // 1
“`上記のコードでは、2つの文字列が縮小されていますが、結果値は取得されます`1`その理由は、JavaScriptが輸送オペレーターを自動的に価値に変換するためです。
この章では、その前に、データ型を手動で実施する方法を説明します。
#
3.JavaScript演算子
# 算術演算子
> 警告: 記事は機械翻訳があるため、学習参考用のみ
オペレーターは、既存の値から新しい値を取得するために使用されるデータを処理する基本的な方法です。
## 概要
JavaScriptは、基本的な算術演算を完了するために、合計10の算術演算子を提供します。
– **加算演算子**`x + y`
– **減算演算子**`x – y`
– **乗算演算子**`x * y`
– **乗算演算子**`x / y`
– **インデックス演算子**`x ** y`
– **残り値の演算子**`x % y`
– **自増演算子**`++x` または `x++`
– **自減演算子**`–x` または `x–`
– **正の演算子**`+x`
– **負の演算子**`-x`減算、乗算、および分割方法は比較的単純です。これは、対応する数学操作を実行することです。
## 加算オペレーター
### 基本的なルール
プラスオペレーター（`+`）これは最も一般的な演算子であり、2つの値を見つけるために使用されます。
“`javascript
1 + 1 // 2
“
適応型Range符号
今回は算術符号の一種であるRange符号を紹介。圧縮効率に優れ、1文字を1 bit未満にまで圧縮できるなんてわくわくしますね。おまけにとても高速です。そこら中で使われまくっているのも納得です。
## 実装
頻度表を作る処理。`size`は文字の種類でFile処理するなら256とするのが定番。
その場合0～255の範囲に文字頻度、256～271に区間頻度、272に頻度合計を格納。
区間頻度は文字の種類を16分割した分。これは累積頻度を高速に求めるために使います。
単純に文字番号200までの累積頻度を求める場合、for loopを200回ぶん回す事になりますが、この実装だと`200/16+200%16`、つまりたったの20回ぽっちで求まります。
“`js
function initFreq(size){
var F=new Uint16Array(size+17),i=F[size+16]=size;
for(;i;)F[–i]=1;
for(;i++<16;)F[size++]=16; return F } ``` ### 圧縮部 関数定義部と変数宣言部。`In`は圧縮元配
2.JavaScriptデータの種類
# NULL、未定義とブール値
> 警告: 記事は機械翻訳があるため、学習参考用のみ
## NULLと未定義
### 概要
`null`そして`undefined`「なし」と表現することができますが、その意味は非常に似ています`undefined`または`null`正直に言うと、文法効果にほとんど違いはありません。
“`javascript
var a = undefined;
// 或者
var a = null;
“`上記のコードでは、変数`a`割り当てはです`undefined`そして`null`これら2つの方法の効果はほぼ同等です。
存在する`if`声明では、それらは自動的に変えられます`false`、等しいコンピューティングシンボル（`==`）2つは等しいと直接報告しました。
“`javascript
if (!undefined) {
console.log(‘undefined is false’);
}
// undefined is falseif (!null) {
console.log(‘null is false’);
}
Fitbit Web API：歩数の取得
# はじめに
この記事は[前回](https://qiita.com/ishidad2/items/c18881a36b58acdd5a76)の続きです。
まだFitbit Web APIを実行したことがない方は以下の記事を参考にしてください。https://qiita.com/ishidad2/items/c18881a36b58acdd5a76
# やること
今回はWeb APIよりステップ（歩数）の情報を取得してみようと思います。
# API情報
[公式リファレンス](https://dev.fitbit.com/build/reference/web-api/intraday/get-activity-intraday-by-date/)を見ると以下のエンドポイントでSteps（歩数）の取得ができるようです。
また、このエンドポイントは`calories` , `distance` , `elevation` , `floors` , `steps`
を`resource`に指定することで、それぞれデータを取得することができるようです。
■動作説明
* スライダーを操作して好みのフレーバーになるように調整する
* サーチボタンを押す
* 好みのフレーバーに近い日本酒が５つ表示される実際に触ってみる↓
https://amazing-speculoos-905595.netli
【Next.js】middleware.tsのfetch failedについて
# はじめに
Next.jsにはmiddlewareを簡単に設置することができる。決められた場所に「middleware.ts」または「middleware.js」を作成して実行したい処理を記述するだけで簡単にmiddlewareを走らせることができる。が、そのmiddlewareファイルでAPI通信を走らせたい場合にfetchを利用したが、実行できず「fetch failed」エラーが出た。これを解決するのに恥ずかしながら結構時間を費やしてしまったため、備忘録として書き留めておく。※環境はDockerを使用しているのでDockerでの解決方法
# 環境
+ Docker
+ node.js v20
+ Next.js v14# 前提
Next.jsのアプリケーション内では「axios」を使用している。middlewareファイルではaxiosが動作しないため、fetchを使用してAPIを走らせるところまでは辿り着いた。だがそのfetchも動かなかった。。
原因は
+ そのAPIのURLは間違っている
+ localhostに拒否されている
+ 127.0.0.1に拒否されて
Android ChromeでJavaScriptのscrollIntoViewを使う時は注意しよう
# `scrollIntoView`という便利なメソッド
Webページ内の特定の要素を画面に表示される領域までスクロールさせることができます。
しかも、簡潔に実装できます。とっても便利です。
“`js
const targetElement = document.getElementById(‘elementId’);
targetElement?.scrollIntoView();
“``window.scroll` や `window.scrollTo` などを利用して、同挙動を実現することは可能です。
ただ、特定の要素の位置座標を取得するロジックが必要になるなど、`scrollIntoView` より多くの処理が必要となります。
`scrollIntoView` は最新のブラウザでサポートされており、スムーススクロールの設定も簡単にできるので、スクロール処理を実装する際の有力な選択肢になりそうです。
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView
## Androidの
LWC 子コンポーネント 画面読み込み時の処理方法
SalesForceのLWCについて、
親コンポーネントから子コンポーネントを呼び出すときに、親から与えられた引数を条件に子の画面表示を変えるという課題があった。パッと思いついた方法が以下。
・constructor
・connectedCallback等のcallback
・getterそれぞれで動くのか検証してみた。
検証ではmodalを子コンポーネントとして使用。“`javascript:myModal.js
import { api } from ‘lwc’;
import LightningModal from ‘lightning/modal’;
export default class MyModal extends LightningModal {
@api content;//親コンポーネントから渡された値// constructor
check_const = false;
constructor() {
super();
if( this.content = “test” ){ this.c
JavaScript での多重比較におけるp値補正の実装
# 多重比較の補正について
## はじめに
統計解析において、3群以上の比較を行う際に各群の組み合わせごとに検定を行うと、検定の回数が増えてしまい、多重比較の問題が生じます。
多重比較とは、複数の仮説を同時に検定する際に生じる問題です。検定を繰り返すことで、第一種の過誤（帰無仮説が正しいにも関わらず棄却してしまう過誤）を犯す確率が高くなってしまいます。
要するに、3群だと3回、4群だと6回、5群だと10回というように、群の数が増えるごとに検定の回数が増加していきます。
一般に、$k$群の比較を行う場合、検定の回数は以下の式で求められます。
検定の回数: $\_{k}C_{2} = \frac{k(k-1)}{2}$
例えば、7群の比較を行う場合、21回の検定が行われるわけですから、そのうちの1回くらいは偶然 p<0.05 になりそうです。 そのため、多重比較の補正を行う必要が生じます。 Bonferroni法やHolm法などの補正方法を用いることで、検定の回数に応じて p値を適切に調整し、第一種の過誤を制御することができます。 ただし、これらの補正方法は保守的になりが
Fitbit Web APIで生体情報を取得
# 始めに
私は普段からFitbitを愛用しています。（愛機は[Fitbit Versa 4](https://www.fitbit.com/global/jp/products/smartwatches/versa4?sku=523BKBK)）
:::note info
Fitbitは健康とフィットネスを追跡するためのデバイスとサービスを提供する会社です。
Fitbitの製品ラインアップには、アクティビティトラッカーやスマートウォッチがあり、歩数、心拍数、睡眠の質、消費カロリーなどのデータを専用のデバイスで取得し管理しています。
:::https://www.fitbit.com/global/jp/home
このFitbitのアクティビティデータを使ってなにか出来ないかと思い、まずはAPIからのデータ取得方法の手順を調べたのでメモします。
# Fitbit開発者アカウントの作成
https://dev.fitbit.com/build/reference/web-api/developer-guide/getting-started/
簡単に流れを説明すると以
[Javascript]Promise.all()は結果を返さない件
# はじめに
お久しぶり。また投稿をしに来ました。
最近はずっっっっっとbackendの開発をやっていて、frontendはもう忘れちゃう気がします。土日にelectron+reactでデスクトップアプリを開発してみて、frontendの知識も忘れない…かな？
さて、本題ですが、`Promise.all()`について皆さんはご存じでしょうか。複数のpromiseをまとめて実行する便利なメソッドですが、以前私は誤っていた書き方で大変なデバッグをしたのです。# 正常例
まずは下記のソースコード：
“`js
const promise1 = new Promise((resolve, reject) => {
console.log(“p1”);
resolve(1);
})
const promise2 = new Promise((resolve, reject) => {
console.log(“p2”);
resolve(2);
})
const promise3 = new Promise((resolve, reject) => {
console.l
テキスト落下アニメーションを作ってみる（HTML/CSS/JS）
# はじめに
本記事ではHTML、CSS、JSを使用し、テキストに落下するアニメーションを実装する方法について紹介します。# ゴール
次のような落下アニメーションを作成する事を本記事のゴールとする。
# ソース
## HTML
htmlファイルを準備します。
htmlでは`p`タグで`落下アニメーションをつけた文字サンプル` というテキストを表示させます。
アニメーションについて別のJSとCSSで作成するのでそれらのファイルをインポートしておきます。“`html:index.html
ブラウザでのJavaScirptの動作について## JSの実行にかかわるもの
– JavaScript エンジン
– Web APIs
– コールバックキュー
– イベントループ## JavaScriptエンジン
### 仕事
JSを解析→コンパイル→実行ブラウザによって使用されているJavaScriptエンジンは異なる。
Googleであれば、V8エンジン。### JITコンパイル
プログラミング言語には、コンパイラ言語とインタプリタ言語がある。コンパイラ言語：実行前に実行可能ファイルへと変換し、それを実行する形式。
インタプリタ言語：実行しながら評価する形式。JavaScriptはその中間である、JITコンパイラが使用されている。
JITコンパイラは頻繁に実行されるコードや実行に時間がかかるコードをマシンコードにコンパイルする形式。### 実行までの流れ
#### parsing
コードを解析し、AST（抽象構文木）と呼ばれるデータ構造を作成する。#### compile
頻繁に実行されるコードをコンパイルする。#### execute
作成したコードを実行する。
コンパイル部分はそのまま実行
ジュニアエンジニア備忘録：アルゴリズム(2) – バブルソートについて
アルゴリズムの中には様々な整列方法がありますよね。
その中で今回はよく聞くけど、実際に使われているのはあまり見ない「バブルソート」についてまとめてみました。## バブルソートとは？
### 自分の言葉で整理してみる
配列中で連続した2つの要素を比較し、交代し続けること### 定義
wikipediaさんによる定義は以下のようです。
>バブルソート（英: bubble sort）は、隣り合う要素の大小を比較しながら整列させるソートアルゴリズム。https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%96%E3%83%AB%E3%82%BD%E3%83%BC%E3%83%88
## バブルソートの動き
「隣り合う要素の大小を比較」を繰り返すことで整列をしています。
その過程の中で毎回「最大値を最終indexまでに持っていく」をすることになっていますね。以下のサイトから可視化されたバブルソートのみることができたので、持ってきました。
https://visualgo.net/en/sorting
今回用いるデータはこれ。`[29, 1
１.Javascript基本文法
# JavaScriptの基本的な文法
> 警告: 記事に機械翻訳するものがあるので、学習メモとして保存、参考学習用のみ
## 文法
JavaScriptプログラムのエグゼクティブユニットは、一般的に1つずつ実行されます。
ステートメントは、特定のタスクを完了する操作です。以下は、割り当てステートメントの行です。
“`javascript
var a = 1 + 3;
“`このステートメントは最初に使用されます`var`コマンド、変数を宣言しました`a`、それから`1 + 3`計算結果は変数に割り当てられます`a`次に、
`1 + 3`これは、声明と表現の違いを取得するための計算式を指しますたとえば、JavaScript言語で価値があると予想される人は、等しい数の右側が値になると予想されるため、さまざまな表現を配置できます。
ステートメントはセグメントの最後で終了し、セクションは1つのステートメントが終了したことを示しています。
“`javascript
var a = 1 + 3 ; var b = ‘abc’;
“`セグメント番号の前にコンテンツはあ
