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

HerokuでNode.js(Express)で書いたHello worldプログラムを実行したい！

サーバ上でWEBアプリ動かしてみようかな！できればMySQLとかのDBとも連携もしたい！
と思ったのでそれらを使えるサーバにデプロイする事にしました。

AmazonのAWSも無料で使えるので検討しましたが、無料期間が限定(12か月)されているのと利用できるサーバ時間の長さでまずはHerokuを使ってみる事に。

# 結論
__Heroku？なにそれおいしいの？状態からでも結構簡単にWEBアプリをデプロイできました。__
実際に手を動かす時間よりは調べている時間の方が長かったかも。

##### 環境
Win10+VSC@1.68
Node.js@16.14.2+Express@4.18.1

##### やろうとしたこと
– Herokuサービス上でNode.js(Express)プログラムを動かす
## やったこと
まずは小さな小さな成功体験から。

Herokuに登録します。超簡単成功体験。
日本語でしっかり書かれているのは嬉しいです。

https://jp.heroku.com/

Herokuとは何か？については端折ります。
ざっくり言うとWEBアプリを動かせるサーバ環境を

【JavaScript関数ドリル】中級編のchunk関数の実装アウトプット

## chunk関数の課題内容

_.chunk関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#chunk

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】chunk関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例では第二引数が想定通りでない場合の処理を記述していたので、勉強になった。
– 解答例ではWhile文とsplice関数を使用してシンプルに記述されているので、こういった記述ができるように参考にしたい。

