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

演算【JavaScriptから始めるプログラミング】

#演算
JavaScriptでは、演算を行うことができます。
また、演算を行う時に使用する「+」や「-」などの記号のことを**演算子**と言います。
## 四則演算
まずは、基本的な演算である四則演算です。
### 加算
「+」の演算子を使用する。

“`javascript:addition.js
console.log(100 + 200); //300
“`

### 減算
「-」の演算子を使用する。

“`javascript:subtraction.js
console.log(200 – 80); //120
“`

### 乗算
「*」の演算子を使用する。

“`javascript:multiplication.js
console.log(100 * 3); //300
“`

### 除算
「/」の演算子を使用する。

“`javascript:division.js
console.log(400 / 5); //80
“`

## その他の演算
四則演算以外にも余りを求める演算子や、べき乗を求める演算子などがあります。

### 除算を行った時

JavaScriptで空白や改行のみの場合も空文字判定する方法

textareaやinputタグで空文字判定をしたい場面があるかと思います。
その場合、

“`html


“`

“`javascript
text.value === ”
!text.value
“`
などで空文字判別を行うことができます。
しかし、これだと空白（スペース）や改行があった場合に空文字では無くなってしまいます。

その時は、matchメソッドを使うことで、空白や改行があっても空文字判定が可能です。

“`javascript
!text.value.match(/\S/g))
“`
\Sは空白文字（半角スペース、\t、\n、\r、\f）以外全てのことです。

“`javascript
!text.value || !text.value.match(/\S/g)
“`
!text.valueと組み合わせることで、何

radioボタンのに画像をいれるとIEではinputがcheckedにならない

# 問題

“`style.css

input[type=”radio”] {
display: none;
}
“`

にして、``に画像を入れたいときってありますよね。
そこを選択させたら**for**の中身(該当のidを持つinput要素)がcheckedにされて…

っていうのがIE以外のお話です。

では、IEはどうでしょうか？

…

…

**動かない！！！！！！**

これは、``の中にある``のせい、
というかIE特有のバグなのですが

今回はその解決策を残したいと思います。

## 解決策1

https://qiita.com/sola-msr/items/bdec752da00c5ab677b3

こちらに書かれているとおり

CSSでimgに`pointer-eventes: none;`して上げればokです。

IE11未満は未対応になります。

## 解決策2

JS側(jQuery)で制御して解決するパターンです。

“`script.js
// DOM読み込み後
$(functio

Nuxt.jsで作成したAPIで、Markdownの書式を自動的に生成

# 要約

– MarkdownのリンクとかLaTeXの\\hrefを作成するときにwebページのタイトルを調べるのが面倒
– タイトルを取得するプログラムをクライアント環境で実行するとCORS違反
– サーバ環境でタイトルを取得するためにNuxt.js環境にAPIを作成

# はじめに

MarkdownとかLaTeXで文章を書いていて、webページへのリンクを作成するために、こんなことをしていました。もっと便利な方法があるのかもしれませんけど。

1. リンクを作成したいページをブラウザで開く。
1. ctrl-Uでソースコードを表示する。
1. ctrl-Fでtitleタグを検索して、``の間をマウスで選択してから、ctrl-Cでコピーする。
1. Markdownだったら、[と]の間にコピーしたタイトルを貼り付けて、その後ろの(と)の間にwebページのURLを貼り付ける。

これでは、プログラマの三大美徳の「怠慢」を違反しますので、ツールを作りました。node.jsの開発サーバー環境で動作するツールで

おい、ダークモードには対応していないのか？

「おい、ダークモードには対応していないのか？」と、誰かから言われたり言われなかったり。

で、調べてみたらCSSとJSで良さげなのが見つかったので備忘録代わりに

### CSS

“`CSS

@media (prefers-color-scheme: light) {
/* ライトモード用CSS */
}

@media (prefers-color-scheme: dark) {
/* ダークモード用CSS */
}

“`
CSSの場合、まだ草案段階なので、ダークモードだけ`@media`を使っていくのが良さげ

対応率も良さげ（低いが、ダークモード対応端末だけで見るとよい割合な気がする。）

[Can I U

Ionic Angular データバインディングで表示させた文章を改行する方法

#はじめに
タイトルに堂々と**「Angularのデータバインディング」**　と書いてますが、これから書く内容がデータバインディングなのか私はわかりません。。

そこまで用語に対して詳しくないので、言葉が間違ってたら教えてください。

#本記事で見せるサンプルの環境
今回この記事で使うサンプルは、以下のような環境です。

・Ionic + Angularのアプリ
・Firebaseに保存された文字列を表示させている
・ページAで文字列を入力&保存、その文字列をページBで表示

こんな感じでーす。

#文字列が改行されない問題
以下の例を見て欲しい。

##ページA

“`html:a.page.html

タイトル

Vue.js のアーキテクチャについて

# はじめに

Vue.js で簡単なプロダクトを作成する前に特徴を把握すべく、以下で Vue.js のアーキテクチャを確認しました。

　Vue.js ガイド： [はじめに] (https://012-jp.vuejs.org/guide/)

**※私が確認した範囲での理解となりますので、誤りや不足がある場合は、ご指摘いただけますと幸いです。**

# Vue.js のアーキテクチャ

以下を記載します。

– ソフトウェア・アーキテクチャ上の分類
– Model・View・ViewModel それぞれの機能

## ソフトウェア・アーキテクチャ上の分類

Vue.js は、ソフトウェア・アーキテクチャのパターンとしては、**MVVM (Model – View – ViewMod

個人的に愛用しているブックマークレット(BML)３選

# 前置き
突然ですが、ブックマークレット(BML)はお使いでしょうか？
私はというと、~~ほぼ毎日~~普段からよく使用しております。

ブックマークレットをあまり知らない人のためにざっと説明すると、**「URLの変わりに、Javascriptによる処理を埋め込んだブックマーク」**だと思っていただければ、それで概ね正解です。簡単に例を見ていきましょう。

あなたのブラウザでブックマークを新規作成（または既存のブックマークを編集）し、URL欄に下記の処理を埋め込みます。ブックマークの名前は適当で結構です。

“`
javascript:(function(){alert(“hoge”);})();
“`

作成したブックマークを実行すると、以下のようなJavascriptによるアラートのポップアップが表示されるはずです。

なるほど、素晴らしい

document.querySelectorAll(‘#need_click’)[0].click();でid=”need_click”の要素をクリックできる【JavaScript】

## コード

“`html:index.html

“`

“`javascript:click.js
document.querySelectorAll(‘#need_click’)[0].click();
“`

## 解説

“`javascript
document.querySelectorAll(‘#need_click’)
“`

これで、need_clickというidを持つ要素を取得。
querySelectorAllの中の要素一つを取りたいので、[0]で0番目を取得。

“`javascript
.click();
“`
これがクリックするメソッドなので、先ほど取得したものに対して実行。

JavaScriptでif文の条件式に変数だけを記述するやつ

よく忘れるのでメモ

## JavaScriptでは 0, “”, undefined, null は false になる
以下のようなよくあるif文。存在チェックなどに使われています。
この場合、例えばhogeがundefinedだとif文の中に入ります。

“`javascript
if(!hoge) {
・・・
}
“`

**JavaScriptでは以下の値はfalseとみなされます。**
– 空文字(“”)
– 数値の0
– NaN
– null
– undefined

【Youtube Player API】埋め込む動画を動的に変更する

#動作
こんな感じです。
テキストボックスにurlを入力するたびに、埋め込まれたYoutubeの動画が変更されます。

#コード

“`html

//　ここがiframeに置き換わる