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

2022.02.07
OTHER

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

目次

- 0.1. 脆弱性
1. 入力画面

javascriptではなぜ変数宣言が行われるのか

# 変数がなぜ使用されるのか
そもそも変数とは一言で言うと処理途中のデータを一時的に保存するための入れ物。
プログラミング言語には、文字列や数値などのデータに名前をつけることで、繰り返し利用できるようにする機能のことを変数という。

# JavaScriptの変数
javaScriptの変数宣言キーワードとして、const、let、varがあります。

# 変数の違いについて
#### constの特徴
再代入/再宣言が不可。

“`sample.js
const food = ‘初期値’;
variable = ‘再代入NG’;
const food = ‘再宣言NG’;
“`

#### letの特徴
再代入は可能だが、再宣言は不可能。

“`sample.js
let food = ‘初期値’;
food = ‘再代入OK’;
let food = ‘再宣言NG’;
“`

#### varの特徴
再宣言、再代入が可能。

“`sample.js
var food = ‘初期値’;
var food = ‘再代入OK’;
var food = ‘再宣言OK’

元記事を表示

【JavaScript】JavaScript基礎まとめ3

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

##JavaScript基礎まとめ3

###三項演算子

“`.js:三項演算子
// 三項演算子
// 条件 ? trueの時の処理 : falseの時の処理
const val6 = 1 > 0 ? ‘trueです’ : ‘falseです’;
console.log(val6);
// trueです

const num3 = “1300”;
console.log(num3.toLocaleString());
// 1,300
// toLocaleStringはJavaScript標準の関数で3桁カンマ表記に変換してくれる

const formattedNum = typeof num3 === ‘number’ ? num3.toLocaleString() : ‘数値を入力してください

元記事を表示

簡単な HTMLParser のソースコードを読んでみる [Javascript]

HTML を極めるって、どういうことなんですかね？
勉強で、簡単な HTML Parser を読んでみていたので、そのメモ。
間違いなどありましたら、ご指摘お願いします。

