JavaScript関連のことを調べてみた2022年12月29日

30時間かけてJavaScriptが練習できるアプリを作りました。

# 30時間かけてJavaScriptが練習できるアプリを作りました。

ご存じの通り、JavaScriptが他のプログラミング言語と違うところは、もともと**ブラウザのため**に作られたということです。今では、Node.js等でバックエンドでも使用できるようになりましたがその基本は変わっていません。

私がJavaScriptを習い始めたころはコードを書きながら実際にいちいちconsole.log()を加えながらどういう動きをするのか確かめる作業を繰り返していました。

そこでこの**JSひろば**アプリを作成してみることにしました。
このアプリを通して皆さんにJavaScriptがどう使えるかを、実際の例を使って、自分のコードを書きながら試していただけると嬉しいです。
　　

## [JSひろばを試す](https://js-hiroba.com)


ページ: 途中下車ウォークの記録

次のページを作成する方法です。
[途中下車ウォークの記録](https://ekzemplaro.gitlab.io/trip/)

コードは Gitlab に置きます。
[trip](https://gitlab.com/ekzemplaro/trip)

プロジェクトは、
Pages/Plain HTML
というテンプレートを使って作成します。

public 以下のフォルダー構造

“`text
$ tree public/
public/
├── data.json
├── index.html

getElementById()を使って入力フォームから値を取得する

## はじめに
入力フォームに入力した値を取得する方法を説明します。

## 結論

`getElementById()`と`valueプロパティ`を使うことで入力フォームの値を取得することができます。

## 説明
まずは、`getElementById()`を使って入力フォームの要素を取得します。
その際、引数には取得したいid属性名を指定します。

“`jsx
let inputElm = document.getElementById(‘id属性名’).value;
“`

id属性の要素取得後、valueプロパティを使って入力フォームの値を取得します。

“`jsx
let inputVal = inputElm.value

console.log(inputVal); // 入力フォームの内容が表示される。
“`

ちなみに「getElementById(’id属性名’).value」というように、まとめて記述することもできます。

## 参考サイト
[https://magazine.techacademy.jp/magazine/210

p5.jsでマルコフ連鎖を使って生き物っぽいものを作ってみる

こんにちは！
東海メンターのだすです。
この記事は[Life is Tech ! Tokai Advent Calendar 2022](https://qiita.com/advent-calendar/2022/life-is-tech-tokai)の3日目の記事です。

# 最近のメディアアートすごいね
最近メディアアートにハマってます。
作品を見ているとすごい作品ばっかりで見ていて全然飽きないです。
中には生き物を表現しているものもあり本当に永遠に眺めていられそうでアクアリウムのように部屋に置いておきたくなるものもありました。

どうやったらそういう表現ができるのだろう、p5.jsでもできないかなぁというところでマルコフ連鎖を使って生き物を表現してみようという記事になります。

# 生き物をどうやって表現しようか
生き物的なものを作ろうと考えた時、まず生まれて、成長して、仲間を増やして、死ぬみたいなサイクルがあるよなということで状態変化を作ればいいのかと行きつきました。
状態変化・状態遷移と言えば**マルコフ連鎖**かな、ということでまずは生き物っぽいものをマルコフ連鎖を使っ

[javascript] なぜ「forEachでasync/awaitは使えない」と言われるのか

# はじめに

とあるメンバーから、表題のようなことを言われました。
どうやら以下のようなコードで、「`forEach`で`await`を使っているのに処理順がおかしくなる」とのことから、この結論に至ったそうです。

“`javascript:動かないコード
async function testAsync(v) {
await new Promise(resolve => {
setTimeout(resolve, 100);
});
return v + 1;
}

const data = [];
const params = [0, 1, 2];
params.forEach(async v => {
const res = await testAsync(v);
console.log(res);
data.push(res);
});
console.log(data);

// [] 1 2 3
“`

最初に`data`が空配列、そのあと`1` `2` `3`と表示されます。
「うんそれはそうなるよね･･･」と思いはしたのですが、彼に

【JavaScript】ハッシュを使いたい。でも順番は変えたく無い。その気持ち、わかります。

# JSのハッシュがクソな理由(あくまで筆者の主観です)
以下の結果は何が出力されるでしょうか?
“`javascript
let hash = {
76: {‘name’:’太郎A’, ‘age’:’23’},
55: {‘name’:’太郎B’, ‘age’:’26’},
82: {‘name’:’太郎C’, ‘age’:’46’}
};
console.log(hash);
“`
大抵の人（筆者を含む)が以下のような結果を期待するのでは無いでしょうか?
“`javascript
{
76: {‘name’:’太郎A’, ‘age’:’23’},
55: {‘name’:’太郎B’, ‘age’:’26’},
82: {‘name’:’太郎C’, ‘age’:’46’}
}
“`
しかし、実際には以下のようになります。
“`javascript
{
55: {‘name’:’太郎B’, ‘age’:’26’},
76: {‘name’:’太郎A’, ‘age’:’23’},
82: {‘name’:’太郎C’, ‘age’:’46’}

自動補完でinputの背景色が変わらないようにする方法

# はじめに
パスワードのinputを黒で実装していたら、Chromeの自動補完で白に変わるという不具合が発生、大変苦しんだので備忘録として残します。

## 背景色が変わる原因
自動補完後、下記のようなスタイルが適用されていました。
“`scss
input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
color: fieldtext !important;
}
“`

## 対処方法
シンプルに自動補完後のスタイルを上書きする形で落ち着きました。

“`scss
input:-webkit-autofill {
box-shadow: 0 0 0 1000px rgb(0, 0, 0) inset !i

Next.js 13 から next/link の Linkコンポーネント が 常に aタグをレンダリングするようになったので共有します

## 目的

Next.js 12 と 13 で Linkコンポーネントの実装方法が変化したよ、のお知らせ

## 使用技術

– “next”: “13.0.5”,
– “react”: “18.2.0”,
– “react-dom”: “18.2.0”,

## Next.js 12 までの Linkコンポーネント

Next.js 12までは`aタグ`を常にネストしないといけなかった

“`tsx
import Link from ‘next/link’

// Next.js 12まではaタグを常にネストしないといけなかった

About

“`

## Next.js 13 の Linkコンポーネント

Next.js 13以降は `aタグ` をネストしなくて良くなった

“`tsx
import Link from ‘next/link’

About

“`

なので、[Next.jsのLinkコンポーネントにpassHref属性を付

[javascript]Dateで日付の比較をする時は日付のフォーマットに気をつけようという話

多分出尽くしてるネタだとは思うけど、ハマったので備忘録として投稿。

# あらすじ

以下のコードを実行したところ、

“`javascript
var currentDate = new Date(‘2022/12/01’);

var startDate = new Date(‘2022-12-01’);
var endDate = new Date(‘2022-12-31’);

if (startDate <= currentDate && currentDate <= endDate) { alert('師走です') } else { alert('師走じゃないです') } ``` アラートに `師走じゃないです` が出力された。 !?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!?!? # 何故こんな動きになったか？ Chrome だと `YYYY-MM-DD` だと時間が9時間ずれる不具合があるみたいです。 ```javascript console.log(

選択範囲のテキストを取得していろいろするためのクローム拡張サンプル

「～をgoogleで検索」の右クリックメニュー(コンテキストメニュー)を再現しました。汎用性があると思い、ソースコードを公開します。

※私の期待したユースケース

マニフェストがv2(2021年までのブログ記事に散見)だとコードが動かなくなってしまっており、いろいろサンプルコードが動かなくなってしまっており、バージョンアップも簡単ではないので、材料集めに苦労しました。
というわけで作ったものを公開しますので誰かの種になりますように。

ちなみに下記のサンプルもおすすめです。
https://github.com/GoogleChrome/chrome-extensions-samples

“`json:manifest.josn
{
“manifest_version”: 3,
“name”: “nantoka-Searc

【Rails】HERE Maps APIで地図機能を作ってみる

# 概要
今回、無料でMap機能が使えるかつGoogleMapのAPIよりすごい！という話を
[以下の記事](https://qiita.com/Akira-Isegawa/items/a31be5893e362c6f10c3)で見かけたので、Railsで実装してみました！
投稿機能を実装していれば実装できる機能なので、ぜひ遊んでみてください〜！

https://qiita.com/Akira-Isegawa/items/a31be5893e362c6f10c3

:::note warn
投稿機能の実装が必要です
:::

# アカウント登録とプロジェクトの作成
以下の記事にある、`Developerの登録`を参考に進めましょう！

https://qiita.com/Akira-Isegawa/items/a31be5893e362c6f10c3

上記の記事のようにプロジェクトの作成が終わったら
アプリのディレクトリ直下（Gemfileと同じ階層）に`.env`という名前のファイルを作成し
APIキーを`.env`に入れます。

“`:.env
HERE_MAP_API_KE

【JavaScript】超絶初心者のための配列・連想配列の基本構文

# 配列・連想配列

## 配列

### 宣言

* 空で宣言
“`javascript
const array = [];
“`

* 値を入れて宣言
“`javascript
const array = [“デク”,”爆豪”,”轟”];
“`
***

## 連想配列

### 宣言

* 空で宣言
“`javascript
const array = {};
“`

* 値を入れて宣言
“`javascript
const array = {name:”デク”, team:”A組”, gender:”男”};
“`
***

JQuery

# JQueryとは
開発の現場で全てを自分で0からコードを書くことも可能だが、よく使われる機能を実装しやすいようにひとかたまりのコードにしてくれているのがライブラリ。
JQueryはJavaScriptのライブラリの一つ。

主な機能として
・DOM操作
・イベント
・CSS操作
・エフェクトとアニメーション
・AJax

などがある。

最近の開発の現場ではあまり使われない。
Webブラウザ間での揺らぎがJQueryを使わなくても大きく無くなったため。
https://www.webstaff.jp/guide/trend/jquery/

https://releases.jquery.com/

# DOMの取得

### 要素の取得
“`javascript
const main = $(‘#main’);
console.log(main);
“`
“`javascript
$(‘.article’)
$(‘p’)
$(‘[show=”on”]’)
$(‘#main > p:first-child’)

“`

### テキストの変更
“`javascript
$

【Node.js】Expressのroutesをいい感じにする（ディレクトリ・ファイルを追加するだけでrouteに登録されるようにする）

## はじめに

Expressで実装する際、以下のようにrouterの実装を`src/routes`などに分けて実装する事はままあると思う。ただこの実装だと、`routes`を増やすたびに`app.user()`も必要になり、手間かつ冗長に思える。

“`js:./src/index.js
import express from ‘express’;

// 省略
import router from ‘./routes/index’;
import shopsRouter from ‘./routes/shops’;
import searchRouter from ‘./routes/search’;
import accountRouter from ‘./routes/account’;

// 省略
const app = express();

// 省略
app.use(‘/account’, accountRouter);
app.use(‘/search’, searchRouter);
app.use(‘/shops’, shopsRouter);
app.us

【js】javascript特有の今まで出会ったクラス宣言（オブジェクト宣言）

# javascript特有のクラス宣言
2022年から新卒エンジニアとして開発していて、これまでjavascript特有のクラス宣言を見てきました。その中には最近知ったものもありましたので、今回は私が今まで見てきたクラス宣言の紹介したいと思います。

# ただの連想配列
“`javascript
/*
連想配列に無名関数を設定して擬似クラスを作成する
イニシャライズの代わりにディープクローンをする
*/
const classOne = {
init() {
print(‘============11’)
},
}
const classOneIncetance = { …classOne }
classOneIncetance.init()
“`
このケースの1番のデメリットはイニシャライズが存在しなく、インスタンスが生成されないことです。今回はディープクローンで擬似的にイニシャライズしていますが、連想配列の階層がもう１つ深くなるとクローンできなくなるので注意が必要です。

# new 演算子
“`javascript
/*
オブジェクト型

[Rails,slick,JavaScript]slickを用いたスライドショーの作成

チーム開発で活用した技術をアウトプット投稿
## 目的
slickを用いて下記のようなスライドショーの作成

## 開発環境
– Ruby 3.1.2
– Rails 6.1.7
– bootstrap併用

## 実装手順
### 1.slickの導入
今回はCDNを用いて実装

https://kenwheeler.github.io/slick/

公式HPのヘッダー`get it now`をクリックし
`View On Github`からgithubに移動し、`README`にある以下3つをコピー
“`

[Rails,Javascript]モーダルウィンドウの実装

チーム開発で活用しようと思った技術をアウトプット投稿
## 目的
以下のようなモーダルウィンドウの実装
商品の写真をクリックすると以下のように表示、背景の黒い部分をクリックすると戻る

## 開発環境
– Ruby 3.1.2
– Rails 6.1.7
– bootstrap併用(bootstrap自体は実装機能と関係なし)

## 実装手順
### 1.モーダルの設置
モーダルを表示させたいページに以下の記述を行う
例)`index`ページに`show`ページの内容を表示したい場合は`index`に記述
“`(例)index.html.erb

“`
### 2.CSSの設定

[Rails,Javascript]RailsのviewでJavaScriptを用いて一定時間後に指定したページへ飛ぶ

チーム開発で活用した技術アウトプット投稿
## 目的
– 特定ページを訪れた際、一定時間後指定したページへリダイレクトする

## 開発環境
– Ruby 3.1.2
– Rails 6.1.7

## 基本的な書き方
指定したいページに下記`script`を記述

“`.js

“`
– `action`内の`window.location.href = ‘URL’;`で遷移先を指定
– `time`内の5*1000で秒数を指定(ミリ秒で指定する。1000 = 1秒)
– `setTimeout`で`time`に指定した時間経過後に`action`を実行

## 問題点
この記述をしたページから違うページに飛んだ場合でも実行されてしまう
※指摘してくれたチームメイトに感謝

例)Aboutページに指定している、指定

【jQuery】validate()　をclass名を使って実装

classを使ったバリデートの実装とメッセージの出力をまとめました。
wordpressや外部のサービスを使って自動形成されるフォームを使用したときに、idやnameが自動生成で指定出来ない時などにクラスを使ったバリデートの実装が使えます。

“`html

のし有りのし不要