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

動的なWebデザインを無料で学ぶ方法(恐らく2024年まで使える)

## はじめに
最近、Webデザインの勉強をしています。勉強方法は、本を読んだり、オンラインの学習サイトで写経したりすることです。今はある程度、HTMLやCSSが書けるようになって、動くデザインを勉強中です！
今回は勉強している中で、[**動くWebデザインアイデア帳**](https://coco-factory.jp/ugokuweb/)というおすすめサイトに出会い、是非ご紹介したいので記事を執筆します。

+ **動くWebデザインアイデア帳でできるようになること**
+ プルダウンメニュー、ローディング
+ スライドショー、検索
+ などなど**19種類以上のWebデザイン**が学べる
## おすすめのWebサイトとその理由
[**動くWebデザインアイデア帳**](https://coco-factory.jp/ugokuweb/)というサイトです！
↑↑↑
（クリックしてくれたら、公式サイトにとびます）
+ おすすめする理由は3つ
+ 1つ目：**よく見る機能やデザイン**がたくさん説明されている
+ ローディング、画面遷移、

Svelteを使う上での小技集

# はじめに
皆さんSvelte使ってますか。
https://svelte.dev/
Svelteは少ないコード量でハイパフォーマンスが出せるReact、Vueに次ぐ新しいフレームワークです。
非常に便利で重宝しているのですが、実務で使うにあたりちょっと足りない機能があったりします。
Reactだと標準機能になっている部分をちょっとした小技で補っているのでいくつかご紹介します。

# 小技集
## オブジェクトでのstyle指定
Reactだと出来たオブジェクトでのstyle指定がなぜかSvelteだとできないのです。
“`jsx:Reactの場合

“`

Svelteの場合は以下のように通常とHTMLと同じように文字列で指定することしかできません。
他にもクラス名＋CSSでのスタイルを記述することも可能ですが、インラインで書きたいときには不便です。

“`jsx:Svelteの場合

“`

そんな私が

forループ内でawaitしたらESLintにtoo heavyweightって言われたから本当なのか試してみた　ESLintのno-await-in-loopルールの意味

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/nc00ff7e03539

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

jQuery

### jQueryとは
jQuery（ジェイクエリー）は、最も広く使われているJavaScriptライブラリです。
###### 書き方
“`










“`
まずhtmlファイルにscript srcでjquery.min.jsを追加しましょう。
jQueryもjavascript同様、HTMLファイル内に直接記述するか、専用のJavaScriptファイルに記述します。

“`
$(document).ready(function () {
jQueryプログラムの内容
});
“`
基本文法はこのようになります。
また省略形もあり、
“`
$(function(){
jQueryプログラムの内容
});
“`

JavaScriptで全画面(フルスクリーン)にする【YouTube】

# TL;DR

1. フルスクリーンにできるようWebサーバーを起動

“`bash
# wget https://github.com/msoap/shell2http/releases/download/v1.14.1/shell2http_1.14.1_linux_amd64.deb
# sudo apt install xdotool ./shell2http_1.14.1_linux_amd64.deb
shell2http /fullscreen “DISPLAY=:0 xdotool key f”
“`

2. videoにフォーカスして、フルスクリーンにする

“`javascript
document.querySelector(‘video’).focus()
setTimeout(() => fetch(‘http://localhost:8080/fullscreen’), 1000)
“`

Google Cloud Skills Boostで動かすと便利です！

“`javascript:S

angularアプリケーション開発_1

#### 新規のAngularプロジェクトを作成する。
新規プロジェクトの作成
“`ng new プロジェクト名“`

サーバ起動
“`ng serve“`

Slackアプリに「自分」として投稿させるまで

## 記事を書いた理由
– Slackアプリのホームタブで、ボタンをクリックしたらアプリとしてでなく「自分」として特定のチャンネルに書き込みする機能を実装したかった。
– ググっても情報が微妙に古かった(引数にas_userを使うものしか見つからなかった)。

## だいたいの環境
– Bolt for JavaScript (3.11.0)
– [日本語のチュートリアル](https://slack.dev/bolt-js/ja-jp/tutorial/getting-started)は一通りやった
– AWS Lambda
– デプロイ方法は↑のチュートリアルにある。dotenvを使えるようにserverless.yamlのトップレベル？にuseDotenv:trueを追加すると便利。

## chat.postMessage関数のas_user属性は最近のSlackアプリでは使えない
特定チャンネルへの投稿にはWebClientインスタンスの[postMessageメソッド](https://api.slack.com/methods/chat.postMessa

関数

### 関数とは
「関数（function）」は、繰り返し使われる一連の処理を1つにまとめたものです。
関数の形で定義しておき、この関数を呼び出すことで処理を実行します。

“`
function 関数名(引数){
処理
return 戻り値;
}
“`
関数の基礎文法はこのようになります。
入力する値を「引数（ひきすう）」、出力される値を「戻り値（もどりち）」といいます。
引数は「,」でつないで複数の指定も可能です。その場合、それぞれ順番に引数が入力されていきます。
結果を出力したいときは、return内に戻り値を渡します。

“`
let alertString;
alertString = addString(“World”);

# 作成した関数を呼び出す
alert(alertString);

# 作成した関数
function addString(strA){
let addStr = “Hello ” + strA;
return addStr;
}
“`
関数としてaddStringを定義、その引数をstrAとしました。
let addStrで”He

【JavaScript】new Array()に関するメモ

## イディオムで覚えていたこと
「指定した要素数の空配列を作り、mapで回して連番を得る」というのをnew Arrayを用いて実現するやり方。
“`js
const three = new Array(3).fill();
// three –> [undefined, undefined, undefined]

// 配列の要素自体には用がなく、インデックスで連番を得る
const comics = three.map((el, idx) => { return `『ドラえもん』第${idx + 1}巻`} );
// comics –> [“『ドラえもん』第1巻”, “『ドラえもん』第2巻”, “『ドラえもん』第3巻”]
“`

## ふと疑問: fill()ってなんで要るんだっけ？
### 試してみた
“`js
const three2 = new Array(3);
// three –> [<3 empty items>]
console.log(three2);
// undefined
console.log(three2.length)
// 3
con

Youtube DATA APIで再生リストへの追加をNode.jsから行うメモ

[こちら記事](https://blog.n-t.jp/post/tech/youtube-data-api-insert-playlistitems/) をもとにこんな感じでまとめてみました。

認証周りのコードを書いてないのであくまでも自分用メモです。

`YYYYYYYYY`に再生リストのID、`XXXXXXXXX`にYoutubeのVideoIdを入れれば動きます。

“`js
‘use strict’;

require(‘dotenv’).config();

const tokenAuth = require(‘../libs/tokenAuth’); //トークンの認証
const {google} = require(‘googleapis’);

const main = async params => {
const credentials = process.env.YOUTUBE_DS_CREDENTIALS;
const token = process.env.YOUTUBE_POS_BACKUP_TOKEN;

con

PDFを閲覧＋αするクロム拡張の楽な作り方

# 背景
Web上のPDFファイルの閲覧に機能追加するなら、以下の構成が一般的の様です。

– [PDF.jsライブラリ](https://mozilla.github.io/pdf.js/)を使う
– [UI関連イベントの処理を実装する](https://g-weblog.com/blog/4)
– 独自処理を追加する

この構成だと、UI関連イベント処理が面倒なので、以下の構成で楽にPDF上に独自処理を追加できる方法をまとめます。

– PDF.jsライブラリ付属のviewerにUI関連処理を丸投げする
– 独自処理を追加する

自作ツール

Webに好きにリンクを追加するクロム拡張ですhttps://t.co/Maa8IiJxEt

Web上での読書や勉強や仕事のまとめにどうぞ

— large.town.sky (@TownLarge) May 24, 2022

への機能追加の関係上、クロム拡張での実現方法を説明しますが、それ以外の環境にも簡単に流用できるでしょう。

# 最速でPDFファイルが見えるクロム拡張にする
## クロム拡張の設定
まず、クロム拡張を作っていく空のフォルダを適当に用意してください。そこに、以下の中身のmanifest.jsonファイルを追加します。
“`
{

【TypeScript】初心にかえってTypeScriptを理解する。

# まえがき
「JavaScriptじゃなくてTypeScriptでしょ！』という世の中になったくらいでエンジニアになったため、JavaScriptよりTypeScriptの方を書いてきた人生であった。しかし、いまだに下記のことを自信をもって説明できないのが現状なので、本稿にまとめていく。

– なんでTypeScript使うの？
– 型定義ファイル(d.ts） と declare宣言　　　　　
– typeとinterface
– ScriptとModule
– グローバルオブジェクトとグローバル変数
– 名前空間とnamespace宣言
– モジュール

# なぜTypeScriptを使うのか？

https://typescript-jp.gitbook.io/deep-dive/getting-started/why-typescript

JavaScriptに**任意の型システムを追加**することで、**コードの品質と読みやすさが高めるため。**
・開発中に早い段階でエラーに気づける。（JSだと実行時にエラーが出るが、TSだ

TypeScriptの等価演算子(==)と厳密等価演算子(===)について

## 等価演算子(==)と厳密等価演算子(===)とは
JavaScriptでもそうですが、基本的にTypeScriptでも
等価演算子(以下、==)ではなく、厳密等価演算子(以下、===)を用いることが推奨されています。

というのも==と===は厳密には違う挙動をします。

>等価演算子 (==) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。厳密等価演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality

>厳密等価演算子 (===) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equalit

青空文庫のルビを消すスクリプト

# 概要

青空文庫から手っ取り早くテキストをコピーしたいときに、そのままコピーすると「ルビ」のひらがなが混じってコピーされます。これを取り除くJavaScriptの紹介です。ブックマークレットとして使えます。自然言語処理でちょっとしたデータが欲しいときに使えます。

# 使用前

例として「吾輩は猫である」で試してみます。

https://www.aozora.gr.jp/cards/000148/files/789_14547.html

何もせずにコピーすると


以下のように「ルビ」もコピーされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110265/92bbcc85-084b-fcb3-137b-183aa876e089.

GoogleMapsApiで２点間のルートと所要時間を表示

# 前提条件
・APIキーは取得済み
→未取得の場合は[この辺りの記事](https://www.javadrive.jp/google-maps-javascript/charset/index1.html)を参考にAPIキーを取得してください。
# 実装
###### HTMLの実装
~~~html:html

~~~
HTMLの実装はシンプルです。

1行目は所要時間を表示する領域です。

2行目はGooleMapを表示する領域となります。
divタグに`id=”map”`を指定しておき、Javascript側で地図を描画するようにします。

3行目でAPIキーの読み込みを行います。
*YOUR_API_KEY*の部分を取得したAPIキーで書き換えてくださ

selectで検索機能optionで選択した月のデータを保持しながら対象の月に遷移させるには

はじめに
—
先日、投稿検索機能を実装する機会があり、はまってしまったので備忘録として記載しました。

概要
—
Laravelでプルダウン検索機能のような実装依頼があり、実装にあたり以下の条件がありました。
・プルダウンを選択するタイミングで画面を遷移させる(検索ボタンを配置させない)
・現状、ある程度の検索機能は実装済み(コントローラ等)だが、対象の月を選択すると遷移時に選択した値が保持されない
（例えば、4月と５月を選択できるプルダウンがあり初期値は現在月）

解決コード
—
半日くらい費やしながら調べに調べ尽くした結果が、以下のコードです
“`php:index.blade.php

@csrf
{{– プルダウンカテゴリ検索 –}}

forEach 第二引数　 }, list);　のやつ

foreachの第二引数とは、と調べたら良いのを見つけたので張っておく。

https://it-kyujin.jp/article/detail/1539/

>let array = [‘東京’,’大阪’,’仙台’,’名古屋’];
array.forEach(function(value) {
console.log(value + ‘のローマ字表記は’+ this[value] +’です’);
},list);

元記事を表示

forEachでなくfor…ofで実現するバリデータ例

# はじめに
javascript初心者向けの記事です。

forEachの処理でできなかったことをfor…ofで実現した話です。
コードレビューで指摘され、**forEach内でreturnしてもcontinue扱いになる**ことを知ったので例をまとめておきます。

# やりたいこと
文字列を先頭から1文字ずつチェックします。
数字か平仮名以外であれば、**他の文字をチェックせずに**falseを返すバリデータ処理を書きます。

# NG例
実際に私が書いた冗長なコードのサンプルは以下です。
この例のように、**forEach**を使用すると、returnしてもcontinue扱いとなり、ループを抜けることができません。
数字か文字列以外の場合でも、全ての文字をチェックしてしまっています。

“`javascript:NG例
// 各正規表現を定義
const number = new RegExp(/^[0-9]+$/);
const hiragana = new RegExp(/^[ぁ-んー]+$/);

//入力文字列を定義
const str = ‘カタカナ01’;
c

元記事を表示

O’Reilly「JavaScript第7版」を読んだ（15章編）

O’Reilly JavaScript 第 7 版を読んだので、自分の学習メモを主目的として気づきをまとめます。

https://www.oreilly.co.jp/books/9784873119700/

## 前置き

本投稿内容は第 15 章の内容アウトプットになります。

お仕事柄、第 15 章 「Web ブラウザ上の JavaScript」 のメモが多くなりそうなのでその手前までで分けることにしました。

https://qiita.com/kawa-mon/items/5803e4ef3f84efcb55bc

実務では TypeScirpt を使うエンジニアリングマネージャーをしていますが、体系立てて JavaScript を学んだことがほぼ無かったため、本書を手に取って、スキマ時間で読み進めてきました。今回を機に、新たに勉強になったこと・解釈間違いなどを整理してメモとしておきます。

## Web プログラミングの基礎

– 今や Web API のすべてを 1 冊の書籍でカバーするのは不可能なので、何か知りたいことがあれば [MDN Web docs](https

元記事を表示

Chromeで、TableをCSVで取得(楽天証券積立設定取得)(自分向けメモ)

# 楽天証券の積立設定を取得
複数ページにまたがる場合は、手動で切り替えてから取得。。。

“`javascript
var downloadAsTextFile = function(fileName, content) {
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, content]);
var url = window.URL || window.webkitURL;
var blobURL = url.createObjectURL(blob);

var a = document.createElement(‘a’);
a.download = fileName;
a.href = blobURL;
a.click();
};
var downloadAsCSVFile = function(fileName, rows) {
var content = “”;
for( var i in rows)

元記事を表示