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

配列の扱い方

#目次
①配列とは
②配列の扱い方

####①配列とは
データの集合体のこと。一つの変数に対して複数の値を格納できる。

####②配列の扱い方
“`php:
//下記のように定義ができる。
const arry = [1,2,3,4,5,6];

//要素の数を知りたい時
arry.length で配列の要素の数を知ることができる

//配列の末尾にitemが追加される
arry.push(“item”);

//配列の先頭に代入できる
arry.unshift(“hello”);

//配列の末尾を削除できる
arry.pop()

//配列の先頭を削除することができる
arry.shift()
“`

関数について

#目次
①関数について
②関数の利便性
③関数の種類

###①関数について
関数とはあるデータを受け取り、定められた独自の処理を実行し、その結果を返す命令のことです。

###②関数の利便性

“`php:
let name = “Ito”
let name2 = “Sato

console.log(“hello”+ name);
console.log(“hello”+name2);

“`
関数を使わない場合、何度も変数を定義しなければいけない。

“`php:

funciton hello(name){
console.log(“hello”+name);
}

hello(“Ito”);
hello(“Sato”);
“`
上記のように関数を一度使ってしまえば、使い回しが可能になる。
同じ作業が発生する場合、関数を使用すると便利。

###②関数の種類
・無名関数

