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

2022.03.18
OTHER

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

目次

1. JavaScriptのconstに関して
2. 警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害
3. TypeScriptのinterfaceとtypeの違いについて
4. JavaScript基礎概念勉強ノート2
5. [StripeUpdates] StripeのPaymentIntentで、カード情報の保存と保存できない決済情報の処理を同時に行う方法
6. Facebook のルーツとなった伝説的サイト Facemash を復刻してみたら、めっちゃいい感じのが出来た
7. 【３日目】電卓の見た目にこだわる
8. JavaScript きほんとか雑多なめも
9. face-api.jsで複数の顔を検出する
10. jQueryのコードをECMAScript/JavaScriptのコードに変換する
11. DenoのURL importは結局安全なのか？
12. Twitter Publishを使用せずTwitterの埋め込みを作る方法
13. [js] 非同期処理のdone, failを卒業する
14. ボリューコントロールをAgoraWebSDK in ReactJSAppで実現する方法
15. javaについて
16. Mermaid のフローチャートで同じ名前のオブジェクトを複数作成する方法
17. Jsでボタンを押して文字を入力する方法
18. [JavaScript] functionとアロー関数の違い
19. 【超基本】Dateオブジェクトについていろいろ確認してみた【JavaScript】
20. あの夏Qiitaユーザーは何の夢を見たか。APIでエンジニアの脳内をワードクラウド化してみた！

JavaScriptのconstに関して

## 初めに
現在、JavaScriptでvarを使用している箇所をconst、letに置き換えているが、具体的にどのような場面で使用できるかが気になった。

constに関して参考文献から拝借した内容。

> 定数は、let キーワードを使って定義する変数と同様にブロックスコープを持ちます。定数の値は、再代入による変更ができず、再宣言もできません。

再代入、再定義は不可能であることが分かるが、配列へのプッシュやブロックがある場合の挙動が知りたかったのでアウトプットのため投稿する。

## 実行環境
■ Node.js
v11.1.0

### 配列でconstを使用

新しい要素のプッシュは成功する。

“`js
const a = [];
a.push(“a”);
console.log(a);

// 出力結果
[ ‘a’ ]
“`

新しい配列を代入するとエラーになる。

“`js
const a = [];
a = [];
console.log(a);

// 出力結果
TypeError: Assignment to constant variable.
“`

元記事を表示

警告 (CVE-2022-23812): ウクライナ侵攻の抗議目的で peacenotwar モジュールが node-ipc パッケージを通じて npm 開発者を妨害

