JavaScript関連のことを調べてみた2020年11月15日

Javascript基礎知識＃5（for文）

##はじめに
この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

##目次
1. 繰り返し処理とは
2. for文とは
3. for文の書き方
4. for文の例
5. 配列を使った繰り返し処理
6. continue
7. break

#1. 繰り返し処理とは
同じ処理を何回か繰り返したいときに使う処理。

繰り返し処理を使えば何回も同じコードを書かなくて済む。

#2. for文とは
**決められた回数だけ**処理を繰り返す場合に使用します。
事前にどんな処理を何回繰り返すのかを決めておくのが一般的です。

#3. for文の書き方
for文の基本形は下記のような感じです。

“`javascript
for ( カウンタ変数定義と初期化; 繰り返し回数の指定; カウンタ加算幅) {
// 繰り返す処理を書く
}
“`
for文は、3つの引数を与えてあげるのが一般的です。

**1. カウンタ変数定義と初期化**
今何回目の処理かをカウントするための

JavaScript 配列やオブジェクトのマージ関数

## 同じKeyの値を足し合わせたい

こちらの記事をみていました。

【JavaScript】連想配列の配列に対して、同じkeyの値を足し合わせたい – Qiita
https://qiita.com/hirakuma/items/0c4fd425f76bccab858c

“`js
const objs = [
{key1: 100, key2: 200, key3: 300},
{key1: 100, key2: 150, key3: 100},
{key1: 100, key3: 200, key4: 100},
]

sumObjects(objs)
// {key1: 300, key2: 350, key3: 600, key4: 100}
“`

こういうデータ加工ニーズあるよな、と思い、コメント欄で自分なりの実装をしつつ、

何か工夫できないかと考えてみて、こうすればいいかと思い、複数のオブジェクトか配列をマージする関数を書きました。

“`js
const merge = (dataArray, func = v

JavaScript基本文法【関数】

##はじめに

現在、JavaScriptの独学をしています。

復習を兼ねて、今回は関数についてまとめます。

私と同じようにJavaScript初心者の方の参考になればと思います。

##関数とは

関数とは、タスクや値計算を実行する文の集まりのことです。

JavaScriptでは、関数オブジェクトとも呼ばれ、オブジェクトの一種です。

そのため、他の値と同じように変数へ代入したり、関数の引数として渡すことが可能です。

以下のように定義します。

“`js
function 関数名 (仮引数) {
// 色々処理・・・
return 関数の返り値;
}
“`

この定義方法以外にも、関数式で定義することもできます。

##関数式

関数式とは、関数を値として代入している式のことです。

“`js
// 関数式
const 関数名 = function() {
// 色々処理・・・
return 関数の返り値;
};
“`

関数式では右辺の関数名を省略できます。

このような名前を持たない関数を匿名関数とも言います。

関数式には上記のfunctio

【JavaScript】Intersection Observer APIを使ってtargetを表示遅延させたい

## Intersection ObserverAPIについて
Intersection ObserverAPIは、「画面上のある要素が、ブラウザ上の表示されている領域（viewport）に対してどの位置にあるかを監視して教えてくれる」という機能を持っている交差監視APIです。（IE11対応ならPolyfill必要）

言い換えると、ユーザーがブラウザ上のページをスクロールした時、特定の要素=targetがブラウザの表示領域に交わったかどうか（表示領域=viewportに入った時と出た時）を検知します。

引用: [HACKS Intersection Observer comes to Firefox](https://hacks.mozilla.org/2017/08/intersection-observer-comes-

Javascript基礎知識＃4（比較演算子と論理演算子）

##はじめに
この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

##目次
1. 比較演算子とは
2. 比較演算子一覧
3. 比較演算子の基本的な使い方
4. 論理演算子とは
5. 論理演算子一覧
6. 論理演算子の基本的な使い方

#1. 比較演算子とは
if文やfor文・while文などのループ処理の条件式に使われることが多い、
**2つの値を比較することが目的の演算子です**

#2. 比較演算子一覧
|比較演算子|意味|例|結果|
|—|—|—|—|
|> |左辺が右辺よりも大きい |2>1 |true
|>= |左辺が右辺より大きいか同じ|2>=2 |true
|< |左辺より右辺が大きい |2<4 |true |<= |左辺より右辺が大きいか同じ|2<=4 |true |=== |左辺と右辺の値と型が同じ |2===2 |true |!== |左辺と右辺が異なる

【JavaScript】要素に指定したCSSスタイルを取得したい！

#プログラミング勉強日記
2020年11月15日
ドットインストールでJavaScriptを学習中にふと、『CSSのスタイルはどうやって取得するのか？』と気になりました。
自分的には、ややこしかったので今後間違えないように記録していきます。

#取得したいこと
* CSSファイルに記述したbackgroundプロパティの値を取得したいと思います。


“`index.html

