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

React + TypeScript: useReducerを使ったカウンターのアプリケーションに型づけする

ReactにTypeScriptを使おうとすると、TypeScriptの基礎知識だけでは足りず、Reactの型について知らなければなりません。それで、戸惑うことも多いでしょう。そういう人たちのためにReactとTypeScriptの使い方をまとめたのが「[React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react)」です。本稿では「[useReducer](https://github.com/typescript-cheatsheets/react#usereducer)」の項を参考に、`useReducer`フックで簡単なカウンターをつくってみます。

# TypeScriptが加わったReactのひな型アプリケーションをつくる
TypeScriptを加えたReactのひな型アプリケーションは、[Create React App](https://create-react-app.dev/)でつくりましょう。コマンドラインツールで`npx create-react-app アプリケーシ

VSCodeで言語ごとにタブスペースを変える。プロジェクトごとにも分ける

# Visual Studio Codeで言語ごとにインデントの設定をしたい

## エディタ全体設定

1. VSCodeを開く
1. Ctrl+Shift+Pで開く（もしくは表示→コマンドパレット）コマンドパレットに`Preferences: Configure language specific settings`を入力/選択してユーザー用設定を開く。
1. 編集対象の言語を入力/選択する。
1. スペースサイズはeditor.tabSizeプロパティから設定できます。

参考：

“`json:Support/Code/User/settings.json

{
“[javascript]”: {
“editor.tabSize”: 2
},
“[php]”: {
“editor.tabSize”: 4
}
}
“`

この方法だと全てに設定が反映されます。

## プロジェクトごとに設定したい

上の方法で操作した場合`~/Library/Application Support/Code/User/setti

WebAudio PannerNodeを使用して、手軽に立体的なサウンドを実現する

Canvas,WebGLの登場により、ブラウザでも手軽に2Dや、3Dのグラフィックができるようになりましたが、「音」についても、

– [Web Audio API][WebAudio-link]の[PannerNode][MDN-PannerNode-link]と[AudioListener][MDN-AudioListener-link]

を利用することで、2Dや3Dなどの空間を考慮したアプリケーションが作成できるようになります。
具体例をいくつかあげると、

– 遠くいる人（音源）の声が、小さく聞こえ、近くにいる人の声が、大きく聞こえる
– 右側にいる人の声が、ステレオヘッドホンのR側から聞こえる
– 自分(音の聞き手)に対して、正対している人の声の方が、顔を背けている人より大きく聞こえる

などができるようになります。

本記事では、この[PannerNode][MDN-PannerNode-link]、[AudioListener][MDN-AudioListener-link]について、基本的な使用方法と、各パラメータの意味や指定方法を紹介します。

# 前提知識
– j

React入門（import, export）

#import, export
Hello Reactを表示するようまでをまとめています。
下の表示がディレクトリの構成です。

“`
├── src
│   ├── App.js
│   ├── contexts
│   │   └── hello.js
“`

“`js:App.js
import { Hello } from ‘./contexts/hello.js’;

function App() {
return (

);
}
“`

`import { Hello } from ‘./contexts/hello.js’;`
App.jsでHello関数を呼び出してretunでHello関数を表示しています。

“`js:hello.js
export const Hello = () => {
return (

Hello React

)
}
“`

`hello.js`は`export `でHello関数を他のファイルでも使えるように設定しています。

【React】ReactでTrello風のカンバンアプリを作る手順【react-beautiful-dnd】

# はじめに
今回、Reactとreact-beautiful-dndを使って、Trello風のカンバンアプリを制作する手順を解説します。
といっても私もまだReactを学び始めて1ヶ月程度ですので至らない点もあるとは思いますが、よかったらアドバイスやコメントなどいただけますと幸いです。

## 参考
こちらの記事は下のリンクを参考にハンズオンで作成したものを解説しています。
英語なのでわからない、とっつきにくいといった方にむけて書いています。
ちなみに僕は全く英語がわからないので、翻訳や`console.log()`で値や結果を逐一確認しながら進めていきました。

https://github.com/atlassian/react-beautiful-dnd

https://egghead.io/lessons/

## この記事を見てできるようになること

いったんここまで進めたので、理解度の確認や備忘録として記事を書いてみます。#もりけん塾 @terrace_tech #はむこみ @diveintohacking pic.twitter.com/oUaHKMF2wd

— やまもとしょう@インハウスデザイナー兼コーダー (@_syoyamamoto_) March 14, 2021

・リストの並び替え
・ドラッグ&ドロップ動作中のスタイル変更
・react-beautiful-dn

JavaScriptの巻き上げ

JavaScriptでは**Hoisting (巻き上げ）**が起きます。
##巻き上げとは
***関数や変数をコードが実行する前にメモリに格納すること***

##### 関数宣言の場合
“`javascript
func(); //ジョジョ
function func() {
console.log(“ジョジョ”);
};
“`
上記のコードのように呼び出しが定義より前でも実行可能なのは***関数が巻き上げられてるからです。***
巻き上げが起きることで***funcという関数が呼び出しより先に定義されてると認識されます***。

“`javascript
//巻き上げられるので関数宣言が呼び出しより先に読み込まれる
function func() {
console.log(“ジョジョ”);
};
func(); //ジョジョ
“`
なので関数宣言の場合は呼び出しが先に来ても実行されます。
今度は変数の巻き上げを見てみましょう。

#####変数の場合

“`javascript
var myname = “空条承太郎”
function func() {

window.openerが使えなくなった

いつ頃変わったのか分からないけど、前までは

“`html
hoge
“`

みたいなコード書いておけば遷移先のウィンドウで `window.opener` に呼び出し元画面の参照が入ってたのに使えなくなってた。

“`html
hoge
“`
って書けば動く。

該当箇所書き直すの面倒くさい・・

React.Fragmentをvanilla（native）のJavaScriptで書くならば?

受け取ったマークアップを1つの塊としてDOMに吐きたい。

`DOMParser`を使うと新しいドキュメントの中の`body`要素内に並べられるので1つずつ取り出す必要があります。`text/xml`としてパースするとトップレベルの要素が複数あればパースエラーになってしまう( ˘ω˘ )

`React.Fragment`のような動きを、JavaScriptだけで実装したい、と思い立ち✍

DEMO:

“`js
class HTMLDocumentFragmentElement extends HTMLElement {
/** @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions */
connectedCallback() {
const fragment = document.createDocumentFragment();
co

JavaScript製のJSON用テンプレートエンジンの比較

JavaScriptから複雑なJSONを動的に生成するテンプレートエンジンを必要としているため、既存のライブラリを一通り調べてサンプルコードを列挙しました。
もしおすすめのライブラリをご存知でしたらコメントください。

目的としているテンプレートエンジンの仕様ですが、以下を必要としています。

– JSONまたは文字列をテンプレートとし、JSONを入力値とする
– 出力結果はJSON
– テンプレート中の指定キーワードをJSONの入力値で差し替える
– foreach/if/unless/optional などの制御構文を持つ

https://npmjs.com

から既存のライブラリを調査中です。

## json-templates

https://github.com/datavis-tech/json-templates

サンプル1:

“`javascript
// Context values could be objects and arrays.
const template = parse(“{{foo:baz}}”);
console.log(templ

【JavaScript】var、let、constの違い

# はじめに
最近JSの学習をはじめ、変数を宣言する際にvar、let、constのどれで宣言したらいいのか迷ったので使い分けを備忘録としてまとめて行こうと思います。アドバイスなどがあればコメントよろしくお願いします。

# var、let、constの違い早見表
| | 再宣言 | 上書き |配列・オブジェクト書き換え|
|:———-:|:———–:|:————:|:———–:|
|var | ◯ | ◯ |◯ |
| let | × | ◯ |◯ |
| const | × | × |◯ |

# var
従来のJavaScriptでは変数宣言は全てvarで行っていた。varは変数の上書きも、再宣言、配列・書き換えが全てでき柔軟性はあるが、逆に何でもできてしまうのでプロジェクトが大きくなった時に意図しない変数の上書きや再宣言が起きてしまう

JavaScript・jQuery よく使う記述の比較チートシート

JavaScriptの書き方とjQueryの書き方が分からなくなりがちで、毎回ググってしまうので、よく使う気がするものをまとめてみました。思いついた分記載しましたが、なんせ普段バックエンドを触っているので、全然足りてないだろうなとは思います。なので随時更新予定です。

jQueryが使える案件ではjQueryを使用したほうが記述量が減るため見やすくていいと思いますが、パフォーマンス面では純粋なJavaScriptの方がバックグラウンドで動く処理がない分速いようなので、使い分ける余裕を持ちたいなぁと思いました。

#jQuery

“`.js
// 要素取得
$(‘#id’) // id指定
$(‘.class’) // class指定
$(‘input[name=”値”]’) // タグ・属性指定

// 部分一致 指定
$(‘[id^=”id”]’) // id指定 前方一致
$(‘[id$=”id”]’) // id指定 後方一致
$(‘[id*=”id”]’) // id指定 部分一致

// 変更（「’new’」部分を記述しなければ値取得）
$(‘#id’).val(‘new

Node.js? Express? yarn? ナニソレ

##はじめに
現在，Expressでポートフォリオを作成している大学4回生です．
ポートフォリオ作るにあたっていろいろ調べまくったのでまとめます．

###※注意
* 環境構築に関する記事ではありません．
* これを読んだからといって何を得るわけではありません

##Node.js?
JavaScriptで開発をしている(目指している)方で聞いたことのない方はいないと思いますが，実際Node.jsって何者なんでしょうか？
ずばりNode.jsとはサーバーサイドで開発するためのJavaScript実行環境です！！！
ん?どゆこと？って人はひとまずソーナンダーって思ってください．これを使うことで色々便利なことがあるんです．
###-使う理由
ではなぜブラウザで動くただのJavaScriptではなくNode.jsを使うのでしょうか．だって書くのは同じ言語なのに
先程も説明した通りNode.jsはサーバーサイドのJavaScript実行環境なのでブラウザで動くものより色々自由度が上がるんです．例えばファイルを読んだり，書き込んだりする際ブラウザ上のコードではできません．
なぜならそんなことがで

JavaScript 【基礎学習】【初学者向け】【まとめ】

【 JavaScript 基礎 】

はじめに、コードの書き方の例は記載していますが出力結果は載せていません。
　学習しながら出力結果を想像して、
　自身のエディタに記述して、
　実際に手を動かしながら学習して出力結果を確認しましょう。
　そうすることで、学習速度は上がります。

・変数、定数
　箱に名前をつけて、好きな値を入れて、つけた名前で呼び出すことができる。
const（定数）　・・・　上書きできない
let（変数）　・・・　上書きできる
　・上書き⇨省略記述方法
　　（変数名を、xだとして。）
　x = x + 1 ⇨　x += 1 　⇨　x++　(足し算)
　x = x – 1 ⇨　x -= 1 　⇨　x–　(引き算)
　x = x * 1 ⇨　x *= 1 　(かけ算)
　x = x / 1 ⇨　x /= 1　　(割り算)
　x = x % 1 ⇨　x %= 1 　(割り算の余り)（例　4 % 3 = 1　）

・テンプレートリテラル
　文字列の中に定数や変数を含めて展開することができる。

“`javascript:qiita.rb
＜書き方＞

const na

環境変数が読み込めない【Next.js】

# 問題
Next.jsを用いたプロジェクト内で以下のように環境変数を参照しようとしても参照できない(特にエラーメッセージなし)

“`:.env
VAL=sample
“`

“`React
// 環境変数VALを表示
console.log(process.env.VAL);
“`

# 解決方法
変数名を`NEXT_PUBLIC_~`としていないのが原因でした。

`VAL`を`NEXT_PUBLIC_VAL`と変更すると解決できました。

詳細は[こちら](https://nextjs.org/docs/basic-features/environment-variables)

dockerを起動すると.envがnot directoryと言われる

# エラー

`docker-compose up -d`でdockerを起動しようとすると，

“`
Encountered errors while bringing up the project
…（中略）… not a directory …
“`
のようなエラーがでました．

要約すると，.envがディレクトリではなくファイル形式になっているよという内容のようでした．

たしかに.envをディレクトリにすると直るのですが，ファイル形式でないと環境変数などが記述できず意味がない…

# 解決方法
一度イメージごと削除して再起動したら直りました．
（ただの`docker-compose down`では直りませんでした）

“`
# イメージごと削除する
docker-compose down –rmi all
“`

“`
# 起動
docker-compose up -d
“`

SEじゃない人にウケが良かったRedmainのカスタマイズ

# はじめに

とても便利なプラグイン「ViewCustomizePlugin」を使ってのカスタマイズです。
あっちこっち参考にさせて貰ったので、自分も還元。

# 動作環境

– Windows Server 2019 Standard
– Bitnami Redmine Stack 4.1.1-4
– View Customize plugin 2.7.0

# テーブルの横幅変えられるのと、くっつくヘッダ

これはSEの人にも、頑張って作ってって言われた。
リサイズはラッパーかまして、resizableがそのまま使えた。
ヘッダ追従はヘッダだけコピーしたテーブル作って、コピーテーブルをスクロールイベで制御してます。
（チケット名と日付だけは、文字列折返ししたかったので、コード内で設定）

ヘッダの追従は色々試したり、調べた結果結構な力技になった印象…。
~~ガントチャートの方のヘッダ追従誰か作って…~~

![Videotogif (1) (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

サンプルアプリケーションをアレンジする、という学習法~todoアプリの例~

#「基礎学習の向こう側」
Java,PHP,JavaScript、世にプログラミング言語は数あれど、初学者が陥りがちな悩みは共通している。
それは、「どんなアプリケーション」を作ればよいかわからないことである。
特に、私自身も含め基礎文法を学習した方がその悩みを抱えているように感じる。
そのような方には、「アレンジ学習法」を提案したいと考え、本稿執筆に至った。

# アレンジ学習法
この学習法は、インターネットでよく見られる初学者向けのサンプルアプリケーションを自分なりに変更(アレンジ)するというものである。
例えばこちらの動画ではJavaScriptの基礎文法のみでクイズアプリを作成する方法が説明されている。

こういった初心者向けのアプリケーションの、仕様や一部機能を自分なりに変更するのがこの学習法である。
実践例としては、このクイズアプリのコードを流用してタスク管理アプリを実装することなどが挙げられる。

# 具体例
文章で説明してもわかりにくい点があるので以下、画像を用いて説

React入門(コンポーネントのライフサイクル)

– [公式サイトの参考](https://ja.reactjs.org/docs/react-component.html)

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

**Mounting**は初期値
**Unmounting**は初期値から変更された値

#useEffect

`import { useEffect } from ‘react’;`

“`js:
useEffect(() => {
// MountingとUnmountingに呼ばれる
})

useEffect(() => {
// Mountingの時に呼ばれる
}, [])

useEffect(() => {
// Mountingと引数の時に呼ばれる
}, [引数])

useEffect(() => {
// Mountingの時に呼ばれる
return () => {
//Unmountingが呼び出される
}
})
“`

#おまけ
`styled-components

[StoryBook] KnobsとかControlsの値をコンポーネント内から変える

こういうコンポーネントがあるとする

“`react
const ToggleButton = ({ isOn, onClick }) => (

{isOn ? ‘ON’ : ‘OFF’}

);
“`

で、こういうコンポーネントをStoryBookで見る時に
“knobsやcontrolsの操作で`isOn`が切り替わる” かつ “ボタンを押した時でも`isOn`が切り替わる” ストーリーを書く方法

## Storybook v6~ & addon-controls の場合
`@storybook/client-api`からカスタムフック`useArgs`をインポートしてきて
ストーリーコンポーネントの引数ではなく`useArgs`の第一要素の値をコンポーネントにpropsとして渡す。

値を変更する場合は`useArgs`第二要素の関数へオブジェクトを`{ 変更したいキー: 変更後の値 }` の形で投げてやればArgsが変更され、それに応じてControlsアドオンの表示も

let,const,varの使い方について

#はじめに
JavaScriptの“let“,“Const“,“var“の使い方・使い分けについて解説します。

##とりあえず結論から
1.基本的に変数宣言は“const“でOK
2.“var“はもう使わなくてOK
3.変数への再代入をする場合は“let“を使用する

###constについて
“const“の特徴は**再宣言/再代入不可**という点にあります。

**再宣言・再代入とは**

“`JavaScript
//変数定義
const name = “Naynko”;
//再代入
name = “Oneko”;
//再宣言
const name= “neko”;
//出力
console.log(name);
//エラーとなり実行できない
“`

これを出力した場合エラーが出ると思います。
よってconst変数の場合、このような再宣言/再代入は**不可能**という事になります。

###letについて
“let“の特徴は**再宣言不可/再代入可**という点にあります。

“`JavaScript

//変数定義
let name =