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

【Javascriptの基本的な文法を学ぼう③】条件分岐処理編

#はじめに
今回は変数定義についてみていきたいと思います！プログラミングを学習する上で条件分岐処理は基本的な内容となりますので、しっかり押さえておきましょう！

#条件分岐処理
条件分岐処理とは、`条件を満たしているかどうかで実行内容を分岐する処理です。`単に条件分岐とも呼ばれます。この仕組みで、「もし〇〇だったら△△をする」と処理を分けることができます。条件分岐処理において、分岐の条件として記述する式を`条件式`と呼び、条件式には、真偽値になる式を記述します。

#if文
Javascriptの条件分岐にはif(イフ)文という文法を使います。if文は、条件式が正しいか正しくないか、`つまりtrueかfalseかで実行する処理を分岐させることができます`。基本的なif文の書き方は以下です。条件式がtrueになる場合のみ、if 条件式{}の間に記述した処理を実行します。

>
“`javascript:例
if (条件式1) {
// 条件式1がtrueのときの処理
}
“`

#else if文
if文で条件式が偽のときに処理を行うには、else ifを使います。条件を満たさ

　for,forEach,for..in,for..ofの違いとはなんぞや

javascript繰り返し処理の種類多すぎないか？
備忘録的にまとめました。
（プログラミングを勉強し始めたばかりなので内容薄い！！どんどん内容濃くしていきたい、、）

通常のfor:relaxed:
初学者でもわかりやすい通常のfor
指定した回数で繰り返し処理をしてくれるのでめっちゃ簡単！
コードが長くなりがちだが、基本全てこれでなんとかなる。

forEach :v:
配列要素に対して繰り返し処理してくれる。
僕は、queryselecterAll()でNodeListを受け取り、それをforEachで回す事が多い。
forEachでcontinue,breakは使えないので要注意。
for ..ofと機能は殆ど変わらない。
この中では唯一、ループ構文ではなくメソッドである。
引数にインデックスを使える。

for..in:raised_hand:
オブジェクトに使用できる繰り返し処理。
for(key（変数名） in obj)という形で回していく。
基本的に要素が入った順で処理が行われるが順番は保証していないのであまり使わない方が良いのかも。
あとデータ量が多いと遅く

【Javascript】Short-Circuit Evaluation(短絡評価)について(&& and ||)

# 初めに
JavascriptにおけるShort-Circuit Evaluation(短絡評価）について、学習した内容をoutputしてみました。

前回の記事：

https://qiita.com/redrabbit1104/items/e002b51e109e120ed6d4

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

# Short-Circuit Evaluationとは
日本語では短絡評価と呼ばれるShort-Circuit Evaluation。short-circuitという名前通り、ある論理式の評価が決まって値が決定すると残りの部分の論理式を評価せずに終わるという評価方法です。ここでいう論理式とは「&&(and)」や「||(or)」演算子を使った論理式を指します。

# ||(Or)演算子におけるshort-circuit
boolean（trueまたはfalse)ではない値をor演算子を使って比べてみる（評価する）とどうなるでしょうか。
まずはtruthy valuesをor演算子で評価してみました。

“`javascript
//tr

モダンなデザインで軽量なJavaScriptのコンテキストメニューのライブラリーを作りました

## どんなものを作ったのか

Fluent Designに影響を受けた、モダンで美しく軽量なJavaScriptのコンテキストメニューのライブラリーを作りました。

コンテキストメニューが表示されるときにはちゃんとアニメーションも付いています！また、背景はブラーがかかった半透明のデザインです。


そして、ダークモードをサポートしています。ブラウザーがダークモードに設定されている場合、自動で黒を基調としたデザインに切り替わります。


## どうして作ったのか

ネットでコンテキストメニューのライブラ

【React】動的テーブル　セル結合

動的テーブルでセル結合をする

目指すかたち
civilization VI wiki

テーブルの特徴
・一つのセルに要素が２つ以上あったりなかったりする

想定する動き
・DBからテーブルデータ引っ張ってきて(fetch)ならべる

問題
・DBから引っ張ってきて普通に並べると一列ずつになっちゃう

“`react:
const items = [
{A: “A1”, B: “B1” , C: “C1”},
{A: “A1”, B: “B2” , C: “C1”},
{A: “A1”, B: “B2” , C: “C2”},
{A: “A2”, B: “B1” , C: “C1”},
{A: “A2”, B: “B1” , C: “C2”},
];

