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

【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

のし有りのし不要