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

小学生時代の僕へ、「OCRで【いつもの作業】やっておいたよ！」

# はじめに
### 皆さん苦手な食べ物はありますでしょうか？
私にはいくつか苦手な食べ物がありますが、その中でも***「豆全般」苦手***です。

え？豆？なんで？ってよく言われますが、正直なんでかはよくわかりません。
細胞が拒否している（アレルギーではありません）のかなと思います。
（こしあん、味噌、醤油OK/つぶあん、豆腐NG）

前置きはさておき、私は小学生の頃毎月配布される給食の献立表をもらったらすぐに、***豆が書かれている箇所すべてにマーカーを引いていました(笑)***。

献立表にマーカーを引くメリットは以下の通りです。

– 前もって豆が出てくるとわかるため心の準備ができる
– その日の給食までに、友人に食べてほしいとお願いできる

とはいえ、毎月献立表のすべての豆にマーカーを引くのは非常に大変です。
そこで、今回はどうにか「小学生の頃の僕」を楽にしてあげたいと思います。

# 調べてみた
じゃあ実際にどうやるのか？と考え調べてみたところなにやら***「OCR」***という技術がよさげな感じがした。

### OCRとは？
> OCRは、Optical Charact

3Dオブジェクトに行列を適用してX,Y,Z軸で回転させる – Three.js

`rotation`プロパティでの回転は、X,Y,Z軸について各1回しか回転させることができないので、複数回回転させる場合は、`Matrix`を使って回転させるのが楽。

See the Pen
Rotat

MathJaxを使ってWebページ上で数式をリアルタイム編集する

# やってみた