const ItemsTableOld = () => {

僕はAPEXプレデター！そろそろ仕事したい！

こんにちは！
無職の22歳男です。
今までろくに働いたことがなく、ずっとゲームや友達との遊びに明け暮れていました。
特にハマっていたのはAPEXLEGENDSというバトルロイヤルゲームです！
大学卒業の友人たちが今年から就職したこともあり、
そろそろ仕事をしたいのでプログラミングを習得しようと思っています。
日記のような形で学んだことを
アウトプットしようと思います。
目指せGoogleエンジニア！！！

[phina.js] Labelの枠の色を変更する

その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)


## ラベルの枠の色を変更する
ラベルの枠は、**strokeWidth** で太さを設定し、色は**stroke**プロパティで変更可能です。

“`js
var label2 = Label(‘Time is money’).addChildTo(this);
label2.setPosition(320, 600);
label2.fontSize = 48;
label2.fill = ‘red’;
label2.strokeWidth = 4;
label2.stroke = ‘white’;
“`

## サンプルコード
“`js
// グローバルに展開
phina.globalize();
/*
* メインシーン
*/
phina.define(“MainSce

[phina.js] ラベルの文字を変更する

その他のTipsは[こちら](https://qiita.com/alkn203/items/bca3222f6b409382fe20)


## ラベルの文字を変更する
ラベルの文字は、**text** プロパティで後から変更可能です。
以下のサンプルでは、画面がタッチされたらラベルの文字を変更しています。

“`js
// ラベル表示
var label = Label(‘Time is money’).addChildTo(this);
label.setPosition(this.gridX.center(), this.gridY.center());
// ラベル文字変更
this.onpointstart = function() {
label.text = ‘Money is time’;
};
“`

## サンプルコード
“`js
// グローバルに展開
phina.globalize()

コーディングについて～命名編 ① ～

私の参画しているプロジェクトにはコーディングルールが存在せず、
作成する必要を感じたため勉強をしました。
基礎中の基礎ばかりかと思いますが、自身の備忘録としてまとめることにしました。

# はじめに

本記事はJavaScriptをベースに記載していきます。

変数や関数の命名について大切なことは「何が入る変数なのか」、
「何をする関数なのか」ということが「一目でわかる」ということだと思います。
ですが、会社やプロジェクトで既にルールが存在するならば、
それに則るのが最も大切です。

# 変数名

## 基本的に名詞を使う

後に記載していますが、「～かどうか」のような状態を表す場合以外は名詞を使用します。

“`Javascript
const name = “名前”;
const id = “ID”;
“`

可能な限り具体的な変数名にするのがよいです。

“`Javascript
const loginUserName = “名前”;
const loginUserId = “ID”;
“`

## Bool 値の命名

「～かどうか」のような状態を表す場合はis●●やh

【JavaScript】Submit時のダブルクリック防止

Submit時にダブルクリックを防止するJSを書いたので共有。

筆者の環境ではChrome, FireFox, IE, Edgeで問題なく動いていました！（2021/05/21時点）

##JS本体##
“`javascript
var dblClickFlag = null;

function ThroughDblClick() {
// ダブルクリック（連続ポスト）の制御
if (dblClickFlag == null) {
dblClickFlag = 1;
return true;
} else {
return false;
}
}
“`
##onSubmitから呼び出す##
onSubmit属性に記述することで、True/FalseからonSubmitするか判断できます。
Falseの場合はsubmitされません。

“`html

```

###2. bodyの最後に記述する
パラメーターはgithubを見てください。

```javascript:main.js
let scroll = new SmoothScroll('a[href*="#"]', {
speedAsDuration: true, //全てのスクロールを同じ時間で設定
speed: 1000, //スクロールのスピード
header: "#header", //headerの高さを考慮してスクロールしてくれる
easing