## chunk関数の実装コード（答えを見る前）
“`javascript
function chunk(array, size = 1) {
const chunkArray = [];
let tempArray = [];
let currentLen = 0;

for (let i = 0; i < array.length;

【JavaScript関数ドリル】中級編のconcat関数の実装アウトプット

## concat関数の課題内容

_.concat関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#concat

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】concat関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例ではforループ内でも変数をしようしているのを除いては、同じように実装できたので、よかった。

## concat関数の実装コード（答えを見る前）
“`javascript
function concat(array, …values) {
const concatenatedArray = […array];

for (let i = 0; i < values.length; i++) { if (Array.isArray(values[i])) { concatenate

ノンビン塾～エンジニアとしての成長記録4～

## ノンビン塾について
そもそもノンビン塾ってなに？
→[過去の記事参照](https://qiita.com/kenny_engineer/items/fc3a45ef2c123ce49495)

## 前回の課題提出
### テーマ
　130円の飲み物と160円の飲み物、この２種類しかない自動販売機で、
　お金を入れて飲み物が出てくるまでの動きをフローチャートで示す。
　※お金は小銭のみ！

### 回答
　実際にお金を入れるシーンを想像しながら作成してみた。
　※以下フローチャート内の赤文字はフィードバック
　
　私が作ったフローチャートでは、
　おつりが自販機から出てきてから、飲み物がでてくる流れになってしまっている。
　「そうじゃない。実際は、飲み物が自販機からでてから、
　　おつりがチャリンチャリンと出てくる流れやんか！」

【Rails】テーブル内の特定の文字列を含む行の背景を変更する方法

# やりたいこと
　Railsで質問待ちアプリを作っている．ユーザが質問を登録したらテーブルに表示される．
　`post`テーブルに`situation`カラムが入っており，この値が`対応中`のときにテーブルの背景の色を変えたい．

# 結論
　色々試したが，最終的には以下のコードにたどり着いた．

“`erb
<% if post.situation == "対応中" %>

<%# 背景をピンクにする %>
<% else %>

<% end %>
“`

# 試したこと
　JavaScriptの`:content`を使う方法を試した．

## jQueryの導入

### 1. jquery-railsのインストール

“`:Gemfile
gem ‘jquery-rails’
“`

“`:ターミナル
bunsle install
“`

### 2. application.jsの編集
　`//= require jquery`を追記する．このときに書く順番注意．

Node.jsで組んだプログラムにcurlコマンドでJSONデータをPOSTしようとしてハマった

Node.js(Express)で組んだプログラムにcurlを使ってJSONデータをPOSTしようとしました。
結果どハマりしたのでメモ。

# 結論
解決してない。なんたる出オチ。
もし同じようにハマってる人がいたら俺の屍を越えてゆけ・・・！
僕は他の方法でJSONデータをPOSTする事にしました。

##### 環境
Win10+VSC@1.68+Node.js@16.14.2+Express@4.18.1
VSCのターミナルはPowerShell使用

##### やろうとしたこと
– expressで書いたプログラムにJSONデータをPOSTしてJSONデータを返す
– VSCのターミナルからcurlコマンドでJSONデータをPOST

## やったこと
さっくりExpressの公式ドキュメントを参考にPOSTデータを受け取るプログラムを書きます。
POSTして、プログラム側で受け取ったデータの中身はreq.bodyに入っている模様。
なので公式ドキュメントのreq.bodyについての項目を参照。

http://expressjs.com/ja/api.html#req.bo

【 Tauri 】Vanillaでのフロントエンド⇔バックエンドの通信方法まとめ

# Tauriとは

Rustのためのデスクトップアプリケーションフレームワーク。似たような技術にElectronがあるが、それに比べて何倍か速いらしい。

# 環境構築

Rustを最新版にする。

“`bash
$ rustup update
“`

Node.jsも最新版をインストール。バージョン管理ソフト`n`がおすすめ。

[Node.jsとnpmをアップデートする方法 | Rriver](https://parashuto.com/rriver/tools/updating-node-js-and-npm)

できたらアプリの雛形を作成。

“`bash
$ npx create-tauri-app
“`

対話形式で色々聞かれるので答えていくとアプリの雛形ができる。

途中で使うパッケージを聞かれるので自分の得意なやつを選ぶ。何もわからない人は`Vanilla.js`を選べばいいです（パッケージを使わない生`javascript`のこと）。

“`bash
Your installation completed.
$ cd tauri-app
$ npm ins

JavaエンジニアによるJavaScript入門1(変数、定数、配列、連想配列)

## JavaScriptとJavaの違い
##### 1.　型

| 言語 | 型付けルール | 説明 |
|:-:|:-:|:-:|
| JavaScript | 動的型付け言語 | 変数の中身の型を自動で判定 |
| Java | 静的型付け言語 | 変数の中身の型を手動で判定 |

##### ２.　JavaScriptは全てオブジェクトで扱う
「オブジェクトとは」
下記を持ったもののことをいう

* 値（変数/定数）（プロパティ）
* 関数（メソッド）

「typeof 変数」でオブジェクトのタイプを調べることができる。
下記の変数「num」は「number」オブジェクト
下記の変数「str」は「string」オブジェクト

“`javascript
let num = 1;
console.log(‘オブジェクトのタイプは’ + typeof num);
let str = ‘aaa’;
console.log(‘オブジェクトのタイプは’ + typeof str);
“`
【コンソール出力結果】

“`text
オブジェクトのタイプはnumber
オブジ

【JavaScript】キーワード検索でリアルタイムにコンテンツ表示させる

# 概要

DBに登録されているスケジュールを全件取得し一覧表示。一覧表示されているスケジュールに対し、``で入力したキーワードでスケジュールのタイトル、作成者に該当する スケジュールを表示し、該当しないスケジュールは非表示にする。
また、文字が入力されるたびに検索処理が走り、部分一致検索にてキーワードに該当するスケジュールを表示する。

# 完成イメージ

# コード

“`html:index.html
//検索バー

//検索対象のスケジュール

• peerDependenciesMetaのoptionalとoptionalDependenciesの違いとは？

  package.jsonに設定する項目に、`peerDependenciesMeta` `optional:true`と書かれているのを見て、`optionalDependencies`との違いが分からなかったので調べてみました。

  :::note
  もし間違いがありましたら、コメントか編集リクエストをお願いします
  :::

  ## 違い

  このように書かれていました。

  https://github.com/npm/cli/issues/1247#issuecomment-729583821

  > they’re entirely different, albeit similar. optionalDependencies means, if the dep fails to install, don’t fail the overarching install. peerDependenciesMeta allows you to provide extra information about peer deps, and marking one “optional” means “

CloudCircus社【Fullstar】　×　Chrome拡張機能でDOM取得

# この記事でお話ししたいこと
Chrome拡張は開発ハードルも低く、公開しなければ無料で始められるとても魅力的なサービスです。
CloudCircus社では【Fullstar】という製品の一部としてChrome拡張を利用しています。

　* もっともっとWebエンジニアにとって使いやすい拡張がもっと増えたらいいな
　* 初級編では拡張機能試したけどその後は何もやってないのよねって人への「こんなこともできるよ」入門編

## どうしてDOMを取得したいの？
まずは下記の動画をご覧ください。
　サイト上に吹き出しや画像を表示し、システムを利用するための導線や説明をわかりやすく説明しています。

このように「どの要素をハイライトして」「要素からどの程度の距離（座標）に吹き出しを表示するか？」という設定を
Chrome拡張から行います。

Reactで画像ファイルを選択したときにプレビュー画像を表示する方法

## 概要
``で画像ファイルを選択したときに`FileReader`を使用してプレビュー画像を表示する方法

## プログラム
### 画像ファイル選択のJSXのコード

“`JSX
// ※MUIのButtonコンポーネントを使用している

画像ファイルを選択


“`

### input要素が変更された時のイベントハンドラーのコード

“`js:app.js
// プレビュー画像のデータURLを格納するstate
const [imagePreview, setImagePreview] = useState(undefined)

/**
* ファイル入

CORSにハマった…(Laravel, JavaScript)

CORSにハマったので、備忘録として記載します。。

## CORSとは、
> オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

引用元: https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

ハマった原因としては、GETリクエスト用のAPIだけ用意してCORS対策のレスポンスヘッダーを設定していたのですが、プリフライトリクエストを考慮しておらず、JavaScriptでCORSのエラーが発生していました。

## プリフライト(preflight)リクエストとは
> 単純リクエストとは異なり、「プリフライト」リクエストは始めに OPTIONS メソッドによる HTTP リクエストを他のドメインにあるリソースに向けて送り、実際のリクエストを送信しても安全かどうかを確かめます。サイト間リク

【JavaScript関数ドリル】中級編のunion関数の実装アウトプット

## union関数の課題内容

_.union関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#union

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】union関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例では引数を受け取る際に、…で展開されているのが、参考になった。

## union関数の実装コード（答えを見る前）
“`javascript
function union(arrays) {
const unionArray = [];

for (let i = 0; i < arguments.length; i++) { for (let j = 0; j < arguments[i].length; j++) { if (!unionArray.includes(arguments[i]

【JavaScript関数ドリル】初級編のcompact関数の実装アウトプット

## compact関数の課題内容

_.compact関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#compact

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】compact関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。
– 前回まで、変数名をわかりやすいものにしていなかったので、今回は気をつけようと思った。

## 課題に取り組んだ後の状態

– 解答例とまったく同じ（変数名も含めて！）にできたので、嬉しかった。

## compact関数の実装コード（答えを見る前）
“`javascript
function compact(array) {
const compactedArray = [];

for (let i = 0; i < array.length; i++) { if (array[i]) { compactedArray.p

【JavaScript関数ドリル】初級編のdrop関数の実装アウトプット

## drop関数の課題内容

_.drop関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#drop

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】drop関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうと思った。

## 課題に取り組んだ後の状態

– 解答例では、第２引数が０の場合や配列の長さより長い場合をあえて分けて処理するなど、自分のコードと違う部分があるが、自分の実装コードのforループで、第２引数が０の場合は処理されないように記述し、第２引数が配列の長さより長い場合も含め、サンプルの処理結果が同じように出ているため、このままで良いかと判断。
– もし、極端に大きすぎる第２引数が渡された場合に備える場合は、むだにforループを続けてしまうので、やはり解答例と同じようにif文を使いたいと思う。

## drop関数の実装コード（答えを見る前）
“`javascript

function drop(array,

【JavaScript関数ドリル】初級編のdropRight関数の実装アウトプット

## dropRight関数の課題内容

_.dropRight関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#dropRight

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】dropRight関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例では、第２引数が０の場合をあえて分けて処理するなど、自分のコードと違う部分があるが、自分の実装コードのforループで、第２引数が０の場合は処理されないように記述し、サンプルの処理結果が同じように出ているため、このままで良いかと判断。

## dropRight関数の実装コード（答えを見る前）
“`javascript
function dropRight(array, n = 1) {
const newArray = […array];

for (let i = 0; i < n; i++) {

【JavaScript関数ドリル】初級編のfill関数の実装アウトプット

## fill関数の課題内容

_.fill関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#fill

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】fill関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできるか自信がなかった。

## 課題に取り組んだ後の状態

– 解答例とは違う部分があるが、このままで良いかと判断。

## fill関数の実装コード（答えを見る前）
“`javascript
function fill(array, value, start = 0, end = array.length) {
for (let i = start; i < end; i++) { array[i] = value; } return array; } ``` ## fill関数の実装コード（答えを見た後） ```javascript // 同じ ```

【JavaScript関数ドリル】初級編のflatten関数の実装アウトプット

## flatten関数の課題内容

_.flatten関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#flatten

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】flatten関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできるか自信がなかった。

## 課題に取り組んだ後の状態

– なんとか処理結果がサンプル処理結果と同じにはなるように実装したものの自分のコードが腑に落ちない状態だった。
– Array.isArray()という便利なものがあることを改めて認識した。

## flatten関数の実装コード（答えを見る前）
“`javascript
function flatten(array) {
const newArray = [];
for (let i = 0; i < array.length; i++) { if (typeof (array[i]) === "object"

【JavaScript関数ドリル】初級編のhead関数の実装アウトプット

## head関数の課題内容

_.head関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#head

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】head関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– シンプルすぎて、関数を書くほどの処理でもないので、何かしら見逃しているのかと気になったが、解答例と同じなので安心した。

## head関数の実装コード（答えを見る前）
“`javascript
function head(array) {
return array[0];
}
“`

## head関数の実装コード（答えを見た後）
“`javascript
// 同じ
“`