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

クリックイベントなどで出てくる背景を画面いっぱいに広げるとき

細かいテクニックだが、覚えておくと便利

“`css
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

“`

[Javascript]関数

#関数定義
`const 定数名 = function() {
処理
};`

“`javascript
const hello = function() {
console.log(“こんにちは”);
}
“`

#アロー関数
`function ()`の代わりに `() =>`

“`javascript
const hello = () => {
console.log(“こんにちは”);
}
“`
#関数呼び出し
`定数名();`

“`javascript
const hello = function() {
console.log(“こんにちは”);
}

hello();
“`

#戻り値とその呼び出し

“`javascript
const sum = (a , b) => {
return a + b;
}

const price = sum(100 , 300);
console.log(price);
“`
出力結果
400

agora.ioサンプルコードのおすすめリポジトリ

agora.ioでは実装のサンプルが豊富にあります。
[Agora公式のGitHub](https://github.com/AgoraIO)
[AgoraコミュニティのGitHub](https://github.com/AgoraIO-Community)

その中から特にニーズの多いサンプルをまとめました。
(随時追加していきます)

##RTMP連携等のサンプル
https://github.com/AgoraIO/Advanced-Interactive-Broadcasting

##録画サーバーアプリケーションのサンプル
https://github.com/AgoraIO/Basic-Recording

##ボイスチャットのサンプル
https://github.com/AgoraIO/Agora-Online-Chatroom

##環境チェックアプリケーションのサンプル
https://github.com/AgoraIO/Tools/tree/master/TroubleShooting/Agora-WebRTC-Troubleshooting

##OBSプラ

JavaScriptの基礎

#JavaScript(JS)とは
Web開発等で用いられるフロントエンド言語
JSのライブラリには以下がある
-jQuery:効果やアニメーションの実装が可能なライブラリ
-React：Facebookが開発したUIに特化したライブラリ
-Node.js：サーバサイドでJSを実行するためのライブラリ

#基本的コマンド
##コンソール（画面への文字出力）
`console.log(“○○”)`
()内は””でも”でも可
文末のセミコロンを忘れずに

#####入力例

~~~
console.log(“あいうえお”);
~~~

#####出力例
あいうえお

##変数の代入
プログラムの中では多くの値を用いるため、間違えないように、そして値の変更を容易にするために、変数を用いる。

変数のイメージとしては、変数という箱の中に、文字列や数字などの値が入っている感じ

#####書き方
`let 変数名　= 値（文字列なら”○○”）`

#####入力例

~~~
let food = “ラーメン”;
console.log(food);
console.log(“food”);
~

SPA(Single Page Application) を採用するメリット再考(2020年）

# 1. 2010～2020年にかけて、WebシステムはSPAで作るのが主流

　近年、WebシステムはJavascript(Typescript）を用いたSPA(Single Page Application）を作ることが主流になっている。
　とはいえ、本当に、一つのHTMLファイルだけで、全画面をJavascriptで描画するSPAがどれだけあるかは分からないが、少なくとも、SPAで”作ろう”とはしている。
　（2010年はSPAの黎明期で、Backbone.jsやknockout.jsが生まれた年）

# (1) SPAの構成要素

　Single Pageに着眼するならば、SPAは、以下を特徴とする。
　ページの基本となるHTMLファイルを1回のリクエストで取得し、その後の画面描画に関しては、大半を初回に取得したブラウザ上のリソースで行う。そして、適宜、必要なデータのみAPIへの問合せで取得する。

　そして、SPAを特徴づけるのは、描画のパーツを作成するComponent、そして、画面遷移を実現するRouterの存在であると思う。そして、状態の管理をするState Manag

[AzureのComputer Vision API＆Face API ] WEBカメラでパシャリと感情分析やOCRしてみる

# やったこと / 書いてあること
これまでやってきたも含めた下記を１つのWEBページにまとめました。

– 1.FirebaseのAuthentication を使ったログイン機能
– 2.FirebaseのDatabaseへのログインのロギング機能
– 3.ローカルストレージを使った履歴やお気に入り画像の保存機能
– 4.Webカメラを使った写真撮影機能
– 5.Webカメラで撮影した写真の感情分析やOCRを即時で行う機能

長くなるので１〜３の説明は別記事を参照ください。
ここでは4,5に関してソースコードや簡単な説明をしていきます。

## 参考
■１,２のFirebaseのログインやそのログの保存に関して
[Firebaseでログイン機能を作ってみる](https://qiita.com/shima-07/items/2c344b0ad306b201a065)

■ 3.ローカルストレージを使った履歴やお気に入り画像の保存機能
[vue.jsとlocalStrageで閲覧履歴とお気に入り履歴を作ってみた](https://qiita.com/shima-07/items/f6

Firebaseでログイン機能を作ってみる

# やったこと
FireBaseを使ってログイン機能を作りました。
（ただし、あらかじめ登録してあるものだけログイン可）

最後にコードも貼り付けます。

# 使っているもの
– FireBase
– https://firebase.google.com/?hl=ja
– Bootstrap
– https://getbootstrap.com/
– Vue.js , JavaScript , Html

# できること（サンプル）
– FirebaseのAuthenticationであらかじめ登録したユーザでログインができます
– ログインするとFirebaseのDatabaseにタイムスタンプが送られます
– ログイン時のみナビゲーションヘッダーを出すようにしています

サンプル：
https://simasima.work/index.html

テストユーザアカウント
– メール ： test@test.com
– PW : test0000

こちらでテスト的にログインできるはずです。
※ 何のお知らせなくログインできなくなることもあるかも知れませんが

【簡単にできる】jQueryでのタブ切り替え

今回、jQueryによるタブの切り替えの方法について、備忘録的に記載していきます。

#HTML
まずは、表示させるHTML部分のコードです。
タブ部分のul要素と表示するコンテンツ部分のul要素の2つを作成します。

“`html:qiita.html

• タブ１
• タブ２
• タブ３
• タブ４

• サッカー
• バスケ
• 野球
• バレー

“`

#CSS
次はCSSの記述です。
タブ部はactiveクラスが付与されているタブのみ色を変化させます。
またコンテンツ部は非表示にし、activeクラスが付与されている要素のみを表示する仕様です。

“`css:qiita.css
.tabs{overflow:hidden;}
.tabs li{background:#ccc; padd

Kinx 要素編 – 演算子オーバーライド

# 演算子オーバーライド

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。ライブラリ… ではないですが、ライブラリ作成で便利な機能。

今回は演算子オーバーライドです。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

Ruby の何でもオブジェクト方針は一貫した思想という意味で美しいとも思うのだが、`1+1` の意味を変えるのは百害あって一利無しと思います。できても良いと

datepickerのinputにキーボード入力で、/（スラッシュ）や -（ハイフン）でも入力可能にする（yyyymmddなども対応する）

突然クライアントから、**「このカレンダーのフォーム手入力できるようにできる？」**と聞かれ、
`readonly` を外せばすむだろうと思って**「問題ないですよ〜」**と二つ返事したら、
**「よかった、じゃあちゃちゃっとこれよろしく！」**と言われて以下のリストが出てきた。

### 以下で入力できるようにお願いします。
– yyyy/mm/dd
– yyyy-mm-dd
– yyyymmdd
– mm/dd
– mm-dd
– mmdd

**これ聞き方詐欺だ・・・。**
まあいい、やるか。

と思ったら案外といろいろ忘れてしまっていたので、
次にまた聞き方詐欺に引っかかったときのために残しておこう（~o~）

“`html

“`

“`javascript
function datepickerReplace(e) {
const _this = e.target // ターゲット

SPAの文字揃えゲーム作成

# 背景
過去記事：[JavaとJavaScriptでwebブラウザとのソケット通信①
](https://qiita.com/take4eng/items/d0b009c48ee8c3fe420a)
過去に非同期通信を用いてチャットアプリを作成した。
⇒改造してチャットとは異なるアプリケーションを作成。

twitterで見かけた『～揃えゲーム』を作成。
個人制作の備忘録。

## 目的
– ソケット通信で送受信されているデータを取得して編集する
– JavaScriptを用いて受信データの表示方法を学ぶ

# 実践内容
1. クライアントから送信されたデータをサーバーサイドプログラムによって編集
2. 編集したデータをクライアントへ送信
3. サーバーから送信されたデータ(文字列)を1文字ずつ順番に表示

# 成果物
1. なんでも揃えゲーム

Javascriptの for in と for of

今までJavascriptでfor文を書くときは下記の書き方しか知りませんでした。

“`javascript
// これまで使用してたfor文
const arry = [1,2,3,4,5,6,7,8,9,10];

for(let i=0; i

JavaScriptで文字列が小文字・大文字・数字を全て含むかどうか判定する方法について

タイトルにあるように、**文字列が半角英小文字・大文字と半角数字を全て含むかどうか**を判定するという機会は少なくありません。特に、文字種の多さがパスワードの強さであるという教義の持ち主である場合に顕著です。もちろん長さは16文字以内です。

さて、この判定は一見単純に見えて一筋縄ではいきません。文字列の条件判定といえば正規表現ですが、「全て含む」という条件をきれいに書くのは少し難しいでしょう。そこで、この記事ではこの条件を判定する諸方法について雑に考察します。

## 愚直に正規表現を使う方法

正規表現では、「ある文字種をひとつ含む」という条件を書くのは簡単です。例えば半角小文字を含むという文字列は`/[a-z]/`という正規表現で判定可能です。これを用いれば、正規表現を3回使うことで上述の条件を判定できます。

“`js
const ratz = /[a-z]/, rAtZ = /[A-Z]/, r0t9 = /[0-9]/;
function isValidPassword(str) {
return ratz.test(str) && rAtZ.test(str) &&

jQueryのクリックイベントについて

#クリックイベントの取得方法
結論、**click()でクリックイベントを取得**できます。
JSと比べてめちゃくちゃ楽になりました。
それぞれ違いをみていきましょう。

##JavaScriptの場合
実際にみていきましょう。
結論から言うと、**クリックイベントが起きた場所を探すのにforEach文を使って
順番にみていかないとダメ**でした。
なので以下のような少々長いコードになります。

“`javascript
line.forEach(function(value) {
value.addEventListener(“click”, lineSwitch);
});
“`
コードが冗長になっています。。。

##jQueryの場合
早速コードをみていきましょう。

“`javascript
line.click(lineSwitch)
“`
前提としてセレクタをしっかり指定していればこれだけでいいです。
スッキリして読みやすいものになりました。
ただここでクリックされた要素を特定する必要があります。
それにはthisを用います。

#this
JSでめちゃくちゃ

Puppeteerのpuppeteerクラス

# puppeteerとは
他の記事とかでも書いてあると思いますが、一応説明をしておくと、puppeteerはDevToolsプロトコルを使ってChromiumもしくはChromeを管理する高レベルAPIを提供するNodeライブラリです。

今回はこのpuppeteerが面白そうだったので、このライブラリを調べたり使ったりしたことを残していきたいと思います。今回はpuppeteerクラスをやっていきたいと思います。

## puppeteerクラス
このクラスはChromiumインスタンスを立ち上げるためのメソッドを提供してくれます。この辺りは設定云々のところなので実証していくところはないです。

メソッドは`connect`、`createBrowserFetcher`、`defaultArgs`、`executablePath`、`launch`の5つ。それぞれ説明していきます。

### connectメソッド
実際のURLを指定するかWebsocketのURLを指定してブラウザインスタンスにつなげるメソッド。
このメソッドは存在しているChromiumインスタンスに**のみ**

【Thymeleaf】th:hrefをJavaScriptで使う

#詰まったこと

th:hrefをJavaScriptで生成すると、機能しない。

Thymeleafでは、hrefを使うとき、次のような書き方をすると思います。

“`html
サンプル
“`

html上では上手くいきますが、
これを次のようにJavaScriptで生成すると、機能しません。

“`html

“`

困った。。。

#解決法
①まず、scriptタグを書き換えます。

“`html