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

全角空白などをVSCODEで検出する

## jQueryでidを取得する方法

jQueryでHTMLタグ内のid属性(属性は英語でattribute)を取得するには、

“`javascript
attr(‘id’);
“`
をつけてあげます。
おそらく、**attr**が**attribute**のことかな。

なので「WEB画面でクリックしたもののidを取得したい」という時は、

“`javascript
$(‘div’).click(function() {

let getId = $(this).attr(‘id’);

console.log(getId);//id1

});
“`

#### 参考サイト

https://1-notes.com/get-id-and-class-name/

で、今回は、

“`javascript
$(‘#taglist’).find(‘.btn’).click(function() {

//クリックしたボタンのid取得
var thisid = $(this).attr(‘id’);
console.log(thisid);
“`

【React】親子コンポーネント設計 基本のキ

Reactを学習していて親子関係を持つコンポーネントが分からなかったので整理します。

## なぜコンポーネントを親-子に分割するのか

– コンポーネントの肥大化を避ける
– データ(stateやprops)のスコープを制限するため

コンポーネントが肥大化すると可読性が下がります。また、複数のデータを1つのコンポーネントで管理すると保守性が低下します。

このような弊害を回避するためにコンポーネントを分割するものと思われます。

## 親子コンポーネントの基本的な実装方針

1. アイテム一覧やアイテム一覧の更新処理は親コンポーネントで管理する
1. 子コンポーネントは不要な情報を持たない
1. データの表示のみを責務とする子コンポーネントは状態を持たない

以下のサンプルコードを例にして順番に見ていきましょう。
(フォームに文字列を入力して投稿ボタンを押すと投稿一覧が画面に表示される簡単なアプリケーションです。)

