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

純正律の平均律からの差（セント）を計算

#はじめに
純正律のミとソとラは平均律から14セント下、2セント上、16セント上は覚えてるのですけど、レとファとシは覚えられず、毎回ググってるので、計算方法を覚え書き程度に。
#結果
取り急ぎ結果を
数値は純正律の平均律からの差(セント)

|Do |Re |Mi |Fa| So |La |Ti |
|— |— |— |— |— |— |— |
|0 |+4 |-14 |-2| +2 |-16 |-12 |

#オクターブとは？
基準周波数の２倍が１オクターブ
これは平均律も純正律も同じ。

#平均律とは？
１オクターブ(2倍)を12等分したものが平均律の半音の幅
JavaScript的な表現だとこんな感じ。

“`javascript

Math.pow(2,1/12)
“`
#セントとは？
平均律での半音を100等分した幅
よって、オクターブの1200等分
JavaScript的な表現だとこんな感じ。

“`javascript

Math.pow(2,1/1200)
“`
#純正律とは？
１オクターブ(2倍)を整数比で分割したもの。

Line Botで単語帳を作成してみた

#概要
line botとgoogle spreadsheetのマクロ機能(GAS)を用いて単語帳を作成しました。
とても簡易的な単語帳ですが、簡単に作成できますので使いたい方はぜひコピペして使ってみてください。

#作成したきっかけ
資格の勉強の際に参考書を出さずに電車で携帯で勉強したかったからです。
また資格勉強のアプリなどはありますが、使い勝手が悪く、自分でカスタマイズできる単語帳が欲しかったからです。

#必要な環境
・line bot用のchannel
・googleアカウント
*上記は二つはwebで調べれば簡単に作成できます。

#作成手順
###1,google spreadsheetにプログラムを作成する
google spreadsheetを開き、ツール→スクリプトエディタの手順でスクリプトエディタ
を開いてください。
今後作っていきたいもの

##自己紹介
現在新しく大学4年生になる学生です。2月頃までビジネス職で就活をしていました。
が、過去に抱いていた「誰もが夢を諦めないでいい環境を作りたい」
「人や物の秘めた可能性を諦めたくない」というぼんやりとした仰々しい夢を諦めきれず、
より多くの人に影響を与える仕事をしたいと自分の可能性だけを信じて
3月よりエンジニア職での就活に切り替えました。
深掘るとまだ理由はありますが、後に記したいと思います。

####開発環境
*AWS Cloud9*
####使用言語
*Ruby/Ruby on Rails*
*JavaScript(Vue.js)*

を軸に作っています。
プロトタイプを作り次第AWS,Dockerなどの
インフラ周りも学習し整え、UI/UXなどにもこだわった
より実務に近いSPAを制作したいと考えております。
とりあえず現在作っている・作っていきたいものとしては２つ程あります。

###1.「夢を語る場所」としてBucket List
(制作中2020/04/06~)
作ろうと思ったきっかけは、就活やSNSでのマウント合戦に疲れ、
将来仕事をする意味や楽しみを全く

スライドをjQuery & TweenMax & CSS3の合わせ技で自作する

# なぜ、スライダープラグインを使わなかったのか？
お客様が、「是非このサイトのスライドを実装して欲しい！」と強いご要望があったからです。
そのサイトのソースを見ると、バリバリのフルスクラッチ！！
自分の腕では到底真似できません:joy:

これは、既存のスライダープラグインで、
うまく実装できるか分からなかったので、
jsライブラリーで、自作スライドをカスタマイズすることにしました。

# 実装したかった内容

## 表示されているスライド以外にもclassを付与する
– **「表示されているスライド」
にclassをつけて、CSS3 Animationを発火させる。**

というのは、よくあるのですが、

– **「表示された直後のスライド」
にもclassをつけて、CSS3 Animationを発火させる。**

という方法は見たことがなかったので、これをどうするか悩みました。。。

## スマホの時、スライドをスワイプさせる
これは、スライダープラグインで当たり前の機能ですが、
自作でできるかちょっと不安でした。。

# 実装方法
## クラス付与させる方法

実装したいスラ

青空文庫のルビ（ふりがな）を非表示にするブックマークレットをChrome拡張に

#この記事は
青空文庫のHTML版から、ルビの非表示・表示を切り替えるブックマークレットの記事です。ずっとやりたかったブックマークレットからChrome拡張への作り替えも試しました。

##背景
ひょんなことから著作権フリーなテキスト文書が必要になりました。読むのが目的ではなくて、テキストOCR系のためです。ということで、青空文庫にお邪魔したわけですが、、

青空文庫の文章はルビが丁寧に振ってあります。文字として処理しようとすると、漢字とフリガナが1つずつ出てきてしまい、具合が悪いです。フリガナじゃまだな。

ということで、**ブラウザの表示から消してしまおう** ということです。

>夏目漱石　吾輩は猫である
>https://www.aozora.gr.jp/cards/000148/files/789_14547.html

##フリガ

Concurrent Mode時代のReact設計論 (5) トランジションを軸に設計する

この記事は「Concurrent Mode時代のReact設計論」シリーズの5番目の記事です。

## シリーズ一覧
– [Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理](https://qiita.com/uhyo/items/4a6315bfccf387407631)
– [Concurrent Mode時代のReact設計論 (2) useTransitionを活用する](https://qiita.com/uhyo/items/ba49b25f0a206e933e4d)
– [Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか](https://qiita.com/uhyo/items/27c1282addc06b17a980)
– [Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む](https://qiita.com/uhyo/items/4c45672874874a2aad11)
–

Dialog を Modal で使うための最小のコード

この記事は dialog を使ってるので Chrome でみてください。

# 最小のコード

HTML で Modal Dialog を使う最小のコードはこんな感じ。

“`html

Hello

Result:
“`

“`javascript
const I = $ => document.getElementById( $ )
const dialog = I( ‘Dialog’ )
I( ‘DialogCancel’ ).onclick = ev => dialog.close( ‘Cancel’ )
I( ‘OpenDialog’ ).onclick = ev => {
dialog.showModal()
dialog.

sequelize.jsを使ってみる。

# sequelize.jsとは
node環境でDBを操作するための便利なライブラリです。
サーバーサイドをnode.jsで実装する際にexpress.jsと合わせて使用します。

CLIによるモデルの作成とDBマイグレーションについて説明した後、
ORMとしてのサーバーサイドでの呼び出し方法について記載します。

詳細はこちらをご参考ください。→https://sequelize.org/master/

# 導入方法
npm install –saveする。

“`sh
npm install –save sequelize
“`

## モデルの作成とDBマイグレーション
モデル作成とDBへのマイグレーションはsequelize-cliを使用します。
###インストール

“`sh

npm install –save sequelize-cli
“`

### 初期化処理

“`sh
./node_modules/sequelize-cli/lib/sequelize init
“`
コマンドを打つと、config、migrations、modelsといったデ

【jQuery】ログイン画面をフェードインさせたい

前回のjquery導入が完了し、
最初のログイン画面をフェードインさせたかったので
簡潔にご紹介。

# アクセスして少ししてから表示させたい
[](https://gyazo.com/2ba18fd5073ba877403b2210077323f8)

## jsファイルに記述

“`js:sample.js
$(‘head’).append(
‘