パララックスでスクロール量を測って、ファミコンにカセットをさしてみた

# どうも7noteです。最新ゲーム機種がいろいろ出ている中であえてファミコンで勝負します。

パララックス効果を使って、ファミコンにカセットを差し込んでみました。
javascriptでスクロール量を測りつつ、その値に合わせてCSSを調整するような動きにしています。

学生の頃に書いたちょっと古いソースなので、お見苦しいところもあるかと思いますがご容赦ください。楽しんでもらえればと。

パララックスについての解説等はまた改めて記事書こうと思います。


## ソース

“`index.html

スクロールしてね

スクロールの値 | 0

[JavaScript]文字列の中に変数を含めるには

#初めに
簡単にアウトプットさせてもらいます

#文字列の中に変数を含める方法
JavaScriptでは2つの方法があります

1. +を用いてそれぞれの値を連結させる
2. テンプレートリテラルを使用する

#テンプレートリテラル
テンプレートリテラルは、JavaScriptの構文です。

バッククォートで囲むことで、文字列内に挿入することができます。

#テンプレートリテラル使用、使用しない比較
テンプレートリテラルを使用しない場合

“`javascript:コンソール
const muscle1 = “背中”
const muscle2 = “二頭筋”

const workout = “今日のトレーニングは” + muscle1　+ “と” + muscle2 + “です！”
console.log(workout)

#実行結果
#今日のトレーニングは背中と二頭筋です！
“`

テンプレートリテラルを使用した時

“`javascript:コンソール
const muscle1 = “背中”
const muscle2 = “二頭筋”

const workout

[JavaScript]JavaScriptのvar、const、letについて

#初めに
簡単にアウトプットさせてもらいます

#varとは
varの特徴として、再代入、再定義ともに可能です。

“`javascript:コンソール
var sample = “おはよう”

sample = “こんにちは”
#再代入OK

var sample = “こんにちは”
#再定義OK
“`

#constとは
constの特徴として、再代入、再定義ともに不可という制約があります。

“`javascript:コンソール
const sample = “おはよう”

sample = “こんにちは”
#再代入NG エラーが起きる

const sample = “こんにちは”
#再定義NG エラーが起きる
“`

#letとは
letの特徴として、再代入は可能ですが、再定義は不可という制約があります。

“`javascript:コンソール
let sample = “おはよう”

let = “こんにちは”
#再代入OK

let sample = “こんにちは”
#再定義NG エラーが起きる
“`

#まとめ
varは再代入、再定義ともに可能
constは

【JavaScript】前置演算 と 後置演算【備忘録】

インクリメント演算子とデクリメント演算子の前置と後置の違いのメモ。
どちらの場合もオペランドの値を1加算/減算するが、代入時の挙動が微妙に異なる。
※単純に代入処理が先か加算/減算が先かの違い

# 前置演算
インクリメント/デクリメントを行なってから代入処理を行う。

“`javascript
var x = 3;
var y = ++x;

console.log(x); // 4
console.log(y); // 4
“`

# 後置演算
代入処理を行なってからインクリメント/デクリメントを行う。

“`javascript
var x = 3;
var y = x++;

console.log(x); // 4
console.log(y); // 3
“`

近隣の市町村の新型コロナ発生状況を可視化する

