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

[Javascript] Const, Let, Varの違い（ES6関連）

## Javascriptの変数

Javascriptには、変数を宣言するキーワードの`const`、`let`、`var`があります。
これらのキーワードは以下について違いがあります。

・初期値
・重複した値割り当て
・呼び出し範囲

まずconst, let, var すべての変数は下記のように
、コンマで区切って複数の変数を定義することができます。

“` javascript
const category= “header”,
key= “content-Type”,
value= “application/json”;
“`

## Constについて

`const`は値が変わらない変数を宣言するキーワードです。
`const`は必ず初期値を設定しなければならず、
宣言した変数に対して、あとで値を割り当てることはできません。

`const` で宣言した変数に値を再度割り当てる場合には、
次のようなエラー(TypeError)が発生します。

“` javascript
const key = “content-Type”;
key =

Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #5 ログイン・ログアウトの実装

←[Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #4 サインアップページの作成](https://qiita.com/rf_p/items/c1162fc121d6a4ef53e6)

# ログアウト機能の実装

先にログアウトを作ります。

“`diff:layouts/default.vue
…

mdi-logout

…
export default {
…
this.$store.commit(‘setAuth’, {})
})
}
+ },
+ methods: {
+ logOut () {
+ this.$store.dispatch(‘logOut’)
+ }
}
}

`

FlaskにAjaxリクエストのFetch APIを組み込んだシンプルなアプリを作成してさくっと説明する

# はじめに
・Flask と JavaScript を勉強し始めた方向けとなります
・[TheCatAPI.com : Beta](https://api.thecatapi.com)を使用して、猫の画像をAjaxリクエストで取得するアプリを作成します

# Fetch API で猫の画像を取得するFlaskアプリを作成する

Flaskを用意します。
Flaskがまだちょっとよくわからないという方は以下の記事を確認してください。
[【Pythonで多分人気2位のWebアプリケーションフレームワーク】Flaskの基本をわかりやすくまとめる](https://qiita.com/gold-kou/items/00e265aadc2112b0f56a)

構成は以下です。

“`
app.py
templates
└─hello.html
“`

“`app.py
from flask import Flask, render_template
app = Flask(__name__)

@app.route(‘/’)
def hello_world():
return

お手頃・高機能スライダーはSwiper使っておけばいい

# 概要
実装をする中で実装可能だけど、そこに時間あんまり費やしたくないなぁって時結構ありますよね。
画像のスライダー機能の実装でそのような状況になりました。
自作実装もできるけど。。アニメーションを場面ごと切り替えたりするのが結構手間＞＜
そこで、よく使われているライブラリを探していたところ`Swiper`を見つけて実装がとても楽だったので共有したいと思います。

### 実装例
スライダーで使うcssをimportする

“`tsx:index.tsx
import “swiper/swiper.scss”;
import ‘swiper/components/pagination/pagination.scss’;
“`

スライダー用のコンポーネントを実装する

“`tsx:SwiperComponent.tsx
import * as React from ‘react’;
import SwiperCore, { Pagination, Autoplay } from “swiper”;
import { Swiper, SwiperSlide } from “swi

【JavaScript】setTimeoutを使って処理のスケジューリング

`JavaScript`で指定時間後に処理を実行するにはsetTimeoutを使用します。
#■書き方
第二引数に与えられた実行タイミング(ミリ秒)で、第一引数に定義された処理内容を1度実行します

“`
setTimeout(処理内容,実行タイミング(ミリ秒))

“`

#サンプルコード
以下は実行開始から5秒後にアラート表示される処理です。

“`javascript:example.js

var alertMessage = function(){
alert(“5秒経過しました！”);
}
setTimeout(alertMessage, 5000);
“`
#関数に引数を渡す場合

“`javascript:example.js

function hello(name) {
alert(‘Hello,’ + name);
}

setTimeout(hello, 5000, ‘Taro’);
“`
#コールバック関数を使用する場合

“`javascript:example.js

