join()メソッドの区切り文字について

#### join()メソッドを理解する
仕事でjoin()メソッドを使った際に、「配列を文字列に変換できるんだなー」という浅い理解にとどまっていたことを痛感しました。
特に区切り文字について理解不足と感じたので、再度理解を深めるために記載しました。

#### 公式を確認

公式を確認します。
[join() メソッド　公式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join “join() メソッド”)

きちんと読むととてもわかりやすく記載頂いてます。いつもさらっと必要な箇所だけ流し読みしてしまうので、きちんと読む癖をつけたいなと思います。

#####説明の抜粋
>join() メソッドは、配列 (または配列風オブジェクト) の全要素を順に連結した文字列を新たに作成して返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。

“`Javascript:
const e

npmを特定のポート番号で動かしたい

ご無沙汰してます、おおのんです。
一時的に指定したポート番号でnuxtアプリを立ち上げる方法。

“`javascript:ターミナルでnuxtアプリを5000番で動かす。
npm run dev — –port 5000
“`

はい。

お問い合わせフォーム、jsでバリデーション

“`javascript:contact.js
window.addEventListener(‘DOMContentLoaded’, () => {
// 「送信」ボタンの要素を取得
const submit = document.querySelector(‘#contact-submit’);

// エラーメッセージと赤枠の削除
function reset(input_infomation, error_message){
const input_info = document.querySelector(input_infomation);
const err_message = document.querySelector(error_message);
err_message.textContent =”;
input_info.classList.remove(‘input-invalid’);
};

// 「お名前」入力欄の空欄チェック関数

Auth0のJavaScriptチュートリアルをシンプルな構成で試してみた

Auth0はドキュメントやチュートリアルが充実していますが、それを参考にしつつシンプルな構成でお試ししてみました。

## Auth0について

下記に概要をまとめていますので、ご参考ください。

Auth0の機能を調べてみた – Qiita
https://qiita.com/kai_kou/items/b3dd64e4f8f53325020e

>Auth0(オースゼロ)とはAuth0, Inc.が提供するiDaaS(アイダース)で、Identity as a Serviceの略となりクラウドでID管理・認証機能などを提供してくれるサービスです。
iDaaSが提供する機能としては認証・シングルサインオン、ID管理・連携、認可、ログなどによる監査などがあり、Auth0もそれらを提供しています。

## アカウントを作成する

Auth0には無償プランがありますので、それを利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48549/975b40ae-bac6-240b-6e

大手日系メーカーからITベンチャーに転職して思うこと

#大手日系メーカーからITベンチャーへ
何を思ったかITベンチャーへ転職をして半年が経ちました。(やっていたことはPHP, HTML, JavaScriptなど)
なんとなく半年経って思うことをまとめておこうと思います。

#転職して思うこと
20代の若いうちは貴重な時間なので、もしやりたいことがあるのであれば転職は早いうちにしたほうがいいと思った。
（年次が上がれば上がるほど転職を決断するのは難しかっただろう…）

大手勤務時代は、やりたくないことをしてただただ時間が過ぎていく感じがした。
（まぁ、かと言ってベンチャーがそうじゃないとは言い切れないところがあるが、
大手特有の若手に対して理不尽な感じとか何事にも納得できない感じとかは今はしない）

あと、周りのほとんどの人が仕事に対して情熱がなかった。
なんとかやり過ごそうとする人が多く、きつかった。
何のために仕事をして、何がしたいのか分からなかった。
向上心のある人と働きたいと思った。

＜環境について＞
大手勤務時代は人が多くて人付き合いに疲れて、仕事に集中できなかった。
ベンチャーは人数が少なくていい。
無駄に気

React hooksを基礎から理解する (useRef編)

#React hooksとは

React 16.8 で追加された新機能です。
クラスを書かなくても、 `state`などのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。

– [React hooksを基礎から理解する (useState編)](https://qiita.com/seira/items/f063e262b1d57d7e78b4)
– [React hooksを基礎から理解する (useEffect編)](https://qiita.com/seira/items/e62890f11e91f6b9653f)
– [React hooksを基礎から理解する (useContext編)](https://qiita.com/seira/items/fccdf4e73c59c491558d)
– [React hooksを基礎から理解する (useReducer編)](https://qiita.com/seira/items/2fbad56e84bda885c84c)
– [React hooksを基礎から理解する (useCallback編)

スクロールして画面に表示されたらイベントが発生する

やりたいこと
—
スクロールして要素が画面に表示されると同時にイベントを発生させたい。

“`sass:stylesheet.scss

$(window).scroll(function () {
$(“.slide”).each(function (index, el) {
let scroll = $(window).scrollTop();
let offset = $(el).offset().top;
let winH = $(window).height();
if (scroll > offset – winH / 2) {
$(el).addClass(“in”);
}
});
});

“`

表示させたい要素のクラス名が「slide」で、複数の要素に当てたいので、「each」を使って繰り返し処理をかけています。

とりあえず画面中央まで来たらイベントが発生するように記述していますが、winH/2の２の部分を、小さい数字に変えていくと、早くイベントを発生させることができますし、大きい数字に変えると遅

【JavaScript】クリックが要素の内側か外側か判断するプログラムを作った【addEventListener】

### はじめに

`addEventListener`のコールバック関数へ引数を渡す方法はいくつかありますが、
引数を渡せるようにしたコールバック関数をとるイベントリスナを、
`removeEventListener`で解除するのは、結構苦労するものです。

この記事は
– `addEventListener`のコールバック関数に引数を渡し
– なおかつ任意のタイミングで`removeEventListener`を可能とし、
– ひとつのプログラム上でそれらをどう実現するか
を実践してみた結果と道のりを記した記事となります
(私の以前の記事の実践編となります)

※ES6以前の`JavaScript`を使用しています

### 目指したもの

今回目指すものはこちらです
※赤いサークルが現れて

ドラッグで移動できるdialogタグをざっくりと作る

## `

`タグとは

`

`: ダイアログ要素 – MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

まともに動くのはChromeとChromeベースのEdgeだけですね。
使いどころが難しいですが、社内システムとかで使う分には良いかなーって感じですね。

## まずはダイアログを表示するコード

“`html

hello

show

“`

`dialog要素`

UserScriptでの@includeで詰まったので

atcoder関連のUserScriptを書いていて、

https:// atcoder.jp/users　のみでスクリプトを実行したいが
https:// atcoder.jp/users/kemkemG0?graph=rank や、
https:// atcoder.jp/users/kemkemG0/history　等では実行してほしくない ということがあった。

シンプルに

“`javascript
// @include *://atcoder.jp/users*
// @exclude *://atcoder.jp/users/*?graph=rank
// @exclude *://atcoder.jp/users/*/history*
“`

でよかった。

React – 2つのテキストボックスの入力を相互に反映する

[公式サイトにすでに解説がある](https://ja.reactjs.org/docs/lifting-state-up.html)ので、改めて説明することもないのですが、そこ扱われているサンプルソースがやや煩雑に感じました。なので、キーとなるポイントを抽出、分かりやすく簡潔に短いソースで書いてみました。

**この記事のサンプルソース概要**
* テキストボックスが2つあり、税抜きと税込みの価格を表示します。
* いずれのテキストボックスも入力可能で、数字をタイプすると即時反映します。
　（税抜きのテキストボックスに入力すると税込みのテキストボックスに即反映される。逆も同様。）
* 同じコンポーネント(MyForm)を2つ配置してあり、入力値が他のテキストボックスに干渉しないことを確認できる。

“`html:index.html