今回もオープンデータの活用その２です。
過去記事: [自分の町の避難所情報をGoogle Mapsに表示する](https://qiita.com/tsuruoka91/items/4713c2a0b4cf10c6a137)

緊急事態宣言中で外出もままならない日々を過ごしていると思いますが、それでも最低限買い物には行かなければ生活はできません。そんなある日、家族から「近所の小郡イオンと甘木イオンどっちが感染のリスクが少ないの？」と聞かれました。うーんどっちだろう？
というわけでオープンデータから近隣の新型コロナ発生状況を可視化して判断してみようと思います。

最初に断っておきますが、私は医者でも感染症の専門家でもないので、この結果を踏まえて何かを訴えたり警鐘を鳴らす意図はありません。

# オープンデータの取得

まず、新型コロナの発生状況のデータを取得します。

[リンク：福岡県新型コロナウイルス感染症陽性者発表情報](https://ckan.open-governmentdata.org/dataset/401000_pref_fukuoka_covid19_patients)

【JavaScript】undefined と nullの違い【備忘録】

# undefined
変数の値が定義されていないことを表す値。以下のケースで返却される。

1. 変数が宣言済みであるが、値を与えられていない時
1. 未定義のプロパティや配列の要素を参照しようとした時
1. 関数で値が返されなかった時

“`javascript
// 1
var x;
console.log(x); // undefined

// 2
var obj = { text: “teststring” };
console.log(obj); // undefined

// 3
var y = console.log(“test”);
console.log(y); // undefined
“`

# null
空の状態を表すための値。
関数の返却値として考えると、

– `undefined`は返す値が決まっていない・定義されていない時に未定義の意味で返す
– `null`は何か返すべきだけど、返すものがないため空値を返す

# 参照
https://qiita.com/shuhei/items/199281e07925d24059d5

数値の小数点以下以外をカンマ区切りにする

この記事を書く数時間前、数値をカンマ区切りにしたいと思って手っ取り早くQiitaで手法を調べて使用したところ、「小数点以下を3桁までしか表示しない（`toLocaleString`）」や「小数点以下の数列もカンマで区切ってしまう（正規表現）」など、小数点以下について考慮していないものばかりでちょっと面喰いました。

“`js:なんてこった.js
var n = 123456789.01234;

function separate(num){
return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, ‘$1,’);
}

separate(n);
// “123,456,789.01,234”

n.toLocaleString();
// “123,456,789.012”
“`

カンマ区切りをするようなものは大きな数値であることが殆どなので、小数点以下を考慮する必要があまりないのでしょうね。ですがいずれにせよ、私の場合は考慮したかったので、以下のように正規表現を書き換えてみました。

“`js:これでどうだ.js

【JavaScript】Vue-chartjsを使い始める　ーー実装編

現場では、Charjsを使用して、グラフを描いています。
勉強ノードをメモします。

Chart.jsの公式サイト：https://www.chartjs.org/

##Chartjsを導入する方法：
1. 外部スクリプト

“`js

“`

2. インストール
　開発ディレクトリ内、npmで下記のコマンドでインストールする。
　(スタンドアロン版、バンドル版両方インストールされる)

“`
$ npm install chart.js –save
“`
下記のnode_modulesモジュールとpacage-lock.jsonパッケージが生成される
![スクリーンショット 2021-02-13 21.10.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684879/23c937eb-2f17-3

Nuxt.jsでAdobe Fonts（TypeKit）を使う

# Nuxt.jsでもAdobe Fontsを使いたい
静的なHTMLページをNuxt.jsで作り直そうと思ったのですが、Adobe Fontsの埋め込みコードを発行しても、以下のようにピュアなJS用のコードしか発行されない。

“`javascript:AdobeFontsが生成するJS
(function (d) {
var config = {
kitId: ‘各自異なるID’,
scriptTimeout: 3000,
async: true,
},
h = d.documentElement,
t = setTimeout(function () {
h.className = h.className.replace(/\bwf-loading\b/g, ”) + ‘ wf-inactive’
}, config.scriptTimeout),
tk = d.createElement(‘script’),
f = false,
s = d.getElementsB

VueとLaravelでStripeElementsを使ってクレジットカード情報を更新する方法

毎日投稿59日目

毎日記事を更新しているのですが、意外とネタは尽きないものです。

さて今回は、タイトルの通りStripeでクレジットカードの変更を行っていきます。

StripeのAPIについてはそこまで詳しく説明は致しません！

恐らくクレジットカードの情報を変更したいなと思った方は、Stripeの基礎的な部分は理解していると思うので。

イメージとしてはこんな感じです。


また、HTMLやCSSの記述が多いのでここらへんはコピペしてください。

話はこの辺にして早速説明を見ていきましょう！

#StripeElementsの設置#

Stripeでクレジットカードの情報を変更するには、カード番号、有効期限、セキュリティコードを入力してもらいトークンを作成します。

そのトークンを使ってクレジットカードの情報を変更します。

とりあえずStr

【Vue3】オブジェクトのプロパティを追加してもリアクティブに動作するようになりました

[【Vue.js】オブジェクトのプロパティを追加してもリアクティブに動作しなかった時の備忘録](https://qiita.com/kenji7157/items/153c207795f45709406b)にて、`Vue2.x`において、オブジェクトのプロパティを追加してもリアクティブに動作しないこと、またその解決策について書きました。

`Vue3`で同じことをしようとすると、どのような挙動になるのか確認してみました。結論を先に言ってしまうと、`Vue3`から**オブジェクトにプロパティを追加した場合もリアクティブに動作するようになりました。**

## Vue3環境の準備
vue-cliコマンドを利用して`Vue3`をインストールしていきます。`vue create`コマンドで`Vue 3 Preview`を選択します。（vue-cliがv4.5以上でないと`Vue3`環境は作成できません。）

“`
vue create study-vue3
? Please pick a preset: Default (Vue 3 Preview) ([Vue 3] babel, esl

【Vue】Vuetify.jsにコントリビュートするための準備


`Vuetify.js`にコントリビュートしてみたい！という方に開発環境の構築を本記事でまとめました。

## コードをcloneする

“`
git clone https://github.com/vuetifyjs/vuetify.git
“`

以降のコマンドはすべて**clone**で取得した`vuetify`ディレクト配下で実行しています。

## yarnコマンドを使用できるよう準備

– npmからyarnをインストールする

“`
npm install -g yarn
“`

## パッケージをインストールする
“`
yarn
“`

## ビルドの実行
“`
yarn build
“`

## 開発サーバの起動

– 起動する前に、`packages/v

ES2015における{ClassName}構文についての解説

## ES2015における{ClassName}構文についての解説

１．前提知識となりますが、クラスとは、function型のインスタンスである。例として、任意のクラスClass01を定義し、typeof Class01を実行して戻り値が’function’であることをそれを証明します。補足の例として、下記構文を参考に。

    // 下にあるClass01定義と同じクラス（constructor）を定義している
    let Class01 =
      class Class01 {
        p1: string = '';
     }

    class Class01 {
      p1: string = '';
    }

２．{ClassName}についての説明です、同じ効果を持つ二つの構文を参考に

    // 下にある構文と同じ効果を持つ
    let v1 = { Class01 };

    let v1: { Class01: typeof Class01 } = {
      Class01

【Express】静的ファイルをホスティングする方法

#プログラミング勉強日記 2021年2月13日 静的ファイルのホスティングをする方法を間違えていたため、以下のようなエラーが出た。 ``` net::ERR_ABORTED 404 (Not Found) ``` #Expressで静的ファイルをホスティングする方法 　Expressで、　画像、CSSファイル、JSファイルなどの静的ファイルをホスティングするためには標準で組み込まれている`express.static`を使用する。 ```js:関数のシグネチャ express.static(root, [options]) ``` 　`express.static`の基本的な使い方は、Applicationオブジェクトの`use()`を使ってミドルウェアの設定を行う。 ```:ファイルの構造 app.js public/ +-- images/ +-- js/ +-- css/ ``` ```js:app.js app.use(express.static(__dirname + '/public')); ``` ```js:app.jsの全体

Node.js からC++関数への引数、返り値まとめ

## はじめに - node.jsからC++関数を利用する際に、引数・返り値の渡し方について困ったことはありませんか？ - この記事では、`node-addon-api` を使う場合の、引数・返り値の受け渡し方をまとめています。 ## 環境構築がまだの方は？ - この記事の内容をトライする前に、以下の記事で環境構築を完了させてください！ - [【Step-By-Step】Node.jsからC++クラスを利用する](https://qiita.com/NA_simple/items/dc31f9ae9519602f9f50) ## 目次 - [1. 関数の基本形](#1-関数の基本形) - [2. 値の受け渡し](#2-値の受け渡し) - [3. 配列の受け渡し](#3-配列の受け渡し) - [4.（応用）異なるプリミティブ型を配列に入れて返却する](#4-応用異なるプリミティブ型を配列に入れて返却する) - [5. 試してみよう](#5-試してみよう) ##1. 関数の基本形 - node-addon-apiを利用する場合、ラップされるC++の関数は以下のように

音楽理論の学習・音楽制作支援ウェブアプリを作りました。

こんにちは！クフルダモノーツのYoshito Kimura(k1mu)です！ 音楽理論の学習・音楽制作支援ウェブアプリ「O-TO」を作りました。 音楽を20年以上やっている僕が「あったら良いな」と思う機能を具現化しました。 プログラミングは得意ではないので、技術的に優れ

Vueでローディング画面の実装

#概要 Vueでローディング画面を作成します。 こういうの↓  #実装 ローディングのモジュールはいくつかありますが、今回は`vue-loaders`というモジュールを利用します。 アニメーションの種類が多かったのでこれにしました。 導入方法はこちら [github](https://github.com/Hokid/vue-loaders?ref=kabanoki.net) 今回は`mounted()`のタイミングでローディングを開始し、`mounted()`が終わったタイミングでローディングを終了したいと思います。 ##store ```store/loading.js const state ={ loading: true, //true:ローディングを表示, false:ローディング非表示 }; cons

【Vue.js】はじめてのVue.js〜概要＋インスタンス＋ディレクティブ〜

今回はJavaScriptのフレームワークである「Vue.js」についての記事です。学習途中で至らない点等あると思うのですが、備忘録兼自分と同じ初学者の方向けにまとめてみました。 現在はVue.jsを用いてポートフォリオを書き換えつつ、学習を進めています。記述したコードも用いているので、是非参考にしてみてください。ポートフォリオは[こちら](https://portfolio-f4b3a.web.app/)、GitHubは[こちら](https://github.com/watanabedaigo/Portfolio)のページをご覧ください。ポートフォリオ内の学習スキルを記述した以下の部分と ヘッダーのアイコン部分を ES2015における分割代入の使い方まとめ

# ES2015における分割代入の使用例 ## 使う場面： １．複数の変数の宣言・代入を一つの文の中で行うことができる ２．データの代入元がオブジェクトのプロパティ群、或いは配列となります。 ## 使い方： ### １．オブジェクトの分割代入 １．宣言なしで代入のみを行う - データ元となるオブジェクトのプロパティ名と一致する変数にのみ対して代入を行う。 - {}がブロック構文と解釈されないために、 ()で囲む必要がある。

    const obj1 = {
      a: 1,
      b: 2,
      c: 3
    };

    let b, c;
    ({ b, c } = obj1);
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`c:${c}`);  // 出力結果：c:3

２．宣言と代入を同時に行う

- 変数宣言に使うキーワードconst、letを使うこと
- ()をつける必要がない
- オブジェクトのプロパティ名と一致する変数名が必要

元記事を表示

vue.jsでaxiosを使用してログイン時にレスポンスからユーザ情報を取得する

# 初めに
RailsとVue.jsを使用してアプリを作成していて、ログイン時にvue側でユーザ情報を取得したいと思ったのでやってみた。

謎にハマってかなり時間がかかったので、備忘録として残しておく。

# やり方
取得するときのvue.jsの処理。簡潔にするために色々と省略している。

```
methods: {
　　loginUser: function () {
　　　axios.post('api/auth/sign_in', this.user).then((response) => {
　　}, (error) => {
　　　console.log(error)
　　})
}
```

この処理を行うと以下の結果が返ってくる。今回はテストで「Advanced REST client」を使ってる。

![スクリーンショット 2021-02-13 15.32.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/995665/61d49a4d-126d-a7a6-309d-0a72268bb