- 1. カスタムフックと自作javascript関数は何が違うのか
- 2. JavaScript——深度理解（1）
- 3. Google Apps Script: HTTP APIを呼び出してJSONを取得する方法
- 4. 【JavaScript】関数とオブジェクト⑳ ディスクリプター
- 5. javascript 配列の要素を足す方法
- 6. Google Apps Script: シートの最終行にレコードを追加する方法
- 7. map メソッドのユニークなキーがないと出るエラー
- 8. お願いマッスル！腹筋の回数指定して！！！
- 9. HTMLスーパー初心者、Anime.jsを使ってみる
- 10. 買った服と捨てた服 色をカウントするWebアプリ（番外編：ポケモン神経衰弱） #codepen #Netlify #ポケモン
- 11. 歴代推し一覧を作ってみた。 #CodePen #Bootstrap
- 12. Teachable Machineを使って、ゆでたまごの気持ちをツンデレ風に表現してみた
- 13. あなたはイヌ科？ネコ科？それとも・・・を顔判定
- 14. addEventListener の第３引数の false
- 15. 亭主関白をサポート★ぱっと見では分からない「缶ビールの残量」をAIが判定
- 16. 【JavaScript】上スクロールすると出現するheaderの作り方【jQuery未使用】
- 17. 【Next.js】Next.js 12について本気出して和訳してみた
- 18. “[Violation] ‘setTimeout’ handler took ○○ms”という表示がでてくる
- 19. 【JavaScript】お前はまだコレクション関数を知らない
- 20. C#から仮想通貨サイトのAPI(Node.js)を呼ぶ C#とNode.jsを連携させる
カスタムフックと自作javascript関数は何が違うのか
#はじめに
hooksと普段から呼んでいるが、javascript関数と厳密に言えばどういうところが違うのだろうと思い調べた。#前提
hooks、javascriptともにアロー関数を想定。ここで言うjavascript関数はtypescript関数を含む（どちらかというとtypescriptより）。#hooksとは
hook,hooks,フック,Hooks API,React Hooksなどいろいろな呼び方がありますがすべて一緒です。>**フック (hook)** は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。
React公式[[1]]より引用。
要するにクラスコンポーネントじゃなくて関数コンポーネントでもstateなどのReactの機能を使うためのもの。useState、useEffectなどは特によく使う。自分独自にフックを作成することも出来、自分が作成したフックをカスタムフックと呼びます。
>自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数
JavaScript——深度理解（1）
#従来のコンパイル言語フロー（コンパイル）
1.分詞・品詞分析（形成品詞ユニット流）
2.解析/文法分析
このプロセスは、語法ユニットストリームを要素レベルごとにネストされた構成に変換するプログラムシンタックス解構成を表すツリーです。この木は「抽象文法樹」と呼ばれています。（Abstract Syntx Tree AST）3.コード生成
JIT Just in time
AOT Ahead of time#LHSとRHS
LHSは関連容器を見つける。
RHSは対応する値を見つける。
RHSクエリがネストされているすべてのスコープの中で必要な変数が見つからない場合、エンジンはReferenceErrerをスローします。
対照的に、エンジンがLHSクエリを実行すると、最上階（グローバルスコープ）でも目標変数が見つからない場合、グローバルスコープではその名前を持つ変数が作成され、エンジンに返却され、プログラムが非厳格モードで実行されることが前提となる。
ReferenceErrorは作用域判別失敗に関連していますが、Type Errorは作用域判別に成功しました。しかし
Google Apps Script: HTTP APIを呼び出してJSONを取得する方法
Google Apps Script(GAS)で外部のHTTP APIを呼び出し、そのレスポンスからJSONデータを取り出す方法です。
GASで外部サイトにHTTPリクエストを送るには、`UrlFetchApp.fetch`を使います。その戻り値は`HTTPResponse`です。`HTTPResponse.getContentText`でレスポンスボディーが得られるので、それをJSONパースすることでデータが得られます。
“`js
function fetchJson(url) {
const res = UrlFetchApp.fetch(url);
return JSON.parse(res.getContentText());
}
“`## 使い方
“`js
function example() {
const users = fetchJson(“https://jsonplaceholder.typicode.com/users”);
console.log(users[0].name); //=> “Leanne Graha
【JavaScript】関数とオブジェクト⑳ ディスクリプター
#はじめに
Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。
前回の記事
https://qiita.com/nao0725/items/558337083753dd4507ed
#目的
* 関数とオブジェクトについての理解を深める
#本題
###1.プロパティーとディスクリプター下記の記事も参考にさせて頂きました。
ディスクリプターとは「裏設定」みたいなもの？？https://javascript.keicode.com/lang/object-object-property-attributes.php#2-1
| プロパティの設定値||
|:-:|:-:|
| value | 値 |
| configurable | 設定変更可能性 |
| enumerable | 列挙可能性 |
| writable | 値の変更可能性 |####例1
“`js
// オブジェクトを１つ
javascript 配列の要素を足す方法
“`
const items = [1,2,3,4,5]
“`
上みたいな配列があって、
中の要素を足したい場合“`
items.reduce((a, b)=> a+b)
⇒ 15
“`
`reduce` メソッドを使うと要素を足してくれる挙動は少しわかりづらいけど
引数を２つとって
第一引数には累積値が
第二引数には要素が入るよう配列に対して使うメソッド
要素全てに対して行うので
`map` メソッドとか `filter` メソッドとかに近い`map` や `filter` との違いは
返り値が配列かどうか。`reduce` メソッドの返り値は単一に対し、
`map` メソッドや `filter` メソッドは返り値が配列ちなみに
“`
const st = [“a”,”b”,”c”]
st.reduce((a, b) => a+b )
⇒ ’abc’
“`こうやって文字列の連結も出来る
これに関しては
“`
const st=[“a”,”b”,”c”]
st.join(“”)
⇒ “abc”
“`上のように `join`
Google Apps Script: シートの最終行にレコードを追加する方法
Google Apps Scriptでスプレッドシートの最終行にデータを追加する方法を説明します。
## 最終行にデータを挿入する関数
“`js
function addRecord(sheet, rowValues) {
const lastRow = sheet.getLastRow();
const range = sheet.getRange(lastRow + 1, 1, 1, rowValues.length);
range.setValues([rowValues]);
}
“``Sheet`のAPIには最終行にデータを追加するメソッドがないので、上のような関数を作っておく必要があります。
## 使い方
最終行のA列〜C列にそれぞれのセルに1、2、3を追加する例です。
“`js
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
addRecord(sheet, [“1”, “2”, “3”]);
“``rowValues`の型は`string[]
map メソッドのユニークなキーがないと出るエラー
コンソール上で以下のエラー
“`
index.js:1 Warning: Each child in a list should have a unique “key” prop.
“`これは map メソッドで作られる要素に
ユニークなキーがないとでるエラーしかし
“`
[…Array(12).keys()].map(i =>
)
“`
ついてますが。は？
ってなった___
どうやら
“`
[…Array(12).keys()].map(i =>
お願いマッスル！腹筋の回数指定して！！！
# めっちゃ痩せたい、Yes！
最近筋トレをするようになったが、正直とても気分にムラがある。
**あわよくば楽をしたい。**
いっそ、Webアプリケーションで回数指定してもらえれば「アプリ君が言うなら仕方ないな～」的な感じでちゃんとやるかもしれない。
少ない回数だとラッキー感が出るので、**ムラがある腹筋の回数指定をするWebアプリ**を作った。# お願い、マッスル！ :muscle::muscle::boom::boom::boom:
https://silly-swirles-249529.netlify.app**＜使い方＞**
1. 「CLICK！」ボタンを押す。
2. 表示された回数の腹筋をこなす。
3. 「達成！」ボタンを押す。
4. :muscle::muscle::muscle:**ナイスマッスル！！！！！！！**:muscle::muscle::muscle:# 使ってみた感想「腹筋めっちゃしんどい」
やりました。腹筋51回。）を見ると、めちゃめちゃエグイ動きをする。# 問題発生：スーパー初心者、ライブラリのインストールの仕方が分からない
使いやすいと噂のライブラリを使いたいがライブラリを使うために、そもそも何をどうしたら使える状態になるのかが分からない。
公式サイトのダウンロードボタンを押してダウンロードしても、めちゃめちゃ丁寧に書かれているサイトを見ても、何をどうするのかがまじで全然わからない（絶望）。何故ならスーパー初心者だから。# 解決策：スーパー初心者、jsDelivrからコードを取得する
https://www.jsdelivr.com/package/npm/animejs
jsDelivrからHTMLに埋め込む用のコードが取得できるという情報を入手。
一番上で「lib/anime.min.js
買った服と捨てた服 色をカウントするWebアプリ（番外編：ポケモン神経衰弱） #codepen #Netlify #ポケモン
##企画##
以前noteで**欲しい服よりも要らない服の情報が自分にとって有益**という話を書きました。
https://note.com/taka_xedge/n/n476f431c3f5b
今回はじめてWebアプリを作るにあたり、**捨てた（売った）服＝「自分にとって有用でない服」の色をカウントするアプリ**を作ってみます。
服にもいろいろ属性があるので、まずは「色」からチャレンジです。
##ベース##
こちらのcodepenを~~パクr~~使用させていただきました。リスペクト:pray:
ライブラリは「jQuery」「jQueryUI」が使われています。
##試作品##
ベースをもとに以下の修正を加えました。
①ボックスのバリエーションをアルファベットから色に変更
②１ボタンで1と0を行き来する仕様だったところ、カウントアップし続けるよう変更（「嫌い」を累積）
③各ボタンに個別のカウンターを追加
④各ボタンをそれぞれのカラーに変更
歴代推し一覧を作ってみた。 #CodePen #Bootstrap
#「結局全部で推しは何人いるの？」
きっかけは会う度に推しが増える私に対して友人が放ったこの一言だった。30年生きているのでそれなりの数の出会いは経験してきた。(※推しの話)
幼少期、思春期、青年期、それぞれに出会った相手との大切な思い出がある。(※推しの話)
そうだ、私を通り過ぎて行った彼らのことを思い出と共に書き連ねてみよう。(※推しの話)
ということで、歴代の男たちを記録するアプリを作ってみた。(※推しの話)#歴代推し登録アプリ
以下からどうぞ。https://xenodochial-montalcini-5e9d78.netlify.app
#使うとこんな感じ
名前、作品、出会った時期（幼少期～青年期まで選択）、推しポイントと自由書き込み欄を作った。
入力したら、［新規登録］ボタンを押すだけ。
あなたはイヌ科？ネコ科？それとも・・・を顔判定
#飼っているペットに似る？
最近学んだ機械学習を使って何かできないかな・・・と思っていたところ、
ちょうど同僚とランチをしているときに、
いずみさんって**「なんか犬っぽいですよね！」**
という会話から始まり、**飼っているペットに似るのかなぁ・・・**という疑問から
機械学習で猫っぽいのか？犬っぽいのか？を判定してみよう！ということでチャレンジ！#猫と犬の学習
[Teachable Machine](https://teachablemachine.withgoogle.com/)で犬と猫の写真を学習させました。
工夫したところは、
:::note info
・顔がうつったアップの写真を選ぶこと
・犬や猫の中でも種類が違うものを選ぶこと
:::です。
#完成品
なんかのテキストで
`addEventListener` の第３引数に false をつける箇所があった“`
const lists = document.getElementById(‘lists’);
const target = document.getElementById(‘btn’);
target.addEventListener(‘click’, function() {
const form = document.getElementById(‘name’);
const list = document.createElement(‘li’);
list.textContent = form.value;
lists.appendChild(list);
form.value = “”;
},false); (←ここ)
“`これってなんだって思って調べた
https://k-chan-note.jp/js-addeventlistener-usecapture.php
どうやらキャプチャフェー
亭主関白をサポート★ぱっと見では分からない「缶ビールの残量」をAIが判定
#疲れた旦那さまを癒したい！
ということで、旦那さんのビールがなくなる前に、
新しい缶ビールをそっと持ってくるのが、私の夜のお仕事（笑）
でも、ちょっとテレビを見たり、目を離すと、
気付いたらなくなってしまっていて、
「おかわりちょうだい」と言われて、イラっとしちゃう自分がいるのも事実（笑）#缶の中身が分かる！？
居酒屋で働いていることもあり、お客様の飲み物の残量には敏感で、
実はグラスの中を見ているのではなく・・・
**肘やグラスの角度**を見て残量を把握しています。
なので、缶ビールに置き換えると、
**この角度になったら、少なくなっているな！**というのが、
缶の中身が見えなくても分かるのです！！#完成品
【JavaScript】上スクロールすると出現するheaderの作り方【jQuery未使用】
上スクロールするとふわっと出現するheaderを、素のJavaScriptのみで実装します。
ユーザービリティの高いヘッダーの挙動だと思うので、よければ参考にしてみてください！## 成果物
下スクロールすると要素が消えて、上スクロールすると要素が現れます。
※今回はJavaScriptの解説がメインなので、header本体のスタイリングについては触れません。See the Pen 【Next.js】Next.js 12について本気出して和訳してみた
## Next.js 12について本気出して和訳してみた
Next.js 12がリリースされました！！！?
公式ページは英語となっておりますので、Next.js 12の内容を和訳していきます。公式ページは以下となっております。
https://nextjs.org/blog/next-12英語が苦手な方はこの記事を参考にしてください！！！
※本記事で使用している画像は公式ページのものです。—
## Next.js 12
2021年10月27日(水)
[Next.js Conf](https://nextjs.org/conf)で発表したように、Next.js 12は過去最大のリリースとなります。
– [Rustコンパイラー](#rustコンパイラーによるビルドの高速化とリロー
“[Violation] ‘setTimeout’ handler took ○○ms”という表示がでてくる
#はじめに
React x Firebase realtime databaseを使ってアプリケーションを作成していたところ、コンソールに”[Violation] ‘setTimeout’ handler took ○○ms”という表示が出てきた(setIntervalのものもあった)。原因がなにか分からなかったので調べたものを備忘録として残す。#結論
致命的なエラーなどではない。#詳細
こちら[[1]]で詳細が書かれていた。調べてみるとsetTimeoutとsetIntervalはjavascript関数のよう。自分で書いた覚えはないので、ライブラリなどのなかで使われている可能性が高い。今回だとFirebase realtime databaseがかなり怪しい。他にもなっている方がいたら連絡ください。必ず直す必要があるわけではないが、改善の余地があるという認識で良さそう。#対策
どれが原因なのかはっきり分かっていないので対処のしようがない。もし消すならば、コメントアウトなどして原因のコードを追求し、改善する必要がありそう。#おわりに
もうちょっと詳細を書いておいてほし
【JavaScript】お前はまだコレクション関数を知らない
## お前はまだコレクション関数を知らない
皆さんはコレクション関数を使いこなしているでしょうか？
コレクション関数をうまく使うことはコーディングのテクニックの1つです。
コレクション関数をうまく使うことで処理の効率が上がったり、コードの可読性が上がり、いわゆるイケてるコードを書くことができます。
今回は自分がよく使用するJavaScriptでコレクション関数をほぼほぼ全部まとめました。※本記事では、非推奨になっているコレクション関数は記載しません。
この記事の対象は以下です。* 公式リファレンスを読むだけじゃ、処理のイメージがつかない人
* コードと実行結果を載せますので、イメージがつきやすいかと思います。
* 処理は理解しているが暗記していないため、パッと調べて使いたい人
* コードを暗記する必要は全くありません。処理を理解しとけば良いです。メモとして活用ください。## JavaScriptのコレクション
コレクションというのは、データをまとめて格納するデータ構造の総称であり、JavaScriptでは以下のコレクションがあります。* 配列
* 連想配列構
C#から仮想通貨サイトのAPI(Node.js)を呼ぶ C#とNode.jsを連携させる
###C#から仮想通貨サイトのAPI(Node.js)を呼ぶ
###バイナンスAPIをインストールする
Node.jsからnpmを使いインストールします。
“`
npm install -s node-binance-api
“`https://github.com/binance-exchange/node-binance-api
####サンプルスクリプト
“`Sample.js
const Binance = require(‘node-binance-api’);
const binance = new Binance();
binance.prices(‘BTCUSDT’, (error, ticker) =
