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

Facebookページ埋め込み時のレスポンシブ設定（JS）

**「Facebookページの埋め込み、デバイス幅に合わせてリサイズしたいな〜〜」**となった時に、こういう記述をしました。

「[Facebook for Developers](https://developers.facebook.com/docs/plugins/page-plugin/?locale=ja_JP)」で自動生成されたカスタムデータ属性の値を、JSで操作します。
※「こうしたほうが楽だよ〜〜」「ここちがうよ〜〜」など、ご教示いただけますと幸いです。やさしめにお願いします。

# 手順
1. 自動出力された.fb-pageをJSで定義
1. .fb-page内のdata-width・data-heightに、JSから変数を指定
(JSではdataset.widthとdataset.height)
1. デバイス幅で条件分岐しつつ、JSで数値を調整（幅は最大500）

# html
▼[Facebook for Developers](https://developers.facebook.com/docs/plugins/page-plugin/?locale

【React】Windowsでcreate-react-app環境構築【初心者向け】

### はじめに
Windowsでcreate-react-app環境構築をします。
Macであればサクッとできそうだったのですが、
Windowsの場合はHomebrewをWSLで動作させる必要がありました。

途中何度か躓いた点がありましたので、
各段階で参考記事&補足部分を纏め、記事にしました。

この記事では、Ubuntuをインストールし、シェルで作業していく流れになります。
※他にも方法ありそうです。

### WSLインストール～Ubuntuセットアップ

ここに関しては下記記事通りで、スムーズに進むかと思います。
参考：[WSL (Windows Subsystem for Linux) のセットアップ方法](https://www.techgaku.com/archives/615)

WSL上でUbuntuを使えるようになれば完了です。

### Homebrewインストール

参考：[Homebrewインストール](https://www.techgaku.com/archives/622)
コチラの記事の、【Homebrewをインストールする】の部分を参考に進めて

型・ポインタ・参照 覚書？

※この文章はベータ版です。

# C/C++

C/C++は、型ありき(type first)で設計されています。
型は前置です。

変数宣言時に必ず変数と型を紐付けし、変数の初期化時に型に合わせて、メモリを
確保します。

Cは、設計段階で、型をつけた変数を定義して、変数間で値をコピーして渡す「値渡し」が
先ずあり、「値渡し」だけでは常に値のコピーが発生し、パフォーマンスがでないので、値が
ある場所(アドレス)を指し、値の直接操作の可能な「ポインタ」が導入された、感じがします。

Cはポインタに独自の型(ポインタ型)を用意せず、型に対して\*を後置することでポインタ型を
表現しています。
(ポインタ変数は、アドレスの入れ物なので、ポインタ変数間で「値渡し」できます。
ポインタ変数に「\*」を付けることで、ポインタ変数に格納したアドレスにある値を直接操作
できます。)
(ポインタはアドレスの入れ物なので、ポインタ自体は格納されているアドレスにある変数の
型の情報を必要とはしていませんが、実装上、ポインタの指すアドレスにある変数の型が
わからないと、その変数内にある値にアクセスできないた

JavaScript入門メモ

#項目
– node.js
– 基本的なやつ全般
– 真偽値
– 明日も書く

# node.js
node.jsとはサーバサイドでJavaScriptを動かせるものとの事だが、簡単にいうとpythonとかみたいに自他問わずpc等で動かせる環境というやつ。

“`bash:bash
#brewでバージョン管理出来るやつをいれる
brew install nodebrew

#確認
nodebrew -v
#バージョンが色々表示されたらOK

mkdir -p ~/.nodebrew/src

#インストール
nodebrew install-binary stable
#安定版で安牌

#確認
nodebrew ls
————————————
v~~.~~.~~

current: none
#こんなのが出てくればOK
————————————

#有効化
nodebrew use v~~.~~.~~

#確認
nodebrew ls

————————–

JavaScriptで文字列の中でハッシュタグから始まるワードを配列にして取り出す方法

“`javascript
[”, ラーメン, カレー, ”, カツ丼, シチュー, 肉じゃが]

//空文字列になってる奴らを除去
$tags = [];
foreach ($tagsKari as $tagKari) {
if ($tagKari !== ”) {
array_push($tags, $tagKari);
}
}

print_r($tags);
// 結果 [ラーメン, カレー, カツ丼, シチュー, 肉じゃが]

【Rails6】Action Cableによるコメント機能の実装

Rails6で作成したポートフォリオに**Action Cable**を利用したコメント機能を実装しました。
備忘録のため、実装方法を記載します。

# 開発環境
– MacOS Catalina 10.15.7
– Ruby 2.6.5
– Ruby on Rails 6.0.3.4

# Action Cableとは
そもそもAction Cableとは、[Railsガイド](https://railsguides.jp/action_cable_overview.html)によると

> WebSocketとRailsのその他の部分をシームレスに統合するためのもの

とのこと。

**WebSocket**は通信規格の一種。
Webアプリケーションにおいて、クライアント/サーバ間のデータ通信を実現するための規格。
現時点では、**リアルタイムの双方向通信をイイ感じに実現してくれる規格**とでも覚えておきます。

# 今回実装する要件
既存アプリの概要は、記事を投稿・閲覧するアプリ。
今回は既存アプリの詳細画面上で、コメントを入力・閲覧できる機能を実装します。
コメント閲覧は誰でも

配列とオブジェクトの扱いについての考察

#配列とオブジェクトの出力についてまとめてみた
題材

“`javascript

①　data[[“a” , “b”]]
②　data[“a” , “b”]
③　data{“a”,”b”}
“`
上記の取り扱いについて

###①data[[“a” , “b”]]//配列の中に配列が入っている。

“`javascript

data[[“a” , “b”]]
//呼び出す時は
console.log(data) //[[“a” , “b”]]
console.log(data[0]) // [“a”,”b”]
console.log(data[1]) // undefined
“`
###②data[“a” , “b”] //基本の配列

“`javascript

data[“a” , “b”]
//呼び出す時は
console.log(data) //[“a” , “b”]
console.log(data[0]) //a
console.log(data[1]) //b
“`
上記①、②は変数名（data)か変数名にインデックスを使用して呼び出す（data[n]

漢字熟語陣取り合戦に漢字被りを多くする選択方法を実装した

# 前回のあらすじ
[漢字熟語陣取り合戦](https://qiita.com/unticrice/items/9f859ef1c0e6064d0d5d)というものを作りました。漢字を集めてきてバラバラに表示し、そこから熟語を見つけて取り合うゲームです。集めてくる漢字によって難易度・戦略性が変わるのですが、適当な20熟語を取ってきて漢字にばらすだけだったので工夫してみました。できたものが[これ](https://mt-experience.github.io/kanjiCampounding/index.html)です。遊び方などは[README](https://github.com/mt-experience/kanjiCampounding/blob/main/README.md)を参考にしてください。

まず、面白さが熟語同士の**漢字の被り**にあると考えました。
例えば [低 気 圧 熱 帯] という漢字が未取得で、Aに「熱帯」「気圧」を取られても、Bは「熱帯**低**気圧」と答えれば得点差-4から+5の大逆転です。
Aの獲得した熟語には**低**という穴があったんですね。

XMLHttpRequestについて

#XMLHttpRequestとは
ブラウザ上でサーバーとHTTP通信を行えるオブジェクト。
これによりAjaxを可能にすることができる。
※Ajaxとは非同期通信とダイナミックHTMLを組み合わせたもの

基本的には
1.XMLHttpRequestを代入してオブジェクトを作る
2.どのようなリクエストをするのかを指定する
3.読み込み時などの設定など
4.リクエストをする
という動きになる。
—–
##1.XMLHttpRequestを代入してオブジェクトを作る
変数を定義し、「new XMLHttpRequest()」を代入、
これでオブジェクトができる。

“`javascript
const XHR = new XMLHttpRequest();
“`
##2.どのようなリクエストをするのかを指定する
XHRにopenメソッドを使い、
(第一引数 , 第二引数 , 第三引数)に
(HTTPメソッド , 送信先URL , 非同期通信するか否か)を記述していく。

“`javascri

画像投稿でプレビューを表示させる

# はじめに
ユーザーのことを思ってアプリ制作をしようシリーズ第二弾です。
railsでアプリを作り始めたころは画像投稿をする際にファイルを選択した後、ファイル名だけが表示されていることに対してなにも思わなかったんですけど、ある程度経験を積んでいくうちにプレビューがないとすごく不親切なアプリになってしまうということに気がつきました。
なので今回はそのやり方をメモ程度に書き残します。

# 作るもの
### 画像選択前

### 画像選択後
![スクリーンショット 2021-02-08 15.21.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674324/af896acd-f639-a606-1a22-7feb

Javascript 参照渡しでは無く値渡し（コピー）する方法

const a = {key:’value’}

const b = JSON.parse(JSON.stringify(a));

if(a)

JavaScript勉強し直しててへーと思った演算子

以前はサーバーサイドの実装がメインであまりJavaScriptを書く機会が無かったのですが、最近はJavaScript書く機会も多くなってきたのでこれを機に、MDN読み直してJavaScriptに再入門してみたのでそのメモです。

## null合体演算子

* [Null 合体 (??) – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

名前からして??って感じですが、

> Null 合体演算子は左辺が null または undefined の場合に右辺の値を返します。

という機能のようです。
そう言えば、

“`JavaScript
const a = b === null ? ‘c’ : b
“`

って書く事たまにあると思いますが、それが

“`JavaScript
const a = b ?? ‘c’
“`

となるイメージですね。

* [Null合体演算子 – Wik

railsでフォームに入力された文字数をカウントする方法(jQueryなし)

# 開発環境
Mac OS Catalina 10.15.7
ruby 2.6系
rails 6.0系

# 前提

– 投稿フォームのビューは実装済み

– JavaScriptのフレームワーク等は使っていません

# ビューにIDを付与する

まずはビューにIDを付与していきます。
IDを付与する要素は2箇所で、文字数を出力する要素と、文字数をカウントしたいフォームの要素に付与していきます。

“`new.html.erb

写真のタイトル
必須
# IDを付与
0文字

# IDを付与
<%= f.text_area :title, id:"post_text", placeholder:"タイトル（必須 40文字まで)", maxlength

西暦と和暦と何年前なのかのリスト生成するjs

# 西暦とそれに対応する和暦、また何年前なのかのリストを生成するJavaScriptの実装

仕事で必要だったので書きました。またどこかで使うかも知れないのでメモです。

## 実装

“`JavaScript
const FINAL_YEAR = 1800

const createOneYear = (thisYear) => {
return (index) => {
const date = new Date(thisYear – index, 11, 31)
const japaneseYear = (new Intl
.DateTimeFormat(‘ja-JP-u-ca-japanese’, { era: ‘long’, year:’numeric’ })
.format(date))
const yearsAgo = index === 0 ? ‘今年’ : `${index}年前`
return { ad: `西暦${date.getFullYear()}年`,
japanese

# Letter Book

# Letter Book

“`
現在保育士として勤務している中で、保育士の日々の業務の簡素化、
保護者と保育士間で円滑にコミュニケーションが取れないかと考え、業務の1つである
** お便り帳アプリを制作しました。 **

“`

# 動作環境

– ruby 2.6.6
– Rails 6.0.3.2
– JavaScript
– jQuery
### データベース
– PostgreSQL

# DEMO
https://letter-book.work/


# 工夫したところ

実際に現場の職員の話、助言をいただき使っていたただくユーザ目線を考え試行錯誤しなが作成。
具体的には、

### ◎スマホで操作できるようレスポンシブデザイン

### ◎忙しい朝の時間にボタン１クリックで登園の時間を

【Vue.js】オブジェクトのプロパティを追加してもリアクティブに動作しなかった時の備忘録

vue.jsでオブジェクトに新しくプロパティを追加してもリアクティブに動作しません。
未定義のプロパティをv-ifで参照させた時に、この事象に遭遇したため、調査してまとめました。

—

以下の3つのケースの変数を、v-ifに指定した場合の挙動について見ていきましょう。

– プリミティブな変数
– オブジェクトのプロパティ(定義済)
– オブジェクトのプロパティ(未定義)

## 例1：プリミティブな変数をv-ifに指定した場合

“`vue