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

javascriptで「今から○時間限定タイムセール」のカウントダウンタイマーを作る

特定のページにアクセスしたときに、アクセスからn時間以内に次のアクションを起こしてもらうためのカウントダウンタイマーをjavascriptで作ってみました。

試しに72時間限定キャンペーンと言う感じで、残り72時間からスタートするカウントダウンタイマーを作りました。

##HTML

“`HTML

“`
HTMLはこれだけ。innerHTMLで中身を入れていきます。

##javascriipt

72時間を秒に換算しておく。本当はここも計算でやるといいのかもしれませんが。
`settime`の値を変えることで残り時間を変更することができます。

“`javascript
var settime = 259200; //72時間
var timer = document.getElementById(‘js-timer’);
var h = 0;
var m = 0;
var s = 0;

//カウント開始
setInterval(‘countdown()’,1000);

var countdown = function(

【JS】関数の引数で値が代入されている！？デフォルト引数について

関数の引数の中でイコールで値が渡されている以下のような記述がある。この中身についてのメモ。

“`js:こういうの
const 関数名 = (a=3, b=5) => 処理
“`

`(a=3, b=5)`のように最初から引数の値を指定して渡す方法を**デフォルト引数**と呼ぶ。
参考： https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters

引数がない場合はこのデフォルトで設定された値が使われる。別の値が引数として渡された場合は渡された値が上書きされて使われる。

##実例

“`js:全てのデフォルト値を指定
const multi = (a=3,b=5) => a*b

