- 1. Vue.jsでライブラリを使用せずカレンダーを作成する：取得データの渡し方
- 2. 高階関数の基本 [JavaScript]
- 3. 【インクリメント演算子】hoge++ と ++hoge の違いとは
- 4. JavaScriptのグローバルオブジェクト：this と Function(‘return this’)()
- 5. GoogleChromeの拡張機能を作ってみよう
- 6. 複数の非同期関数で実行されるset更新関数でハマった件
- 7. 永久無料QRコード生成ウェブサイト：簡単、効率的、信頼性
- 8. lottieのDOM移動
- 9. JavaScript で static メソッドと同名のインスタンスメソッドを定義する
- 10. CapCutの高品質なTTSを使いたいからラッパーAPIを作ったお話
- 11. スコープ 関数スコープ、ブロックスコープ [JavaScript]
- 12. 【雑メモ】Reactの公式ドキュメントを読んでみて
- 13. JavaScriptにおける基本的なDOM操作まとめメモ（追加予定）
- 14. まだ手書きでJSONバリデーションしてるの？
- 15. 要素の垂直位置の取得方法（JQuery↔︎Vanilla JS）
- 16. defineXXXXの関数を使うとnot definedと出る時の対処法
- 17. [JavaScript] filterメソッドとは
- 18. スクリーンショットテストのプラクティスについて調べるメモ
- 19. 関数基礎 function( ) 、return [JavaScript]
- 20. 【一口メモ】CSSやjavascriptなどのファイルを編集した後何回再読み込みしても更新されないときの対処法
Vue.jsでライブラリを使用せずカレンダーを作成する：取得データの渡し方
# ◾️ はじめに
Vue.jsを学習中のエンジニアです👩🏻💻
今回、Vueのライブラリを使用せずにカレンダーを作成中に発生したエラーについて記事を書こうと思います。カレンダーのライブラリを使用しない理由は、カレンダーを好みのデザインやカスタマイズを行う際に、ゼロから作成した方が操作しやすいと考えたからです。
# ◾️ データの渡し方
**前提**：
– ６×７の日曜日スタートのカレンダーを作成
– 当月が日曜から始まらない部分に前月を表示
– 当月最終日から４２マス目までは次月を表示
### ◉ やりたいこと
**『カレンダーの月が変更されると、その月ごとに日付を取得し、日付を管理するコンポーネントで表示できるようにする』**① TypeScriptファイルの`useYearMonthDate.ts`の**allDates**でカレンダーの日付を取得
“`useYearMonthDate.ts
import { computed, ref } from ‘vue’export const useYearMonthDate = () => {
// exports
高階関数の基本 [JavaScript]
JavaScriptにおける高階関数とは？
高階関数はさまざまなプログラミング言語で使用することができ、
主に２つの役割があります。高階関数の役割。
:::note info
１、引数として関数を受け取る、関数
２、戻り値に関数を指定する、関数
:::また、一般的に高階関数はプログラムの柔軟性と簡潔性を向上させるために利用されます。
関数を受け取る関数？関数を指定する関数？
とは一体なんなのでしょうか？１つずつわかりやすく噛み砕いて説明していきます。
## 目次：
– [高階関数 「関数を引数として受け取る」](#高階関数-関数を引数として受け取る)
– [高階関数 「戻り値に関数を指定する」](#高階関数-戻り値に関数を指定する)## 高階関数 「関数を引数として受け取る」
関数は、値なので、変数に入れることができます。
#### 例： 変数に関数式を代入
“`js
let greet = function() {
console.log(“Hello”);
}greet()
“`こちらの例では、greetという変数の中に、関数
【インクリメント演算子】hoge++ と ++hoge の違いとは
# 目次
この記事は2分ほどで読めます。
[1. 問題](#1-問題)
[2. 解説](#2-解説)
[3. 結局どちらを使えば良いか](#3-結局どちらを使えば良いか)# 1. 問題
“`
// JavaScriptの場合
let hoge = 10;
console.log(++hoge);
console.log(hoge++);
“`
“`
// Javaの場合
int hoge = 10;
System.out.println(++hoge);
System.out.println(hoge++);
“`Q: 上記コードを実行したときにどのように表示されるでしょうか？(補足:JavaScriptとJavaの実行結果は同じになります)
考え中・・・
A: 正解は以下のとおりとなります
“`
11
11
“`
# 2. 解説
– hoge++と++hogeの挙動の違いを一言で表すと「変動`前`の変数を返すか変動`後`の違いを表すか」です。
– ++hogeのように++を変数前につけた場合は
JavaScriptのグローバルオブジェクト：this と Function(‘return this’)()
# はじめに
https://qiita.com/kohki_takatama/items/5f1c6f75e6bbf6553682
https://qiita.com/kohki_takatama/items/430640e13e3fa497df2e
先日から、JavaScriptのグローバルオブジェクトについて記事を書いてきました。
記事を書くたびにコメントから学びがあり、ありがたい限りです。
今回もコメントいただいた`this`と`Function(‘return this’)()`について# `this` / `Function(‘return this’)()` のメリット
最初に、今回紹介するものを使うメリットを示します。
基本的には`globalThis`で良さそうなのですが、`globalThis`は比較的新しい機能のようで、レガシー（古い）環境では対応していない可能性が考えられます。
その点、`this` / `Function(‘return this’)()` はより古くから使用されているため、レガシーな環境を想定するならこちらを使うと良いようで
GoogleChromeの拡張機能を作ってみよう
こんにちは、WEBエンジニアの堀井です。
今回は、GoogleChromeを利用している方は、一度は使ったことがあるであろうChrome拡張機能の作成方法について書いていきたいと思います。
## Chrome拡張機能とは
[Chromeウェブストア](https://chromewebstore.google.com/category/extensions)からインストールすることのできる、ブラウザ上で動作する拡張機能のことです。
主にGoogleChromeやEdgeで利用することができます。
有名なものだと、選択した文章を翻訳することができる「Google翻訳」や、ブラウザ上にある色のカラーコードを取得できる「ColorZilla」などがあります。
## 作り方
公式のドキュメントがありますので、こちらを参考にしました。
https://developer.chrome.com/docs/extensions?hl=ja
今回は、拡張機能をクリックすると運勢がわかるおみくじ拡張機能を作成します。
必要なファイルは以下になります。
*
複数の非同期関数で実行されるset更新関数でハマった件
# はじめに
フロントエンドを React で書いていて非同期関数内で実行される更新関数(set 関数)でハマったのでメモしておきます。
## 実際に起こったこと
以下のように外部 API からオブジェクトのデータを別々に取得して、それぞれのデータでオブジェクトを更新する処理を書いたとします[^1]。
API を叩いた結果を用いたそれぞれの更新関数 setHuman の引数は**関数ではなく、現在の値を利用した値で更新しています。**“`javascript
import React, { useState } from “react”;const sleep = async (sec) => new Promise((resolve) => setTimeout(resolve, sec));
const mockGetNameApi = async () => {
await sleep(100);
return “hoge”;
};
const mockGetAgeApi = async () => {
await sleep(500);
ret
永久無料QRコード生成ウェブサイト：簡単、効率的、信頼性
皆さん、こんにちは。Qiitaのみなさまへ。
今回、私たちは喜んでお知らせいたします。永久無料のQRコード生成ウェブサイトが新たに登場しました！このシンプルで効率的なツールを利用することで、世界中のユーザーが簡単にQRコードを生成し、ダウンロードすることができます。
[ウェブサイトのURL] (https://qr.tehito.com)
現代の急速なデジタル化された世界において、QRコードはビジネスや個人にとって欠かせないツールとなっています。小規模なビジネスオーナーやマーケター、情報を迅速かつ効率的に共有したい方々にとって、QRコードは便利な解決策を提供しています。しかし、信頼性の高い、使いやすいQRコード生成ツールを見つけることは難しいことです。
それが私たちのウェブサイトの役割です。私たちは、完全無料で誰でもアクセス可能なシンプ
lottieのDOM移動
appendChild()するだけでは動かなかった。
ChatGPTに聞いて試行錯誤したのでメモ。
公式のドキュメントがあれば教えてください🙇load()とplay()を呼ぶのがポイントみたい。
“` html
Lottie Player Test
JavaScript で static メソッドと同名のインスタンスメソッドを定義する
## TL;DR
JSでクラスを書く際、処理が共通しているので全部のインスタンスに持たせる必要のないメソッドを静的メソッドとして書きたいときがあります。
同じ処理をインスタンスからも実行したい、というとき、同じ名前でインスタンスメソッドを宣言することができます。## コード例
### クラス宣言
“`js:textSeparator.js
class TextSeparator {
static DELIMITER = /(?<=[.!?。！？])\r?\n?/; constructor(text='') { this.text = text; } // static メソッド static split(text) { return text.split(TextSeparator.DELIMITER); } // インスタンスメソッドを同名で宣言し、処理にインスタンスプロパティを使用する split() { return TextSeparator.split(this.text); } } ``` :::not
CapCutの高品質なTTSを使いたいからラッパーAPIを作ったお話
# あいさつ
記事を見ていただきありがとうございます！電子工作したり、サーバーいじったりソフト作ったり…
いろいろしてる大学生です地味に今回が初記事(いろいろあって消えた)になります！
## 注意事項
この記事、実は2024年2月ごろに書いていたのですが、以前の手法が使えなくなりアップデートに時間がかかっていたため、一部古いURL等があります。
ご了承ください。
# 目次
[・なにこれ](#なにこれ)
└[・昔のお話](#昔のお話)
[・使い方](#使い方)
[・APIドキュメント](#APIドキュメント)
[・終わり](#終わり)# なにこれ
みなさん、TikTok や YouTube Short でたびたび流れてくる動画に使われている合成音声のクオリティーに驚くことはないでしょうか？
私も初めて見た時、あまりにも自然でかなりびっくりしました。そんなこんなで検索してみたところ、TikTokのアプリ自体についている読み上げ機能や**CapCut**という編集ソフトに付属している読み上げ機能であの声を作っていることがわかりました。
CapCutの合成音声を知らな
スコープ 関数スコープ、ブロックスコープ [JavaScript]
JavaScriptにおけるスコープとは？
:::note info
変数が「参照できるか」？を現す有効範囲のことです。
:::どこで変数を定義したかによって、どこからその変数を参照できるのかが決まります。
(関数の中？ 関数の外？ for文の中？ if文の中？)そして、スコープにより参照できる範囲が限定されることで、
変数名の競合を避け、無駄なメモリの消費を抑える役割があります。## 目次：
– [関数スコープ](#関数スコープ)
– [ブロックスコープ](#ブロックスコープ)## 関数スコープ
関数の中のスコープ（有効範囲）についてみていきたいと思います。
#### 例： 関数の中のスコープ（有効範囲）について
collectという関数を定義します。
その中では、total = 10という数字を定義し、
それをconsole.logとして出力しています。“`js
function collect(){
let total = 10;
console.log(total);
}
“`“`text: 出力結果
10
“
【雑メモ】Reactの公式ドキュメントを読んでみて
# はじめに
自身の忘備録として投稿しています。
Reactの公式ドキュメントを読んで、覚えておいた方がいいなって感じた点の雑なメモ集です。# メモ集
・***コンポーネントは純関数に保つ***
純関数とは、同じ入力には毎回同じ出力をして、レンダー前に存在するオブジェクトや変数を変更しないもの・レンダーは厨房での料理みたいなもの
表示はDOMへのコミットで、料理を提供するようなこと・***propsに関数を渡す際、関数が実行されてしまう状態で渡したらいけない
だから引数が必要なときは、無名関数で包んで関数を渡している***・イベントは伝播されるから、それを停止するやつもある
・イベントハンドラは純関数である必要がなく、副作用を持っても良い
## State周り
・***コンポーネントは初回と、stateの変更時にレンダーされる***
・***ローカル変数の変更はレンダーをトリガーしない、レンダー間で値を保持しない***
・***stateのセットは、現在のstateを変更するのではなく、レンダーをトリガーするだけ***
stateはその値自体を変えてる
JavaScriptにおける基本的なDOM操作まとめメモ（追加予定）
JavaScriptのDOM操作について学習の過程で出てきた基礎的な事項をまとめました
何か間違いなどあればご指摘いただければ幸いです## イベントとイベントハンドラ
**イベント**とはユーザがブラウザ上で行う様々な動作のことです
マウスのクリックや、ポインタの挙動などあらゆる動作のことを指します
**イベントハンドラ**とはイベントの発生をキッカケとして、何らかの処理を実行することです### プロパティを使ったイベントとイベントハンドラの関連付け
“`javascript:JavaScript
// イベントの発生を検知したい要素を指定します（getElementByIdは後ほど説明します）
const event = document.getElementById(‘イベントを検知したい要素のid属性値’);// 指定した要素がクリックされたときに任意の動作を行う
event.onclick = () => {
// 行いたい処理を記述する
}
“`
`onclick`によってクリックイベントとイベントハンドラを関連づけることができます
イベントの種類は任
まだ手書きでJSONバリデーションしてるの？
# はじめに
みなさま、良きJSONライフは送ってますか？
バリデーションってめちゃめちゃ面倒ですよね。バグがあったら僕たちの責任ですよね。そんなのイヤですよね。じゃあ**型**にその責任押し付けてやりましょう。**令和のこの時代にJSONのバリデーションを手動でやるのはやめましょう！**
# 読者対象 ✏️📕
* Rustを触ってみたい方
* プログラミングのことが最近好きになった方
* バリデーション処理を書きたくない方
* 型をキツキツにして、バリデーションを簡潔にしたい方# 本日のJSON 🥺
おやおや、とあるユーザがサービスに登録しようとしてるみたいですね。
こちらの**お便り**(JSON)をご覧ください。
“`json:user.json
{
“name”: “John”,
“password”: “p@ssw0rd”,
“age”: 43,
“friends”: [“Tom”, “Hanako”]
}
“`# サービスの要件 🤖
今回の想定するユーザ登録サービスには* **1文字以上**の`
要素の垂直位置の取得方法（JQuery↔︎Vanilla JS）
JQueryをVanilla JS(素のJavaScript)に書き換えている際、「あれ要素位置どうやって取得してたっけ…？」となったのでメモ。いい加減覚えたい。
## vanilla JS
### 絶対位置
– `window.pageYOffset` はページの垂直スクロール位置を返す
– `element.getBoundingClientRect().top` は要素のビューポートからの垂直位置を返す“`
window.pageYOffset + element.getBoundingClientRect().top
“`### ビューポートからの相対位置
“`
element.getBoundingClientRect().top
“`## JQuery
### 絶対位置
– `element.offset()` はドキュメントの左上隅からの絶対位置を返す
– `.top` プロパティを使って垂直位置を取得“`
element.offset().top
“`### ビューポートからの相対位置
– `$(window).scrollTop(
defineXXXXの関数を使うとnot definedと出る時の対処法
ここでいうdefineXXXX関数は以下のような関数(?)です。
– defineProps
– defineModel
# 初っ端からの結論
結論を言いましょう。defineXXXXの関数はマクロなので**デリケート**だからです！
# マクロとは
このマクロは、.vueファイルとかからコンパイル(Vite等)するときにdefinePropsから別形態に変化します。
Vue SFC Playgroundで見ると分かるでしょう。https://play.vuejs.org/#eNp9kU1PwzAMhv9K8GlI0yax21QmAdoBDjABx1yq1m0zmg/lY1Sq8t9xUnXsMO1m+3ltv05GeDJmdQoIWyhcZYXxzKEPZseVkEZbz0aLTWSN1ZJxICUHriqtnGcle2Q1NkLhwWrjFvczkK4lRH0LDh32vb7jQLBYTxtoNiUepelLj5QxVnQPu3GkvhiLNcVJfCGAJXhHsxvRro5OK3I7pjYOlZZG9Gg/jBe0m8OWZZJYSZt/33LN24DLuV51WP1cqR
[JavaScript] filterメソッドとは
# まとめ
#### `map`メソッドとは
> `filter()` は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)つまり、**`filter`メソッドは、配列の各要素に対して指定した条件を満たすかどうかをチェックし、条件を満たす要素のみを含む新しい配列を返します。**
# 目次
– [基本構文](#基本構文)
– [活用例1](#活用例1)
– [活用例2](#活用例2)# 基本構文
配列`numbers`の値を`num`としてコールバック関数`num => num * 2`に渡し、新たな配列`doubled numbers`として返している。~~~JS:JavaScript
const numbers = [1, 3, 6, 8, 11];
スクリーンショットテストのプラクティスについて調べるメモ
私はAndroidでエミュレーター無しでスクショテストができる [Roborazzi](https://github.com/takahirom/roborazzi) というライブラリを作っていて、もう少し周辺について詳しくなっておこうと思いまして、周辺技術のベストプラクティスを薄く広く軽く調べて見ます。
# Jestを使ったスナップショットテスト:
https://www.browserstack.com/guide/snapshot-testing
テストの流れが以下のように書いてあります。
1. 実行して、画面を描画する
1. Captureする
1. 保存する
1. もう一度実行する
1. 比較する
1. 画像をアップデートする比較のところではdiffや比較の画像を出したりする。
以下のtoMatchSnapshot()で、なければ保存したり、あれば比較したりする。
“`js
test(‘should match snapshot’, () =>
{
const data = {name: ‘John’,age: 30,email: ‘john@exam
関数基礎 function( ) 、return [JavaScript]
JavaScriptの基本的な構成要素の一つに**関数**というものがあります。
:::note info
関数を利用することによるメリット・関数を使うことでコードの再利用が可能になる。
・まとまったコードを定義して、後で実行できる。
・目的ごとにコードを分けておくことができる。
:::関数は、あらゆる場面で使用し、
JavaScriptでプログラミングをするにあたって必要不可欠な存在です。#### 例：
6人で人生ゲームをします。
６人それぞれに１つずつサイコロが渡され、毎回それぞれ１回サイコロを振ります。
#### サイコロの作り方：
・ランダムな1-6の値の整数を作るには？１、Math.random()
0以上１未満のランダムな少数の値を生成してくれる。
例：0.1.. 0.4.. 0.9.. など２、生成したランダムな少数の値に必要な範囲の整数を掛ける
（今回のサイコロの例で必要なのは、6までの値なので、6を入れる。）また、必要な値は１から６までの数字なので、掛け合わせた数字に＋１をする。
Math.random() *(掛ける) 6 + １
【一口メモ】CSSやjavascriptなどのファイルを編集した後何回再読み込みしても更新されないときの対処法
## 困ったこと
CSSやJavascriptを編集した後サーバーなどにあげたりし、再読み込みしても更新されないときがある。## 原因
①Webページが参照する画像ファイルやCSSファイルなどの**キャッシュ**、あるいは②Webページで実行されたJavaScriptが動的に読み込んだファイルなどの2次的なキャッシュが残っているためである。**キャッシュ**というのは、2回目以降に開かれるWEBページをよりスムーズに開くため、一定期間内に同ページを開くときは、前回開いていた履歴を表示するものである。
1回目に開いたときと2回目で開いたときの間に、HTMLファイルが変更されない、かつCSSファイル等の外部ファイルが更新されると、高速化するために便利なキャッシュが、逆に正確性を欠くものとなる。
## 解決策
基本的にキャッシュを削除すればよい。ブラウザにフォーカスされているときに次の操作を試みる。
### 解決策1 Ctrl + Shift + R または Shift + F5
Webページから直接参照している画像ファイルやCSSファイルなどのキャッシュを破棄してリロー
