f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

TypeScript Webアプリケーションの構築コンポーネント

> 💡 主題：このTypeScriptシリーズブログを続けます。今度は、どうやってTypeScriptを使って、コンポーネントは開発を紹介します。このブログで、TypeScriptの「クラス」と「インターフェース」について学び、そして、簡単な商品リストのコンポーネントを作成します。
– [1 クラス](#クラス)
– [1.1 クラスの定義とインスタンス化](#クラスの定義とインスタンス化)
– [1.2 コンストラクタ](#コンストラクタ)
– [1.3 属性とメソッド](#属性とメソッド)
– [2 クラスの特性](#クラスの特性)
– [2.1 abstractキーワード](#abstractキーワード)
– [2.2 インターフェイス](#インターフェイス)
– [2.3 継承](#継承)

# クラス
## クラスの定義とインスタンス化
TypeScriptでのクラスは、`class`キーワードを使って定義されます。例えば、以下の通り、Productを定義します。
“`TypeScript
class Product {
}

元記事を表示

Kotlin Multiplatform Javascript版 Day1

# 概要
(個人メモ)
NodejsやBrowser向けのKotlin Multiplatformプロジェクトのテンプレを作成

# ソース
https://github.com/kyoya-p/samples/tree/51f9cc7d69292f4e9430d21590f635a9ed928518/2024/KMPs/js1

# 実行
“`sh:nodejs
gradlew jsNodeRun
“`
標準出力に`Hello World!`が表示される。

“`sh:browser
gradlew jsBrowserRun
“`
開いたBrowserのConsoleに`Hello World!`が出力されている。

元記事を表示

Javascript 配列・連想配列

Javascript の勉強した内容のメモ書きをしていく

配列は　const でデータを入力し、console.log でデータを取得し、出力する。

const データの名前 = {
‘キー’: ‘バリュー’,
‘キー’: ‘バリュー’,
};

console.log(データの名前);

連想配列の場合、一つ一つ区切り、ほしい情報だけ取得するようにする。
const dog = {
‘秋田犬’:{
‘color’:’茶色’,
‘size’:’big’
},
‘ポメラニアン’:{
‘color’:’茶色’,
‘size’:’mini’
}
};

console.log(dog.ポメラニアン.size);

元記事を表示

JavaScriptの個人的メモ

## やりたいこと
使用言語はJavaScript
![test.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3746814/9cceb434-1360-47c0-6e69-03f3c1c3274f.jpeg)
塗りつぶしのマス同士の間隔をX軸ごと、Y軸ごとに取得したい
X軸だと座標(3,2)と座標(4,2),座標(2,5)と座標(9.5),座標(4,7)と座標(7,7)の間隔を配列に取得
重複する間隔は不要

## コード例
“`test.js
var beforeX;
var afterX;

var beforeY;
var afterY;

var beforeID;
var afterID;

//ボール構造体
function ballStruct(){
this.ID=””;
this.X=””;
this.Y=””;
this.BallX=””;
this.BallY=””;
}
//ボール構造体の配列
var bsArr=[];
//データ定

元記事を表示

TypeScript 基礎とプロジェクト設定

>💡 主题と焦点：TypeScriptの基本概念、型システムの利点、およびTypeScriptプロジェクトの設定方法（`tsconfig.json`の設定を含む）について紹介します。

– [1 紹介](#紹介)
– [2 どうしてTypeScript](#どうしてTypeScript)
– [3 エンバイロメント設置](#エンバイロメント設置)
– [3.1 インストール](#インストール)
– [3.2 コーディング](#コーディング)
– [3.3 コンパイル](#コンパイル)
– [3.4 コード実行](#コード実行)
# 紹介
現代のWeb開発において、JavaScriptは不可欠な部分となっています。しかし、プロジェクトの規模が拡大するにつれて、JavaScriptの弱い型付けと柔軟性が時に見つけにくいバグや複雑なメンテナンス問題を引き起こすことがあります。これはTypeScriptが生まれた背景です。

TypeScriptは、Microsoftによって開発されたオープンソースの言語であり、JavaScriptの基盤の上にオプショナルな静的

元記事を表示

JavaScriptの3つの演算子についてのまとめ

JavaScriptの論理演算子、三項演算子、nullish coalescing operatorの詳細
JavaScriptには、条件分岐や値の比較などに使用できる論理演算子、三項演算子、nullish coalescing operatorと呼ばれる3つの演算子があります。

## 1. 論理演算子
論理演算子は、2つのオペランド（式）を受け取り、論理的な値（trueまたはfalse）を返す演算子です。主な論理演算子は以下の3つです。

– && (論理積)：両方のオペランドがtrueの場合のみtrueを返します。
– || (論理和)：いずれかのオペランドがtrueであればtrueを返します。
– ! (論理否定)：オペランドの論理値を反転します。

例:
“`JavaScript
const isAdult = age >= 18;
const hasDriversLicense = true;

// 論理積：年齢が18歳以上で運転免許証を持っている場合のみtrue
const canDrive = isAdult && hasDriversLicense;

// 論

元記事を表示

HTML: event処理記述で省略できるっぽいもの

htmlのtagに直接event処理を記述すると省略できるものがある。
`window`, `document`, tagの要素自身を指すobjectである(他にもあるかどうかは不明)。そのため以下のような記述は正常に処理される。
“`html
a
“`
3つのobjectいずれかで共通の属性を持つ場合、参照される優先順位は event起動要素 > document > window となるっぽい。
そんな訳でdocument.titleを参照したい場合はdocumentは省略できない。
“`html
0a
“`
以下の実験では面白い事が起こる。最初のclickではdocument.URLが参照され、2回目以降はa要素のURLが参照される。
“`html
初めてのExpress学習メモ

# 環境
node : v18.19.1
dependencies: {
　　ejs: 3.1.9, 　　　 //動的なHTMLの為のテンプレートエンジン
　　express: 4.18.3
}

# 目次
– Expressの立ち上げ

https://expressjs.com/ja/api.html

– bootstrap (CSSのため)

https://qiita.com/engineerhikaru/items/9b274ea3662f381e2266

– EJS　(動的HTMLのため)

以降追加予定

– (API)

## Expressでサーバー立ち上げまで
コマンド

“`
//expreeディレクトリ作成
mkdir my-express-api
cd my-express-api

//npm初期化してexpreeインストール
npm init -y
npm install express

//サーバー起動用のファイル作成
touch index.js
“`

– index.jsの中身

“`
//express　

元記事を表示

Vue.jsのv-modelが使用されているフォームにイベント処理を追加したい場合の備忘録

Vue.jsでv-model記述に関わる部分を触った際の備忘録になります。
間違っているところや、もっと良い方法などあったら教えていただけると助かります。

`v-model`はVue.jsを使ってフォームを構築する際によく使う機能で、`v-on`と`v-bind`をまとめて一行で書くためのシュガーシンタックスです。

`v-model`を使った際の展開のされ方は以下の通り。
| フォームの種類 | v-bind: | v-on: |
|:———–|:———–|:———–|
| テキストボックス、テキストエリア | value | input |
| チェックボックス、ラジオボタン | checked | change |
| セレクトボックス | value | change |

`v-model`はイベントハンドリングそのものを兼ねているため、`v-model`が既に記述されているフォームに対して入力（選択）内容が変更された時にイベントを発火させようと`@change`や`@input`を記述すると、イベントが重複してしまいます。
もし`

元記事を表示

Reactで出力したフォーム系タグのイベント属性に設定した関数を別の関数内で発火させる

:::note warn
注意
今回の記事で用いる手法はReact-domのバージョンが16.11までのもので確認できたものです。
それ以降のバージョンでは動作しない可能性があります。ご了承ください。
:::

Reactのrender部分でフォーム系タグへイベント属性を記載している場合、実際に画面に出力された際のフォーム系タグの中にはイベント属性が記述されていません。

“`html:render部分の記述

“`
“`html:出力された際の記述