console.log(multi()) //15 =3*5
console.log(multi(10)) //50 =10*5
console.log(multi(1,2)) //2 = 1*2
“`

“`js:片方だけ指定
const multi = (a

Kinx で湯婆婆を実装してみる

# 元ネタ

あまりこういうことはしないのですが、間違いなく私以外誰もやらないので。。。
しかしなんだかちょっと恥ずかしい。

> 元ネタ – @Nemesisさんの[Javaで湯婆婆を実装してみる](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)

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/K

JavaScriptを触ってみた記録　〜パッケージ管理と配列処理〜

# この記事

JavaScriptを学習し始めた人が、その記録を残します。

前回は基本文法とクラスで、今回はファイル間連携やパッケージについて軽く触れました。

## デフォルトエクスポート
変数や関数、クラスはexportとimportで連携可能

デフォルトの場合は１ファイル１つの値まで可能
importの際に、名前を変えてもOK

“`
ファイルA
export default Penguin;
↓
ファイルB
import Pen from “script.js”;
“`

## 名前付きエクスポート
名前は同じものを指定
複数指定が可能

“`
ファイルA
export { Bear, Cat };
↓
ファイルB
import { Bear, Cat } from “test.js”
“`

## パッケージを使ってみる

readline-syncというパッケージを用いて
入力した内容を変数に代入する

“`
import readlineSync from “readline-sync”;
const scan = readlineSync.quest

【javascript】もう迷わない!初めての戻り値(return)【イラスト解説】

returnの戻るってなんやねん！と思った初学者は少なくないはず。
自分も就職する前の独学時代はreturnの必要性がわかりませんでした。
スクールや職場の先輩にわかりやすく説明して頂いたのでそれをイラストでまとめてみました。
下記コードは2代入した数字を倍にしてconsole.logで表示するシンプルな関数。

“`javascript
function double(value){
const hang = value * 2;
return hang;
}

const result = double(10);
console.log(result);
“`

## returnがない場合どうなる!?
“`javascript
function double(value){

Vue.jsで湯婆婆を実装してみる

#はじめに
@Nemesis さんの [Javaで湯婆婆を実装してみる](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2) がバズってるとのことで、Vue.jsで実装してみました。

#コード
“`vue:indext.html

契約書だよ。そこに名前を書きな。

フン。{{ name }}というのかい。贅沢な名だねぇ。
今からお前の名前は{{ newName }}だ。いいかい、{{ newName }}だよ。分かったら返事をするんだ、{{ newName }}!!

```

スマホでもナビボール(姿勢指示器)が見たい!

# 作ったもの
スマホでアクセスしてください。
iPoheSE(初代) iOS14にて確認。(Androidは手元にないので未確認です)
https://tokishirazu.llc/navball/

スクショ

# ナビボールへのお誘い
全国1万人くらいのKSP及びメーデーファンのみなさんこんにちは! (まさかすでにタグがあるなんて!)
みなさんは長い人生を歩んでいく中で、道に迷ったり、つまづいて方向がわからなくなることありますよね?
そんな時、このナビボール(姿勢指示器)があ

vue.js hls.jsでブラウザ関係なしで動画を再生させる

#vue.jsとhls.jsを組み合わせて動画を再生させる

hls.jsを使うことでブラウザの縛りなしで動画を再生することができます。
[hls.js github](https://github.com/video-dev/hls.js/)
[.hlsをブラウザ関係なく一発再生する “hls.js”](https://blog.backham.me/2016/11/04/hls%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E9%96%A2%E4%BF%82%E3%81%AA%E3%81%8F%E4%B8%80%E7%99%BA%E5%86%8D%E7%94%9F%E3%81%99%E3%82%8B-hls-js/)

##動画を再生させるコード

hlsをインストール
[hls npm](https://www.npmjs.com/package/hls.js/v/canary)

```
npm i hls.js@0.15.0-alpha.2.0.canary.6087
```

ホスティングされてる動画を再生する場合

```

addEventListenerメソッド

addEventListenerメソッドについて学習したため、アウトプットいたします。

#addEventListenerメソッドとは？
ある要素に対してクリックする、マウスを乗せる等のイベント（以後イベントと記述します）が起きたときに何か処理を実行したい場合、このメソッドを使って定義することができる

使い方

```csharp
(DOMオブジェクト）.addEventListner("イベント名", 関数)；
```

実際に使ってみましょう

```csharp
var text.querySelector("review");
//読み込んでくるDOMオブジェクトを定義。今回はtextという何かのレビューが入った文章をDOMオブジェクトとしている

function print_selected(){
console.log("レビューが選択されました");
//addEventListenerで実行される関数を定義

text.addEventListener("select", print_selected);
//DOMメソッドであるtextにイベント時（今回は選択

Reactで再レンダリング対策の備忘録【childrenについて】

タイトルの通りです。
今行っているとあるプロジェクトでReactによるコンポーネントあたりのパフォーマンス改善について対応を行っておりました。

Reactのコンポーネントのパフォーマンス改善といえば、
**shouldComponentUpdate**や**PureComponent**(スペル合ってるかな)だったり、hooksですと**React.memo**やもっと厳密に対応するなら**React.memoの第二引数(areEqual)**での対応を行うのが一般かなと思います。

そこで再レンダリング対策を行うにあたって、props.childrenでの再レンダリング対応ですこーーし悩んだので、備忘録を書いていきます。
同じくこちらで苦労した先人の対応を使っただけなので、メモ程度な感じです。先人の知恵は参考リンクに貼っておきます。

## 先にいっておきたい

こちら対応はしたのですが、正直ルール決めて使わないと使えないかもです。
ちゃんと使える形になったら追記という形で書いていこうかなと思います

## 使うコンポーネント

例えばこのようなコンポーネントがあったとします。

【JavaScript】時間を１２時間表記で表す。

#プログラミング勉強日記
2020年11月9日
時間の表記を24時間表記から12時間表記で表すコードを作成する。

#コード

```index.html

現在は:です。

```
```script.js

//Date()関数をインスタンス化
const now = new Date();

//現在の時間を取得
let hh = now.getHours();

//現在の分を取得
let mm = now.getMinutes();

//時刻が12以上のとき
if(hh >= 12) {

//id属性ampmのコンテンツを『午後』に書き換える
document.getElementById('ampm').textContent = '午後';

//id属性がhhのコンテンツを現在時間に書き換える(13時の場合、13-12=1となり午後1時と表示される)
document.getElement

【JavaScript ~Mathオブジェクト~】勉強メモ12

JavaScriptちゃんと学習中。
今回はMathオブジェクトについてです。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

Mathオブジェクト
-
- Mathオブジェクトとは？

　Mathオブジェクトは、数学的な定数と関数を提供するプロパティとメソッドを持つ、組み込みのオブジェクト。
　Mathオブジェクトのメソッドとプロパティの一覧はこちらを参照
　⇨　[MDN web docs – Math](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)

- Math.PI

　Mathオブジェクトのプロパティには数学の定数が８つ定義されている。　
　Math.PIは、そうしたプロパティのひとつで、円周率を表す。
　下記にコード例を記載

```.html:HTML

円周率は です。

```

```.js:JavaScript
'use strict';
docu