See the Pen
DynamicEditMathText_UsingMathJax by kob58im (【絶対にやったらダメ】JavaScriptの勉強をしてたらバグった話

こんにちは。

未経験からエンジニア転職を目指している、現役体育教師のしろです。

今回は、JavaScriptの勉強をしていたときに起こった悲劇についての記事。

こちらをご覧ください。


お分かりでしょうか。笑

問題はここですね。


つまり、私は「0に対して2をかけ続けなさい！」というとんでもない指令を出していたのでした。

これをブラウザ上で出力したところ、しっかりとフリーズしました。

深く学ぶた

alertメソッド、confirmメソッド、promptメソッドの違い

#はじめに
タイトルに記述した３つのメソッドは全て“window“オブジェクトのメソッド。
３つのメソッドの挙動が似ているためそれぞれの違いをまとめます。

## alertメソッド
> Window.alert() メソッドは、オプションの指定されたコンテンツと OK ボタンを持つ警告ダイアログを表示します。

“`

“`

実行結果

## confirmメソッド

>Window.confirm() メソッドは、メッセージと、OK, キャンセルの 2 つのボタンを持つモーダルダイアログを表示します。

※モーダルダイアログ・・・閉じるまで親ウィンドウの操作ができなくなるダイアログのこと
（[「分かりそう」で「分からない」でも

PlayにAjaxでCSRFトークンを送る方法

Play Framework(2.8)を使って、Ajaxでデータを送信する時の、CSRFトークンのエラーの解決方法を紹介します。
特定のルーティングの時だけCSRFトークンをOFFにするという方法ではなく、ちゃんとCSRFトークンを送信・受信・マッチする方法です。

## 0. 最初に

通常のTwirlを使ったフォームの作成・送信では、`CSRF.formField`を使います。
しかし、Ajaxの場合、このメソッドは使いません。
Ajaxの場合、``は含めずにフォームを送信します。

## 1. application.confの設定

まず、htmlのフォームにCSRFトークンを使わないので、cookieにCSRFトークンを登録させます。

`application.conf`に、`play.filters.csrf.cookie.name`の設定で、CSRFトークンのcookieの名前を設定します。

“`scala:application.conf

play.filters.csrf.c

【JavaScript】ちゃんと勉強してみた②

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

過去投稿記事
–
[【JavaScript】ちゃんと勉強してみた](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29)

while文 – 繰り返し処理
–
　- while文は、条件式がtrueの間、{　}内の処理を繰り返す。
　{　}の後にセミコロンは不要。

“`.text:書き方
while(条件式){
処理内容
}　←　セミコロンは不要

“`

“`.js:例
// 変数numberを定義
let number = 1;

// while文を作成
while(number<=100){ // 処理内容 console.log(number); number +=1; } ```

for文 – 繰り返し処理
–
　- while文と同様の処理をする。

“`.text:書き方
for(変数の定義;条件式;変数の更新){
処理内容
}　←　セミコロンは不要

“`

“`.j

【Swiper】左揃え、それぞれのスライド幅が異なるスライダーの実装

Swiper v6.3.4を使用しました。
https://swiperjs.com/

### 実現したいこと
– 左でいい感じにスナップしてほしい
– 幅はCSSで指定せず、中身によって変化するようにしたい

See the Pen 【JavaScript】Pure JSだけでハンバーガーメニュー

## jQueryを使わずにclassの付け替えで制御する
### クリックしたら「isActive」クラスをハンバーガーアイコンに追加する。

“`html:index.html

“`

“`js:main

「原神」がMMDモデルを配信してくれたので、JavascriptでMMDビューアを作った

原神のホームページで、MMDファイルを公開してくれました。太っ腹！

原神のキャンペーン公式サイトの紹介記事
　https://www.gamespark.jp/article/2020/10/08/102819.html

なので、これを機会に、JavascriptでMMDファイルを表示するビューアページを作ってみようと思います。

原神のキャンペーン公式サイト(中国語)
　http://ys.biligame.com/gczj/

ここから、MMDファイルをダウンロードします。
MMDファイルの表示には、three.jsにあるMMDLoaderを使いました。

mrdoob/three.js
　https://github.com/mrdoob/three.js

作成したMMDビューアのソースコードは以下に置いておきました。

poruruba/MmdViewewr
　https://github.com/poruruba/MmdViewer

各種ファイルは著作権の関係上置けなかったので、上記から各人でデータを取り寄せて構築してください。
VMDファイルやVPDファイルは、とり

[メモ] JavaScript オブジェクトのコピーと分割代入

#オブジェクトのコピー

“`js:def.js
let user = {
name: ‘山田’
};
“`
上記のようなオブジェクトが定義されている時

変数`user`は「オブジェクトへの参照」に対して参照をもつ
オブジェクトのプロパティはそれぞれの値への参照をもちます

このオブジェクトをコピーします

“`js:def.js
let user = {
name: ‘山田’
};

let secondUser = user;
“`

ここでコピーされるものは「オブジェクトへの参照」です
「オブジェクトへの参照」への参照を変数`secondUser`はもちます

![スクリーンショット 2020-10-24 13.48.04.png](https://qiita-im

いいね機能 非同期にする上で詰まった部分

##対象者
いいね機能を実装している方で同期処理はできており、非同期処理の挙動とならない方
リロードしないと「いいねしている状態といいねしていない状態の切り替え」ができない方
Rails6におけるJQuery導入方法（①参照）やデバッグがうまくできていない（②参照）方

##環境
Rails6 環境
Turbolinks導入済み

## 記事の目的
いいね機能において同期処理は実現できたが、非同期にする上で詰まった部分を記しておきたいと思います。

いいね機能の記事は良質なものがあるので（ただRails5の環境が多いかも？）そちらを基本にして頂き、本記事では初学者が詰まった時に参考になる部分があればいいなという思いで記事にしました。

また、初学者の為、間違いがあれば、ご指摘頂けると幸いです。

##①Rails5とRails6におけるJQuery導入方法の違いを理解していなかった（環境設定ミス）

現在出ている記事ではRails5環境のものが多いのですが、Rails6環境での設定方法と異なることに注意しましょう。

###Rails5の場合
Rails5系までは、「アセットパイプライ

即時に更新されるチャット機能(Action Cableの実装)

#即時に更新されるチャットアプリ
* Action Cableを用いた、リアルタイムチャットアプリを作成する

#まとめてコードずらりします⬇︎
“`java:ターミナル
% cd projects
% rails _6.0.0_ new mini_talk_app -d mysql
% cd mini_talk_app
% rails db:create
“`
“`java:ターミナル
% rails g controller messages new
% rails g model message text:text
% rails db:migrate
“`
“`java:app/config/routes.rb
Rails.application.routes.draw do
root ‘messages#new’
resources :messages, only: [:create]
end
“`
“`java:app/controllers/messages_controller.rb
class MessagesController < Appli

[メモ] JavaScript 参照

`変数a`を定義し、１を入れた時
それぞれメモリ空間上に配置される

“`js:def.js
let a = 1;
“`

aは1への参照(住所みたいなイメージ)を保持している


`変数b`に`変数a`をコピーした時

“`js:def.js
let a = 1;
let b = a;
“`

値の1がコピーされ、その参照を持つ変数bが作られる


それぞれ別の参照先なので、変数bに再代入しても、変

JavaScripの復習

### 基本を見直しました。
if文をswich文に、書き直して見ました。

### if文のコード
“`javascript
var firstName =”yourname”;
var age = 18;

if(age < 15){ console.log(firstName + 'is a junior high school student'); } else if(age >=15 && age < 18 { console.log(firstName + 'is a high school student'); } else if(age >=18 && age < 20) { console.log(firstName + 'is a university student'); } else { console.log(firstName + 'is a salary man'); } } ``` これをswich文に書き直すと ### swich文 ```javascript var firstName = "yourname";

innerHTML とtextContentの違い

textContentが出てきた時に「innerHTMLとは何が違うのだろう？」と疑問に思ったため調べたことを記録します。

## innerHTML
> Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

## textContent
>textContent は Node のプロパティで、ノードおよびその子孫のテキストの内容を表します。

文章だけではよくわからなかったので実際に以下のコードを実行します。

“`:html

ここがかわるよ