- 1. 【熱望】javascript の for 文で var i を宣言するのはやめて下さい
- 2. querySelectorAllで取得した要素に対してmapとかを使う
- 3. react開発においてよく見るnamed exportとdefault exportの違い
- 4. 初めてのWebアプリケーションを作ってデプロイした話(React / Express)
- 5. 私も JavaScript でキューを実装してみた
- 6. chartjs-plugin-datalabels メモ
- 7. HTA(HTML Application)をPreactとTypeScriptで開発する
- 8. 同期か非同期かを確認する方法
- 9. IP住所検索サービス作ってみた
- 10. 恐怖! var の動きが意味不明すぎる!
- 11. LWCのコールバック関数の指定方法でハマった話
- 12. レスポンス データの読み込みに失敗しました: No resource with given identifier found
- 13. @testing-libraryで改行など空白文字を含む要素をgetByTextしても取得できない時はnormalizerオプションを見直してみよう
- 14. 某氏が考えたプログラミング言語?spinozaを改造して遊んでみる
- 15. 【Next.js14】npm run build で useSearchParams() should be wrapped in a suspense boundary at page “~~~”.でビルドエラーとなる
- 16. ジェネリック型
- 17. 元医療職・Web制作者が本気でReactアプリ開発
- 18. HTML CSS JavaScript つくってみたシリーズ続編コントロールパネル
- 19. React/Next.jsを使用して、よくあるテーマカラーの切り替えボタンの実装をめちゃ簡単に解説する
- 20. メルキド as Code(アレフガルドを旅するために Part3)
【熱望】javascript の for 文で var i を宣言するのはやめて下さい
皆さんは javascript の for 文で
以下の書き方をしたことがありますか?“`js
for(var i = 0; i < array.length; i++) { } ``` この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 ```js for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } ``` 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまい 期待した動作にならない例になります。 私も他の人が作成した web アプリで このバグを見かけたことがあります。 for の変数を宣言する場合 必ず let で宣言して下さい。 var でなければ正常に動作しないのは 構造的欠陥のハズです。 ```js for(let i = 0; i < array1.length; i++) { //長い処理 for(let i
querySelectorAllで取得した要素に対してmapとかを使う
## はじめに
`querySelectorAll`で取得した要素に対して、Array関数を利用したいとします。“`html.example.html
sample1target!sample3sample4
react開発においてよく見るnamed exportとdefault exportの違い
## 概要
reactのチュートリアルや、サンプルコードと実際の開発現場でreactのコードを触ってみて
1つ違いがありました。
何の違いかというと、
reactチュートリアルでは以下のような**default export**が使用され、
“`.jsx
export function App() {
return (テスト
);
}export default App;
“`実際の開発現場では以下のような**named export**と呼ばれるものが使用されているという違いがありました。
“`.jsx
export const App = () => {
return (テスト
);
};
“`何となくそういうものかとやっていたのですが
いざ、チュートリアルなどを触ってみるとどちらがいいのかわからなかったので今回少し調べてみました。## default exportについて
default exportは1つのファイルに1つだけexportできます。そのため、exportするものを強制的に1つに
初めてのWebアプリケーションを作ってデプロイした話(React / Express)
# 目次
[1. どんな人にオススメの記事??](#1-どんな人にオススメの記事)
[2. 自己紹介](#2-自己紹介)
[3. まえがき](#3-まえがき)
[4. 作ったサイトについて](#4-作ったサイトについて)
[5. 使った言語やライブラリなど](#5-使った言語やライブラリなど)
[6. どうやって勉強したの?](#6-どうやって勉強したの)
[7. 作ったアプリの反省](#7-作ったアプリの反省)
[8. 今回得たこと](#8-今回得たこと)
[9. 今後の展望](#9-今後の展望)
[10. 終わりに](#10-終わりに)# 1. どんな人にオススメの記事??
この記事の読者対象は次のような方にオススメです
– Webアプリケーションを作ってみたいけど**何から学べばよいか分からない**– ある程度HTMLやCSSは触れるけど、**バックエンドの知識は全くない**
# 2. 自己紹介
– 電気通信大学の学部4年生で情報系の専門です
– プログラミング歴については大学に入ってから始めたので3年ほどになります
– C++で競技プログラミングをしていて現在
私も JavaScript でキューを実装してみた
# これは何?
https://qiita.com/mikecat_mixc/items/05491cf98392fb803f66
が面白かったので勝手に参加してみた。
# 書いたコード
こんなのを書いてみた。
“`javascript:javascript
class QueueNabe {
slotSize = 0xfeff;
constructor(){
this.headNode = this.tailNode = { prev:undefined, next:undefined, slot:Array(this.slotSize) }
}
head = 0;
tail = 0;
enqueue(x) {
if (this.slotSize === this.tail) {
this.tailNode.next = { prev:this.tailNode, next:undefined, slot:Array(this.slotSize) }
chartjs-plugin-datalabels メモ
仕事でグラフ使うよ
チャットGPTにいい感じに書いてもらったよ
これで明日のタスクできるよ
ありがと
“`js
import { Bar, Pie } from ‘react-chartjs-2’;
import { Chart, registerables } from “chart.js”
import ChartDataLabels from ‘chartjs-plugin-datalabels’;
Chart.register(…registerables)const data = {
labels: [‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, ‘Purple’, ‘Orange’, ‘Black’, ‘White’, ‘Gray’, ‘Brown’, ‘Pink’],
datasets: [
{
label: ‘# of Votes’,
data: [12, 19, 5, 5, 2, 3, 8, 7, 4, 3, 6], // 値が0以外の項目を含むデータセット
backgrou
HTA(HTML Application)をPreactとTypeScriptで開発する
HTAはHTML+CSS+VBScript/JScriptでGUIアプリケーションを構築するレガシースクリプト技術です。少なくとも執筆時点ではWindows 11にも標準で搭載されています。これを、いまをときめく技術で書けたらきっと愉快です。実用性はありません。
## HTAについて
https://learn.microsoft.com/en-us/previous-versions/ms536496(v=vs.85)
だいたいInternet Explorerにいろいろ生えたElectron風のものと考えてよいでしょう。基本的な中身はIE対応のWebページと同様です。
``の有無でフォントのレンダリングが変わりました。`title`は`hta:application`より前に記述しないとウィンドウタイトルに反映されません。`x-ua-compatible`によってIEのバージョンを指定できますが、`IE=10`以降では`HTA:APPLICATION`オブジェクトの機能が事実上利用できません。`IE=9`で実行できるようにトランス
同期か非同期かを確認する方法
# 結論
ブラウザを2つ立ち上げて、ブラウザAで入力したもの(例えば「いいねボタン」とか)が、ブラウザBで反映されていれば非同期ができている。
(もちろんリロードしちゃダメ)**以上!!!!!**
IP住所検索サービス作ってみた
## ■初めに
関西のとある企業でエンジニアをしている物です!普段はバックエンド領域の構築や運用を行っています。
フロントエンド領域のエンジニアをみて華があって良いなと思う事があります…..そこで今回は裏方の私がChatGPTの力を借りてwebアプリを作成したお話となります。
今回はサービス解説となります、技術解説は次回の記事に作成させて頂きます。
[IPアドレス住所検索サイト](https://ip.r1999.com/)
## ■IP住所検索サービス
![IP住所検索サービストップページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668800/e9e3d3be-e391-8e1f-c09d-c22dbd12c974.png)
https://ip.r1999.com/
今回作成したwebサービスは「IP住所検索サービス」となります。
IPアドレスやドメインから所属する住所情報を取得し表示するサイトとなります。フォームに入力したIPデータをJavaScriptのFetchAP
恐怖! var の動きが意味不明すぎる!
まずはこちらをご覧ください。
“`js
var num = 1;
console.log(num); // -> 1if(num === 1) {
var num = 1234;
console.log(num); // -> 1234
}console.log(num); // -> 1234
“`_人人人人_
> 1234 <
 ̄Y^Y^Y^Y ̄## なぜこうなるのか
### 原因1: `var` にはブロックスコープがない
> var 文は関数スコープまたはグローバルスコープの変数を宣言し、任意でそれをある値に初期化します。
> [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var)ブロックスコープ(if 文や for 文の波括弧の中のスコープ)がないということはつまり、冒頭のコードでは `var num = 1;` と `var num = 1234;` が同じスコープで宣言されているということ。これが前提になってきます。
#
LWCのコールバック関数の指定方法でハマった話
## 目次
– 概要
– 何にハマったのか?
– 原因
– 解決方法
– 結論
## 概要
– LWCでプラットフォームイベントを受信して、あれこれしたくなったため、[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-emp-api/documentation)を眺めながら実装した。リファレンスに記載されたサンプルコードを入力したのにうまくいかなかった。その後、色々試して解決できたので本記事で記録を残しておこうと思った。## 何にハマったのか?
### 結論
subscribe関数への引数で渡すコールバック関数内で、グローバル変数を参照しようとした際に`undefined`にってしまう、、、経緯踏まえて説明します
– サンプルコードの記載がある[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-emp-api/documen
レスポンス データの読み込みに失敗しました: No resource with given identifier found
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/27b3ffaa-2fbe-bef7-7aa7-38590393e769.png)
``でリダイレクトするとエラーになるらしい、Firefoxを使おう
“`html
“`https://happynap.net/2023-04-15-081747/
@testing-libraryで改行など空白文字を含む要素をgetByTextしても取得できない時はnormalizerオプションを見直してみよう
# TL;DR
[testing-library](https://testing-library.com)の`getByText`をはじめとした`ByText`系のクエリーや、[@testing-library/jest-dom](https://github.com/testing-library/jest-dom)の`toHaveTextContent`マッチャーは空白文字を正規化するので、必要に応じて正規化オプションを設定しましょう。
“`tsx:言いたいことをコードで表すと…
import { it, expect, afterEach } from “vitest”;
import “@testing-library/jest-dom/vitest”;
import {
render,
screen,
getDefaultNormalizer,
} from “@testing-library/react”;const App: FC = () => {
return (関連する記事
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた