f@ctor

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

JavaScript関連のことを調べてみた2021年10月22日
目次

【JavaScript】関数とオブジェクト⑦　アロー関数

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/31b5657ce81668cab5e9

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.アロー関数

無名関数を記述しやすくした省略記法のこと

““基本構文.
() => {};
““`

####例1

基本的な書き方

““javascript
// 一般的な関数
function a(name){
return “hello ” + name;
}

// 関数式にした場合
const b = function(name){
return “hello ” + name;
}

// 上記をアロー関数に直すと下記の通り
const c = name => “hello ” + name;

// functionを削除して、{}の前に

元記事を表示

コードインジェクション攻撃

こんにちは。
今日のお題はコードインジェクションについてです。
JapaScriptのコーディングには自身がある方も、お役にたちそうな記事内容を見つけました。

コードインジェクション攻撃で、注射針を思い出すのは私だけかと思っていたところ、こちらのブログ記事にも注射アイコンを発見。万国共通のイメージなのでしょう。

コーディングの段階からセキュリティを取り入れるという考え方が理にかなっているとはわかるけど、やっぱりちょっと面倒、、、という方も、最後まで読んでみてください。

##JavaScriptとNode.jsでコードインジェクションを防ぐ5つの方法
https://snyk.io/blog/5-ways-to-prevent-code-injection-in-javascript-and-node-js/

JavaScriptとNode.jsでコードインジェクションを防ぐ5つの方法
Liran Tal　(リラン・タル）
2021年4月5日

コードインジェクションを防ぐ安全なコードを書くのは簡単なようで実は、多くの落とし穴があります。たとえば、あなた自身がデベロッパとし

元記事を表示

Gmailの件名と本文テンプレートをワンクリック入力【ブックマークレット】

##Gmailで予めテンプレートとして作成しておいた件名と文章をワンクリックで入力するブックマークレット

GmailをChromeブラウザで利用している方向けのものです。
新規作成ボタンを押した後に、件名と本文を自動入力します。
業務の効率化を目的としています。

Gmailにもテンプレート入力機能あるのですが、
若干ステップ多いので・・・
（これは超ショートカット版のようなイメージです）

![template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570700/22f8b220-f562-5513-a2f4-c0fde4a53f41.png)

##コード

**▼シンプルな例：**

“`
javascript:var subj = “ご挨拶とお打ち合わせに関しまして”;var com =”

様
★お好きな文章

“;mails();function mails(){document.getElementsByName(“subjectbox”)[0

元記事を表示

useContextが不便だったのでrecoilで置き換えた

#はじめに
現在React x TypeScript x styled-components x laravel でポートフォリオを作成しています。しかし、ポートフォリオが作成開始時の予想以上にたくさんの状態が必要になり、途中でrecoilで置き換えました。recoilの良い点悪い点を簡単にまとめていきたいと思います。

#なぜ最初にuseContextを選んだのか
Reduxが日本ではいまだに数は多いと思いますが、なにかと複雑でわかりにくく、新規で採用するところは少なくなってきているようです。そのため、Reduxが必要な現場になった時に勉強することにし、とりあえずuseContextを用いて状態管理をしました。しかし、ある理由のため非常にストレスを感じたためrecoilでの状態管理に変更することにしました。

#useContextの使い方
useContextでは状態ごとにcontextを作成し、状態を共有したいコンポーネントたちをproviderで包むことが必要です。**この状態ごとにcontextを作成し、providerで包むという作業がとても憂鬱でした。**

“`rea

元記事を表示

サイトのURLを共有する時にURLパラメータが邪魔な方のためのブックマークレット

#URLパラメータを削除した現在のURLをクリップボードに送信するブックマークレット

会社の仲間、クライアント様等に
参考記事やブログのURLを共有する際、
広告経由等でURLパラメータ（URLの?以降）が
あって邪魔だなと思った事は無いでしょうか。

:::note info
https://qiita.com/?abc=001&def=255
↓
https://qiita.com/
※?abc以降は要らない時
:::

私はあります。
手動で消せば良いだけなのですが、
ちょっとめんどくさいなと思います。

このブックマークレットは、
ワンクリックで、
*現在見ているURLの?以降を削除した状態で*
*コピーする（クリックボードに送信）*
だけのシンプルなものです。

Chromeブラウザで動作確認しています。

“`
javascript:var clp = location.href;var clipboardText = clp.substring(0, clp.indexOf(“\?”));navigator.clipboard.writeText(clipboardT

元記事を表示

javascriptでタイマー秒後に遅延実行

#　経緯
定期的に送られてくるjsonメッセージに対して、受信後設定時間以内に再度受信しなければ
発火させる関数を考える必要があった。

フローチャートはこんな感じ。　発火させたい処理は関数B
![Untitled Diagram (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2200496/f7c5934d-1215-6465-0b9d-26a226b4e224.jpeg)

#　コード
私の場合はjsonメッセージを受信した場合に関数Aが毎回発火していたので、
関数Aの中に下記コードを記述しました。

“`
// 下記宣言は関数Aの外で行っています
let countTimer = false

// 以下は関数Aの処理（何度も繰り返される）

if (countTimer != false) clearTimeout(countTimer)
countTimer = setTimeout(function () {
// ここに行いたい処理を書く
条件　B
count

元記事を表示

【Vue.js】算出プロパティの基本

#はじめに
こんにちは！
今回は【Vue.js】算出プロパティの基本についてアウトプットしていきます！

#算出プロパティとは
関数によって算出したデータを返すことができるプロパティ。
算出プロパティでは、`computed`を使用します。

#書き方・解説
今回は文字列を反転させるプログラムを例として解説していきます。

“`HTML:HTML

{{ message.split(”).reverse().join(”) }}
　　　　　　　


“`
“`:Vue.js
var app = new Vue({
el: “#app”,
data: {
message: ‘Hello Vue.js!’
}
})

“`
![スクリーンショット 2021-10-17 16.46

元記事を表示

JavaScriptのコンストラクター関数について

#コンストラクター関数について
こｎコンストラクター関数とは新しく「オブジェクト」を作成するための雛形となる関数です。通常の｛｝構文では１つのオブジェクトを作成します。コンストラクター関数を利用すると似たようなオブジェクトを複数作成することができます。

コンストラクター関数には２つの慣習があります。
・　名前は大文字で始める。
・　コンストラクター関数を呼び出す際は’new’演算子を用いて実行する。

早速コードで確認してみましょう。

“`JS:JS
function Person(name, age) {

this.name = name
this.age = age
}

const admin = new Person(‘Tom’, 30);

console.log(admin);
“`

1.　まずPersonというコンストラクター関数を用意します（大文字に注意）
2. new演算子を用いて新しいオブジェクトを作成し（インスタンス化）adminという変数に格納します。

ここでnew演算子とは何かを説明します。
##new演算子
new 演算子を用

元記事を表示

LINE bot と Notion API を組み合わせて自分用フィードアプリ（？）を作ってみた！！

# はじめに
突然ですが、今話題沸騰中のNotionというコラボレーションツールをご存じでしょうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2135866/00b81bff-d054-c384-d0a7-25252b61145e.png)

多機能かつシンプルなノート機能に加えて、チームコラボレーション機能やほかのアプリとの連携機能が充実しておりすべての情報をNotionに集約させるという使い方ができます。そのため、**オールインワンワークスペース**なんて銘打っていたりもします。

https://www.notion.so/ja-jp/product?utm_source=google&utm_campaign=14877655427&utm_medium=125922091617&utm_content=552465064293&utm_term=notion&targetid=aud-1190785634793:kwd-312974742&gclid=CjwKCAj

元記事を表示

GASでプログラミング入門 ～応用編 Vol.2～

社内サークルにてエンジニアから非エンジニアの方向けにプログラミングを教えるという活動を行っています。

今回はその教材応用編の第2弾です。
前回の記事は[こちら](https://qiita.com/YoshinagaYuta/items/3b90449fdc7ecf8c0d5f)

## 前回の演習問題の解答例

(1). スプレッドシートのA1セルに氏名、B1セルに出身、C1セルに趣味、D1セルに一言メッセージを入力しておき、入力したセルをGASのコード内で取得して、下記のような自己紹介を表示するプログラムを作成してください。

“`
氏名：鈴木一郎
出身：東京都
趣味：ドライブ
一言：GASを頑張ってマスターする！
“`

解答例コード

“`js
function myFunction() {
// 読み込む対象のスプレッドシートを取得する。(現在開いているスプレッドシート)
const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
// 読み込む対象のスプレッドシート内のシートを取得する

元記事を表示

Reactロードマップ～アプリ構築～

#はじめに
この間、会社の先輩からReactが面白い！って話を聞いたので
自分用にまとめてみました。
#目次
１．環境
２．Node.jsのインストール
３．Reactのインストール
４．Reactのアプリを構築しよう！
５．まとめ
#１．環境
・Windows10
・Node.js
・React
#２．Node.jsのインストール
Reactを使ったアプリを開発する場合、Npde.jsとnpmが必須になります。
[Node.jsダウンロードサイト](https://nodejs.org/ja/)

念のため、npmのアップデートをしておきましょう。
“`npm update -g npm
“`
#３．Reactのインストール
npmを使ってReactをインストールしましょう。
“`npm install -g create-react-app
“`
#４．Reactのアプリを構築しよう
Reactのアプリ構築にはnpxコマンドを使います。npmのバージョン5.2.0以降では自動でダウンロードされます。
もしない場合は手動でインストールしましょう。
“`npm install

元記事を表示

過去クールアニメ紹介botで黄金時代を懐古する。

#はじめに
小学4年生の頃、深夜アニメにハマった。
たまたま深夜に起きた時にやっていたあずまんが大王をきっかけに、あらゆる深夜アニメを見た。
夕方にやっているアニメとは少し違う。シュールな笑い、ダークな世界観、ドロドロ人間模様。
深夜アニメを見て多くのことを学んだ。
2000年代のアニメは少女期の私の情操教育に大きく寄与していたと思う。
(その代わり第二次成長と学校の成績は完全に終わった。)

あれから20年。
16時には学校が終わって、寝不足の疲れもなく元気に遊んで過ごしていた小学生は
22時まで仕事をして、帰ってすぐご飯をかきこんで泥のように寝る社会の歯車になった。
アニメを見る時間がない。新しいアニメなんてもう長いことリアタイしてない。
機械的に録画していた前期アニメも、見ることがないまま溜まっていく。

過去、アニメオタクだった自負はある。
だけど、今は新しいアニメを受け入れる時間とキャパがない。
老いた。

今は専ら「あの頃のアニメは楽しかったな」と過去を懐かしむばかり。
ふと、「当時って他にどんなアニメがやってたっけ」と思った。
そんな時に、こんなAPIを見つけた。

h

元記事を表示

はじめてのJavaScript⑧ 「繰り返し処理 “for”」

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/b70ef528d9c9c608fc8a#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
[2.概要](https://qiita.com/Stack_up_Rising/items/b70ef528d9c9c608fc8a#2-%E6%A6%82%E8%A6%81)
[3.for](https://qiita.com/Stack_up_Rising/items/b70ef528d9c9c608fc8a#3-for
)
[4.内容は](https://qiita.com/Stack_up_Rising/items/b70ef528d9c9c608fc8a#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Stack_up_Rising/items/b70ef528d9c9c608fc8a#5-%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB
)

##1. はじめに
本記事では

元記事を表示

簡単にJWTサーバーをExpressで作る

いろいろな記事を見てきたが、一括でコードを出しているものが多く、理解できなかったため、段階を踏みながら解説をする。

:::note alert
まだ未完成です。今週中に完成させます。
:::

# 初期設定

作業ディレクトリーの中で行う

“`bash
$ npm init -y
$ npm install express mongoose bcrypt jsonwebtoken dotenv
“`

環境変数を書き込む

“`:.env
DATABASE_URI=mongodb://localhost/jwt-sample
PORT=3000
SECRET=sample
“`

# Expressの動作確認(?)

`Hello, World!`を表示する

“`javascript:index.js
require(‘dotenv’).config()
const express = require(‘express’)
const app = express()
const port = process.env.PORT || 3000

app.use(expr

元記事を表示

ファイル名やディレクトリ名に指定できない文字のチェック

ファイル名やディレクトリ名に使用できない文字が含まれていないかチェックするために、正規表現を使ったのでまとめておく。

# 正規表現
**正規表現**とは、特殊な文字や記号を使っていくつかの文字列を1つの文字列で表現する方法のこと。今回正規表現の記号と意味についての紹介は省略します。JavaScriptで正規表現を使う方法は2種類ある。
■ **正規表現リテラル**
・スラッシュ(/)の中に正規表現パターンを直接指定する。
・正規表現のパターンが変化しない時に使用。
■ **RegExpのコンストラクタ**
・“`RegExp()“`の引数に正規表現パターンを直接指定する。
・外部からの入力など正規表現パターンが変化する場合に使用。

“`javascript
const pattern = new RegExp(<正規表現パターン>);
“`

# 実装
###1.正規表現パターンの指定
今回は、ファイル名やディレクトリ名に使用できない文字は固定なので、**正規表現リテラル**を使用した。名前に指定できない文字は「**\/:*?”<>|**」の9種類なので、正規表現リテラルを

元記事を表示

“_”(アンダースコア)の使い方

プログラミングにおける“`_“` (アンダースコア)の使い方について学んだのでまとめておく。

#”_”(アンダースコア)の使い方
“`_“` (アンダースコア)が使われている場合は主に以下の3つがある。
### 1. 名前の前にある場合(“_”が１つ)
Java、C++、JavaScriptにおいて、privateな変数やメソッドを意味する。
メソッドや変数の名前の前に“`_“`がついた変数やメソッドはクラスの外から直接読み書きしないようにする。ただし、これはコーディングルールの慣例にすぎず、言語仕様ではない。
【例】
“`this._value“`
“`_func(){}“`

### 2. 名前の前にある場合(“_”が2つ)
Pythonでは言語仕様として、privateなメンバを意味する。
JavaScriptやC++については、予約語とされているため、使用することは推奨されていない。

### 3. 名前の途中にある場合
「スネークケース」などの命名規則によるもの。スネークケースでは、単語と単語を“`_“`でつないでいる。
【例】
“`stude

元記事を表示

C#とNode.jsを連携する 最終章

###EdgeJsは使わずにNode.jsの外部プログラム実行を利用する

前回はedgeJsには制約があり、ビルドでエラーが頻発することからコンソールアプリを使用することにしました。
**コンソールアプリを使うなら、nodejsに元々ある外部プログラム実行を使えばいいのではないか？**という結論に至りました。

####Node.jsの外部プログラムの実行

https://nodejs.org/api/child_process.html

“`
const { exec } = require(‘child_process’);
const path = require(“path”);

let pathStr = path.join(__dirname, ‘../ConsoleApp1/bin/Debug/net5.0/ConsoleApp1’)
let commendStr = pathStr + ” args1 args2″;

exec(commendStr, (error, stdout, stderr) => {
if (error) {

元記事を表示

document.queryCommandSupported(‘insertText’)のfirefox暫定対応

firefoxがdocument.queryCommandSupported(‘insertText’)に対してtrueを返してくるのに
実際には動作しない件について、
この場合はUndoは効かないもののとりあえずキャレット位置を分割して文字を挿入するようにし、
それ以外はdocument.execCommandを利用するパターン。

※そもそもexecCommandが非推奨ではあるんだけども、とりあえず。（調べたけど「navigator.clipboard.writeText」を使うしかない？ようだけどクリップボードが汚れるのが嫌）

“`
$(function(){
//ボタン.btnクリック時、入力欄#hoge に テキスト「XXX 」を挿入する
$(‘.btn’).on(‘click’,function(event){
insertText(‘hoge’,’XXX’);
});
});

function insertText(id,text){
let userAgent = window.navigator.userAgent;
let area = doc

元記事を表示

HTML & JavaScriptで複数動画を順次ループ再生する方法

[完成コード](#完成コード)
[ハマった点１）自動再生しない](#ハマった点１）自動再生しない)
[ハマった点２）ビデオがフッタの下に表示された](#ハマった点２）ビデオがフッタの下に表示された)
[参考記事](#参考記事)

#完成コード

“`