f@ctor

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

JavaScript関連のことを調べてみた2020年02月08日
目次

React Class内での関数定義(bindしよう)

##はじめに
個人的なメモレベルです。

##メソッド記法での問題点

Reactで`setState`を利用する際に、JSXで、以下のように書くことが多いかなと思う。

“`react:クラスのプロパティとして関数を定義
doPlus = () => {
this.setState({count: this.state.count + 1});
};


“`

以下のような書き方の場合、エラーになります。

これクラス内に定義されたメソッドであっても、実行方法によって、`thisの参照先`は変わってしまうJSの仕組み故。この場合、`button`に関数オブジェクトをそのまま渡しているので、`thisの参照先`は`button`になってしまう。

JSの初心者が最初にぶつかる壁は`this`の扱いですよね。。。

“`react:ボタンを押下すると、undefindeエラーとなる
doPlus(){
this.setState({count: this.s

元記事を表示

elecom WRH-300XX3をAPモードで使うときのDHCPサーバの止め方

elecom WRH-300XX3を使ってるのですが、これのDHCPサーバが悪さをしてうまくつながらないときの対処。設定Webページからは設定が見えないので、Chromeの検証から強制的に見えるようにして変更した話（備忘録）。

– APモードなのでDHCPサーバは不要
– 仮に使ったとしても、デフォルトゲートウェイは（APモードなので）元ルータに指定したいのにできない

なお、この方法は下手をするとWRH-300X3にアクセスできなくなる可能性があるので、実施する際には自己責任でお願いします。

# 手順

1. 設定ページにアクセスして、動作モード選択をAPモードにして再起動。
2. 「インターネット設定」→「LAN設定」を開く
3. ページ内で右クリックして、「検証」
4. elementブラウジングで以下をたどる
– <html>→<frameset>→<frameset>→<frame>→#document→<html>→<body>→<blockquote>→<form>
5. ふたつめの→<table>がsty

元記事を表示

Playframework+axiosによるPOSTするときの注意点(CSRFTokenとlist)

# PlayFramework(twirl)によるform
PlayFrameworkにはtwirlというテンプレートエンジンが用意されている。

“` hoge.scala.html
@helper.form(action=”/hoge/huga”,Symbol(“id”)->”form1″) {
@CSRF.formfield
@helper.inputText(nankanoForm(“nanika”),Symbol(“id”)->”text1″,Symbol(“placeholder”)->”field”)

}
“`

このようなテンプレートからレンダリングされたhtmlでsubmitすれば入力したデータが
GET/POSTされ用意したnankanoformのcase classなどで受け取ることが出来るが、
クライアント側でajaxリクエストを行うといくつか問題が発生する。

## CSRF対策(POST時)
PlayframeworkではCSRFfilterを有効にするとRequestにCSRFTokenが設定されてないものは

元記事を表示

非同期APIをPromiseでラップしてasync/awaitで使う

setTimeout と Web Speech API を Promise でラップする例を示します。

Web Speech API の基本的な使い方については以下の記事を参照してください。

* [Web Speech API で読み上げ位置を取得](https://qiita.com/7shi/items/43452dcd34e57100fc3c)

# setTimeout

Promise の例としては定番です。

## コールバック

非同期 API にコールバックを渡す処理をネストすると、俗に言うコールバック地獄になります。

`setTimeout` によって1秒後に1、2秒後に2、3秒後に3を表示する例です。

“`javascript
setTimeout(() => {
console.log(1);
setTimeout(() => {
console.log(2);
setTimeout(() => {
console.log(3);
}, 3000);
}, 2

元記事を表示

【PWA】YouTubeをみんなでワイワイ見るためのサービスをローンチしました！！

みなさんこんにちは！

今回はYouTubeの動画を複数人で同時視聴できるサービスを作りましたので紹介したいと思います。
ブラウザを開くだけで、友達や恋人と同じ動画を見ることができます！

複数人で同じ動画を見て、あーでもないこーでもないと意見を交わすのは**めちゃめちゃ楽しい**です。
これはぜひ皆さんにも体験してもらいたいです！

YouTube同時再生サービス **DJ7**
https://www.dj7.io

初回のアクセスは音がならないように設定してありますのでご安心ください。

![アートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471880/2c81af09-f2ef-7068-992a-64ede9e97b21.png)

# できること
## 同期再生
サービスの要です。複数のデバイス間で再生の状態が同期され、離れている場所でも同じタイミングで同じ動画を視聴できます。
右下をクリックすると動画を画面に大きく表示します。これによって複数人で同じ動画を見ることができま

元記事を表示

ショートコーディングで階乗計算機を作る

ショートコーディングで階乗計算機を作る

動作サンプル　https://www.o–o.cf/

“`html

“`

たったこれだけ。

メモ帳に貼り付けてやってみてください。

以上

元記事を表示

#twitch　の配信中のチャットログを　#discord　でロギングするBOT

githubと改行ルールが違って二重管理になるため、詳細は下記のgithubのREADME.mdを参照のこと。
https://github.com/github895439/twitch_chat_logging_bot

元記事を表示

Next.jsで環境変数を利用するのにdotenvは必要ない

# tl;dr
`next.config.js`の`env`に任意の値を設定するだけ
`dotenv`を使いたい場合には`next.config.js`で`dotenv`を呼び出せばよい

# 解説
Next.jsはVersion 8からbuild-inで環境変数（Environment Variables）に対応しています。
[Blog – Next.js 8 | Next.js](https://nextjs.org/blog/next-8#build-time-environment-configuration)
下記リンクを参考にすれば容易に設定できるでしょう。
[Environment Variables – Documentation | Next.js](https://nextjs.org/docs/api-reference/next.config.js/environment-variables)

ただし既存のdotenvシステムを利用したいケースもあるかと思います。
本体レポジトリにdotenvを使用したexampleも存在しているので参照してみましょう。
[

元記事を表示

(JavaScript)イベント駆動について

今日はJavaScriptとjQueryについて学習しました。

JavaScriptは「イベント駆動」という概念に基づいて設計されているそうです。

Javaスクリプトにおけるイベントとは、HTMLの要素に対して行われた処理要求のことで

例えば、「ある要素の上にマウスカーソルを乗せる」、「ブラウザ上のボタンをクリックする」なども

イベントに当たります。

そのイベントが発生したらそれをきっかけにコードが実行される仕組みが「イベント駆動」です。

Webページを見ていてカッコいい動作は大体JavaScriptのおかげなのだなと思いました。

元記事を表示

Web Speech API で読み上げ位置を取得

ブラウザでテキストを読み上げる Web Speech API で読み上げ位置を取得します。

# Web Speech API

語学学習に音声合成が使えないかとクラウドサービスを調べましたが、契約が必要で料金が気になりました。ですが最近のブラウザでは API として実装されていることを知りました。

* [Web Speech API](https://wicg.github.io/speech-api/)
* [Web Speech API – Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API)

概要は次の記事に詳しいです。

* [Webページでブラウザの音声合成機能を使おう – Web Speech API Speech Synthesis](https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c)
* [Web Speech APIの実装 – Speech Synthesis API | CodeGrid](https://a

元記事を表示

Tabulatorを使ってみた日

##Tabulatorとは
html5の表を簡単に作成できるJavaScriptライブラリー

##手順

・jqueryを[ここ](https://code.jquery.com/)からCDNで読み込んだ.
・[GitHubリポジトリ](https://github.com/olifolkerd/tabulator)からTabulatorライブラリーをコピーして、tabulator.cssとtabulator.jsファイルをプロジェクトに読み込む。

“`hoge.html