- 1. 【備忘録】休業日と営業日の表示を非同期通信で切り替えるRailsアプリの実装
- 2. globalThis【JavaScript】
- 3. eslint-plugin-import-accessを使ってみる
- 4. 【Next.js エラー対応】”Image with src “/images/[image-file-name.png]” has either width or height modified, but not the other…”
- 5. 面接官「0.1 + 0.2 == 0.3 が成立しない理由を説明せよ」
- 6. JavaScript の async/await について
- 7. Teachable Machineを使ったWebアプリの作り方
- 8. PC で利用できるマイクなどのオーディオ入力のリストを p5.js Web Editor上で見てみる（ブラウザの MediaDevices）
- 9. WordPressでJavaScriptを埋め込む方法
- 10. 遅延シーケンス in JavaScript (function 使わない版)
- 11. SIP-1000準拠のデコーダーを作る
- 12. 配列 [JavaScript]
- 13. kintoneの保存時(submit)にSweetAlert2を使って保存させるか選ばせる方法
- 14. ArrayBuffer transfer/detachedについて意識しないとひどい目にあう話
- 15. Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/5/22現在)
- 16. 外部トリガーからカメラを起動してTeachable Machineに繋げてみる
- 17. クライアント側での添付ファイル読み込みとアップロード
- 18. global object 【JavaScript】
- 19. Qiita APIで特定ユーザーのQiitaの記事を検索する
- 20. Discord.js v14 botの作り方【基礎・メッセージ編】 (2024/5/22現在)
【備忘録】休業日と営業日の表示を非同期通信で切り替えるRailsアプリの実装
## 内容
休業日と営業日を切り替えて表示するために、以下のコードを実装しました。
備忘録なので説明は省いています（面倒くさいので・・・）### `app/controllers/reservations_controller.rb`
“`ruby
def update_slots
date = params[:date]
@date = Date.parse(date)
@company = current_company
@time_slots = generate_time_slots(@company)
@non_business_day = ScheduleService.is_non_business_day?(@company, @date)
@services = @company.services
@service_availability = ScheduleService.calculate_availability(@company, @date, @services, @time_slots)
response_data
globalThis【JavaScript】
# はじめに
https://qiita.com/kohki_takatama/items/5f1c6f75e6bbf6553682
前回の記事では、ホスト環境によってglobal objectの名称と挙動が違うことを書きました。
– Node.js：`global`
– ブラウザ：`window`（この他にもホスト環境は存在します）
この記事にコメントを頂いたのですが、どうやら`globalThis`という共通の名称が使用できるようです。
名称は同じ。では挙動はどうでしょうか。検証してみます。
# ブラウザ：`window`
前回の記事で確認した、いずれの点も`window`と同じ挙動でした。
– `const`を使用した変数宣言は、`window.name`ではアクセスできない
→`globalThis.name`も同様
– `var`を使用した変数宣言は、`window.name`でアクセスできる
→`globalThis.name`も同様
– `console.log`と`window.console.log`は完全に等しい
→`globalThis.cons
eslint-plugin-import-accessを使ってみる
:::note
## 概要
`defaultImportability: ‘package’`のオプションで丸ごとpackage-privateにできます
このオプションがない場合だと`@package`のつけ忘れによる誤exportが起こり得ますがそれを防いでくれます 👍
[dependency-cruiser](https://github.com/sverweij/dependency-cruiser)と[eslint-plugin-strict-depenencies](https://github.com/knowledge-work/eslint-plugin-strict-dependencies)との使い分けを考え直す必要性を感じました
:::# 1. 背景 🖼️
TypeScirptではexport宣言した変数や関数は全てのファイルからimportできてしまいます。
これにpackage-privateの機能を組み合わせれば外部のディレクトリからimportを制限できたり、モジュール管理がしやすくなると思い調査しました。
https://qiita.com/
【Next.js エラー対応】”Image with src “/images/[image-file-name.png]” has either width or height modified, but not the other…”
Next.js の next/image で画像の縦横比を設定しろと怒られた場合の対処法。
（公式マニュアルをちゃんと読んでおけば遭遇しないやつ）### エラーメッセージ
“`
“Image with src “/images/[image-file-name.png]” has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles ‘width: “auto”‘ or ‘height: “auto”‘ to maintain the aspect ratio.”
“`直訳：「[画像名]は幅か高さのどちらかが変更されていますが、もう一方は変更されていません。CSSを使って画像のサイズを変更する場合は、縦横比を維持するために「width: “auto”」または「height: “auto”」スタイルも含めてください。」
### 元のコード
“`reacttypescript
面接官「0.1 + 0.2 == 0.3 が成立しない理由を説明せよ」
## 面接官「0.1 + 0.2 == 0.3 が成立しない理由を説明せよ」
という質問がきたらどう答えるだろうか。
## 0.3にはならない
### Javascript
適当なブラウザから以下のようなJavascript実行した。結果「0.1+0.2==0.3」は「false」となった。“`js
0.1+0.2==0.3
//false
0.1+0.2===0.3
//false
“`
ちなみに以下のような先頭に0をつけなくても、小数点として解釈される。
“`js
.1+.2==.3
//false
“`### Python
バージョン3.10.11で検証する。同様に「0.1+0.2==0.3」は「false」となった。“`py
>>> 0.1+0.2==0.3
False
“`## なぜか
これは
JavaScript の async/await について
曖昧な理解ではなく、確実な理解を目指す立場から、まずコルーチンとイベントループを簡単に説明してから、Promiseとasync/awaitを解説します。
### コルーチンと `yield`：フィボナッチ数列のジェネレーター
コルーチン（coroutine）と`yield`を理解するには、ジェネレーター関数を用いると効果的です。ここでは、フィボナッチ数列を生成する例を通じて説明します。
#### フィボナッチ数列のジェネレーター
フィボナッチ数列は、次の数が前の二つの数の和である数列です。以下に、フィボナッチ数列を生成するジェネレーター関数を示します。
“`javascript
function* fibonacci() {
let [a, b] = [0, 1];
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
“`このジェネレーター関数`fibonacci`を使用する呼び出し元のコード例は以下の通りです：
“`javascript
const gen =
Teachable Machineを使ったWebアプリの作り方
こんにちは！小売業で働いているHaMaです。
私の勤めている店舗には、共有PCが事務所に4台あります。
皆さんが使うため、エクセルファイルやPDFファイルなど、データがデスクトップに散らかり放題です。
よく使うアプリケーションが埋もれてしまい、探すのに一苦労します。そこで今回は、Teachable Machineを用いてデスクトップの散らかり具合を測定するWebアプリを制作しました。
「整頓済み」「散らかっている」という判断を、人の感覚ではなく、アプリにさせることで、あるべき姿を店舗従業員の皆さんで統一しようという試みです。# 作品の紹介
Teachable Machineをつかってデスクトップの散らかり具合を測定するwebアプリを作りました。
これからqiitaの記事にまとめます。PC で利用できるマイクなどのオーディオ入力のリストを p5.js Web Editor上で見てみる（ブラウザの MediaDevices）過去に、以下の記事を書いた際にやった内容の、マイクバージョンというような内容です。
●p5.js で利用する内蔵／Webカメラ映像を特定のデバイス名のものに設定する（配列メソッドと MediaDevices.enumerateDevices() を利用） – Qiita
https://qiita.com/youtoy/items/a77d193fcd50a8151f17オーディオの入力を、JavaScript の処理で取得してみるというものです。それを p5.js Web Editor上で行ってみます。
## オーディオの入力のリストを確認する
### 既存の Webサイトで確認する
まずは、既存の Webサイトを使い、オーディオの入力のリストを確認してみます。例えば [WebRTC samples](https://webrtc.github.io/samples/) のマイクなどが使われるサンプルで、以下などを別タブで開いてみます。
●Select audio and video sources
https://webrtc.github.io/samples/WordPressでJavaScriptを埋め込む方法
## はじめに
今回はWordPressでモーダルを実装する際にJavaScriptをどこに埋め込めばいいか悩んだのでその解決策をまとめる
## 問題点
WordPressでJavaScriptのコードをどのphpファイルに埋め込めばいいのか
## 解決策
footer.phpの“`