JavaScriptにおける配列の操作（「要素の追加」「要素の削除」など）のうち、要素変更に係る操作について紹介します。
　
目次
unshift｜先頭に追加
push｜末尾に追加
shift｜先頭を削除
pop｜末尾を削除
splice｜位置指定して削除 and 追加
concat｜他の配列と結合
slice｜一部を抜粋して、配列生成
fill｜固定値で埋める

unshift｜先頭に追加

　　　arr.unshift(element1[, ...[, elementN]])

　　　elementN：arr の先頭に追加する要素。

push｜末尾に追加

　　　arr.push([element1[, ...[, elementN]]])

　　　elementN：配列の末尾に追加する要素。

shift｜先頭を削除

　　　arr.shift()

pop｜末尾を削除

　　　arrName.pop()

splice｜位置指定して削除 and 追加

　　　array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

　　　start：配列を変更する開始位置を表すインデックスです。
　　　deleteCount（省略可）：配列の start から取り除く古い要素の数を示す整数です。
　　　item1, item2, ...（省略可）：配列に追加する要素で、start から始まります。

concat｜他の配列と結合

　　　const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])

　　　valueN（省略可）：新しい配列に連結する配列や値です。
　　　すべての valueN 引数が省略された場合、 concat は呼び
　　　出された既存の配列のシャローコピーを返します。

slice｜一部を抜粋して、配列生成

　　　const new_array = arr.slice([start[, end]])

　　　start（省略可）：取り出しの開始位置を示す 0 から始まるインデックスです。
　　　end（省略可）：取り出しを終える直前の位置を示す 0 から始まるインデックスです。
　　　slice は end 自体は含めず、その直前まで取り出します。

fill｜固定値で埋める

　　　arr.fill(value[, start[, end]])

　　　value：配列に設定する値です。
　　　start（省略可）：開始する位置です。既定値は 0 です。
　　　end（省略可）：終了する位置です。既定値は this.length です。

JavaScriptにおける配列の操作（「要素数取得」「配列のコピー生成」「並び替え」など）について紹介します。
　
目次
length｜要素数取得
includes｜存在確認
indexOf｜位置確認 & 存在確認
join｜結合
slice｜配列のコピー生成
reverse｜逆順
sort｜並び替え

length｜要素数取得

　　　Array.length

includes｜存在確認

　　　arr.includes(valueToFind[, fromIndex])

　　　valueToFind：検索する値です。
　　　fromIndex（省略可）：この配列内で valueToFind を探し始める位置です。

indexOf｜位置確認 & 存在確認

　　　arr.indexOf(searchElement[, fromIndex])

　　　searchElement：検索する配列要素です。
　　　fromIndex（省略可）：この配列内で searchElement を探し始める位置です。

join｜結合

　　　arr.join([separator])

　　　separator（省略可）：配列の各要素を区切る文字列を指定します。
　　　省略した場合、配列の要素はカンマ (",") で区切られます。

slice｜配列のコピー生成

　　　arr.slice([start[, end]])

　　　start（省略可）：取り出しの開始位置を示す 0 から始まるインデックスです。
　　　end（省略可）：取り出しを終える直前の位置を示す 0 から始まるインデックスです。

reverse｜逆順

　　　a.reverse()

sort｜並び替え

　　　arr.sort([compareFunction])

　　　compareFunction（省略可）：ソート順を定義する関数を指定します。
　　　省略された場合、配列の各要素は文字列に変換され、
　　　各文字の Unicode のコードポイント順に従ってソートされます。

　
compareFunction では、２つの要素の値を引数に取ります。
そして、次のルールに従って並び替えをおこないます。
==========================
・コールバック関数が 0 未満の値(例えば -1 )を返した場合、一つ目の要素を二つ目の要素より小さいインデックスにする
・コールバック関数が 0 を返した場合はそのまま
・コールバック関数が 0 より大きい値(例えば 1 )を返した場合、二つ目の要素を一つ目の要素より小さいインデックスにする
==========================

form の input の入力値を取得するには、input への入力のイベント「input イベント」または「change イベント」を利用します。　
　
「input イベント」⇒input エリアに文字を入力するたびに発火します。
「change イベント」⇒input エリアに文字を入力して Enterキーを押すと発火します。
　
●要素の属性値にイベントハンドラを登録する場合は 「oninput 属性」または「onchange 属性」を使用します。

　　　<input type="text" name="test1" oninput="inputChange01()">

　　　<input type="text" name="test3"  onchange="inputChange02()">

　
●addEventListener を使用して、イベントハンドラを登録する場合

　　　input.addEventListener('input', inputChange);

　　　input.addEventListener('change', inputChange2);

　
●引数 event で、入力された値を取得することができます。
・「oninput 属性／イベント」

　　et inputChange = (e) => {
    　text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
    　input_val.textContent = e.data;  //今、入力されたテキスト
　　}

・「change 属性／イベント」

　　et inputChange = (e) => {
    　text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
　　}

アロー関数（Arrow function）を利用すると、関数リテラル（無名関数　匿名関数）をシンプルに記述することができるようになります。
コードも可読性を上げて、メンテナンスを容易にするためにも、ぜひ覚えて使えるようになりましょう。
　
■基本的なアロー関数の記述方法

　　　(引数) => {関数の本体}

　
■アロー関数は条件によってさらに簡素化できます。
①関数の本体が一文である場合は、{…}の「{」と「}」を省略することができます。

②引数がひとつの場合、引数のカッコも省略できます。

③引数がない場合、「()」と記述します。

　
　
■アロー関数での、this の取り扱いについて
・通常の無名関数で this を使用すると、その呼び出し元のオブジェクトになります。

・一方、アロー関数式で宣言された関数は、宣言された時点で、thisを確定（＝束縛）させてしまいます。