“`php:
const hello = function(name){
console.log(“hello”+name)
return na

ブラウザバックで画面遷移してきたことを判定し、処理を動かす

## はじめに
ページの離脱直前に確認ダイアログを出すなど、そのページから遷移しようとすることをトリガーに処理を書く際は[beforeunload](https://developer.mozilla.org/ja/docs/Web/API/Window/beforeunload_event)イベントを使用するメジャーなやり方がありますが、ページの読み込み時( jQueryの$(document).readyが動くタイミング )に**ブラウザバックでこの画面に遷移してきたどうか**を判定して処理したいケースがあり、無事実現できたのでご紹介します。（とてもレアケースだとは思いますが…）

どんなケースで必要だったか気になる方に向けて使用した際の用途にも触れておきます。Bootstrapの[tagsinput](https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/)というプラグインを導入してフォーム画面のinputへの入力がタグ化されるようにしていたため、ブラウザバック時のフォーム復元には別途処理を実装する

2021に作るべき7つのフルスタックプロジェクト

以下はHenry Boisdequin( [dev.to](https://dev.to/hb) / [Twitter](https://twitter.com/henryboisdequin) / [GitHub](https://github.com/henryboisdequin) )による記事、[7 Fullstack Projects You Need to Make in 2021](https://dev.to/hb/7-fullstack-projects-you-need-to-make-in-2021-bdn)の日本語訳です。

—

どのようなフルスタックプロジェクトを作るべきか？
もしこのような疑問を持ち続けているのであれば、あなたは正しい場所にいます。
私は、2021年に作るべき7つのフルスタックプロジェクトのリストをまとめました。
早速、挑戦してみましょう！

# E-commerce Site
![](https://res.cloudinary.com/practicaldev/image/fetch/s—g_FJGC1–/c_limit%2

JavaScript初心者のためのTypeScript入門

# JavaScript初心者のためのTypeScript入門
Macを想定しています

「ターミナル?」ぐらいの本当に初心者を想定しています
中級者や上級者は飛ばし読みしてください

環境
mac Big sur 11.2.3

##Nodeのインストール
インストールは[こちら](https://prog-8.com/docs/nodejs-env)
>progate様

##TypeScriptのインストール
下記のコマンドをターミナルで実行するだけです

“`shell
npm i -g typescript
“`

`tsc -v`と入力してエラーが返ってこなければ成功です

“`shell
tsc -v
Version 数字
“`

## Hello World

好きな場所に`フォルダ`と`index.ts`を作ってください

今回は`Desktop/typescript/index.ts`の構成でいきます

### 下準備

ターミナルで

“`shell
cd ~/Desktop/typescript/
“`

### コーディング

好きなエディターでコ

SpotifyAPIとNuxtでDigるWebアプリを作った

##できたもの

[SpotifyAdvanecdDig](https://spotify-dig.herokuapp.com/app)ができました。

SpotifyAPIがため込んでいる楽曲の分析データから、楽曲の絞り込みを行うことができます。
また、自分の好きな音楽を検索し、Spotifyの分析データを閲覧することも可能です。

https://spotify-dig.herokuapp.com/app

https://github.com/ToYeah/Spotify_Advanced_Dig

##なんで作った

SpotifyAPIから得られる楽曲データをのぞいてみたところ、Danceability(踊れる曲か)や、Popularity(有名な曲か)など、普段はアクセスできないデータを持っていることがわかりました。
楽曲データが持

データをパスワードだけで暗号化し、ファイル化して保存することも可能なnpmパッケージを作った話

いい感じのものが無かったので作りました。

[@sounisi5011/encrypted-archive – npm](https://www.npmjs.com/package/@sounisi5011/encrypted-archive)

宣伝も兼ねていますが、どちらかというと暗号技術について詳しい方の意見とか指摘とかが欲しいなという下心が強いです。

## 特徴

* 2021年現在、安全な（と考えられている）暗号アルゴリズムを採用しています。具体的にはAES-GCM 256ビットとChaCha20-Poly1305です。
* パスワードは最新の鍵導出関数[Argon2](https://ja.wikipedia.org/wiki/Argon2)を使って変換されています。
* ファイル化することを考えて、圧縮アルゴリズムにも対応しています。
* 生成されたデータに復号に必要な全ての情報が含まれているので、復号するときはパスワードだけしか要りません。ファイルに書き込んで保存すれば、[KeePass](https://keepass.info/)のデータベースファイルのように、時

“Truth about Pi”のWriteUpと備忘録[TSG LIVE! 6 CTF]

## はじめに
TSG LIVE! 6 CTFのWEB問、[Truth about Pi](https://github.com/tsg-ut/tsg-live-ctf-6/blob/main/web/truth-about-pi)がとても勉強になったのでWriteUpを兼ねて学んだことをまとめていこうと思います。

最初は上手いことインジェクションする問題だと思っていたので、延々とRabbit Holeに入りこんでしまっていました。

自戒も込めて真面目に勉強した結果の備忘録です。

## WriteUp

問題サーバにアクセスすると、koaフレームワーク製のページにアクセスできます。

提供された問題コードを読むと、以下の部分で入力値に対して処理を行い、最終的に“digit”の値が0になったときにFLAGが出力されることがわかりました。

“`javascript
if (ctx.method === ‘POST’) {
const { index } = ctx.request.body; // 1
const pi = Math.PI.toString(); /

【JavaScript】jQueryの基礎

##jQueryとは
JavaScriptでできることをより簡単に書けるように設計したライブラリ

##基本構文

“`javascript:JavaScript
$(function() {
/* コード実装部 */
});
“`

セレクタとメソッドで構成されている

“`
$(“セレクタ”).メソッド(“パラメータ[引数]”);
“`

###セレクタ
操作対象となるHTML要素が入る

* 基本形
$(“セレクタ”)

* IDセレクタ
$(“#Selector”)

* クラスセレクタ
$(“.Selector”)

* 要素セレクタ
$(“h1”)

例）h1要素のテキストを動的に変更する

“`javascript:JavaScript
$(‘h1’).text(‘Hello’);
“`

###メソッド＆イベント
指定した要素に対して何を行うかを記載する
パラメータ付与でより具体的で細かく指定可能
[よく使用するメソッド一覧](https://qiita.com/fukumone/items/3ecc0c58ff9c811b3f35)

• addCla

【JavaScript】要素を取得する主な方法

##要素を取得する主な方法
* document.getElementById()
* document.querySelector()
* document.querySelectorAll()

以下でそれぞれ説明

###document.getElementById()
指定したIDを持つ要素を取得する
存在しない場合、nullが返る

“`html:HTML
Hello
“`

“`javascript:JavaScript
var spanText = document.getElementById(‘spanText’);
console.log(spanText); //
console.log(spanText.textContent); // “Hello”

var divText = document.getElementById(‘divText’);
console.log(divText); // null
“`

###document.querySelector()
CSSセレク

ページに埋め込んだYoutube動画による遅延を緩和する方法

## はじめに

– 昨今のランディングページは動画を使用しているところが多くて、私自身も制作しているとよく使うのがYoutube動画。Youtubeから簡単に埋め込みコードが発行できてコピペするだけですぐ使えるのが大きなメリットですよね。
– ただその代わりに大きなデメリットがあります。それがページの読み込み速度の低下です。
– その読み込み速度の低下を改善する方法を備忘録として書いておこうかと思います。

## Youtube動画のメリット・デメリット

– 前述したとおり、Youtube動画の埋め込みには簡単というメリットが大きく、Youtubeの共有ボタンから埋め込みコードが発行されるのでコピペするだけです。
– 逆に読み込み速度が低下しやすいのが大きなデメリットで、単純に読み込み容量が大きいことと外部サイトから参照していることが主な原因です。

## コード

### HTML

“`html

動画を見る

<

RailsのjbuilderでJSONを返してみる

# なぜやるのか

Railsで作成しているポモドーロToDoアプリのToDoタスクをAjaxで実装したい。
JSとRailsをつなげる..??には、RailsのタスクをJSON形式で出力する必要があるらしい。(ちょっとまだここよくわかってない)
jbuilder を使うことで、簡単にJSON形式のデータを出力することができる。

# 手順

まずはrailsアプリの新規作成

“`
rails new myapp
“`

移動してデータベース作成

“`
cd myapp && rails db:create
“`

タスクモデルを作成

“`
rails g model Task name:string is_done:boolean
“`

マイグレート

“`
rails db:migrate
“`

コンソールでデータを入れとく

“`
rails c

> Task.new(name: “タスクのテストです。JSONで飛ばせるかな”)
> task1.save
> exit #で抜ける
“`

コントローラーの作成

“`
rails g con

Reactのフォームの返り値と渡す値、型バラバラ問題(数値)

# 課題
Reactでフォームを実装したい。
React Hooksでcountを管理している。
ここで、素直にinputに値を渡して、変更があればinputの返り値で価格を変更してみる。

“`typescript:index.tsx
import { useState } from ‘react’

const Index = () => {
const [count, setCount] = useState(0)
return setCount(e.target.value)}
/>
}
export default Index
“`

今回は、初期値0から100に変更したとする
初期値は、**number型の0**
変更があると、**string型の100**となる。
これでは困る。
別の`count=500`があったとしてその合計を求めると、`’100500’`となってしまう。

# 解決法
Rea

Electronの公式クイックスタートガイドを試す

# Electronの公式クイックスタートガイドを試す

Electronは、JavaScript、HTML、CSSを使用してデスクトップアプリケーションを作成できるようにするフレームワークです。Electronで作成したアプリケーションは、macOS、Windows、Linuxで実行できます。

今回は、[Electronの公式ドキュメントのクイックスタート](https://www.electronjs.org/docs/tutorial/quick-start)に記載されている内容を試していきます。ところどころ不足してるとことかは補って記述しています。

## 前提条件

[Node.js](https://nodejs.org/en/download/)をインストールする必要があります。

## 基本的なアプリケーションを作成する

Electronアプリケーションは本質的にNode.jsアプリケーションです。

### package.json を作成する

プロジェクト用のフォルダーを作成し、以下のコマンドを実行します。

“`
npm init -y
“`

###

HTML, CSS, JavaScriptで掲示板システムを作ってみた【その3-要素が重なる問題】

#あらすじ
可愛い掲示板を作ってアンカーを実装したはいいものの、コメントを指差すアンカーをリンクで修飾してしまい、NotFoundエラーが出されてしまっていました。そこで、前回はアンカーをリンクではなく色付き文字だけで表現し直し、アンカーをクリックするとエラーページが表示される問題を解決しました。
【作っている掲示板】

しかしながら、新たにポップアップしたメッセージが下に隠れてしまう問題を新たに発見したので今回はそれを修正することにしました。
![スクリーンショット 2021-05-18 10.30.10.png](https://qiita-image-store.s3.ap-north

Bootstrap5 : バージョン4からの変更点をまとめてみた

おなじみBootstrapの最新バージョン「**Bootstrap5**」正式版がついにリリースされたようです！前々からBeta版のリリースが行われていたためそろそろかと思っておりましたがついに・・?

One more time, we're gonna celebrate—Bootstrap 5 has officially arrived! New accordion and offcanvas components, no more jQuery, no more IE, RTL support, new utilities and utilities API, new examples, new docs, and so much more! https://t.co/yWnJvosSLR pic.twitter.com/DP4l0EqkY9

— Bootstrap (@getbootstrap) May 5, 2021

こちらの記事では**既存のバージョン「4」からの変更点**をまとめてお伝えできればと思います。

また、今回ご紹介する変更点を**コードを書きながら体験できないか**と思い、自分の運営しているプログラミング学習レッスンプラットフォーム「Donbler」で**Bootstrap５変更点ハンズオンレッスン**を作ってみました！無料ですのでぜひこちらも試してみて下さい?

https://donbler.com/lessons/58

# 変更点1: IE非対応化
バージョン5からIEがサポート外となりました。またEdge Legacyなどバージョンの古いブラウザも合わせてサポート外となります。

# 変更点2: 脱jQuery！
Bootstrap4に含まれていたjQu

【Javascript】Rest pattern/parameters（残余パターン/引数）について

# 初めに
Spread operator(スプレッド構文）と形は似ていますが、真逆のことをするRest pattern/parametersについて学習した内容を書いてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

#Rest pattern/parameters（残余パターン/引数）とは
MDNの公式ドキュメントには以下のように説明しています。
> 残余引数構文により、不定数の引数を配列として表すことができます。

要するに要素や引数を凝縮（condense)し配列として返します。要素を展開するスプレッド構文と正反対のことをします。

前回の記事：
https://qiita.com/redrabbit1104/items/374fc9cc0c0408f51e66

# 見分け方
残余パターン/引数はスプレッド構文と非常に似ていますが、「=」の左側にあるか右側にあるかでどちらなのか判断できます。

①スプレッド構文

“`javascript
//スプレッド構文は「=」の右側

const testNumber = [100, 99, 98, …

【rails×Bootstrap】Bootstrap.jsを活用した動的なタブの実装

#実装すること

* bootsrap.jsを使用して動的なタブを実装します。
公式でいう「Javascript Behavior」が該当します。

Bootstrap：　https://getbootstrap.jp/docs/4.5/components/navs/#javascript-behavior

# 完成形

* タブをクリックするとロードせずに切り替えができます。
* 内容は設定した内容で表示ができます。

# 前提

* bootstrapをインストールしていること。
以下、私のgemのバージョンと記載方法です。

“`:Gemfile
gem ‘bootstrap’, ‘~> 4.5’
gem ‘jquery-rails’
“`

“`css:assets/stylesheets/applicatio

【Vue】 v-forの基本的な使い方 + v-forにおけるkeyの目的

## 概要
v-forを **配列**、**オブジェクト**、**数値**に使用する方法と、
v-forには**key属性**をなるべくつけようということを説明する記事です。

## 0. はじめに

下記のhtmlファイルにプログラムする前提で説明する。

“`html

GoogleAppsScriptでGoogleカレンダーの予定をChatWorkで通知させる

# GoogleAppsScriptでGoogleカレンダーの予定をChatWorkで通知させる

## 経緯
会社で予定をGoogleカレンダーで管理するということらしいので、急遽調査。
なんとか必要な動作ができた…。

※何かあっても責任は取れませんのでご注意を、、

## 参考サイト

こちらで比較的欲しい情報がありましたので、参考にしました。

[https://teratail.com/questions/219287](https://teratail.com/questions/219287)

## 仕様

– トリガーは一定時間間隔で発動
– 予定のない日は、「この日の予定はありません。」と表示させる。
– 予定の日付ごとに罫線を入れている（ChatWork用スタイリング）
– 土日と祝日は送信しないをコメントアウトしてます
– 基本的には何日先でも可能にしている（閏年とかは大丈夫かわからないが…）

## コード

以下のコードを貼り付けたら動くはず…。
APIのキーなど必要な情報は事前に取得しておいてください。

事前準備が整い次第、コードを貼り付けてください。