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

91.Symbol

シンボルとは
＊プロパティの重複を避けるために『必ず一意の値』を返す関数。
＊文字列でもない、数値でもない、シンボル型という方
＊一位なので、比較をすると
#### シンボル型作成方法
“`javascript
const left = Symbol(“hello”);
// シンボル型のhelloが返される
“`
#### 同じhelloを左右で比較すると、、
“`javascript
const left = Symbol(“hello”);
const right = Symbol(“hello”);
console.log(left == right);
console.log(typeof left)
“`
// ビルドインオブジェクトを拡張するのは好ましくないので、今は確認のため
“`javascript
String.prototype[left] = function(){
return ‘hello’+ this;
}
const tom = ‘Tom’;
console.log(tom[left]())
“`

React開発を快適にするChrome拡張を公開したので見てください！

**React Inspector** というChrome拡張機能を作りました。

**Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応)**

[](https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh)

– Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
– GitHub: https://github.com/

89.ビルトインオブジェクト

# ラッパーオブジェクト
## ビルトインオブジェクトとは
コード実行前にJSエンジンによって、自動的に生成されるオブジェクトのこと
=例えば自分で new ~などで自動的に生成しなくても使えるもの

## ビルトインオブジェクトの一例
“`javascript
1.String
2.Object
3.Number
4.Function
5.Math
6.Boolean
7.Date
8.Symbol
“`
などなど
＊見分け方としてはWindowオブジェクトの大文字からはじまるコンストラクタなど