本記事は2022年3月16日に発表した弊社の英語ブログ[Alert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraine](https://snyk.io/blog/peacenotwar-malicious-npm-node-ipc-package-vulnerability/)を日本語化した内容です。

[![logo-solid-background.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2216557/8ed99ec3-bfb8-7326-4b81-7dd2758c4682.png)](https://snyk.io/jp)

2022年3月15日、人気の JavaScript フロントエンドフレームワーク Vue.js のユーザーは、npm のエコシステムに対するサプライチェーン攻撃に見舞われました。これは、パッケージ `node-i

元記事を表示

TypeScriptのinterfaceとtypeの違いについて

## はじめに
業務でTypeScriptを使用する機会がありますが、型定義をする際に前任者と同じようにinterfaceで型定義を行なっていました。typeとの違いを理解せずにinterfaceを使用していたため、今回違いを自分の中で明確にするために記事を書きます。

## interface
interfaceは、オブジェクト・クラスの構造を決めるためのものになり、型に名前をつけることができます。

“`typescript
interface Member {
name: string;
age: number;
}

const member: Member = {
name: “太郎”,
age: 30,
};

// string型のnameに数字を入れようとすると、エラー
member.name = 50; // Type ‘number’ is not assignable to type ‘string’.
“`

## type
typeはTypeScript独特の構文で型エイリアスと呼ばれ、同じくオブジェクトの型に名前をつけることができます。

元記事を表示

JavaScript基礎概念勉強ノート2

## 簡単なプログラムの仕組み（自分なりの解説）

**input → conditional(loop, if, function) → output**

## シチュエーション：レストランの注文システム

### 疑似コード(Pseudocode)

NotionのMermaidで書いてみました。
![menupseudocode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2477698/61f04ecf-4876-4e3f-2e26-cf4c74bd7bce.png)

### コード
“`
// step1 データ設置
const menus = [‘ビーフバーガー’, ‘ダブルビーフバーガー’, ‘ビーフサンドイッチ’]

function order(menu) {

// step2 もし引数のmenuが当てはまったら、その条件式の関数式を行う
if (menu === ‘ビーフバーガー’) {
makeBeefBurger();
} else if (me

元記事を表示

[StripeUpdates] StripeのPaymentIntentで、カード情報の保存と保存できない決済情報の処理を同時に行う方法

Stripeで支払いを処理する際に利用するPayment Intentでは、決済時に利用したカード情報を保存することができます。

これによって、ECサイトでの２回目以降の購入処理や、「手付金を請求し、後で残額を請求する」ビジネスモデルなどへの対応が可能になります。

支払い情報を保存するには、`setup_future_usage: ‘off_session’`を設定しましょう。

“`diff_javascript
const pi = await stripe.paymentIntents.create({
payment_method_types: [‘card’],
+ setup_future_usage: ‘off_session’,
amount: 120,
currency: ‘jpy’,
});
“`

## 「保存できない」支払い方法

Stripeがサポートしている決済方法の中には、支払い情報を保存して次回以降の決済に利用することができないものも存在します。

例えばコンビ

元記事を表示

Facebook のルーツとなった伝説的サイト Facemash を復刻してみたら、めっちゃいい感じのが出来た

注意：この記事及び紹介しているサービス自体は**全くもって公序良俗に反する内容はない**ものの、記事の一部にアダルトのコンテンツに関連する内容が含まれる（かもしれない）。

はじめに
======

**Facebook のルーツとなった伝説的な問題サイト Facemash** を **[現代日本バージョンの復刻版 Facemish](https://www.facemish.com/)** として再現してみたので、ぜひみんなに遊んでみて欲しい。
この記事では、作ったサイトの概要と技術的な側面を紹介したい。

伝説的サイト Facemash とは
================

Facemash は Facebook の CEO マーク・ザッカーバーグがハーバードの学生時代に作ったサイトだ。
ランダムな 2 人のハーバード女子学生が表示され、ユーザが好きな方を選んでいくというもの。
下図は、その開発の逸話が描かれた映画『ソーシャル・ネットワーク』での Facemash の画面だ[^hotter]。

![Screenshot from 2022-03-05 16-46-12.png

元記事を表示

【３日目】電卓の見た目にこだわる

# １．本日の課題
今日は前回までにできた電卓を普通の電卓のように近づけるためにHTMLとCSSを活用する。
レイアウトはCSSのFlexboxとgridをどちらとも調べて実装してみてという指定があった。

まずは前回のプログラムを修正し、Flexboxとgridを試してみる。

– HTML
“`html

電卓

JavaScript きほんとか雑多なめも
# 書く場所
大きくは 3パターンあるが処理が煩雑になるので “html に固めてかく” or “html の外にかく” が良いと思う
– html に直接かく(各タグ内)
– html に固めてかく(sriptタグは1個所のみ)
– html の外にかく（js ファイル）

###### html に直接かく
“`

・・

・・

・・

“`
###### html に固めてかく
“`

・・

・・

・・

・・<

元記事を表示

face-api.jsで複数の顔を検出する

# はじめに
先日face-api.jsを使ってみました。
前回の記事↓

https://qiita.com/s_u/items/a72c374e4d27f4b1a431

今回はface-api.jsについてもう少し調べてみたいと思います。

# face-api.jsとは？
繰り返しになりますが、face-api.jsはブラウザで顔検出（face detection：人の顔を自動的に見つける）と顔認識（face recognition：個人を識別する）ができるJavaScript APIです
機械学習用のライブラリTensorFlow.jsが利用されています
[face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html)

# face-api.jsを使う準備
前回参照。
まだNode.jsは勉強中なので
今回も自分のプロジェクトにスクリプトを含める方法です。

# 今回試すもの
「トラニナル」はとにかく動くものを短時間で作る。という
マッチョな目標があったので読み飛ばしましたが
[f

元記事を表示

jQueryのコードをECMAScript/JavaScriptのコードに変換する

# jQueryのコードをECMAScript/JavaScriptのコードに変換する

# はじめに
以前の10年ほど前までは、JavaScriptと言えば、jQuery一択であった。
しかしこの10年で、Node.jsの登場により、Angular/React/Vue等の様々なフレームワークが活用されるようになった。
またJavaScriptの規格の一つであるECMAScriptもバージョンアップを行い、様々な機能が追加されている。
昨今ではjQueryもレガシーコードの一つとなりつつある。
そこで今回は、jQueryとECMAScript/JavaScriptのコードを変換するためのスペニットを以下に記載する。

# コードスペニット
## セレクタ

“`
// jQuery
$(“#name”);
$(“.item”);

// ECMAScript/JavaScript
document.querySelector(“#name”);
document.getElementById(“name”);
document.querySelectorAll(“.item”);
d

元記事を表示

DenoのURL importは結局安全なのか？

DenoにはURLを使用して直接外部ライブラリを取り込める機能が備わっています。

“`ts
import { DB } from “https://deno.land/x/sqlite/mod.ts”;
“`

確かにこのコードだけを見ると、

– URLが変わったら使えなくなりそう
– 悪意のあるコードが紛れ込みそう
– Go言語の悪しき文化を引き継いでしまった
– 書きづらそう

という意見が出てきそうです（Twitterで見た）。

しかし、https://github.com/denoland/deno/blob/main/SECURITY.md で解説されている「Denoのセキュリティモデル」を読むと、どうやらそうでもないようです。

## 結局、ネットワークからコードをダウンロードして実行するのは他と変わらない

上で紹介したコードを見て、「ネットワークからダウンロードしたコードをそのまま実行するなんて危険だ」と思った方もいらっしゃるかもしれません。

しかし考えてみると、npmだろうが、他の言語のパッケージマネージャだろうが、**ネットワークからダウンロードしたコー

元記事を表示

Twitter Publishを使用せずTwitterの埋め込みを作る方法

# はじめに
この記事は自分のメモ的な感じで残しておきます。内容は余裕で既出だと思われます。
ユーザーにツイッターのリンクを入力してもらって、それを埋め込みにして使う方法を考えていた時のこと・・・

# 埋め込みの作り方
Twitterの埋め込みを作るときTwitter Publishというサイトを利用されると思います。
こちらの投稿を埋め込みするとき以下のようになります。

“`html

京都の春はこれで迎える！お外で食べる変わった「超ウマ行楽弁当」4選 https://t.co/K8v3VuyzI6
[js] 非同期処理のdone, failを卒業する
非同期処理を普段どう書いていますか？
僕はdone-failを用いて書いています。実はこの書き方保守性の面であまり良くない。
*jqueryを使用

“`js
$.ajax({
　 url: ‘https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060’
　})
　.done(function(res) {
console.log(res);
　})
　.fail(function(res){
console.log(res);
　});
// =>
// {
// ‘message’: null,
// ‘results’: [{ … }],
// ‘status’: 200
// }
“`

*以下ajaxの中は簡略化します。

# 問題1. errorキャッチができない
doneの中でエラーが出たときにfailがキャッチしそうですが実はキャッチできません。

もしdoneの中でエラーハンドリングを行いたい場合はtry-catchを毎回書く必要があります。
さらにtry-catchでネスト

JavaScript

jQuery

元記事を表示

ボリューコントロールをAgoraWebSDK in ReactJSAppで実現する方法

## はじめに
Agora SDKは映像音声の送受信においてクライアントサイドのSDKとインフラを提供するPaaSです。

この記事はAgora社公式の[ブログ](https://www.agora.io/en/blog/volume-controls-using-agora-rtc-in-a-react-js-app/)の内容を翻訳したものです。

ビデオ通話アプリケーションに、任意の人の音量を操作したり、ユーザーがマイクをミュートしているのに話そうとしているときにプロンプトを表示したり、その他のオーディオ効果などの音量機能を組み込むのは、非常に面倒で時間がかかる場合があります。このブログでは、これらの機能をすべて紹介します。

## 前提条件

– Agora開発者アカウント
– Reactの基本
– Agora SDK

## サンプルの構成

アプリケーションには、以下のような様々なコンポーネントが含まれています。

– グローバルコンテナ：以下のすべてのコンポーネントが含まれます
– メインビデオコンポーネント：各ユーザーのビデオフィードを保持します
– ビデオ

元記事を表示

javaについて

jsファイルを変更後、IEに反映されるまですごく時間かかる
「Ctrl ＋ F5」で強制的に最新の CSS と Javascript を読み込んでくれます。

https://kinacoro.com/super-reload/

元記事を表示

Mermaid のフローチャートで同じ名前のオブジェクトを複数作成する方法

この記事では [Mermaid](https://mermaid-js.github.io/mermaid/#/) を使用しています。Mermaid の図が正しく表示されない場合は [Zenn の記事](https://zenn.dev/noraworld/articles/mermaid-duplicate-objects) でご覧ください。

# やりたいこと
[Mermaid](https://mermaid-js.github.io/mermaid/#/) で以下のようなフローチャートを作りたいとする。

“`
C — D
/ \
A — B E — F
\ /
C — D
“`

そして、以下のような Mermaid のフローチャートを書いたとする。

“`
flowchart LR
A — B — C — D — E — F
B — C
D — E
“`

しかし、これだと以下のように出力されてしまう

元記事を表示

Jsでボタンを押して文字を入力する方法

# はじめに
こんにちは！web系エンジニアを目指いしているLionです。
最近Laravelを使ってwebアプリを作っているのですが、ユーザーに文字を打ち込んでもらうのは面倒だし検索にも引っ掛かりにくい感じたのでボタンを押して入力できるものを作成いたしました。

# insertAdjacentHTMlを使った方法
JsのinsertAdjacentHTMl(“位置”, ‘入れたい文字’);
を使うと文字を入力することができいます。

たとえば・・・
“`html
//テキストエリアを作りidを設定！
//今回はinputタグを使ってボタンを作成
“`

“`Javascript
function OnButtonClick() {
target = document.getE

元記事を表示

[JavaScript] functionとアロー関数の違い

# function
“`javascript
function showNameFunction() {
this.name = ‘wadayamada’;
console.log(this);
}

showNameFunction();
“`
### Output
“`javascript
Object [global] {
global: [Circular *1],
clearInterval: [Function: clearInterval],
clearTimeout: [Function: clearTimeout],
setInterval: [Function: setInterval],
setTimeout: [Function: setTimeout] {
[Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
},
queueMicrotask: [Function: queueMicrotask],
clearIm

元記事を表示

【超基本】Dateオブジェクトについていろいろ確認してみた【JavaScript】

# 【超基本】Dateオブジェクトについていろいろ確認【JavaScript】

JavaScriptを基礎の基礎からやり直し
今回は`Dateオブジェクト`について仕様を確認しながらまとめてみました

参考ページ : [mdn web docs – Date](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)

## そもそもDateとは

`Date` は、世界時間(UTC)の 1970/01/01 からの経過ミリ秒数を表す`Number`の値を含んだ`オブジェクト`

## 確認用コード

`create-react-app –template typescript`で作成したTypeScript上に作る
Calendarというコンポーネントを作成して、index.tsxで読み込ませる

ボタンを押したらコンソールにいろいろ出す感じのオーソドックスな確認方法です

typescriptでは型を理解することが大事だと思うので、
確認したい変数や関数と同時に`ty

元記事を表示

あの夏Qiitaユーザーは何の夢を見たか。APIでエンジニアの脳内をワードクラウド化してみた！

# 人生初のAPIチャレンジ！

### 企画意図　「エンジニアがどんなことを考えている人たちなのか知りたい」

さて、私はプログラミングのプの字も知らないおじさんですが、プロトタイピングを学ぶことにしました。そして、はじめはAPIなるものに向き合うことにしたのですが、いろいろな疑問が湧いてきました。

「そもそも、QiitaAPIで何ができるの？」「エンジニアは、主に何を考えて生きているの？」と素朴な疑問が次々と。

そこで、まずは、投稿記事のタイトルをAPIで引っ張ってきて、ワードクラウドか何かに放り込んで、エンジニアの脳内を覗き込んでみることにしました。

ただ、あまりAPIでデータを引っ張ってくると、Qiitaに怒られるということなので、毎年のあの夏（8月）に投稿された記事タイトルを引っぱり分析することにしました。

そして、あの夏のワードクラウドを並べて、その時期にエンジニアを夢中にしていた事象を浮き彫りにできたらと考えています。いわばQiitaユーザの勝手流行語大賞（夏）を作るイメージです。

夏だから、きっと「サーフィン」とか「ナンパ」とか「花火」とか、そんなワードが上位

元記事を表示

関連する記事

Android関連のことを調べてみた2019年11月09日 2019.11.09

目次 1. dexファイルってなんだっけ2. ChromebookのAndroidアプリでエンターキーで改行できない件の対策3. API23未満でTe[…]
AWS関連のことを調べてみた 2024.09.18

目次 0.0.1. AWS Toolkit for VScodeからAWSにアクセスしようとすると、「The security token inclu[…]
Lambda関連のことを調べてみた2022年04月20日 2022.04.20

目次 1. NATインスタンス起動・停止のSlackスラッシュコマンドを作る2. アプリ用EC2周りの構築でやったこと（２）　AutoScalingG[…]

OTHERカテゴリの最新記事