“`
“`style.css
.box {
width: 100px;
height: 100px;
background-color: rgb(204,204,204);
}
“`

#完成コード
まず最終的に取得で

Recoilの概要

この記事は[Core Concepts](https://recoiljs.org/docs/introduction/core-concepts) の翻訳記事です。 (2020/11/15時点)

## Overview

Recoil を使うと、atoms(共有ステート) から selectors(純粋関数)　を通してReactコンポーネントに流れていくデータフローを構築できます。

Atoms は コンポーネントがsubscribeするステートの単位で、selectors は同期的または非同期的にステートを変形します。

## Atoms

atomsはステートを表す単位となるものです。

atomsは更新可能でsubscribe可能な値です。つまりatomは文字通り更新できて、それに依存しているコンポーネントは更新時に新しいatomの値で再レンダリングされます。

また、atomsはランタイムによって構築されます。atomsはReactコンポーネントのローカルなステートと同じ場所で使うことができ、もし同じatomが複数のコンポーネントで利用されているとき、コンポーネントのato

Javascript基礎知識＃３(if文)

##はじめに
この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

##目次
1. HTMLを書き換える
2. if文（条件分岐）とは
3. else とは
4. else if とは
5. if文を入れ子(ネスト)で使う

#1. HTMLを書き換える

index.html に書いたものをJSを使って書き換えてみる

“`javascript:main.js
‘use strict’;
document.getElementById(‘id名’).textContent = 書き換えたい文字列();
“`

.getElementByIdでIdを取得して.textContentで書き換える。
例）以下

“`html:index.html

書き換え前

【JavaScriptメモ】map() メソッド、forEach()メソッドで配列のインデックスを取得したい場合は第二引数を指定する

# JavaScript の map() メソッド、forEach()メソッドにおいて対象配列のインデックスを取得したい場合は第二引数を指定する
こんにちは、ndj です。
`JavaScript` の `map()`メソッド、`forEach()`メソッドを使用する際に対象配列のインデックスを取得する方法を忘れていたので、メモです。

## 第二引数を指定すればOK
`map()` に渡す `callback`関数の第二引数を指定すればインデックスを取得することができます。
`forEach()` の場合も同様です。