## ＜重要＞他の言語とは違って配列はオブジェクトの一種として扱われる
“`javascript
const array = new Array(1.2,3,4)
console.log(array)

console.log(array.length) //出力される
console.log(array.Array.length) //出力されない
“`
![スクリーンショット 2022-09-06 10.05.15.png](https://qiita-image-store

axiosについて

# axiosとは
– HTTP非同期通信ライブラリー。
– バックエンドとデータを受け渡しをする際に使うライブラリー。
– バックエンドと通信できるURLに非同期でアクセスしてget, post, update, deleteの作業を行うことができる。

# axiosのメリット
– バックエンドとの通信時に自動的にデータをjson形式に変換する。
– リクエストをキャンセルすることができる。
– 幅広いブラウザー＆バージョンに対応。
– アップロードやダウンロード時に進行状況の情報を取得することができる。

# axiosのデメリット
– 外部のライブラリーであるため、インストールが必要

# axiosの特徴
– axiosから要請したレスポンスはPromiseのオブジェクトである。
– そのため、以下の使用方法のようにasyncとawaitを使って簡潔に記述することができる。

# axiosの使用方法
– axiosをインストールして以下のように利用することができる。

~~~javascript:javascript
async function getUser() {

JavaScriptの正規表現について part1

# 初めに

https://www.tohoho-web.com/ex/regexp.html

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

# 前置き

（あくまでも自分の認識を書いたのですが、間違ってる、至らなかったところがあればご了承ください。）

Unicode について

参考文章はこちらです。
[Unicode](https://en.wikipedia.org/wiki/Unicode)
[Character encoding](https://en.wikipedia.org/wiki/Character_encoding)

– Unicode とは、コンピュータが人間の文字を処理させるために創られたスタンダードです。スタンダードでは、文字をコンピュータが読めるようにどのように符号化（encoding）する、そしてどのように文字コードの集合を作るのを規定している。（[符号化文字集合と文

jquery slidetoggleを解説

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## slidetoggle

slidetoggle: 要素の表示、非表示を切り替えることが出来るメソッド。

例文

“`
$(‘#menu dt’).click(function(){
$(‘#menu dd’).slideToggle();
});
“`

こんな感じで、クリックした際に、要素を変えることが出来る。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782859/e5adcd29-d0c2-7fab-d

ポータルエンティティフォームに追加設定


““

jquery 要素の指定

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## 要素の指定
$()で、基本的にはかこう。
その後、css形式で入力すれば、完成。

例文

“`
$(‘p’).click(function () {
alert(‘クリックしました’);
});
“`

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しいです。

Javascript targetについて

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## target

target: 指定した要素を持っているかどうかを判別する。

1つ目の引数で、調べたい対象を指定して、３つ目の引数で、どの要素を判別したいのかを指定する。

例文

“`
event.target.src
“`

eventの中に、src要素が含まれているのかを判別する。

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しいです。

【個人開発】「ロードバイク乗りのためのお店検索WEBアプリ」制作しました【Cycle Depot】

# 本記事の対象者
– 個人開発アプリ、オリジナルアプリ開発に興味がある方
– ロードバイクが趣味の方
– タイトルに興味を惹かれた方

# WEBアプリURL
https://cycledepot.herokuapp.com/

# オリジナルアプリ概要
– 名称：　Cycle Depot(「サイクルデポ」と読みます)
– 開発環境：
– Ruby3.0.1
– Rails6.0.5.1
– PostgreSQL1
– 説明：
ロードバイクに乗っていて気軽に入れるお店が中々見つからないなと感じたことはありませんか？
　　ロードバイクは高価であるということに加えて、スタンドが付いておらず自立しないため駐輪場所に困ることが多いと思います。そんな時にサイクルラックを置いてくれているお

jquaryでのオリジナルダイアログの条件分岐

## alert()のように条件分岐したい
ワイの覚書きシリーズ

ある程度サイトを構築してくると、確認ダイアログのデザインにまでこだわりたくなるのはあるあるです。
今回はpromiseを利用してオリジナルダイアログで条件分岐できるコールバック関数を作成します。

▽ダイアログ関数
“`JavaScript
function pop_listener(mes){
$(‘.popup_title’).html(mes);
$(‘.popup_group’).fadeIn(200);
var promise = new Promise((resolve) => {
document.querySelector(‘.pop_submit’).addEventListener(“click”, () => {
$(‘.popup_group’).fadeOut(200);
resolve(true);
});

88.super

## superとは
継承するために必要な処理

## 継承する為にすること２つ
1.継承先 extends 継承元を加える
2.super(継承元の引数を加える);
例）
“`javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

hello() {
console.log(‘hello ‘ + this.name);
}
}

class Japanese extends Person {
constructor(name, age, gender) {
super(name, age);
this.gender = gender;
}

hello() {
console.log(‘Konnichiwa ‘ + this.name);
}

bye() {
console.log

人事のおじさんプログラミングを学ぶ Day11「配列を使って箇条書きのHTMLをつくる」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
配列を使って、箇条書きのHTMLをつくってみた。

86.クラス,87,クラスと継承

## クラス
Javascriptにおいては、
コンストラクター関数をクラスっぽく表記したもの
*他言語ではコンストラクターよりもクラスの方が使われる
## 記述方法
#### 例
“`javascript
class Product{

constructor(name,price){

this.name = name;
this.price = price;
}
//各インスタンスが参照するメソッドを定義
display(){
console.log(`名前:${this.name} 値段:${this.price}円`);
}

}
“`
## 書き方
#### 1.クラスを記述
“`javascript
class Product{
//
}
}
“`
#### 2. constructorの記述:クラスを生成した瞬間呼ばれるもの
→name,ageなどのプロパティを作成するときはこちらに入れましょう。
“`javascript
class Product{

データ値の累積分布（可視化、JavaScript）

こんにちは。
データ値（正規分布の例）の累積分布をプロットしました（二種）：
1. 直接法[^1] [^2]（赤線）
2. ヒストグラム経由法（青線）

[^1]: 参考：「[累積分布関数をソートで求める(Python版)](https://qiita.com/kaityo256/items/09e44c0435bd5a972272)」
[^2]: さらにこの場合、$\mathrm{erf}^{-1}$を用いて変換すると直線状となります（橙線）。


* ソースおよび動作例はこちら： “[Drawing cumulative density function](https://bl.ocks.org/kkdd/99f4befb33eaff3d0aa31f99182cfd98)” (bl.ocks.org)

85.hasOwnProperty〜プロパティがあるかどうかを調べる〜

## hasOwnPropatyとは
オブジェクトの中にOOというプロパティがないかを調べる→存在すればTRUE
## Inとは
オブジェクトだけではなく、プロトタイプを含めてOOというプロパティがないかを調べる→存在すればTRUE

“`javascript
function Person(name, age) {
this.name = name;
this.age = age;
}

Object.prototype.hello = function() {
console.log(‘Object: hello ‘ + this.name);
}

const bob = new Person(‘Bob’, 18);
“`

[Typescript/Javascript] 特定の小数点位置で四捨五入する方法

javascriptの標準関数が整数にするための四捨五入しかなかったので拡張してみました

# 結論

“`ts
function roundDecimal(value: number, decimalPoint: number) {
const x = 1 / decimalPoint
return Math.round(value * x) / x
}
“`

# 解説
少数第二位までを四捨五入して表示したい場合
1 / 0.01とするとxに100が入る
valueに100をかけることで少数点第二位までが整数となり、小数点第三位が小数点第一位となることでMath.roundで四捨五入することができる
そのあと、かけた100で割ってあげることでふたたびもとの値に戻すことができる

MDB5でformのinputでborderが出ない時の対処

# 概要
MDB5でformのinputでborderが出ない時にborderを出す備忘録

# 対象
MDB公式（Material Design for Bootstrap v5）
https://mdbootstrap.com/

# 問題
公式サイトの通りにInputフィールドを下記だけ入れるとinputのborderが消える
“`html

Example label

“`
期待するもの↓

実際になるもの↓
![

ボタンを押すとランダム関数が走り、画像が遷移する方法　後編

こんにちは、ブヒブヒです。
自分が学んだ内容をメモのつもりで書いていきます。

絶賛javascriptを勉強中です。
課題でjavascriptをルーレットを作ったので共有します。
ルーレットを作るには「HTML」「CSS」「javascript」「DOM」使います。

“`javascript

HTML
画像

本日のランチ

作業メモ 20220905

今日作業で参考にしたサイト

https://into-the-program.com/display-block-none/

https://qiita.com/TakePro/items/0faee19101a02aeb5f7a

https://www.delftstack.com/ja/howto/javascript/javascript-get-input-value/

Laravelでredirect（リダイレクト）させる方法【初心者向け】

http://kayakuguri.github.io/blog/2017/12/06/laravel-ajax-csrf/

https://sota1235.hatenablog.com/entry/2015/10/11/213000

https://qiita.com/toontoon/items/7634f8a3905bad79b38d

要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】

【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！

https://qiita.co