- 1. イベントループについて
- 2. 【JavaScript】画像などのファイルをCtrl+Vで貼り付けたり、ドラッグ&ドロップで貼り付けたりする方法
- 3. 【Vue.js】 Vuex クイックスタートガイド(1)
- 4. requiredで複数チェックボックスを、１つ以上のチェックを必須にする 備忘録＃４
- 5. 【Vue】Computedに関するメモ
- 6. なでしこを実行した際に利用される関数一覧をJSから取得する
- 7. 【Node.js】daisyUI の最も簡単な始め方
- 8. 個人開発でモチベーションが高まった方法《法令.app》
- 9. HTMXを使ったインライン編集機能の実装：Click to Editパターン
- 10. ReactとJavaScriptで問い合わせフォームの作成してみた！その4
- 11. 【Typescript】覚えておきたい、fetchパターン
- 12. 【React】Type-Writer Effect
- 13. 【JavaScript】画像/写真/イラストから輪郭を抽出する【Sobelフィルタ】
- 14. yargsの位置引数の省略と引数名を使用する方法のメモ
- 15. JavaScriptでECDSA署名してPythonで検証しようとしたら
- 16. [FE] フロントエンドのディレクトリ設計
- 17. JavaScriptでtry文を使った際にchatch句で正しく例外が捕捉されない原因
- 18. ReactとJavaScriptでAPIで記事データを取得してみた！その3
- 19. JavaScriptでファイルのサイズ、拡張子をチェックする
- 20. JavaScriptのみで非同期通信
イベントループについて
以下ブラウザでの話になります。
## イベントループ
時間のかかる処理があっても、ブラウザの描画などほかの処理を止めないためにある機能。### イベントループがないと
もしイベントループがないと、時間のかかる処理をする際に、全く他のことができなくなる。
画面上のボタンが押せなくなる等の支障が出る。“` js
console.log(“start”);
setTimeout(function () {console.log(“slow”)}, 500);
console.log(“end”);
“`上記のコードをブラウザで実行すると
1. start
1. end
1. (0.5秒の遅延後)slowの順番で表示される。
イベントループがないと
1. start
1. (0.5秒の遅延後)slow
1. endの順番で表示される。
### イベントループとは
時間のかかる処理で止まらないためにイベントループがある。
イベントループとは、JavaScriptエンジン内のスタックが空になった際、タスクキューにある先頭のコールバック関数をスタック内に入れる処理をする
【JavaScript】画像などのファイルをCtrl+Vで貼り付けたり、ドラッグ&ドロップで貼り付けたりする方法
## 結論
* MIMEタイプは画像で絞っているからカスタムしたいときは変えてください。
* ファイルが複数渡されたときはMIMEタイプが一致した最初のファイルのみを対象にしているので、複数処理したい場合は書き換えてください。
* ドロップ先のDOMは各自書き換えてください。今はwindowならどこでもドロップ可能になっています。“`js
(() => {
let isLoading = false;window.addEventListener(“paste”, e => {
e.preventDefault();if (isLoading) {
return;
}
isLoading = true;let imageItem = null;
for (const item of e.clipboardData.items) {
// MINEタイプの確認
if (i
【Vue.js】 Vuex クイックスタートガイド(1)
## はじめに
グローバル状態管理であるVuexのクイックスタートアップガイドです。
このガイドでは、Vuexを使用してシンプルなグローバルストアを設定し、コンポーネント間で状態を共有する方法を説明します。### 1. Vue プロジェクトのセットアップ
まず、Vueプロジェクトを作成し、必要な依存関係をインストールします。“`
npm install vuex
“`2. プロジェクトのディレクトリ構造
以下のようなディレクトリ構造を作成します。“`
/js
├── /components
│ ├── VuexComponentA.vue
│ └── VuexComponentB.vue
├── /pages
│ └── Index.vue
├── /store
│ └── index.js
├── app.css
├── bootstrap.js
├── app.js
“`### 3. グローバルストアの設定
/src/store/index.js に以下のコードを追加します。“`jav
requiredで複数チェックボックスを、１つ以上のチェックを必須にする 備忘録＃４
### シンプルな使い方
“` diff_html
HTML
商品 値段 + + “`
このように、inputタグないに`required`とすることによって、
テキストエリアに入力されず、登録ボタンを押された場合、以下のような表示になります。はカラフルだし、とても使いやすい。しかし、[完璧で究極](https://dic.pixiv.net/a/%E5%90%9B%E3%81%AF%E5%AE%8C%E7%92%A7%E3%81%A7%E7%A9%B6%E6%A5%B5%E3%81%AE%E3%82%B2%E3%83%83%E3%82%BF%E3%83%BC)という訳ではない。例えば、あるなでしこのコードを編集中に、そのコードの中で使用されている命令が一覧で表示され、押すだけで即座にその関数のリファレンスのページが開くと、とても
【Node.js】daisyUI の最も簡単な始め方
# 完成イメージ
| |
| :-: |
| |
| daisyUIを導入し、簡単にスタイルを整えることができる |
# この記事についてhttps://qiita.com/kohki_takatama/items/36712702f115f263f6b4
Node.js・Tailwind CSS の導入はこちらの記事で説明しています。
この記事では、さらにdaisyUIを導入する方法を書いていきます。
前回記事の続きとして、ソースコードも引き続き使用しますが、この記事だけを読んでもわかる内容になっています。# 環境
|サービス名称|バージョン|種別等|
|—|—|—|
|VSCode|1.90.0|エディタ|
|macOS|14.5|OS|
|Node.js|20
個人開発でモチベーションが高まった方法《法令.app》
誰でも楽しく法律が読める[《法令.app》](https://jplaws.app)というWebアプリを作っています。
https://qiita.com/hibarisoft/items/423cd885435a911bc287
## :no_good_tone1: アプリへのアクセスがありません！
予想と覚悟はしていたことですが、アプリへのアクセスがありません:persevere:「アクセスが増えない」とかではなく、ほとんど無いです！アクセス解析ツールの設定ミスかと思いましたが、違うようですね。。（アクセス無いのに、なぜか「ダウンロード量」はすごくて無料枠をすぐに突破しました。わからない。。）
気を取り直して、今は法令データの「更新ツール」を作っています。完全に自律して動かすには、それまで手打ちでごまかしていた部分を全体的に見直すことになり、結構時間がかかっています。
### これまで
1. e-Govダウンロードサイトから、法令データXMLと画像などをダウンロード
1. 法令データ前処理：
1. ひとつの法令について複数バージョンが含まれているので「最新のバー
HTMXを使ったインライン編集機能の実装：Click to Editパターン
## はじめに
HTMXは、HTML属性を使用して動的なWebアプリケーションを構築できる軽量なJavaScriptライブラリです。従来のJavaScriptコードを最小限に抑え、HTMLの属性だけでサーバーとの非同期通信を実現できます。この記事では、HTMXを使ってインライン編集機能を実装する「Click to Edit」パターンを紹介します。
## HTMXとは
HTMXは、HTML-driven APPROACHを採用したライブラリで、以下の特徴があります：
– HTML属性を使用して非同期リクエストを行う
– ページの一部を動的に更新できる
– 従来のJavaScriptによる非同期処理よりも簡潔で直感的な記述が可能## Click to Editパターンの概要
Click to Editパターンは、ページのリロードなしにレコードの一部または全体をインラインで編集する方法を提供します。このパターンの主な利点は：
1. ユーザーエクスペリエンスの向上
2. サーバーリソースの効率的な利用
3. シンプルな実装## 実装手順
### 1. HTMXのセットアッ
ReactとJavaScriptで問い合わせフォームの作成してみた！その4
# はじめに
こんにちは！WEBエンジニア転職を目指しているK.Yです！
今回は、お問い合わせフォームを実装してみました！
以下、完成したお問い合わせフォームです！
ブログ作成の過程を以下で、それぞれ纏めましたので、
良かったら見てください:sunglasses:https://qiita.com/ken887265/items/a6dfc1f62ee185b986b2
https://qiita.com/ken887265/items/8d6255a5aba95897ca67
https://qiita.com/ken887265/items/f8850ec0fd5757c2bd39
:::note warn
重複している部分は省略しております！
:::## 対象者
・ React初心者
・ フロントエンドに興味がある人#
【Typescript】覚えておきたい、fetchパターン
## はじめに
フロントエンド開発するにおいて、APIを叩くなどfetchを行うことは多々あると思います。
今回は実案件で使ってfetchのパターンをいくつか紹介したいと思います。
実案件ではtypescriptを使っているので、今回はtypescriptベースで型にも気をつけて行きたいと思います。## 実用例
### 普通にfetch
APIの内容は適当なんでこんなのがあるかわからないですが、Userデータをfetchで取得する場合。
`interface`を使って最初にどんなデータが来るのかの型を定義しておきます。これはtypescript特有の操作ですね。“`typescript
// 型定義
interface User {
id: number;
name: string;
email: string;
}// fetch関数
const fetchData = async (url: string, headers: HeadersInit): Promise=> {
const response = await fetch(
【React】Type-Writer Effect
> A simple react component for adding a nice typewriter effect to your project.
訳： 「プロジェクトに素敵なタイプライター効果を加えるためのシンプルなReactコンポーネント。」
とのこと。https://www.npmjs.com/package/react-simple-typewriter
## はじめに
今回は、Reactで導入が簡単なタイプライターエフェクトのライブラリを紹介しようと思います。[React Simple Typewriter](https://www.npmjs.com/package/react-simple-typewriter)です。
## サンプル
さっそく、簡単なデモを作成しましたので確認お願いします。（ちょっとGifなんでカクついてるけどもっと滑らかです。） {
const data = imageData.data;
const
yargsの位置引数の省略と引数名を使用する方法のメモ
# コマンドライン引数の覚書
コマンドラインって便利だけど、自分で作るとやっぱり面倒な事も多いですよね。
今回は、コマンドラインツールを作ると高確率で起きる面倒毎のメモを残しておこうと思います。## 引数の処理は地味に面倒
毎度ツールを作る時に地味に面倒なのはコマンドライン引数を受ける時の処理です。
使い捨てのツールの場合は、process.argv[]を直接使うか、パラメータになる部分をハードコードしてしまえばいいんですが…。
今後も使うものは、使い方忘れる場合もあり、引数を調べるためにソースを読みたくないのでヘルプもしっかりしておきたいんですがこれが地味に面倒です。## 面倒を解決するためのコマンドライン引数のパーサーのはずが…
コマンドライン引数の処理を簡略化したくて、ライブラリを使う事にしました。
調べた感じ、yargsというライブラリが人気の様なので今回はyargsを使用するようにしました。
そして、今回もしっかりハマりました。## コマンドライン引数に名前を付けられるのですが、引数名が上手く使用できない。
沢山転がっている位置引数(?)を使用したサンプル
JavaScriptでECDSA署名してPythonで検証しようとしたら
## JavaScriptでECDSA署名したらPythonで検証できなかった
JavaScriptはWeb Crypto APIで署名
SubtleCrypto: sign()とSubtleCrypto: verify()
https://developer.mozilla.org/ja/docs/Web/API/SubtleCrypto/sign
https://developer.mozilla.org/ja/docs/Web/API/SubtleCrypto/verify
PythonはCryptographyライブラリで検証
cryptography.hazmat.primitives.asymmetric.ec.ECDSA
https://cryptography.io/en/latest/hazmat/primitives/asymmetric/ec/#elliptic-curve-signature-algorithms
上手くいかない。
JavaScript同士、Python同士は問題ないのでお互いのデータのやり取りがおかしい。SubtleC
[FE] フロントエンドのディレクトリ設計
# 目次
– [アーキテクチャの分割方法](#アーキテクチャの分割方法)
– [Layer型](#Layer型)
– [Atomic Design](#Atomic-Design)
– [Component-Based Design](#Component-Based-Design)
– [Presentation-Container Design](#Presentation-ContainerDesign)
– [Feature型](#Feature型)
– [Feature Sliced Design](#Feature-Sliced-Design)
– [Feature Module Design](#Feature-Module-Design)
– [Redux Ducks Pattern](#Redux-Ducks-Pattern)
– [Domain-Driven Design](#Domain-Driven-Design)# アーキテクチャの分割方法
– **Layer型:** 技術によるディレクトリ分割
–
JavaScriptでtry文を使った際にchatch句で正しく例外が捕捉されない原因
# はじめに
JavaScriptでtyr分を使った際にchatch句で正しく例外が捕捉されないという事象が発生したので、原因をまとめました。
# 当該ソースコード
以下が問題のソースコードです。
“` JavaScript:main.js
// 処理を実行している最中に例外が起きても例外処理が実行されない
try{
btnElm.addEventListener(‘click’, () => {
// 処理
});
} catch(e) {
// 例外処理
}
“`ボタンをクリックして呼び出した処理を実行している最中に例外が発生しても例外処理が実行されません。
# 原因と対策
### 原因
ずばり、addEventListenerが非同期で行われる処理であることが原因です。図にすると以下の通りで、addEventListenerの処理が別のコンテキストで行われており、try文で例外を捕捉することができません。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws
ReactとJavaScriptでAPIで記事データを取得してみた！その3
# はじめに
こんにちは！WEBエンジニア転職目指しているK.Yです！
今回は、APIでデータを取得して表示させる内容となります。以下の記事は、手書きでデータを取得した内容となります！
良かったらこちらも読んでいただけると嬉しいです！
Reactの基本的な機能や特徴について記述しています！https://qiita.com/ken887265/items/a6dfc1f62ee185b986b2
https://qiita.com/ken887265/items/8d6255a5aba95897ca67
:::note warn
前回の記事と重複している部分は省略しております！
:::## 対象者
・ React初心者
・ フロントエンドに興味がある人## バージョン
“react”: “^18.3.1”,
“react-dom”: “^18.3.1”,
“react-router-dom”: “^6.23.1”JavaScript ES6以降
## コード
“`javascript
PostsListimport React, { useEffect
JavaScriptでファイルのサイズ、拡張子をチェックする
“`