function hello(name) {
alert

JavaScriptを使ってTwitterのbotを作ってみた　その１

#JavaScriptを使ってTwitterのbotを作ってみた　その１
　プログラミングを勉強し始めて約５ヵ月くらい。そろそろGitHubやQiitaを活用してみようかなと思い、アカウントを作成してみました。
今回は初投稿ということで、何の記事を書こうか迷いましたが、自分がJavaScriptを使ってTwitterのbot作りに挑戦していたときに、割とJavaScriptを使ったTwitterのbot作りに関するサイトが少ないなと感じたので、この記事を書こうと思いました。

　プログラミングでTwitterのアカウントをいじることで、今自分の使っているアカウントにフォロー機能やいいね機能などを自動化させることも出来ますし、この記事を見てくれている方がやろうとしているbot作りだって出来ます。簡単な機能だけしか使わない場合は、Twitterのbotが手軽に作れるサイトで出来ますが、プログラミングで作ることで、さらに凝った機能を搭載したbotを作ることが出来るので、すごくおすすめです！

　なお、TwitterのAPIキーの取得方法や必要なツールのインストール(node.jsやtwitt

ライブラリレスで0からJavaScriptで手書き数字認識やってみた（MNISTデータ使用）

# 概要

前回は学習用データとテストデータの読み込みを実装しました。
[機械学習メモ – ブラウザ上でMNISTデータファイルをDrag&Dropで受け取って手書き数字をとりあえず表示する – Qiita](https://qiita.com/kob58im/items/80971a854efa92871fa9)

今回はバックプロパゲーションを実装し、実際に学習～認識までを試してみました。（中間層は１個だけ。フィルタ層とかは無し。）
ネットワークの学習の様子を可視化したかったですが、エッジ数が数万個になるので断念しました。。

# データ読み込み後の画面キャプチャ


# CodePen上で動作するもの

対象のデータをDrag&Dropすると、学習用データ60000個中の20000個分を学習します。※十数秒以上はかかると思います。
今回の実

非同期処理async,awaitについて

# 非同期処理について
JavaScriptでは非同期処理を行う選択肢は主に3種類あります。
「Promise」「async,await」「Observable」です。
ここではasync,awaitについて記載します。

## async,awaitの特徴
async,awaitはPromiseの派生です。
Promiseを簡略化して記載することができます。
また、非同期処理を直列で実行したい場合に入れ子にならない利点があります。
Promiseとasync,awaitは混同して利用することができます。

## 構文
Promiseで記載した非同期処理をasync,awaitに書き換えます。

***Promise***

“`
method() {
asyncFunction(parameter).then(closureOfSucceedCase).catch(closureOfFailureCase);
}
“`

***async, await***

“`
async method() {
try {
const response = await as

JSで関数の処理から本質的でない処理を分離するProxyパターン

どのような言語であり汎用的な関数の設計は
SOLID原則の単一責任の原則に基づいたほうがいいと思っています。

ただ、ビジネスロジックが入り込むと特定の処理に対し、ログやメール送信するなど
いわゆる付随する組み合わせ(Compound)な処理になっていきます。
すると、本質的な処理から付随した処理を分離しづらくなっていきます。

このようなオブジェクト指向ではうまく分離できない特徴（クラス間を横断 (cross-cutting) するような機能）をアスペクトと呼びます。

JavaScriptでは関数に対してProxyを使うことで体系的に本質でない処理を関数から分離することが出来ます。

参考：[handler.apply()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply)

“`js

// 単体テストするのはこっち（本質的な処理）
function sum(a, b) {
return a + b
}

const handl

非同期処理Promiseについて

# 非同期処理について
JavaScriptでは非同期処理を行う選択肢は主に3種類あります。
「Promise」「async〜await」「Observable」です。
ここではPromiseについて記載します。

## Promiseの特徴
非同期処理の完了を待ち合わせ、成功した場合、失敗した場合の処理を登録することができます。
また、複数の非同期処理を纏めて実行し、全ての完了を待ち合わせることもできます。

## 構文
### 利用側

#### 一つの非同期処理を実行する

“`
asyncFunction(parameter).then(closureOfSucceedCase).catch(closureOfFailureCase);
“`

closureOfSucceedCaseには非同期処理が成功した時の処理を登録し、
closureOfFailureCaseには失敗したときの処理を登録することができます。

“`
(非同期実行結果から受け取るパラメータ) => { 非同期が完了したときの処理 }
“`

例) REST APIを呼ぶときのサンプルコード

“

Redux ExampleのTodoListをReact Native（expo）に置き換えて解説-ToggleTodo編

Redux ExampleのTodoListをReact Native（expo）に置き換えて解説のToggleTodo編です。
AddTodo編は以下です。
[Redux ExampleのTodoListをReact Native（expo）に置き換えて解説AddTodo編](https://qiita.com/tenshinhan_yamucha/items/93307c46bd6c7b3c1652)

注：僕は掛け出しエンジニアであり、自分の勉強としての投稿という面もあるので、もしミスや勘違い、ベストプラクティスではない、等がありましたら、コメントしていただけると幸いです。

#TODOに属性を追加
まずは、todoにcomplete属性を追加してtodoが完了済みなのかactive状態なのかを判定できるようにします。初期値はfalseにしておきます。

“`reducers/todos.js
const todoReducers = (state = [], action) => {
switch(action.type){
case ‘ADD_TOD

JavaでTODOアプリを制作しよう9 TODOの表示を作成日時が新しい順にソートする + 期日のデフォルトを当日の日付にする

こんにちは。
今回の記事では今まで作ってきたTODOの微調整を行います。

## TODOアプリ作成リンク集
[1: [超基礎の理解] MVCの簡単な説明](https://qiita.com/nomad_kartman/items/bce2f4831b7b769f84f2)
[2: [雛形を用意する] Spring Initializrで雛形を作ってHello worldしたい](https://qiita.com/nomad_kartman/items/e173ea95b3ead96a412a)
[3: [MySQLとの接続・設定・データの表示] MySQLに仮のデータを保存 -> 全取得 -> topに表示する](https://qiita.com/nomad_kartman/items/f5f13037f048eeecf492)
[4: [POST機能] 投稿機能の実装] (https://qiita.com/nomad_kartman/items/113cdfc3c5cd1f5c0cef)
[5: [PATCH機能] TODOの表示を切り替える] (https://qiit

Javascriptの構文

このチュートリアルでは、Javascriptにおける大文字小文字の区別、識別子、コメント、文、式について学べるように記載しました。

#####Javascriptにおける大文字小文字の区別
変数、関数、名前、クラス名など含むすべてのJavascriptは、大文字小文字を区別します。
例えば、関数にinstanceofという名前をつけることはできません。
それは、キーワードとして既に使用されているからです。
ただし、instanceOfであれば有効な関数名として使用できます。

#####識別子
識別子は、変数名、関数名、パラメータ名、クラス名です。識別子は１つあるいは複数の文字から成っており、以下の規則があります。

* 最初の文字は大文字小文字の全て、アンダースコア、$のみ使用可能
* ２文字目以降は、上記に加えて数字が使用可能

使用できる文字は、アスキー文字のみに限定されませんが拡張アスキー文字やUnicodeは推奨されていません。
識別子にはキャメルケースを使用するのが最良の方法です。
キャメルケースとは、最初の単語を小文字で開始し、次の意味を成す単語を大文字で開始することで

next.jsでdotenvで環境変数を設定するのは間違い！たった3分で環境変数を設定する方法

#概要
・next.jsでは「**.env.local**」ファイルで環境変数を設定できる。
・クライアント側でも環境変数を設定したいときは接頭語に「**NEXT_PUBLIC_**」をつける
・開発環境は「**.env.development**」、本番環境は「**.env.production**」でそれぞれの環境変数を設定できる

#環境変数を設定する（サーバー編）
next.jsでは簡単に環境変数を変更する仕組みがあります。
ルートディレクトリに「**.env.local**」ファイルを置き、その中で定義した環境変数はアプリの中で使うことができます。

たとえば、開発環境と本番環境で異なるデータベースを使いますよね。そんな時に「.env.local」ファイルに設定すれば環境変数をアプリ内で利用できます。

“`.env.local
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=root
“`

“`環境変数の使用.js
export async function getServerSideProps(context) {
con

jQueryのプラグインを複数追加したら動かない

##はじめに
自分の振り返りを兼ねて、ここに記していきたいと思います。
jQueryのプラグイン「drawer.js」を新たに実装したとき、ディベロッパーツールでエラーが起きていることを発見しました。
原因と解決方法を記していきたいと思います。
##原因
Uncaught TypeError: $(…).drawer is not a function at HTMLDocument. (index.html:747)
一体なんだ？と詳しくみてみると
エラー箇所はHTML内の下記に示されていました。
ただし、コード自体に誤りはなさそうでした。

“`html

“`

上記の場合だけでは、反映することができず、ドロワーメニューは開くことができません。
いろいろ調べた結果、、、
今回の場合は、他のプラグインを入れていることで動かなくなっている
つまり、**コンフリクト（プラグイン同士の競合）** が原

JavascriptにおけるHello Worldの例

#####概要
このチュートリアルは、HTMLページにJavascriptコードを埋め込む方法について示します。

HTMLページにJavascriptを記述するには\要素を使用します。
HTMLページにJavascriptを記述する方法は、以下の2つがあります。

* HTMLページに直接Javascriptコードを埋め込む
* 外部にJavascriptコードを記載したファイルを作成し、それを参照する

#####HTMLページへのJavascriptコードの埋め込み
HTMLページに直接Javascriptコードを埋め込むことは、推奨されていません。
この方法で記載する場合は、検証目的にみにするべきであります。
\要素に記載されたJavascriptコードは、上から下まで解釈されます。

“`html





<

InstagramのDMを保存する方法

# 背景
最近は、LINEよりもインスタグラムのDMを使用する方が増えてきたようです。
しかし、インスタグラムのDMはメッセージを検索したり、遡りすることができません。
そこで、インスタグラムの画面から、JavaScriptを実行して、テキストとして保存する方法をご紹介します。(利用規約的にもセーフだと思います。アウトだったら消します)

# 手順
手順を示します。途中で失敗したら、ブラウザの更新ボタンを押して、やり直してください。

1. PCブラウザで保存したいDM画面を開きます。https://www.instagram.com/direct/t/[番号]
2. ブラウザの検証機能を開き、コンソール画面を開きます。
3. 以下のコードを実行して、保存したいところまで遡ります。(量が多いと時間かかります)

“`
timer = setInterval(() => {
document.getElementsByClassName(‘frMpI -sxBV’)[0].scrollBy(0, -window.innerHeight);
}, 100)
“`
4.保存したいと

初心者が今はやりの技術を調べてみた

# 目的
今回、Node.jsを使ってQiitaAPIを使っていろいろやってみようということで、今、初心者向けには何が流行っているのかを調べてみました。

# 調査方法
QiitaAPIを使って、「初心者」という単語を含んでいる記事を検索しました。
プログラム実行時点（2020年9月27日11時30分時点）で投稿時間が新しいものから上位100件を対象としています。

# コード
“`Javascript
// axiosモジュールを読み込む
const axios = require(‘axios’);

// main()関数を定義する
async function main() {
// QiitaAPIで「初心者」という単語で記事を検索する
let response = await axios.get(‘https://qiita.com/api/v2/items?per_page=100&query=’ + encodeURIComponent(‘初心者’));
// 結果を出力する
for (let i=0; i

JavaScriptの基礎

### JavaScriptの基礎を復習しました。
まだまだHTMLとCSSを組み合わせて、カレンダーを作ることを目指しています。
### 学習したコード
“`JavaScript
var firstName = ‘myname’;
var age = 32;
console.log(firstName + ” + ‘ is’ + age);

var job, is front engineer;
job = ‘driver’;
is front engineer　= false;

console.log(firstNa me + ‘is a ‘ + age + ‘ year old ‘ + job +’.Is I front engineer? ‘ + is front engineer);
// Variable mutation
age = ‘thirty two’;
job =’office worker’;

alert(firstName + ‘is a ‘ + age + ‘ year old ‘ + job +’.Is I front engineer? ‘ +

Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #4 サインアップページの作成

←[Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #3 個別記事ページの作成](https://qiita.com/rf_p/items/fc7f0490a62b1f98f487)

# サインアップ(登録)ページの作成

サインアップページ及びそのロジックを作っていきますが、難易度が一気に上がります。
一気にすべて理解しようとせず、少しずつコードを読み解いていってください。

まずはサインアップページを作ります。

“`vue:pages/sign_up.vue