分割代入(Destructuring assignment)とは、配列やオブジェクトの要素を取り出して個別の変数に代入するのを簡単に行えることをいいます。
　

　
取り出したプロパティ値を、名前の異なる変数に割り当てることもできます。

　
対応するプロパティがない変数には、undefinedが入ります。

　
■この構文とスプレッドの組み合わせで、要素を取り出しつつ残りを変数に代入することが可能です。

ネストしたオブジェクトの場合

スプレッド構文(Spread Syntax)とは、「…foo」の形で記述され、配列やオブジェクトの要素を文字通り展開する構文のことをいいます。
　
例：配列の場合

　
例：オブジェクトの場合

　
■ネストしている場合
配列・オブジェクトの両方において、ネストしている場合ｇは注意が必要です。
下記のとおり、クローンした子要素は元の配列・オブジェクトを参照しています。

これを解決するには、ネストしている配列・オブジェクトも分割してスプレットする必要があります。

コードを書いていると、ネストが複雑になってコードが見にくくなることがよくあります。
そんなときは、return を利用して、見通しの良いコードを書くことができます。
　
普通に記載すると下記のようにネストが多くなり、見通しが悪いコードになりますが、

　　　let changeiput = (e)=>{  
　　　　if (e.currentTarget.value % 2 == 0) {
    　　　meytext.textContent = "偶数"
　　　　}else{
    　　　meytext.textContent = "奇数";
　　　　}
　　　}

　
次のように return を使用して、見通しが良いコードにすることができます。

　　　let changeiput = (e)=>{  
 　　　　if (e.currentTarget.value % 2 == 0) return meytext.textContent = "偶数"
 　　　　return meytext.textContent = "奇数";
　　　}

最近は、リモート勤務や Web 会議など、IT化が進んでいますね。
その一環として、ペーパーレス化もはじまっており、
PDF上に社内文書などにハンコを押すということも増えてくるのではないかと思います。
そこで、今回は Adobe の Acrobat Reader で、印章画像を登録して捺印する方法をまとめましたので
ぜひ、参考にして活用してください。
（下のリンクをクリックするとPDFが表示されます。ダウンロードなどして、ご活用ください。）
　
電子印鑑の捺印の仕方
　
　
注意：
今回、紹介した電子印鑑は、あくまで印章をPDF上に表示する（認印）方法です。法的に有効な電子サイン・電子署名とは異なりますので、ご利用にはご注意をお願いします。
　
　

　

div や p などのブロックレベルの要素の width の初期値は auto です。
width の値 auto は、親要素の水平方向のスペース全体を占めます。
　

　
よく似た設定に、width = 100% というのがありますが、こちらは要素の幅は親要素の幅と等しくなるように設定します。したがって、margin や　border があるとその幅に影響を受けます。margin を設定すると、要素がはみだしてしまって困った経験は誰でもあると思います。
　

　
次で、suto と 100% の違いを見てみてください。
　

モーダルやメッセージなどの「position: fixed;」の要素を。天地左右中央に表示する時の新しい記述方法を紹介します。
今までは、transform を（負のパーセンテージ）を使用したりで、少し複雑な記述方でしたが、新しい記述方法では簡素で理解しやすい記述方法になっています。
　

　
今までの記述法は、下記のように top,left と transform の translate を使用して設定していました。

  position:fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

　
新しい記述方法は insetプロパティ を使用して次のように記述します。

  position: fixed;
  inset: 0;
  margin: auto;

　
insetプロパティとは、 top, right, bottom, left に対応する一括指定のプロパティです。

  /* <length> 値 */
　inset: 10px; /* すべての辺に適用される値 */
　inset: 4px 8px; /* 上/下 左/右 */
　inset: 5px 15px 10px; /* 上 左/右 下 */
　inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */

　/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
　inset: 10% 5% 5% 5%;

　/* キーワード値 */
　inset: auto;

　/* グローバル値 */
　inset: inherit;
　inset: initial;
　inset: unset;

ここでは、このinsetプロパティを０に設定することにより、margin:auto の場合は top, right, bottom, leftに適用される値が等しくなり、天地左右中央に配置されるようになります。
　
　

　

過去投稿してきた CSS の Tips（小技）１０個をまとめてみました。
ぜひ、参考にして魅力的なサイト作成してください。
　

　
①タイピングエフェクトをつけたい
②画像の被写体のみに影をつけたい
③JSを使用せずにスムーズスクロールを実装したい
④コンテンツを天地中央揃えにしたい
⑤長い文章を省略して「…」を付けたい
⑥カーソルを変更したい
⑦テキストに縁取り線をつけたい
⑧テキストのハイライトカラーを変更したい
⑨テキストにモーフィングアニメーションをつけたい
⑩marginを一括で設定して統一したい
　
　

　

owl セレクタ（ふくろうセレクタ）を利用すると、
各要素の上下のマージンを一括で設定して統一することができます。
　

　
＜解説＞
owl セレクタ ⇒ * + * というセレクタは、「ユニバーサルセレクタ (*)」 と「隣接セレクタ (+)」 を組み合わせており、連続する２番目以降の要素すべてを選択します。
* + * によって選択された要素の margin-top を設定することで、要素間のマージンを一括に設定できることになります。

  * {
    margin: 0;  /* ブラウザ依存のマージンはリセット */
  }

  html {
    font-size: 100%;  /* ユーザの指定した表示サイズを尊重する */
    line-height: 1.5;
  }

  main > * + * {
    margin-top: 0.5rem;  /* サイト全体で上下マージンを統一 */
  }

  main > * + h2,
  main > * + h3,
  main > * + h4,
  main > * + h5,
  main > * + h6 {
    margin-top: 1.5em;  /* ヘッダ要素の上マージンは広めに取る */
  }