“`sample.js
arr = [‘a’, ‘b’, ‘c’];

arrMap = arr.map((val, i) => `val: ${val}, index: ${i}`);
console.log(arrMap);
// result: [ ‘val: a, index: 0’, ‘val: b, index: 1’, ‘val: c, index: 2’ ]

arr.forEach((val, i) => console.log(`val: ${v

旧Edgeを弾く

“`javascript
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf(“edge”) != -1) {
alert(“旧Edgeには対応していません”);
};
“`
**これだけ**

おまけ
IEを弾く

“`javascript
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf(“msie”) != -1 || userAgent.indexOf(“trident”) != -1) {
alert(“IEには対応していません”);
};
“`

【 React Hooks入門】useStateを使って買い物リストを作るチュートリアル

#はじめに
これはReact Hooksの入門者向けの記事で、今回はuseStateを扱っています。
前半部分でReact HooksやuseStateの解説を行い、後半部分で関数コンポーネントを使った買い物リストの実装をチュートリアル形式で行っています。

チュートリアルではfreeCodeCampに掲載されていた[How to Build a Shopping List Using React Hooks (w/ Starter Code and Video Walkthrough)](https://www.freecodecamp.org/news/how-to-build-a-shopping-list-using-react-hooks-w-starter-code-and-video-walkthrough/)を実例として進めていきながら、解説を織り交ぜています。

React学習の参考になれば幸いです。

#このチュートリアルで学べる事
React Hooksの基礎にあたるuseStateの使い方の基礎。
関数コンポーネントでのstateの扱い方の基礎

#チュートリア

(備忘録) discord.jsでシャーディング

[discord.js](https://discord.js.org/)のシャーディングの仕組みがイマイチ分かりにくかったので、自身の備忘録も兼ねてまとめたいと思う。
ちなみに、公式のガイドのほうの解説は[**こちら**](https://discordjs.guide/sharding/)にある。

# シャーディングの方法
discord.jsでは[**ShardingManager**](https://discord.js.org/#/docs/main/stable/class/ShardingManager)を用いてシャードを一元管理できる。

シャーディング用のソースコード上でShardingManagerのインスタンスを作成。
その際、BOT本体が記述されているソースコードファイルを指定することで、それを元に各シャードを初期化できる。
注意しなければならないのは、そのBOT本体が記述されているソースコード単体で実行しても動作するように設計しておかなければならないということだ。

公式ガイドではShardingManagerのインスタンスを作成する際にBOTのトークンを

Vue.jsでカスタムなページタイトルを設定する

#はじめに
ちょっとの間悩んでた表題の問題が他人のコード見てたらふと解決したので軽くまとめていきます。Vue.jsでページタイトルをデフォルトのアプリ名から変更する方法です。

#手順
まず、Vue.jsでページタイトルを規定してるコードはpublic/index.html内にあります。

“`html:public/index.html





【JavaScript / jQuery】Googleドライブに保存した画像をHTMLで表示させる

####はじめに 初めての投稿です。自分の復習も兼ねて、Qiitaに記事投稿していこうと思います。 至らない点があったらスミマセン。 今回JavaScriptでご紹介していますが、変数にGoogleドライブのURLを格納できる言語でしたらどの言語でも問題ありません。 というより、imgタグに直接記述するだけならHTMLのみで完結します。

内容

JavaScript,jQueryを利用してGoogleドライブの画像をHTMLに引っ張ってくるという趣旨の記事になります。 趣味でよくiPadを使ってイラストを描くのですが、描いた絵を自分の開設しているWebページへ表示させる時にPCに送ってサーバに送って・・・という作業が面倒だったので、iPadから直接Googleドライブに画像を置いて、そこからプログラムで引っ張ってくればいいじゃないかと思ったのが始まりです。 Googleドライブに画像を保存している前提で執筆していきます。

Googleドライブに保存した画像の設定を変更する

コンテンツを右クリックし、「リンクを取得」を選択します。 ![スク

jQueryでタブをマウスオーバー した際に表示画面を切り替える

# はじめに 今回はjQueryを使って、tabをマウスオーバーした際にページリロードを行わずに表示を切り替える方法を記述していきます。 # 完成イメージ  # 環境 MacOS 10.15.7 ruby 2.6.5 Ruby on Rails 6.0.0 jquery 3.4.1 # 前提条件 - jQueryが導入済みであること。 # それでは作業していきます！ ## ①show.html.erbとcssを作成する。 まずはhtmlから作成します。今回はshow.html.erbというファイルに記述します。 ```erb:show.html.erb

<%# tab部分 %>

「画像でゴミ分類！」アプリ作成日誌day7～サイドバーのスライドメニュー化～

# はじめに 「画像でゴミ分類！」アプリ作成日誌7日目の今日はサイドバーのスマホ対応ということでHTML,CSS,JavaScriptをガッツリ書いて、横から出てくるスライドメニューを実装していく回です。 ＜記事一覧＞ - [「画像でゴミ分類！」アプリ作成日誌day1～データセットの作成～](https://qiita.com/eycjur/items/7d8223b28758c7dfaaa0) - [「画像でゴミ分類！」アプリ作成日誌day2～VGG16でFine-tuning～](https://qiita.com/eycjur/items/3e954cb70dc15f996c2d) - [「画像でゴミ分類！」アプリ作成日誌day3～Djangoでwebアプリ化～](https://qiita.com/eycjur/items/9c618538177c82f7fdc3) - [「画像でゴミ分類！」アプリ作成日誌day4～Bootstrapでフロントエンドを整える～](https://qiita.com/eycjur/items/7b58c28eb8b16e722b5d) - [

Javascript基礎知識＃２

##はじめに この記事は私の脱コピペを目指すために書いている自分用のメモです。 ※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。 ##目次 ・実行するための基本構文 ・文字を出力してみる ・計算してみる ・変数とは ・var let constの違い ##何かを実行させたいと気の基本構文 ```javascript console.log('Hello World'); //consoleは 'Hello World'を logしなさい。 //console にあたる部分をオブジェクト //'Hello World'にあたる部分をパラメータ //.log()にあたる部分をメゾットという ``` ##文字を出力してみる まずテキストエディタにファイルを準備して、 こんな感じに記述↓ ```javascript:main.js console.log('Hello World'); ``` ```javascript:console Hello World ``` この時、 「''」（シングルクォーテーション or ダブ

React やってみたら超簡単だった話(2020年11月版)

## React / Vue.js / Angular / jQuery Angularjsが出た時に、jQueryでもういいじゃん新しい言語覚えるのめんどくせーよと思いながらやってみたら、超便利で新しい言語ちゃんと覚えないとダメだなと改心したのが遠い分昔。 その後、Angularの頻繁なバージョンアップに嫌気がさしVue.jsを使ってみたら、Angularより随分整理されてて簡単でびっくりしたのが少し昔。 Vuetify とセットで利用するとほとんどコードを書かずにやりたいことができるし、typescript を使うと記述もシンプルで安全だし、もうこれで新しい言語覚えなくてもいいかと油断したのが少し前。 とは言え、Reactも触っておいた方がいいかなと触ったら、他のフレームワークとは**概念が違い**戸惑ったけれども**超簡単**でびっくりしたのが今日。 触ってみたいけど難しそうだなと思ってる方は是非触ってみてください。 # 特に便利と思ったところ ## jsx/tsx js/ts に html を直接埋められる。 以下のコードは等価。 ``` createElem

Firestoreでidのわからないdocumentを取得したいときはどうすればいいのか

[firestore](https://firebase.google.com/docs/firestore?hl=ja)はフロントエンドエンジニアが個人でwebサービスを作る際に、わざわざデータベースを一から作っていく必要がなく、数行のコードでデータを保存したり、取得したりととても便利なサービスです。 ただ、使いはじめの頃、必ずと言っていいほど`idのわからない(または自動で付与されたidの)documentをどうやって取得するのか`という壁が立ちはだかります。 [公式ドキュメント](https://firebase.google.com/docs/firestore/query-data/get-data)では`firebase.firestore.collection("cities").doc("SF").get()`で取得できると書いてあるけど、この例でのSFと言うidがそれ以外、もしくは複数のドキュメントをgetしたい場合にはどうすればいいのかと言う話です。 ## 結論：docを使わなくてもdocumentの取得は可能 [公式リファレンス](https://fire

セミコロンのつけ忘れを、JSはどこまで許してくれるのかを試してみた

# はじめに IT初心者の私ですが、普段はJavaScript, Node.js（以下JS）を使った開発をしています。 ここ数日、Javaを学び直そうとしているのですが、とにかくセミコロンをつけ忘れてはコンパイラに怒られています。 「JSなら実行してくれるのに・・」 **むしろ逆にJavaScriptがセミコロンのつけ忘れに寛容すぎるのでは？** そのような背景もあり、JavaScriptがどこまでセミコロンのつけ忘れを許してくれるのかを、簡単に検証してみました。 # この記事でわかること - JSだとOKだけどJava先生は怒る状態はどういうものか - JSが怒らないセミコロンのつけ忘れのギリギリのライン # 実行環境 - Java : paiza.io (openjdk version "15" 2020-09-15) - JS : paiza.io(Node.js v12.18.3) # Javaで怒られたソースコード まずこちらがJava学習中に怒られた案件です。 ```Java import java.util.*; import java.util.