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

ReactJS での条件付レンダリングをシンプルにしてみせて差し上げましょう

# 条件が真のときだけ描画する

[Simplify condition rendering in React.js ~ DEV Community ~](https://dev.to/ornio/simplify-condition-rendering-in-react-js-33l8)
という記事で、条件が真のときだけ子ノードを描画するコンポーネントが紹介されています。次のようなものです。

“`jsx

const IF = ({ condition, children }) => {
if (!condition) return null;
return <>{children};
};

“`

単純に `return children;` としない理由が僕には分かりません（理由が分かる方教えてください）が、素敵なコンポーネントです！
使用例は次の通りです。

“`jsx

Log out

“`

パッと見て分かりやすい！いやぁ、シンプルで

循环js中的object

for(var propt in obj){
console.log(obj[propt]);
console.log(propt);
//obj[propt].toString().includes(ContainsValue)
}

対戦ゲームを作る。

#概要

対戦ゲームを作る。
構想編。

#方針

アプリの保管場所は、plunker
サーバーは、enebularでnode-redでherokuapp
プロトコルは、websocket
フロントは、vue
エンジンは、tateno
ゲームは、オセロ。

#役割

|機能|クライアントアプリ|サーバーアプリ|
|:–|:–|:–|
|クリックを検出して、指せるか確認して、データを送る。|○|×|
|データを受信して、指せるか確認して、置く。|○|×|
|終了を確認する。|○|×|
|通信|×|○|

#やらない事

– 何人ログインしてるか。
– 勝ち負けの判定。

#通信データ

jsonです。

id: ユニークなIDを持ちます。
state:　現在の状態を指します。待機中、ゲーム中、終了など。
data:　8*8の盤の状態と次の一手。

“`
{ id: 1234, state: 0, data: [] }
“`

#クライアントAとB、サーバーSの通信イメージ

イべント

– Aがlogin
– Bがlogin
– Aが先手を打つ
– Bが打つ

“`pla

[Rails]JavaScript(jQuery)を使ったアコーディオンメニュー

今回はクリックしたら開閉できるアコーディオンメニューの実装をしていきます。
メニューの中身は最初隠していて、クリックで出てきて、しまうとまた隠れるので、色々なところで使える便利な機能です。

完成イメージはこちらです。


画像なので動きがないので、確認したい方は、ぼくの[ポートフォリオ](https://oogiri-legendroad.com/homes/guide)を確認してみてください。
下部のQ＆Aが同じ手順で実装しています。

それではいってみましょう！

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

– jQueryが使える状態
– homes/topビューで実装していきます
– Bootstrapのcardを使っています(別にcardじゃなくても問

let と const を使い分けよう

▪️ letとは
今後変わる予定の値に定義する場合に使う

▪️ constとは
今後変わる予定のない値に定義する場合に使う

letとconstはこのような違いがありますが、結論どちらを使っても処理は変わりません。では、なぜletとconstを使い分けなければいけないのか？
これには明確の理由があります。

”一人でコードを書く際はletとconstを使い分ける必要はありませんが、企業に属した場合チームで開発することは避けて通れません。”
そこでコードを書く際にletだけで統一したり、constでけで統一してコードを書くと他の人が見たときにこれは今後変更する値なのか、変更しない値なのか瞬時に読み取れません。だから、他の人が瞬時に読み取れるようにするためにもletとconstは使い分ける必要があります。

▪️ おまけ
varという定義もありますが、あまり使わない定義なので覚えなくても良いそうです。

Bootstrap : モーダルを連続で開けない

## 現象

Bootstrap を使って複数のモーダルを連続で開いたときに
2つ目以降のモーダルがスクロールできなくなりました。

“`html:NGコード（全文）