“`javascript:App.js
import { useState } from ‘react’;

// 親コンポーネント
function App()

TypeScript、 JavaScript、SQLが勉強できるサイト「Execute Program」を紹介する

# Execute Programとは
https://www.executeprogram.com/

Gary Bernhardt氏が作ったプログラミング学習サービス。
彼は「[Destroy All Software](https://www.destroyallsoftware.com/screencasts)」を運営しており、以下の登壇でのトークが有名みたい。
https://www.destroyallsoftware.com/talks/boundaries

SQL、JavaScript、TypeScriptが基礎から応用まで学べる。

[Progate](https://prog-8.com/)みたいに、解説を読む→コードを書くという流れで学習が進む。

[Susutainable Web Development With Ruby on Rails](https://www.amazon.co.jp/Sustainable-Web-Development-Ruby-Rails/dp/0990702847)内でSQLが学べるサイトとして紹介されていた。

金額は**月

署名付きURLを使ってファイルダウンロードする

# なんの記事？
署名付きURLを使ってフロントエンドアプリ(React)のファイルをダウンロードする機能を作ったら署名の有効期限で色々困ったことがあったので困ったこととその解決方法についてメモ。
この記事では署名付きURLの発行の話は書かない。発行された署名付きURLを使う側について書く。

後半部分に書いたが[こちら](#ダウンローのタイミングで署名付きurlを取得する方式)の方式のほうがスマートだと思う。この記事ではベストではないが制約があるなかで選択した別方式について書く。
モチベーションとか問題解決の経緯をスキップしてダウンロードの実装方法を見たい場合は[サンプルコード](#サンプルコード)へ。

# 署名付きURLを使うモチベーション
* ファイルアップロードにかかる時間を減らしたい
* バックエンドアプリによってファイルのGET/PUTの認可制御を行いたい(ストレージサービスのみで実現可能な認可制御より複雑な条件による制御をおこないたい)

# 発生した問題

### ダウンロードのアクションまでに署名の有効期限が切れる

認可制御のためダウンロードに署名付きURLを利用

これからエンジニアを目指す人に読んでほしいWeb開発まとめ

# はじめに
この記事は，以下に当てはまる方が読むことを想定しています．
– エンジニアとして働いたことがない方
– IT企業に就職を考えている方
– Web開発の流れを理解したい方
– HTMLやCSS以外のことを知りたい駆け出しエンジニアの方

# 全体の流れ
どの企業もそうだと思いますが，いきなり開発から始まることはめったにありません．
基本的には，以下のような流れでシステム開発が進んでいきます．知らない単語が出てくると思いますが，後で詳しく説明するので，気にせず読み進めて大丈夫です．

1. チケットが切られる
1. MTGに参加する
1. スケジュールを立てる
1. 調査を行う
1. 設計をする
1. 設計書をもとにDEV環境で開発を行う
1. ユニットテストを行う
1. ソースコードをGitHubに上げて，チームの人にレビューしてもらう
1. STG環境にデプロイする
1. テストケースを作成する
1. ブラウザテストを行う
1. リリースに向けたドキュメントを作

ToDoアプリがいろいろありすぎるので、LINEにToDo機能を追加してみた。

## ToDoアプリは多すぎるし、スマホのアプリを増やしたくない
私はToDo系のアプリを使用していないのですが、使用していない理由としては以下が挙げられます。
1. **ToDoアプリが多すぎるのでどれを使えば良いかわからない**
1. **いちいちToDoアプリを開くのが面倒**
1. **使いなれるまでに時間が掛かる**

面倒臭がり屋の私でも、いろいろと試してみたときはありました。
だけど、どれもすぐにそのアプリの存在を忘れてしまったり、使い勝手が面倒で諦めてしまいました:dizzy_face:

でもそんな私も毎日のように使用しているアプリがあります。

そう、それはLINE!!

今まではこのLINEにToDo機能があればなー、って思っていたわけですが、あるじゃないですか！LINE Botなんて便利機能が！
LINE Botならプッシュ通知も可能なので、ToDoを知らせてくれるにはもってこいやないか:thumbsup:

ということで、LINE Botを用いて、ToDo機能をLINEに実装してみました！

## 最低

Reactを触ってみたら…こんなの初心者に勧めるなと思った件（React歴1日）

## 0.触ろうと思ったキッカケ
ササっと説明すると…
>同期「React触ってんだよね」
→Vue.jsかReactが結構、話題に上がるよな
→なんか理解できた方が可能性、広がりそう（フレームワーク未経験）
→環境どうすっかな
→CodePenで書けるやんけ！勉強しよ！

この時は、まだ知らなかったんです。
「初心者にReact進める人はドS」ってことに…

## 1.序盤は、まぁ…普通かな？
早速、Hellow Worldで入学式を開いてみました。
まぁ…こんな感じかっといった雰囲気でした。
表示までなら、そこまで複雑じゃなかったからね（フラグ）

次に何やろか考えた時に
「昔つくったサンプル、これReactで書いたらどうなるんだ？」
そう思って色々いじることにしました。

（ここから初心者殺しだと理解し始める）

**昔、DOM操作の例で作ったサンプル**
**チェックボックスの状態でテキストの色が切り替わる**

何も触れずにお弁当を頼むアプリを作った

こんなものを作りました。
カメラに映した手で、画面上のものをツマむことができます。
KTCFを使うと簡単にできました。

## KTCFとは

deepinsightという会社が提供している、非接触GUI開発キット「KAIBER Touchless Controll Framework」です。
カメラに映した指の動きでHTMLを操作できる、非接触アプリを簡単に作れますよって触れ込みです。

## Hello World

ついてくるマニュアルに従うと、とりあえず簡単なデモが立ち上がります。

謎のキャラクター「かいばくん」を指でつまんで動かすことができます。かわいいですね。

![2022-09-13_09h11_28.gif](https:/

ぴあアプリ独占のコンテンツをブラウザでも閲覧できるようにChrome拡張機能を書いた

人生初めてChrome拡張機能を書いたので、開発フローをメモする。

## TL;DR
ぴあアプリに独占される内容をブラウザに表示する Chrome 拡張機能。[Web Store にて公開中](https://chrome.google.com/webstore/detail/piasuke/lmcehbhanildfjbgjbhdacnepaknfpak)なんで、ぴあのコンテンツを楽しんている方々はぜひお試しください。コードも [GitHub で公開中](https://github.com/digglife/PiaSuke)。

## 経緯

ぴあにて世界の押井守監督が雑談コラムを連載している。僕は長年の大ファンで、フォローしたいと思うが、PCのブラウザーで文章内容を一部しか見えない。完全版はなんとアプリ独占。アプリをプロモートすることは理解できるが、さすがに押井監督のコンテンツだけをフォローしたい僕にはアプリを使わせることが無理。:no_good_tone1:

![piasuke_app.jpg](https://qiita-image-store.s3.ap-northea

【AI Programmerは失敗】2個のDataViewの中身が同じかを判定する関数

# はじめに

JavaScriptで2個の`DataView`の中身が同じかを判定したくなりました。
ここで、「中身が同じ」とは「データの内容が同じ」を意味し、
参照している`ArrayBuffer`やその中の範囲は違っても「同じ」になりうることとします。

# うまく動かないコード

[AI Programmer](https://aiprogrammer.hashlab.jp/) に、JavaScriptの

> 2個のDataViewの中身が同じかを判定する関数

を頼んだところ、以下のコードが出力されました。

“`javascript
function compareDataViews(view1, view2) {
if (view1.byteLength !== view2.byteLength) {
return false;
}
const view1Array = new Uint8Array(view1.buffer);
const view2Array = new Uint8Array(view2.buffer);
for (le

AWSのDynamoDBにCRUD処理を行う方法（基礎編）

# AWSのDynamoDBにCRUD事始
AWSのDynamoDBにCRUD処理を行うために備忘録です。
初心者の方の参考になるかと思います。
今回は、自分のPCからAWSのDynamoDBに対してCRUD処理を行います。

# AWS側の処理
CURD処理を行うためにIAMで処理可能な権限を持つユーザーを作成します。

## IAMでやること
① IAMに行きユーザーを作成する

② 「アクセスキー・プログラムによるアクセス」をチェックし次へ
[](https://gyazo.com/cb4b795f7db7d37d7b09f85d4fdd683c)

③　作成したユーザーのDynamoDBにFull Accessできるポリシーを割り当てる
[](https://gyazo.co

芝生が好きすぎるので、芝活が捗るLINE botを作ってしまった。

# 芝生はいいぞ…

突然ですがみなさん芝生は好きですか？
僕はと言いますと、他人にドンびかれるくらい芝生を愛しています。
暇さえあればホーム芝生で酒を飲んでますし、土日は遠征して一日中芝生で過ごすみたいな生活をしています。
冗談抜きに、芝生にいくと人生が好転するので、みなさんにも味わってほしいのです。

# 実は、良質な芝生と出会うのは難しい

「さっそく芝生に行ってきてください！」と言いたいのですが、
実は良い芝生に出会うのはなかなか難しかったりします。
特に東京で見つけるのは至難の技で、
僕も上京したばかりの頃は失敗を繰り返して鬱になりそうでした。
東京で良い芝生を見つけるのが難しい理由は大きく分けて２つあります。
– 小規模の芝が無数にあり、かつ整備の質の差が激しい。
– 質の高い芝生でも、養生中で入れなかったり、季節によってコンディションに差が出る

【パブリッシャー】Googleマップにデータを表示してみる

[Sharperlight](https://sharperlight.jp/)には地図との連携機能が組み込まれています。クエリで抽出された座標情報をGoogleマップに表示できます。 Google My Mapsで提供されるものを含む幅広い表示タイプ (マーカー、ラインなど)を表示することができます。
更には、ラベル、タイトル、説明、詳細フィルター、onclickアクションなどの情報や機能を追加することもできます。

今回は、Basicな使い方をしてみようと思います。
そうですね。。。東京の山手線の主要な駅にマーカーを表示してみましょうか。

その前に大事な事。
Google Cloud Platformでプロジェクトを作成し、Maps JavaScript APIを有効にしてAPIキーを作成しておく必要があります。
### クエリの作成 ###
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**パブリッシャー**を起動します。
`新規`ボタンで新しいWebレポート(公開クエリともいう)の作成を開始し

Proxy管理下でaxiosを使う場合のメモ

毎度ググるのでメモ
proxyをfalseにして、agentにhttps-proxy-agent経由で渡した値を持たせる。

## サンプル

“`js
import “dotenv/config”;
import axios from “axios”;
import { HttpsProxyAgent } from “https-proxy-agent”;

export const axiosSample = async () => {
const url = “https://example.com”;
const proxyServer = process.env.PROXY_URL;
const agent = new HttpsProxyAgent(proxyServer);
const res = await axios({
method: “GET”,
url,
httpsAgent: agent,
proxy: false,
}).catch((e) => {
console.error(e.message

超自分好みのなろう小説を検索してくれるLINE Botを作ってみた

## 好きななろう小説はありますか？
筆者は[小説家になろう](https://syosetu.com/)が好きで日々新たな作品との出会いを求めています。
検索機能も存在しておりよく使うのですが、非常に作品数が多く検索条件も幅広いためタイトルで惹きつけられるものの、読んでみたら自分の好きな感じではない、ということも多くありました。

そんな中、なろう小説のAPIが存在することを発見しました。
スマホで小説を読むことも多かった私としてはLINEと連携させることで超自分好みの条件で小説を検索・レコメンドするLINE Botができるのではと思い製作を開始しました。

## 自分好みのなろう作品検索Botが誕生しました。
キーワードを入力するとランダムで2件の作品が表示されます。
(一回の検索上限が20件だったため3件にすると被りが出やすく面白くありませんでした。)
自分が好きなキーワードはリッチメニュー化して入力の手間を省きました。
自由なキーワードでも検索が可能です。
Django×Vue.jsで日本語ファイル名を返すまで

## 要件

– Django側で生成したCSVファイルを、ブラウザ側でそのまま保存する動きを作りたい
– CSVファイル名はパラメータに変化し、日本語も含まれる

## 結論

“`python
# ファイル名はURLエンコードする
parsed_filename = urllib.parse.quote(filename)
response = HttpResponse(file_data, content_type=”text/csv”)
response[“Content-Disposition”] = f”attachment; filename={parsed_filename}”

return response
“`

“`javascript
this.$axios.post(‘/download/csv’, params, {responseType: ‘blob’}).then((res) => {
if (res) {
const blob = new Blob(

AWSのCDKに入門してみた

みなさんこんにちは！

AWS CDKは使われたことはありますでしょうか？

私自身、現在はTerraformを使ってGCPのリソース管理の業務があるため、Terraformを触ることはあるのですが、AWS CDKについてほとんど知見がありませんでした。

ただ、次の職場ではインフラのリソース管理をTerraformではなく、AWS CDKを使って管理しているので、今回はその入門として備忘録的な記事として作成します。

## AWS CDKとは


AWS CDKとは`AWS Cloud Development Kit`の略です。

現在バージョン2がリリースされており、1のサポート期限は2023/6/1となっております。

ざっくり説明しますと、「プログラミング言語を用いてクラウド上にアプリケーションを構築することができるIaC」です。

k6/metricsを用いて出力値を操作する

## 概要

k6には任意の値を集計することでカスタマイズした出力値を得ることができる機能がある。これを利用してk6でイマイチ充実していないWebSocketの負荷試験の結果をカスタマイズしてみる。

## 4種類のMetricsタイプ

以下の四種がある。

* Counters
* 回数を数える時に使用する
* Gauges
* 追加した複数の値から「最大値」「最小値」「最新の値」のみを取得できる
* Rates
* 追加された「1」(正確にはnon-zero)か「0」の値の割合を取得できる
* Trends
* 追加された複数の値から「最大値」「最小値」「平均」「パーセンタイル」等の統計情報を取得できる。

それぞれ以下のように使用する。

“`js
const counter = new Counter(“countTest”);
const gauge = new Gauge(“gaugeTest”);
const rate = new Rate(“rateTest”);
const trend = new Trend(“trend

Python,Ruby,PHP,Java,JavaScript,Perlのオブジェクト指向プログラミングの比較

Python JavaScript PHP Java Ruby

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのオブジェクト指向プログラミングの比較

# Python

https://qiita.com/kaitolucifer/items/926ed9bc08426ad8e835

# Ruby

https://qiita.com/shogo-1988/items/e749208c0733bbe025c0

# PHP

https://qiita.com/mpyw/items/41230bec5c02142ae691

# Java

https://qiita.com/nao0725/items/aba8126c50bf85543c78

# JavaScript

https://qiita.com/shotets/items/e4b2ca36f5cbdc39

【Javascript基礎】Javascriptにおけるデータ型

# ◆データ型とは
データの種類のこと。

プログラミング言語には、データの型を強く意識するものと、逆にほとんど意識しないものがある。

JavaやC#のような言語は前者に属し、
数値を格納するために用意された変数に文字列を格納する事は許されない。
**例） Java**
“`java
int num = 100;

num = “100”; // 構文エラーなのでNG
“`
これらの言語は、変数とデータ型は常にワンセットになる。

Javascriptは後者に属し、データ型についてかなり寛容である。
変数側が代入される値に応じて形や大きさを変えてくれるため、開発者がデータ型を意識することはあまり多くない。
“`javascript
let num = 100;

num = “100”; // OK
“`

# ◆Javascriptの主なデータ型
| 分類 | データ型 |
|:-:|:-:|
| 基本型 | 数値型(number) |
| 基本型 | 文字列型(string) |
| 基本型 | 真偽値型（boolean） |
| 基本型 | シンボル型(S