f@ctor

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

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

初心者エンジニアが体験！indexedDBの便利さと実践的な活用法

## はじめに
こんにちは。入社2年目、実務経験約半年の駆け出しフロントエンドエンジニアです。日々の業務では主にNuxt、Vue、AWS、TypeScriptを使って開発を行っています。

今回は、最近“indexedDB“というものを触る機会があったので、便利だと感じた部分を共有したいと思います。
駆け出しのエンジニアの方にとって、少しでも参考になる情報をお届けできれば嬉しいです。

## indexedDBとは
indexedDBは、ブラウザ上で動作する強力なクライアントサイドのデータベースシステムです。WebStorageよりも高度な機能を持ち、大量のデータを扱えるのが特徴です。

主な特徴は以下の通りです:
– ブラウザ上で動作するNoSQLデータベース
– キーと値のペアでデータを保存
– 非同期APIを使用
– トランザクションをサポート
– 大容量のデータを扱える

https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

## indexedDBの便利な点
indexedDBを使ってみて、以下の点が特に

元記事を表示

TypeScript/JavaScriptで配列の重複データを効率的に除去する

配列データの処理において、重複した値を取り除く作業はよく必要になります。今回では、TypeScriptやJavaScriptを使用して配列内の重複データを簡単かつ効率的に取り除く方法を説明します。

### なぜ重複除去が必要か

重複データを持つ配列を処理する場合、パフォーマンスや正確なデータ分析に悪影響を与えることがあります。例えば、APIから取得したデータやユーザー入力を扱う際に、意図せず重複が発生することがあります。そのため、データのクリーンアップを行うことが重要です。

### Setを使った重複除去

最もシンプルで効率的な方法は、“Set“オブジェクトを使用することです。“Set“は一意の値のみを保持するコレクションで、重複する値を自動的に除外します。