## HTML パーサーとは？
HTML ドキュメントは、そのままの形式では描画されません。描画されるには、一度 HTML ドキュメントを機械が読み込める形式に変えてから、それをレンダリングエンジンというプログラムに通すことで、描画が行われます。
ここでは、「HTML ドキュメントを機械が読み込める形式に変える」部分を[簡単なコードに落とした例](https://github.com/developit/htmlParser/blob/master/src/htmlParser.js)があったので、そのソースコードを読んでみます (ファイルはこの1ファイルだけです)。また、このコードを書いた Googler は preact という軽量版の react を書いた人でもあります。

## ソースコード
では、早速読んでみましょう。
このコードでは継承などが多いので、まずは、そのデータ型の整理からしてみましょう。

元記事を表示

リーダブルコードのまとめ。　2/2

前回のリーダブルコードまとめの続きです。

### 8章巨大な式を分割する
– 式を保持する変数(説明変数)を使う
– ド・モルガンの法則を使う。複雑な論理条件はif(a

元記事を表示

[JS]サーバーサイドにリクエストを送る

学習したことのアウトプットとして

ブラウザでイベント発火
↓
JavaScript
↓リクエスト
ルーティング

上記の`リクエスト`の部分の学習をしていて、処理をするための記述が自分の中でごちゃごちゃ混乱しているので、少しでも整理できればいいなと思い、記事にしてみる。

#XMLHttpRequestオブジェクト
JavaScriptを用いてサーバーとHTTP通信を行うときに利用するオブジェクト。
XMLHttpRequestのメソッドやプロパティを利用してAjaxの実装を進めます。

“`javascript:記述例
const XHR = new XMLHttpRequest();
“`
`new XMLHttpRequest`と記述することで、新しくオブジェクトを生成できます。
そして、新たに生成したXMLHttpRequestオブジェクトを`変数XHR`に格納しています。

変数名のXHRはXMLHttpRequestの略です。

##openメソッド
リクエストを初期化するメソッドです。リクエストの内容を指定するメソッ

元記事を表示

【jQuery】今いるディレクトリに該当するナビゲーションだけスタイルを変えたい

#背景
前回、一部ディレクトリだけWordPressでできてるサイトでヘッダーフッターを一括管理する方法を書きました。

https://qiita.com/kg_nuts_kg/items/9bbbf8270c4206031932

これってヘッダーはどのページからも同じものを呼び出します。
で、こういうデザインのヘッダーメニューってよくあると思うんです。
![スクリーンショット 2022-02-05 17.38.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2522080/3806cb8c-7260-e2bd-f07c-ef12faa54ef8.png)

「会社紹介」のページにいるときは、メニューの「会社紹介」のところだけスタイルを変えたい！！！
どうする？ページごとに違うマークアップのメニューを呼び出す？しんどいですよね。
じゃあヘッダーのマークアップはそのままで、jQueryの力を借りて勝手にスタイル変えてもらいましょう！！！

#HTMLのメニュー部分のマークアップ
ヘッダーメニュー部

元記事を表示

個人的に最高だった解説ページ集【JavaScript編】

数多くある解説記事の中で、個人的にすごくわかりやすかったものを一覧にしてみました。
執筆者の皆様には感謝と尊敬の気持ちでいっぱいです。。

##コールバック関数

https://sbfl.net/blog/2019/02/08/javascript-callback-func/

簡単なコードの例から順を追って、かみ砕いて解説してださってます。
　

##Promise

https://qiita.com/cheez921/items/41b744e4e002b966391a

数多くあるPromise解説記事の中でも、説明が具体的で自分には一番しっくりきました。
　

##async/await

https://qiita.com/soarflat/items/1a9613e023200bbebcb3

LGTM数3000超え（2022年2月時点）の大人気記事です。
aysncを単体で使った場合の例なども使用し順を追って解説してくださってます。
　

##イベントループ・コールスタック・タスクキュー

https://qiita.com/UTDoi/items/d49ea

元記事を表示

ANT+対応のスマートウォッチから心拍数を取得してOBSに表示させる(GitHubにソースあり)

# 経緯
最近、GarminのFenix7Sを購入してテンション爆上がりしたんですが、当然こんな機能モリモリの端末を手に入れたら色々遊んでみたくなりますよね。
なんと、この端末はANT+で心拍数を送信できるようなので「なんかよくYoutuberがやっているような、ゲーム画面の右上あたりの心拍数表示が実装できるんじゃね！？」という感じがしたので、なんか作ってみました。

# アプリについて
ひとまず、アプリの使い方とかだけを知りたい人も居るかも知れないので、技術云々は一旦おいておいて説明します。
機能は主に「ANT+で送信された心拍数情報をブラウザに表示するアプリ」です。
また、表示するレイアウトはユーザーが自由にカスタムできるようにしています。（レイアウトのファイルはejsになっているため、基本的なHTMLが書けるのであれば割とどんなレイアウトでも作れるはず）

※ちなみになぜブラウザに表示なのかといいますと、単純にOBS[^1]でブラウザをソースとして選択できることと、心拍数を取得するライブラリがNode.jsで準備されていたため、作りやすかったからという理由です。
![heartb

元記事を表示

[JS]フォームに入力した値を取得する

学習したことのアウトプットとして

#フォームに入力した値をJavaScriptで取得する
###FormDataオブジェクト
FormDataとは、フォームに入力された値を取得できるオブジェクトのことです。
`new FormData(フォームの要素);`のように記述することでオブジェクトを生成し、引数にフォームの要素を渡すことで、そのフォームに入力された値を取得できます。

“`javascript:例
function post (){
const submit = document.getElementById(“submit”);
submit.addEventListener(“click”, () => {
const form = document.getElementById(“form”);//フォームの要素を取得
const formData = new FormData(form);//新たに生成したFormDataオブジェクトを変数formDataに格納している
});
};

window.addEventListener(‘l

元記事を表示

UnityをWebGLビルド・Reactと連携してWebアプリを構築してみるその２

前回に引き続きでUnityのWebGLビルド・Reactと連携を進めます。今回はUnityからReactをコールする部分について処理を構築します。

https://qiita.com/GIZAGIZAHEART/items/c3b6f6035933e0d760b6

## 環境・バージョン

・開発PC: MacOS Catalina 10.15.7
・Unity: 2020.3.25f1
・React: 17.0.2
・react-unity-webgl:8.7.4

このプロジェクトではReactとUnityを連携するため、React用プロジェクトフォルダとUnity用プロジェクトフォルダを利用します。詳しくはGitHub リポジトリをご確認ください。

– [Reactプロジェクトのソースコード(github)](https://github.com/kchan0514/react-unity-bridge-example)
– [Unityプロジェクトのソースコード(github)](https://github.com/kchan0514/react-unity-bri

元記事を表示

NextAuthを完全に理解する #3

# はじめに

最近，Next.jsを使ったwebアプリケーションを作り始めました．この中でログイン機能を付けたくてNextAuth.jsの導入をしたのですが，無知すぎて何をしているのかわかりませんでした．そこで，勉強を兼ねてここにドキュメントの内容を日本語訳して記しておきます．

# この記事の内容

この記事はNextAuthのドキュメントを私なりに解釈して書き留めたものです．いくつか誤りがあると思いますのでコメント等で指摘していただくと幸いです．
ドキュメントを読みたい方は以下からどうぞ．

https://next-auth.js.org

前回の記事は以下からどうぞ．

https://qiita.com/kage1020/items/e5b0053d7046a9b1f628

今回は`[…nextauth].js`についてです．

# 初期化

`[…nextauth].js`ファイルでは，`/api/auth/*`で始まるすべてのAPIリクエストを処理します．いわゆるダイナミックルーティングです．
ほとんどの場合以下のような初期化で済みます．

“`javasc

元記事を表示

NextAuthを完全に理解する #2

# はじめに

最近，Next.jsを使ったwebアプリケーションを作り始めました．この中でログイン機能を付けたくてNextAuth.jsの導入をしたのですが，無知すぎて何をしているのかわかりませんでした．そこで，勉強を兼ねてここにドキュメントの内容を日本語訳して記しておきます．

# この記事の内容

この記事はNextAuthのドキュメントを私なりに解釈して書き留めたものです．いくつか誤りがあると思いますのでコメント等で指摘していただくと幸いです．
ドキュメントを読みたい方は以下からどうぞ．

https://next-auth.js.org

前回の記事は以下からどうぞ．

https://qiita.com/kage1020/items/bdefabcd09d86e78d474

今回はclient sideについてです．

# Sessionの取得

ページやコンポーネント内でセッションを取得するには`useSession`React Hookを使います．

“`javascript:example
import { useSession } from “next-auth

元記事を表示

Webの勉強はじめてみたその28 〜脆弱性の対策〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第3章27〜34節です。

脆弱性

OS コマンド・インジェクション
– 任意の OS のコマンドを実行できてしまう
SQL インジェクション
– 任意の SQL というデータベースを操作するコマンドを実行できてしまう
ディレクトリ・トラバーサル
– 任意のファイルを閲覧、操作できてしまう
セッションハイジャック
– 利用者のセッションが乗っ取られてしまう
クロスサイト・スクリプティング (XSS)
– スクリプトにより Web サイトの改ざんができてしまう
クロスサイト・リクエストフォージェリ (CSRF)
– 利用者の意図しない操作がされてしまう
HTTP ヘッダインジェクション
– 偽ページの表示などができてしまう
クリックジャッキング
– 利用者の意図しないクリックをしてしまう

これを見ただけでもフレームワークの必要性がわかる。

OSコマンドインジェクション

:::note warn
当人ではなく、Webサービスが実行者になってしまう。
ク

元記事を表示

React Hooks の依存リストのオブジェクトの比較について

# はじめに

React Hooks において、useMemo や useEffect などの第二引数の依存リストに、オブジェクトを指定した場合の動作について、混乱を招くことが多くあったので、まとめてみました。

サンプルプログラムは、以下で実行可能です。

# どういう場合？

以下のプログラムでは、`初期表示時と counter1 ボタンがクリックされた場合のみ、メッセージを更新する` という仕様なのですが、実際には仕様通りには動きません。

“`JavaScript
import { useState, useCallback, useEffect } from “react”;

const useCounter = () => {
const [count, setCount] = useState(0);
const countUp = useCallback(() => setCount(count + 1), [count]);
return {

元記事を表示

XXS攻撃対策についてNode.js Expressでアプリを構築して実例で理解する

## はじめに
Node.jsのExpressでテンプレートエンジンejsを使って実装するWebアプリを実例に、XXS攻撃を受ける脆弱性がある状態と対策を講じた場合の実装を見ていく事で、XXS攻撃について理解を深めてみようと思う。

## XXS（クロスサイト・スクリプティング）攻撃とは？
Webアプリケーションにスクリプト等を埋め込むことが可能な状態になっている＝脆弱性がある時に、これを利用されて利用者のブラウザ上で不正なスクリプトが実行されてしまう可能性がある。
そのスクリプト等を埋め込むような攻撃をXXS（クロスサイト・スクリプティング）攻撃という。

詳細は以下のサイトを参照。

https://www.ipa.go.jp/security/vuln/websecurity-HTML-1_5.html

以下ではNode.jsのExpressでテンプレートエンジンejsを使った実装を例に、実際に脆弱性がある実装をやってみて、脆弱性がある時どのような事が起きるのか？またそれを防ぐためにどうするのか？をみていく。

見ていく内容としては、IPAのサイトに書かれている対策の一覧に書か

元記事を表示

【LeetCode】#80 Remove Duplicates from Sorted Array II

##LeetCode #80 ソートされた配列の重複要素を削除

###問題文

昇順の整数配列が与えられ、
配列の中に、同じ要素が2回以上表示されたら、その残りの要素を削除します。
要素の相対的な順序を保つ必要があります。
最後に、重複要素を削除した配列の長さを返します。

###DoublePointerで解く
まず、チェック用のファストポインタと止め用のスローポインタを用意します。
この問題では、要素が2回以上表示されたらアウトのため、ファストポインタとスローポインタはインデックス2の所に初期化して、そこから、どんどん比べていきます。

ファストポインタの数字と、スローポインタより二つ前と一つ前の数字を比べて、
2回以上表示されていないなら、ファストポインタの数字はこの配列の中に2回以上重複していないと証明できます。
逆に言うと、スローポインタより二つ前と一つ前の数字と比べて、何れも同じなら、ファストポインタの数字は3回以上表した数字なので、重複していない数字が表すまでに、止め用のスローポインタはそのまま移動させません。

ファストポインタが配列の最後まで移動したら、配列を既に

元記事を表示

PHPでお問い合わせフォームを作成する①

PHPを使用してお問い合わせフォームを作成する方法を解説します。バリデーションなどの一部機能はJavaScriptで実装します。
本稿は2部構成となっております。第一部ではとりあえずバリデーションは無視して、実際にフォームに入力した内容をメール送信できるところまで進めます。

# 完成イメージ図

![お問い合わせフォーム　イメージ図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485055/281729cc-681f-164a-8a19-b9e05b232434.jpeg)

# 入力画面

“`html:index.php

入力画面

メッセージにつきましては、下記のフォームよりご入力お願いいたします。

元記事を表示

UnityをWebGLビルド・Reactと連携してWebアプリを構築してみるその１

## 目的

自分の狙ったサービスを開発する上で、どうしてもReactとUnityを連携して作りたいと考え、ReactとUnityの連携部分を調査し実装しました。UnityをWebGLでビルドし、ReactからUnityの操作をできるようにすることを目的としています。

## 環境・バージョン

・開発PC: MacOS Catalina 10.15.7
・Unity: 2020.3.25f1
・React: 17.0.2
・react-unity-webgl:8.7.4

このプロジェクトではReactとUnityを連携するため、React用プロジェクトフォルダとUnity用プロジェクトフォルダを利用します。詳しくはGitHub リポジトリをご確認ください。

– [Reactプロジェクトのソースコード(github)](https://github.com/kchan0514/react-unity-bridge-example)
– [Unityプロジェクトのソースコード(github)](https://github.com/kchan0514/react-unity-b

元記事を表示

JavaScript 関数戻り値

_コード１_

“`
const add=(a,b)=>{
console.log(a+b);
};
add(3,7);
“`
_出力_

“`
10
“`
コード１は、
受け取る引数をaとbとして、
関数の処理部分を「a+b」の値を出力するようにし、
引数に「3」と「7」を渡して関数を呼び出しています。

PC君がこのコードを処理していく流れ？的なものを私の勝手なイメージで想像すると

・『引数「a」「b」、処理「a+bを出力」』の関数を発見！
↓
・発見した関数の引数に「3」と「7」を渡してコンソールに呼び出してやろう！
↓
（コンソール側）
・関数が送られてきたな！
「a」が「3」で「b」が「7」を受け取っていて、
それを足せばいいから出力は「10」だな！

という感じで「10」が出力されているというイメージですかね？

_コード１−２_

“`
const add=(a,b)=>{
console.log(a+b);
};
const sum=add(3,7);
consol.log(sum);
“`
_出力_

“`
undefined
“`
しかしコ

元記事を表示

Bookmarklet / Javascript / Kotlin-js

将来の自分に向けてメモ

#環境
OS: Windows
Browser: Chrome 97

#基礎
Webブラウザのブックマークのリンクに`javascript:`に続けてjavascriptの実行コードを記載。

“`javascript
javascript:alert(“Hello”);
“`

#コード長の制限
alert(“12345678901234…長い文字列…”)で試行。10000文字までは問題なし。

Bookmarklet特有の話題は以上。

#文法チェックと圧縮 – [Google Closer Compiler](https://closure-compiler.appspot.com/home)
以下、サンプルコードはこれを使ってコンパイルしてます。

#遅延実行 [window.Function()を使えとのこと](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval#eval_%E3%82%92%E4%BD%BF%E3%82%8

元記事を表示

関連する記事

AWS関連のことを調べてみた2023年02月12日 2023.02.12

目次 1. オンプレでやってきた設計の考え方はAWSでも活かせる2. 【AWS】AWSome Day Online Conference2022110[…]
iOS関連のことを調べてみた2022年02月18日 2022.02.18

目次 1. 【iOS】制約ベースのアニメーションで簡単にアニメーション実装2. 共通パーツはどのように共通化すべきなのか？（UIView）3. iOS[…]
Lambda関連のことを調べてみた2021年10月26日 2021.10.26

目次 1. CloudWatchのアラートをSNS経由でLambdaを実行し、Slack通知2. 【AWS】ElasticTranscoderで動画変[…]

OTHERカテゴリの最新記事