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

JavaScriptでUUIDを生成する方法(ライブラリなし)

### JavascriptでランダムなIDを生成する方法
JavaScriptでUUIDをライブラリなしで作成する関数を下記に記載。

“`hoge.js
const uuid = () =>
([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
“`

結果
“` result.js
console.log(uuid())

// 396246c5-d076-4b39-a6d5-4dbc74996bdf
“`

[参照](https://tapajyoti-bose.medium.com/7-more-killer-one-liners-in-javascript-1cd180d82695)

【javascript,jquery】の配列操作 each文も！

# コード
“`javascript
let results = [
{‘name’ : ‘田中’, ‘japanese’ : 83, ‘math’ : 57, ‘science’ : 43, ‘social’ : 72, ‘english’ : 78},
{‘name’ : ‘渡部’, ‘japanese’ : 62, ‘math’ : 88, ‘science’ : 70, ‘social’ : 66, ‘english’ : 38},
{‘name’ : ‘品川’, ‘japanese’ : 23, ‘math’ : 33, ‘science’ : 53, ‘social’ : 17, ‘english’ : 07},
{‘name’ : ‘滝谷’, ‘japanese’ : 93, ‘math’ : 89, ‘science’ : 79, ‘social’ : 96, ‘english’ : 91},
{‘name’ : ‘川原田’,’japanese’ : 55, ‘math’ : 56, ‘science’ : 60

Progate:js　学習日記　3day　メモ

**関数定義**：const 定数名 = function(){

処理

};　→定数に関数を代入！

**関数の呼び出し**：定数名();

const greet = function() {
　　console.log(“こんにちは！”);
　　console.log(“関数を学習していきましょう！”);
};

// 関数を呼び出し
greet();

アロー：矢印のことだから「=>」

**アロー関数**：function()の部分を () = > にできる！

const 定数名 = () => {

処理

};　

**引数を受け取る関数の定義**：

consot 定数名 = (引数名) => {

　　処理

};

**引数を受け取る関数の呼び出し**：定数名(値);で値が引数に代入される！

↓

const greet = (name) => {
　　console.log(“こんにちは、” + name + “さん”);

};

greet(“ひつじ仙人”);

**複数の引数を受け取る関数**：

const 定数名 = (第1引数 , 第2引数 ,

JavaScript得意になるための道〜変数編〜

Udemyでやった内容を自分の理解に落とし込みます。ざっくり以下内容。

– **var, const, let**
– **falsyとtruthy**
– **AND条件とOR条件**
– **参照**

（Udemyの動画は[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)です、おすすめです)

# var, const, let
– **var**
◯再宣言、◯再代入
– **const**
×再宣言、×再代入
– **let**
×再宣言、◯再代入

`var`はなんでも有りなので非推奨。
変数は基本`const`で宣言して、値を書き換える必要がある(for文使ったループとか)場合は`let`で宣言するイメージです。

# falsyとtruthy

比較する際は`==`もしくは`===`を使うのですが、違いは**厳密に**比較するかしないかです。
（`==`が抽象的に、`===`が厳格に比較)
厳密に比較するかしないかでtrue,falseの結果が変わってくる

Javascript_関数を作る

# はじめに
このページは初学者のメモ書きです。
## 参考
Progate JavascriptⅢ
### 内容
“`javascript:関数を作る時の書き方①
const 定数名　= function(引数){
関数の中身を書く;
}
“`
“`javascript:関数を作る時の書き方②
const 定数名　= (引数)　=>{
関数の中身を書く;
}
“`
“`javascript:関数で処理した値を返す
const 定数名　= ()　=>{
return 値;
}
“`
“`javascript:戻り値をつかう例
const half = (number) => {
return number / 2;
};

const result = half(130);

console.log(`130の半分は${result}です`);
“`
`half`関数に入れた数字の半分を出力した。

引数は複数設定することもできる
“`javascript:引数複数
const half = (number1,number2) => {
retur

Symbol × SSS Extension で作る dApps 入門

# はじめに

GWいかがお過ごしでしょうか？[速習symbol](https://github.com/xembook/quick_learning_symbol)は読みましたか？

もう読み終わって暇？仕方ないね、GW後半戦のコンテンツの供給だ！！！

どうも、いなたつです。SSS Extension作ってる人です。Symbol Draw作ってる人です。

どうやら巷にHTML / JavaScriptだけでdAppsが作れるブロックチェーンがあるらしいですよ、Symbolって言うんですけど

はい、ってことで今回はSymbolブロックチェーンでdAppsを作ってSSS Extensionに接続しようってことでやっていきます。

本記事では簡単なウォレットを作っていきます。とはいっても ~~手抜き~~シンプルな見た目なのでかっこいいオリジナルウォレットを作ってくれたらなぁって思っています。

ウォレットとして最低限の機能しかないのでいろんなトランザクションを使えてかっちょいいブラウザウォレットを誰か作ってください(他力本願寺)

## 本記事の目標

– Symbol ブロックチェ

今週の学び　第4回

# 今週の学び

JavaScriptなど

– for文
– for文の中にfor文を入れると、中のfor文の処理が終わってから外のfor文が動作する
– for文の中には処理なら基本的に何でも入る
– switch文
– switch文はあまり使わないのでfor文で書いた方が良い
– アルゴリズム
– 処理を書く順番はとても重要
– else if
– 処理に分岐がある時とても便利
– Array オブジェクトの sort メソッド
– Array オブジェクトの sort メソッドを使うと、配列の要素を文字列の並び順または指定した並び順で並び替える
– スコープ
– 定数や変数の使用できる範囲のこと
– JavaScriptのクラス
– 「設計図」のことをJavaScriptでは「クラス」と呼ぶ
– filterメソッド
– 記述した条件に合う要素のみを取り出して新しい配列を作成するメソッド
– var、let、const
– constだけは再代入をしようとするとエラーになる
var、let

Lodashのおともにオススメなeslint-config-lodashの紹介

現代のJavaScriptにおいて、[Lodash](https://lodash.com/)が必要な場面はそう多くありません。

https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

https://qiita.com/mizchi/items/af17f45d5653b76f6751

それでもLodashを使いたいのであれば、[eslint-config-lodash](https://www.npmjs.com/package/eslint-config-lodash)を導入してみてはいかがでしょうか。

## コンセプト

– [eslint-plugin-lodash](https://www.npmjs.com/package/eslint-plugin-lodash)の推奨設定がベースになっている
– LodashよりもネイティブAPIの使用を優先

これらのコンセプトにもとづいた設定になっているため、Lodashの使用箇所を最小限に留めつつ、使う場合はベストプラクティスが適用されます。

#

40代おっさんJavaScriptのlet,const,varを学ぶ

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## let,const,varとは

変数を行うキーワード

let
・ES6から使用できるようになった

const
・ES6から使用できるようになった

var
・ES6以前に使用していた、今では非推奨

|タイプ|再宣言|再代入|スコープ|初期化|
|—–|——|——|——|——|
|let|×|〇|ブロック|×|
|const|×|×|ブロック|×|
|var|〇|〇|関数|undefined|

再宣言とは
一度宣言した変数をもう一度宣言が可能かどうか

再代入とは
一度宣言した値を変更可能かどうか

初期化とは
ホイスティング(Hoisting)のこと
コンテキスト内で宣言した変数や関数の定義をコード実行前にメモリに配置することです。 ホイスティングのことを「宣言の巻き上げ」といったりもします

＊varを使用すると再宣言

最近来ることがある「ココログのアドレスが入っている迷惑メール」を調べてみた

# 初めに

本記事は技術的な調査を行った結果を記載しています。
ココログ自体に脆弱性があるのではなく、ココログの機能を悪用しているものと認識しています。
なお、被害防止のため、一部URLには加工を入れています[^1]。

[^1]: `example.com`は、RFC2606で定められている例示用ドメインの1つです。

# 今回の調査対象メール

> From: vmhf7ip
> 件名: ★message★補佐担当様⇒VIPゲスト様へ新しいメッセージが届きました。
>
> 新着メールが届いております♪
> https://hogepiyo.cocolog-nifty.com/blog/?8u2qd9kit3go6l7za0ey+7uj5wgq+example+Xy%2Fhogehoge%2Fnp
>
>
> 配信停止ご希望はこちら
> https://hogepiyo.cocolog-nifty.com/blog/?hevc7r8ftnsa56b0klu+a0o5xof+example+dFI8iZMDZe%2Fjv4
>

[Qiita記事を量産している人必見！]自分の記事を検索する

自分用の覚書として記事を書いているのに、記事が増えすぎて記事を探すのが難しくなった・・・。そんなことはありませんか？

そんな時は[こちら](https://elix.jp/app/tools/qiita_index.html)で検索できます。
user_idに@で始まる自分のQiita IDを入れて見てください。

[https://elix.jp/app/tools/qiita_index.html?uuid=ELIXIR&tag=Unity](https://elix.jp/app/tools/qiita_index.html?uuid=ELIXIR&tag=Unity)
のようにユーザー名と検索タグを渡すことでダイレクトに調べることもできます。

Progate:js　学習日記　2day　メモ

# Progate:js 2day

**繰り返し処理**：while(条件式){

処理

} ⚠︎セミコロン不要！

let number = 1;

while(number <= 100){ console.log(number); number = number + 1; } for文：for(変数定義；条件式；変数更新){ 処理 } ⚠︎Sセミコロン不要！ 加算、減算の省略法  for(let number = 1; number <= 100; number ++){ console.log(number); } for文：for(変数定義；条件式；変数更新){ if(変数が3の倍数の時){ 　処理 } else {

gatsby-remark-componentで外部から値を注入する方法

# はじめに
こんにちは。最近は本業でRailsを触ってばかりの日々が続いております。

さて、今回はGatsbyでカスタムコンポーネントを使用しているのですが、コンポーネント外部から値を注入する方法について記載します。

参考になれば幸いです:pray:

（ぜひLGTMいただけましたら:smile:）

# Gatsbyでコンポーネントの作り方はこちら
https://qiita.com/akitkat/items/58332b972aac6145de80

# 結論

## コンテンツ
記事のマークダウン内に以下のようにコンポーネントを呼び出す場合。
“`markdown:post.md

“`

## コンポーネントの実態
“`js:src/components/CustomComponent.js
import React from ‘react’

const CustomComponent = props => (

{props.na

VSCodeでイマドキのJavaScriptの開発環境をサクッと作ろうぜ(VSCodeの設定～Linter編)

# はじめに
JavaScriptを昔からちょこちょこ触ってはいるものの、久しぶりにやってみると色々と様変わりしていて「なるほど分からん」となっている人向けの記事。

本記事では、Vue.jsの開発環境を
・VSCodeで良い感じにコードフォーマットをする
・Linterでコードチェックする
・自動テストする
・バンドル版をビルドする
のステップで行えるように紹介をしていく。
※長くなるので、何回かに分けて紹介する。

# なにはともあれ、まずはVSCodeの設定をしよう
まずは、拡張機能のインストールからだ。
ESLintの標準的な拡張機能が提供されているので、これをインストールしよう。
また、今回はVue.jsも扱うので、2022/5/1時点ではほぼデファクトスタンダードと言えるVeturをインストールしておこう。

 ![vetur.png

「プロを目指す人のためのTypeScript入門」読書感想文

# ある日の我が家にて
娘（**6歳**）「ねぇ、パパ？」

ワイ「なんや？娘ちゃん」

娘「この絵本の、表紙の文字が読めないの」

ワイ「おお、ほなワイが読んであげるで」
ワイ「どの絵本や？見せてみ」

娘「はい、これ」

ワイ「おお、この絵本か」
ワイ「**ファッ！？**」

ワイ「娘ちゃん、これ絵本とちゃうで」
ワイ「技術書やで」

娘「そうなんだ」
娘「それで、その英語の部分は何て読むの？」

ワイ「これはな、**タイプスクリプト**って読むんや」

娘「TypeScriptってなぁに？」

ワイ「TypeScriptはな、JavaScriptに**静的型システム**を加えたプログラミング言語や」

娘「へぇ〜、そうなんだ」
娘「でも、どうしてTypeScriptが必要なの？」
娘「J

CSSやJavaScriptの手動最小化方法

今や、minifyツールやpackerがありますが、
今は何かといってWebは肥大化の道を進んでしまっています。

それらのツールを使用したとしても、基本的な
手動圧縮方法を見直してみましょう。

1バイトでも圧縮するために

## CSS

### 数字を見直す

1000 または 100 を 使用するなら、999、99 を使用して、問題なければ使用する

0.9 (.9) を使用するなら 1を使用してみて、問題なければ使用する

:::note info
なお、辞書系の圧縮がかかる場合、逆に 999 等を使用せず、素直に 1000 を使用したほうが良い場合があります。
:::

### クラス名、ID名を短くする

今はわかりやすいように長い名前が使われることがありますが、クラス名やID名は短くしましょう

### HTML で指定された深い要素を使用しない

section.contents h3 .item

を

.item でよければ、これだけで済ましてみます。

### 可能な限り要素名で使用する

要素名は、例えば

– h3
– div
– h6

特に、h で始ま

3D描画ソフト自作 – シェーディング

# 概要
3Dゲームを作りたいので、3D描画ソフトから作っているのですが、
シェーディングがすごかったからその話

気が向いたら解説編も作るかもしれない

# 結論
1番に結論
「シェーディングすげぇ! 」

シェービングを付けてないとき
シェービングを付けているとき

# 動作環境
この写真は、firefoxを使って、javascriptのコードで描画しています
有名なブラウザならどれでも動くと思います

# 内容
シェーディングを付けてないときは、オブジェクトに設定した色がそのまま

カードをひっくり返しているように見せる！【css+jQuery】

初投稿です！！

初心者ですが一生懸命書いてゆきますので、間違っているところなどございましたらご指摘お願いいたします。

今回は、カードがひっくり返って見える実装をしました。

【HTML】

“`html

【React】 メニューとスクロール位置の連動を実装

### 動作

– メニューのクリックで特定の位置までスクロールする
– スクロール位置によってメニューの選択状態が追従する

### リポジトリ

https://github.com/Yoshifumi14/react-anchor-scroll

中身的にはこの記事とほぼ変わりません。コードさえ読めればこちらだけで十分かもしれません。

## `useAnchorScroll`

ロジックの本体です。使い回しが簡単になるようにカスタムフックとして切り出しています。

“`ts:AnchorScrollHook.ts
import React from “react”;

import { range } from “utils/ArrayUtils”;

/**
* @param elementsLengt

JSの基本的な文法

# JavaScriptとは
ブラウザを動かすためのプログラミング言語です。
将来性のある言語1,2位に入るほどです。

コードだけ出しておくのでJSを触ったことない人は色々動かしてみてください。

環境構築面倒な場合はこれを使ってください。

https://paiza.jp/

# JS入門
簡単な出力です。
“`js
pochi = ‘ポチ’;
console.log(pochi);
//ポチ
“`

# 変数　　
変数を定義するときは“`let“`を使います。
“`js
let pochi = ‘ポチ’; //letで定義
pochi = ‘ピーコ’; //ピーコに書き換える
console.log(pochi);
//ピーコ
“`

# 定数　
書き換えができないつまり文字列を書き換えない時に使う
“`js
const pon_ta = ‘ポン太’; //間の単語を大文字にしたり、_にしたりする。半角スペース入れると動かなくなる
pon_ta = ‘ポン子’; //定数
console.log(‘pon_ta’);
//Uncaught TypeError: