- 1. 【TypeScript】Recordって何?[key: string]との違いは?
- 2. JSで特定のidを持つ要素にクラスを追加・削除する方法
- 3. 初めてのチーム開発
- 4. 【JavaScript】要素の取得方法まとめ
- 5. JavaScript気になる構文まとめメモ
- 6. 【HTML】ボタン要素にdisabled属性をつけるのをやめませんか?
- 7. プログラマーが落ち着かなくなるコードを書いてみた #3
- 8. 【Node.js】Tailwind CSS の最も簡単な始め方
- 9. スクレイピングツールをChrome拡張機能で開発する
- 10. iPhone / iPad で日本語入力の確定キー押下を keydown / up イベントで検知できなかった話
- 11. 【 JavaScript / TypeScript 】の条件付き演算子の使い分け: 三項演算子・&&, &, および Nullish Coalescing 演算子
- 12. 朝は占いじゃなくて格言を見よう!!
- 13. 今さら森博嗣「笑わない数学者」のビリヤードの問題を解く(13)~総括編
- 14. 課題(014)ー3
- 15. 【JS Is Weird】JavaScript構文クイズ 25題
- 16. Google Geminiでゲーム移植?ブラウザゲームの”Rust+WASM版”をAIに作らせる | Agar.io 2024
- 17. WijmoのリンクをBootstrapのモーダルから変更する手順について
- 18. [CSS] [React] テンプレートリテラルを用いた2つのクラスを付与する方法
- 19. なぜ JavaScript はすべてのブラウザで使えるの?
- 20. ECMAScriptとは?なぜECMAScriptが策定された?
【TypeScript】Recordって何?[key: string]との違いは?
# Recordとは?
簡単に言うとインデックス型([key: string])やMapと同じくkeyValueオブジェクトの型です。
しかし[key: string]やMapよりも直感的に型付けすることができます。
“`tsx
let a: Record; let b: { [K: string]: number };
let c: Map;
“`## 具体的な型付け方法
Key側に設定できる型はstring, number, symbolとその3種類のリテラルになります。
またvalue側に設定できる型はなんでもできます。
“`tsx
let a: Record; // OK
let b: Record; // OK
let c: Record; // OK;
let d: Record<"あ" | "い" | "う", number>; // OKtype Human = {
name: s
JSで特定のidを持つ要素にクラスを追加・削除する方法
JavaScriptで特定のidを持つ要素にクラスを追加または削除する方法を紹介します。
### 実行環境
HTML5
CCS3
Google Chrome: 126.0.6478.62(Official Build) (64 ビット)## 準備
[前回の記事](https://qiita.com/DreamMyHome/items/76f0b6f7c934c2ca5bcd)で作成したクラスを使います。
サイズ、色、枠線は任意のものに変更してください。“`html
“`
“`css
.main-content {
display: flex;
justify-content: space-evenly;
}.but
初めてのチーム開発
## はじめに
今回、プログラミング初心者4人で行った初めてのチーム開発プロジェクトについての記事です。
テーマは『自分たちの役に立つものを開発する』## チーム開発の流れ
1. アイデア決め
1. スライド作成、要件定義
1. 設計、タスク出し
1. 環境構築
1. 実装、プレゼン準備
1. プレゼン## アイデア決め
まず、それぞれ一人が一つ抱えている課題のアイデアを出すことにしました。私はFigmaを使うことを提案し、付箋を使ってアイデアを書き留め、その中から一つを選ぶことで決める流れになりました。
アイデアの課題、目新しさ、難易度で決めていく中で良い点、そうではない点がそれぞれにあり、賛同や衝突もありながら一つに決めるのが困難になりました。
そこで他のチーム開発ではどのようなアイデアがあったのかを見て、課題、目新しさ、実装難易度を改めました。
その後、4人の共通な新たな課題として「日々つけている日報をわかりやすく一目で振り返りたい。」ということが上げられました。
そこからはその課題を解決するためのアイデアがどんどん出てき方向性が決まっていきました。ここで方向が
【JavaScript】要素の取得方法まとめ
JavaScriptの要素を取得するための自分用メモ。
メソッド書く前に毎度のごとく、単語の意味を復習。
### HTMLElement
汎用的なHTMLの要素。
### HTMLCollection
汎用的な要素ノードの集合。HTML要素以外のノードは含まない。配列風のオブジェクト。
リストから選択するためのメソッドとプロパティを提供する。
### NodeList
ノードの集合体。名前の通りノード全般を含む。配列風のオブジェクト。
`forEach`が使えるので、配列のように簡単に処理できる。
## document.getElementById()
返り値:HTMLElement
指定したIDを持つ要素を返す。
要素が存在しない場合はnullを返す。
万が一、指定したIDをもつ要素が複数存在した場合は、最初に取得した要素のみを返す。
“`html:HTML
sample text
“`
“`javascript:JavaScript
const result = document.getElementById(‘sam
JavaScript気になる構文まとめメモ
# はじめに
他の人が書いたJavaScriptのコードを読む機会があり「この構文ってどういう意味?」「この構文の呼び名は?」となることがあったので、調べたついでに気になった構文をまとめました。
自分用のメモとして簡易に記述しているので、厳密な定義を知りたい方は最後の参考サイトをご覧ください。
# 真と偽:truthy, falsy
構文まとめの前に、構文の中に式がたくさん出てくるので、真になる値と偽になる値を軽く整理しておきます。
## 真になる値:truthy
“`javascript
// true
console.log(Boolean(true)); // true// ゼロでない数値
console.log(Boolean(10)); // true
console.log(Boolean(-20)); // true// 空でない文字列
console.log(Boolean(“Hello”)); // true// オブジェクトなどの参照
console.log(Boolean({})); // true
console.log(Boolean
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか?
## はじめに
みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに `disabled` をつけて押せないようにしていませんか?
この記事では、ボタンに`disabled`属性をつけない方がいい理由と`disabled`をつけない方法を紹介します。
## disabled属性をつけない方がいい理由
`disabled` 属性をつけると、ユーザーがボタンを操作することを防ぎます。
そのため、キーボード(Tabキー等)で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。disableがない時 | disableがある時
:-:|:-:
![3つのボタンにフォーカスが当たっているgif動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b80e010c-a055-02c6-0e98-59d6c37c6896.gif)|![3つのボタンの中に1つdisabledのボタンがあり、2つのボタンにフォーカスが当たっているgif動画](https://qi
プログラマーが落ち着かなくなるコードを書いてみた #3
こんにちはAtsu1209です。
今回はエンジニアが落ち着かなくなるコードを書いてみた 第三回です**第一回**
https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a
**第二回**
https://qiita.com/Atsu1209jp/items/a1b051107bca65e87ceb
**番外編**
https://qiita.com/Atsu1209jp/items/b88c5e5ccbf037e76565
# 今回作るもの
今回は作るもの自体はまともですが、コメントアウトを大量に入れて
恐怖を覚えさせたいと思います。今回はブログのHTML部分をかいて行きます。
ブログのHTML部分のコードは以前の記事から流用します。記事↓
https://qiita.com/Atsu1209jp/items/75a0acb5c4410aa2754e
# HTML
前回ChatGPTが書いたHTMLがこちらです。“`html
【Node.js】Tailwind CSS の最も簡単な始め方
# 完成イメージ
| |
| :-: |
| ![スクリーンショット 2024-06-16 20.46.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c3c72f39-424b-aebd-4461-935e49bf8e5f.png) |
| Node.js のサーバーから
Tailwind CSS クラスを使用した静的ファイルを表示できる |
# この記事について備忘録です。なるべく簡潔に書こうと思います。
# 環境
| サービス名称 | バージョン | 種別等 |
| ——- | ——- | :————: |
| VSCode | 1.90.0 | エディタ |
| macOS | 14.5 | OS |
| Node.js | 20.13.1 | JavaScript実行環境 |
| npm | 10.5.2 | パッケー
スクレイピングツールをChrome拡張機能で開発する
## はじめに
Webサイトから情報を取得するとき、スクレイピングのプログラムを書いて情報を取得することがあるかと思います。しかし、一度しか使わないのにプログラムを書くのは面倒なので、汎用的にいろいろなWebサイトで使用できるツールが欲しくなりました。
Chrome拡張機能であればいろいろなWebサイトで使用することができ、またWebアプリと違ってCORS制約なども無く使用できると考えたため、作ってみました。実際に使用できるプログラムはGitHub上に置いておきますので、以下からご確認ください。
https://github.com/t-ujiie-g/scrapingExtension
拡張機能の取り込み方などは以下の記事などが参考になるかと思います。
https://qiita.com/komlabo/items/5b99d3598f6664621dae
## 実装内容
### 完成イメージ
suumoから物件情報を取得する例です。
「選択モード開始」ボタンを押すと、Webサイトの要素にホバーすると赤枠が表示されるようになり、クリックするとその要素を選択できます。
選択
iPhone / iPad で日本語入力の確定キー押下を keydown / up イベントで検知できなかった話
ちょっとハマったのでメモしておきます。
## バージョン
– iPad 17.4.1
– iPhone 15.8.2## やりたいこと
やりたいことは以下の2つです。
1. iPhone / iPad で、日本語入力時(ローマ字入力モード)の確定キー押下を検知したい
1. iPhone / iPad で、日本語入力時(ローマ字入力モード)の変換候補の中から何か1つが選択されたことを検知したい以下、 iPhone のスクリーンショットになります。
ちょっと分かりづらいと思いますが、日本語ローマ字入力モードで「くま」の2文字を入力した直後の、まだ未確定のときのスクリーンショットになります。
このまま「くま」で入力を確定させたい場合は赤枠内の**確定**ボタンを押下すると思いますが、これがやりたいことの 1 になります。
「熊本」で確定させたい場合は黄色枠内の**変換候補**の中から「熊本」を選択すると思いますが、これがやりたいことの 2 になります。![image.png](https://qiita-image-store.s3.ap-northeast-1.am
【 JavaScript / TypeScript 】の条件付き演算子の使い分け: 三項演算子・&&, &, および Nullish Coalescing 演算子
## はじめに
JavaScriptで**条件付きレンダリングや値の選択**を行う際に、どの演算子を使用するべきか迷うことがあるかもしれません。この記事では、**三項演算子** と &&(**論理AND**)、&(**ビットAND**)、および**Nullish Coalescing演算子**(??)の違いと使い分けについて解説します。
## 1. 三項演算子(条件演算子)
三項演算子は、条件に基づいて値を選択するために使用される演算子です。
構文は **condition ? expr1 : expr2** です。下記のソースの形でReactで使用する経験は多いと思います。
“`javascript:script.js
{company.salary ? (
) : (
朝は占いじゃなくて格言を見よう!!
## 占いで毎日朝から順位つけられて気分下げられるの嫌じゃないですか?
朝のテレビで●●占い!今日の運勢は?今日の順位は?
勝手に順位つけられてるけど、どうなん?
占いランキングが最下位なら、その日は生きていたくなくなるし仕事もしたくならへん?外にもでたくないから仕事も学校も休みたくならへん?大げさかもしれへんけど、朝からなぜ故に人の気持ちを下げることすんのん?
**全員1位でいいやーーーん!!**
![uranai.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/1a765972-99dc-848f-b4bd-710292c9d42f.jpeg)
## 人間だもの【作成した意図】
困ったときに何かに頼りたくなることはある。
ちょっと気持ちが沈んだ時とか、何かに頼りたくなった時とかある。**人間だもの。のりまき**
そんな時はどうしますか?
神様に頼りたくなるから神社に行く人もいるでしょう。
私も散歩がてら天気と気分によるけども氏神様にお詣りに行く。運動もかねておさ
今さら森博嗣「笑わない数学者」のビリヤードの問題を解く(13)~総括編
# 0. はじめに
森博嗣氏の小説「笑わない数学者」に登場するビリヤード問題について下記のシリーズ記事で取り扱ってきた。
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く(1)~導入編](https://qiita.com/TETSURO1999/items/fa1db203d48858c607f1)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く(2)~計算機を使う](https://qiita.com/TETSURO1999/items/be4a8b460a690a48236b)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く(3)~計算量オーダーを考える](https://qiita.com/TETSURO1999/items/bcd0cceb66a3b6d5964f)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く(4)~世界記録に挑む](https://qiita.com/TETSURO1999/items/eefbec683a26cc221a57)
– [今さら森博嗣「笑わない数学者」のビリヤードの問題を解く(5)~
課題(014)ー3
お疲れ様です。
先日提出してきた課題ですが、Googleフォントの指定や、ルート要素の指定に誤りがあったため再提出し、合格をいただいてきました:sweat:
![2024-06-16 230716.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/06d80cf6-0e0f-49d6-e8cc-2e1e5750dae3.png)
![2024-06-16 230750.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/ed75c5f3-d44b-fcdd-cdf9-bdac17b0c3d5.png)
font-family で指定するだけかと思いきや、ちゃんとGoogleのフォントサイトへ行って、コードなど入手しないといけなかったのですね…
この方法は知らなかったため、調べながら必要なコードを加筆:writing_hand:
また、ルート要素の指定で、 bodyタグにfont-s
【JS Is Weird】JavaScript構文クイズ 25題
## はじめに
今回は、以下のjsisweird様のサイトの問題を解いて、非常に面白いなと思い復習がてら書いた記事になります。https://jsisweird.com/
ここから式と選択肢、回答を順に羅列していきますので、よければ正解を予想しながら読み進めてみてください!
### 1 `true + false`
– `”truefalse”`
– `1`
– `NaN`
– `SyntaxError`回答
正解は`1`になります。
演算子 + は両辺をプリミティブ型に変換して計算しようとします。
以下MDNより引用
> 一方が文字列の場合、もう一方のオペランドも文字列に変換され、連結されます。_
もし両方が長整数であれば、長整数同士の加算が行われます。一方が長整数で、もう一方が長整数でない場合、TypeError 例外が発生します。
そうでない場合は、両辺が数値へ変換され、数値同士の加算が行われます。ブール値は数値に型変換されますので、結果としては1になります。
“`javascript
Number
Google Geminiでゲーム移植?ブラウザゲームの”Rust+WASM版”をAIに作らせる | Agar.io 2024
皆さんは Google AI Studio を使っていますか?
このサービスは、テキストや画像だけでなく、動画やコードなどの様々なデータを理解し、Gemini に質問したり指示したりできる強力なツールです。
ただ、注目すべきは **かなり長いプログラムのコードを食わせてそれを解析できる** ということです。
以下は slither.io というブラウザゲームのjsファイルを丸ごと食わせて解説してもらった例
![](https://storage.googleapis.com/zenn-user-upload/982abce58ea7-20240605.png)
コードを全部読まなくても、Gemini に解析してもらってどういう処理があるとか、サーバーとどんな通信を行っているのかを聞くとかなり精度良く回答が帰ってきます。
つまり、コードの中身をほとんど読まなくてもだいたい理解できるってことです
**それだけじゃありません**
Geminiに解析させた結果を得るだけでなく、そこから新しいものを生成することだって可能です。
以下はとあるjsコードの難読化されたフィールドが何
WijmoのリンクをBootstrapのモーダルから変更する手順について
# この記事を書こうと思った背景
Meceus社の国産Javascriptフレームワーク「Wijmo」のGridを使った情報があまりにも少ないため困っている人たちへ、そして自分への備忘録として書いてます。# 完成イメージ図はこちら
【解説】
グリッドの変更したいリンクを選択すると、Bootstrapのモーダルウィンドウがふわっと出てきて、モーダル画面でリンク名を変更すると呼び出し元のリンク名が変更されているというサンプル。1.変更したいリンクの選択する
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/0fd4c65d-607b-2b59-f7ce-56b9f55a3deb.png)2.モーダルの表示する
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/fc9fae78-d969-31e3-a4fa-6040aef
[CSS] [React] テンプレートリテラルを用いた2つのクラスを付与する方法
# 目的
テンプレートリテラルを用いて、`className`に2つのクラスを付与する方法を記載# 目次
– [基本構文(CSSファイル)](#基本構文(CSSファイル))
– [基本構文(JSXファイル)](#基本構文(JSXファイル))
– [活用例](#活用例)# 基本構文(CSSファイル)
~~~CSS:Example.css
.container {
background-color: lightblue;
padding: 20px;
border-radius: 8px;
}.highlight {
border: 2px solid red;
}
~~~### 解説
– `container`クラスは背景色、パディング、および角丸のスタイルを定義しています。
– `highlight`クラスは赤いボーダーを定義しています。# 基本構文(JSXファイル)
~~~JS:Example.jsx
import React from ‘react’;
import ‘./Example.css’;const MyComponent = (
なぜ JavaScript はすべてのブラウザで使えるの?
JavaScriptがすべてのブラウザで使える理由は、主に以下の2つが挙げられます。
**1. ECMAScriptの標準化**
ECMAScriptは、JavaScriptの標準規格です。この規格は、国際標準化団体のEcma Internationalによって策定されており、すべてのブラウザベンダーはこの規格に準拠する必要があります。
つまり、ブラウザベンダーは、ECMAScriptに準拠したJavaScriptエンジンを実装する必要があるため、結果的にどのブラウザでもJavaScriptが使えるようになります。
https://qiita.com/aaa777nnn/items/836f0ec81479278db1a8
**2. ブラウザベンダーのメリット**
ブラウザベンダーがECMAScriptに準拠するメリットは、以下の通りです。
* ユーザーにとって使い勝手が良い
* Webサイトの開発者にとって開発コストが削減できる
* ブラウザのシェアを獲得しやすい具体的には、JavaScriptがすべてのブラウザで使えることによって、ユーザーはどのブラウザを使っ
ECMAScriptとは?なぜECMAScriptが策定された?
# ECMAScriptとは?
ECMAScript(エクマスクリプト)は、国際標準化団体のEcma Internationalが策定したJavaScriptの標準規格です。別名としてECMA-262とも呼ばれます。
**歴史**
* 1995年:Netscape社が「LiveScript」という名前のスクリプト言語を開発
* 1995年:Sun Microsystems社がJavaをリリースし、人気を集める
* 1995年:Netscape社、LiveScriptの名前を「JavaScript」に変更
* 1997年:ECMA-262としてJavaScriptの標準規格が策定される
* 2009年:ECMAScript 5.0がリリースされ、大幅な機能追加が行われる
* 2015年:ECMAScript 6.0がリリースされ、大幅な機能追加が行われる
* 2017年:ECMAScript 8.0がリリースされ、新しい機能が追加される
* 2019年:ECMAScript 9.0がリリースされ、新しい機能が追加される
* 2020年:ECMAScript 10.0がリリースされ、