例
“`javascript
const array = [‘A’, ‘B’, ‘A’, ‘C’, ‘B’];
const uniqueArray = Array.from(new Set(array));

console.log(uniqueArray); // 結果: [‘A’, ‘B’, ‘C’]

元記事を表示

sortの仕組みを整理した (JavaScript)

業務では、配列のソートはlodashを使うのですが、細かく条件を入れてソートしたい時はsortメソッドの方が便利です。そこで、今一度このsortの仕組みを整理してみました。

## sortメソッドとは
配列に対して、順番に２個ずつ取り出して比較し、昇順、降順など指定の条件で並び変えてくれる。
また、第一引数には `a` 第二引数には `b` が慣習的に使われる。

第一引数`a`、第二引数`b`を計算/比較した結果を**正の数、負の数**で返す事で以下のルールで並び替えをしてくれる。

#### 並び替えの仕組み：
結果が正 → 第一引数 を 第二引数 の後に並べる → [b, a]
結果が負 → 第一引数 を 第二引数 の前に並べる → [a, b]

実際に見ていきましょう、本記事内のコードは以下のサンプルデータを使っています。
“`javascript
// サンプルデータ
// *startDateは本来UNIXタイムスタンプですが、便宜上わかりやすくしてます。
const arr = [
{ eventName: “イベントB”, startDate: 3, roun

元記事を表示

JavaScriptで画像に動きをつける【初級編⑤】

# はじめに
今回は、Webサイトでよく使われている、画像をスクロールさせると上下からフェードイン、左右からスライドインさせるアニメーションを作っていきます。

## 画像を上からフェードイン

See the Pen
画像を上からフェードイン by Uka

元記事を表示

Cesium で自作3Dモデルを表示する

先日、たまたま [PLATEAU](https://www.mlit.go.jp/plateau/) を知り、その流れで [Cesium](https://cesium.com/) を知り、Cesium で自作の3Dモデルを表示してみたくなったので、後で読み返せるように、その時のことをまとめておこうと思います。

## まずは Cesium を動かす

Cesium の Github リポジトリで、Webpack で Cesium を使用するアプリケーションの（最小の）雛形が公開されているので、これを利用します。

https://github.com/CesiumGS/cesium-webpack-example

作業用ディレクトリで以下のコマンドを実行します。
Webpack4 と Webpack5 用の雛形が用意されているようで、今回は Webpack5 用を使用します。

“`bash
git clone https://github.com/CesiumGS/cesium-webpack-example.git
cd cesium-webpack-example
cd w

元記事を表示

[Android] Javascript Interface

# Javascript Interfaceとは？
スマホアプリ内にウェブページを埋め込むwebViewを使う際、
フロントエンドのコードがスマホアプリのネイティブコードを叩く手段が提供されている。

それがJavascriptInterface

# 使い方導入
## kotlin実装
“`kotlin
class MyJavascriptInterfaces {
@JavascriptInterface
fun hello(){
Log.i(“webViewApp”, “Hello, World”)
}
}
“`
というJavascript Interfaceを搭載したクラスを作り
“`kotlin
binding.webView.apply {
settings.javaScriptEnabled = true
addJavascriptInterface(MyJavascriptInterfaces(), “MyJavascriptInterface”)
loadUrl(“https://www.googl

元記事を表示

ビジュアルプログラミングで高位合成 その4

# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
実は、今の実装では、半加算器、全加算器が高位合成できません。
半加算器の高位合成を計画します。
設計編

# 半加算器を動作させて、真理値表を作る。
こちらに、simcirjsがあります。動作させて、真理値表を作成しましょう。

https://embed.plnkr.co/plunk/UOeNFNBciol1kqprJ2Pu

左のデバイス一覧から、HalfAdder、DC、In、Out、Toggle、LEDをドラッグします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e6e84eaa-0315-90fe-942e-f11bd64b1582.png)

ワイヤーをつなぎます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6c

元記事を表示

React「実践入門」Part１

# はじめに
実践入門とか書いてますが、**だいぶ入門**です。
とりあえずReactを使えるレベルにはなると思います。
とりあえず始めていきましょう！

# Reactとは
Reactでは、ユーザインターフェース（UI）を**コンポーネント**と呼ばれる部品を組み合わせることで構築できます。　

また、各コンポーネントは、**JavaScriptの関数**なので、普段のJavaScriptのノリで記述することが出来ます。

ただ、あくまでReactは**ライブラリ**なので、ルーティングなどは指定されていません。フルスタックなどの開発をする場合は、**Next.js**などのフレームワークを使いましょう！

https://ja.react.dev/

https://nextjs.org/
# Reactの重要な３つの概念
Reactには、**Components** , **Props** , **State**という３つの重要な概念があります。
## Components（コンポーネント）
コンポーネントはユーザインターフェースを構築する**最小単位**といえます。

このコ

元記事を表示

HTMLとJavaScriptで自作スロットマシンに挑戦！

## はじめに

今回は、HTMLとJavaScriptを使って、簡単なスロットマシンを作ってみたいと思います。自宅でカジノ気分を味わいたい方や、プログラミングの練習としてもおすすめです！コードの構成はシンプルですが、少しおしゃれな見た目に仕上げていますので、楽しく挑戦してみてください。

### 完成品イメージ
![スクリーンショット 2024-09-20 20.10.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/b631ed28-2d84-2fad-1ecc-98029ba11ee2.png)

3つのリールが回転し、それぞれに「ストップ」ボタンが付いています。リールを停止させ、3つのリールに同じ絵柄が揃えば「大当たり！」が表示されます。違う絵柄だと「残念！」という結果になります。コードを一部変更するだけで、見た目や挙動を簡単にカスタマイズすることも可能です！

—

## スロットマシンを作る手順

### 1. 必要なファイル
今回のスロットマシンは、次の3つのファイルで構

元記事を表示

Github Copilot mdファイルのコーディング規約に基づいてレビューする

# 概要
github copilotでリポジトリ内のコーディング規約を読ませて、ソースをレビューできるか試してみました。結果はきっちりレビューしてくれました。

# 検証開発環境　
javascript
HTML
github codespaces(ブラウザで動かす方)

# 準備
## コーディング規約
ルールは以下の通り
変数の記法はアッパーキャメル記法
配列のfor文は　for ofを使う
if文は比較したい変数は比較演算子の左側に書く

詳細の形式はgithub参照
https://github.com/RYA234/laravel9_vite_vue3/blob/master/review_test/javascritpt_rule.md

## レビュー前のファイル
適当です
“`main.html