今年の振り返り 2023年、みなさんはどんな1年でしたか？ 自分は仕事でもプライベートでも、たくさんの始まりがあり、挑戦があり、そしてこれまでの人との繋がりや支えられていることを強くする一年となりました。 関わっていただいた方々には頭が上がらぬ思いです…。 本当にありがとうございました。 さて、ここでは「GRAYCODE」の運営についての振り返りをしてみたいと思います。 今年は主に、新しいコンテンツを作るというよりも今まで作ってきたコンテンツの情報を更新することに注力していた一年でした。 それでもまだまだ更新が追いついておらず、せっかく情報を求めて辿り着いていただいた方々のストレスになっていなか、日々不安に感じています。 GRAYCODEの運営も来年の春に10年を迎えるため、今は以下の取り組みを進めています。 CMSをWordPressからHugoへ切り替え（ページの表示が早くなる…はず…

CSSのtext-overflowプロパティを使い、テキストが親要素の幅より広いときに自動的に省略形にする方法を解説します。 この記事のポイント text-overflowプロパティを使うとCSSのみでテキストを自動省略できる テキストを親要素の幅に納めるにoverflowプロパティとwhite-spaceプロパティも併せて指定する必要がある 2023年11月時点では末尾の記号は「…」以外を指定することはできない（仕様では他の記号も指定できる） テキストを改行せずに末尾を省略して表示する 前後の要素と高さを揃えたいときや表示エリアが限られているとき、CSSのtext-overflowプロパティを使う以下のようにテキストを自動的に省略して1行に収めることができます。 こちらのサンプルでは、記事一覧の記事タイトルであるh2要素に対してtext-overflowプロパティを指定し、親要素の幅より

以降はfont-variant-capsプロパティを使用するコード例とブラウザの表示例を紹介します。 使用例1 フォントを「Noto Sans」、テキスト「Apple」で上記の値を指定した例になります。 CSS コード例 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;700&display=swap'); .sample1 p { margin-bottom: 20px; font-family: 'Noto Sans', sans-serif; } .sample1 .text1 { font-variant: normal; } .sample1 .text2 { font-var

配列（Arrayオブジェクト）の標準メソッドとして用意されたfilterメソッドを使って、配列から条件を満たす要素のみを取り出す方法について解説します。 この記事のポイント 配列（Arrayオブジェクト）が標準で用意するfilterメソッドを使うと簡単に条件を満たす要素を取得できる 要素の位置を取得したいときはfindIndexメソッドを使う APIのデータなどオブジェクトが入った配列で条件を満たすデータを抽出することもできる 配列から条件を満たす要素のみ取り出す JavaScriptの配列（Arrayオブジェクト）は標準で多くのメソッドを用意されていますが、その中の1つに指定した条件を満たす値を持った要素だけを取り出すfilterメソッドが用意されています。 基本的な使い方は下記のコード例のようになります。 JavaScript コード例 // (1) 動物の名前が入った配列 const

セレクトボックス（select要素）で選択されている項目（option要素）のラベルを取得する方法について解説します。 この記事のポイント select要素の選択中のラベルはoptionsプロパティが持つlabelプロパティで取得できる select要素の選択中のvalue属性はvalueプロパティから取得できる セレクトボックスの選択状態の項目ラベルを取得する フォームなどのセレクトボックス（select要素）で選択状態の項目について、value属性とは別にラベルを取得したり、変更したいケースがあります。 そのときは、select要素のoptionsプロパティからlabelプロパティを参照することで取得することができます。 JavaScript コード例 const label = select.options[select.selectedIndex].label; 選択中の項目を特定

セレクトボックス（select要素）の選択状態をJavaScriptで設定する方法について解説します。 この記事のポイント select要素のselectedIndexプロパティに数値を入れて選択状態にする 複数選択できるmultiple属性を持つselect要素は、option要素のselectedプロパティにtrueを入れて選択状態にする セレクトボックスを選択状態にする フォームなどのセレクトボックス（select要素）の選択状態は、JavaScriptからselect要素のselectedIndexプロパティに数値を入れることで設定することができます。 JavaScript コード例 select.selectedIndex = 3; selectedIndexプロパティに設定できる値は、select要素内のoption要素の数に準じます。 値は0を先頭とし、1つ目を選択したい場合

セレクトボックス（select要素）の選択状態をJavaScriptで解除する方法について解説します。 この記事のポイント select要素のselectedIndexプロパティに-1を入れると選択解除できる select要素の先頭のoption要素がプレースホルダーの場合は0を入れて解除する 複数選択できるmultiple属性を持つselect要素は、option要素のselectedプロパティにfalseを入れて選択を解除する セレクトボックスの選択を解除する フォームなどのセレクトボックス（select要素）の選択を解除するときは、JavaScriptからselect要素のselectedIndexプロパティに「-1」数値を入れることで設定することができます。 JavaScript コード例 select.selectedIndex = -1; もしselect要素の先頭のoptio

配列に新しく要素を追加する方法について解説します。 この記事のポイント 配列に要素を追加する方法は3種類 配列の末尾に要素を追加するときはpushメソッドを使う 配列の先頭に要素を追加するときはunshiftメソッドを使う 配列に要素を追加する方法は3種類あります。 配列の添字（キー）で指定した位置に値を代入する pushメソッドを使う unshiftメソッドを使う それぞれの要素を追加する方法を解説していきます。 配列の添字（キー）で指定した位置に要素を代入する 最も基本的な要素の追加方法になり、変数に値を代入するのと同じ形式で要素を追加することができます。 また、値を入れる位置をピンポイントに指定できることもポイントです。 JS コード例 let animals = [ 'cat', 'dog', 'mouse']; // キーを指定して値を追加 animals[3] = 'tiger

配列の長さを取得する方法について解説します。 この記事のポイント 配列の長さはArrayオブジェクトのlengthプロパティから取得する 多次元配列についてもlengthプロパティで長さを取得できる 配列の長さはlengthプロパティで取得することができます。 JS コード例 let animals = [ 'cat', 'dog', 'mouse', 'fish', 'penguin']; console.log(animals.length); // 5 Arrayオブジェクトのインスタンスであればlengthプロパティで配列の長さを取得できるため、以下のように多次元配列やオブジェクトを含む配列についても長さを取得することができます。 多次元配列の長さを取得する 多次元配列も配列なのでlengthプロパティから長さを取得できます。 今回は以下のような2次元配列で外側と内側の要素の長さを

変数に入っているインスタンスが特定のオブジェクトのインスタンスであるかを調べる方法について解説します。 この記事のポイント instanceof演算子で特定のオブジェクトのインスタンスか確認する プリミティブ値はtypeof演算子を使う オブジェクトのインスタンスになっているか確認する オブジェクトのインスタンスに対してinstanceof演算子を使うと、特定のオブジェクトのインスタンスかを判定して調べることができます。 以下の例はPersonオブジェクトを定義して変数johnにインスタンスを作成し、Personオブジェクトのインスタンスであるか結果を出力します。 instanceof演算子は「インスタンス instanceof オブジェクト名」の形で使用し、「オブジェクト名」のインスタンスであればtrue、そうでないときはfalseを返します。 JS コード例 let Person =

変数の値がundefinedになるケースの紹介と、undefinedになっている変数の初期化をする方法について解説します。 この記事のポイント 値が未設定の変数は自動的にundefinedになる 変数にtypeof演算子を使うと存在するか、値が入っているか確認できる 未定義の値「undefined」 JavaScriptは値が設定されていない変数やオブジェクトのプロパティを参照しようとすると「undefined」という値を返します。 undefinedはプリミティブ値の1つです。 似たような値に「null」や「' '（空文字列）」がありますが、この2つは変数の「空」という状態なのに対して、undefinedは存在しないという意味合いになります。 具体的には以下のようなケースで発生します。 3つの変数が登場しますが、変数aは値が未設定、変数bは配列、変数cはオブジェクトになっています。 JS

変数から別の変数に代入するときに「値渡し」になるパターンと「参照渡し」になるパターンの違いについて解説します。 この記事のポイント プリミティブ値は「値渡し」になる オブジェクトは「参照渡し」になる オブジェクトを値渡ししたいときは新しいオブジェクトを代入して参照を解除する 変数から変数へ値を代入したときについて 変数から変数に値を代入したとき、値の複製だけが行われる「値渡し」と、値への参照そのものを代入する「参照渡し」の2種類あります。 JavaScriptには文字列（string）、数値（number）、真偽値（boolean）、null、undefinedの5種類の型に分類できる「プリミティブ値」が用意されています。 プリミティブ値が入った変数であれば、別の変数に値を代入したときは「値渡し」になり、2つの変数は独立した変数として扱うことができます。 以下の例はプリミティブ値をもった変

typeof演算子を使って変数に入っている値の型を調べる方法について解説します。 この記事のポイント typeof演算子は値の型を返す nullの型は「object」になる typeof演算子を使うと、データの型を調べることができます。 以下の例はtypeof演算子に色々な値を渡してデータの型を出力しています。 コード例 // 変数を使わず値を直接渡して実行 console.log(typeof true); // boolean console.log(typeof null); // object console.log(typeof undefined); // undefined console.log(typeof 9); // number console.log(typeof -12); // number console.log(typeof 0); // number c

指定した分だけページをスクロールさせる方法について解説します。 この記事のポイント 縦横自由に移動できる HTML要素の表示位置はgetBoundingClientRectメソッドで取得する スクロール量を取得 ページを指定した分だけスクロールさせるには、windowオブジェクトのscrollToメソッドを使います。 以下の例では「コンテンツ3へ移動」ボタンを押すとコンテンツ3を表示する位置まで移動します。 ボタンを押すと… コンテンツ3までスクロール コードは次のようになります。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JS Test</title> <script> window.addEventListener('load', (event) => { document.ge

ページのタイトルを動的に書き換える方法について解説します。 この記事のポイント ページのタイトルを動的に書き換える ページのタイトルを取得する ページのタイトルはdocumentオブジェクトのtitleプロパティから取得したり変更することができます。 以下の例ではボタンを押すとページタイトルが書き換わります。 ページタイトルはタブに表示されます ボタンを押すとタイトルが書き換わる コードは次のようになります。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>GRAYCODE JavaScript</title> <script> window.addEventListener('load', (event) => { document.getElementById('button1').a

現在表示しているページのスクロール量を取得する方法について解説します。 この記事のポイント スクロール量で現在の位置を計測する スクロールに応じてページの表示を操作する スクロール量を取得 現在のページのスクロールした量はwindowオブジェクトのscrollXプロパティとscrollYプロパティで参照することができます。 横のスクロール量はscrollXプロパティ、縦のスクロール量はscrollYプロパティから取得することができます。 一般的にはWebサイトは縦方向にスクロールすることが多いですが、scrollYプロパティを使うと次のようにスクロールした量を知ることができます。 コードは次のようになります。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JS Test</title>

現在表示しているページの前後ページに移動する方法を解説します。 この記事のポイント 閲覧履歴をもとに前後のページへ移動する もし履歴がない場合は何も起こらない 履歴をもとに前後のページへ移動する 現在のページから前後のページへ移動したいときは、Historyオブジェクトのbackメソッド�、またはforwardメソッド�で移動することができます。 これらのメソッドは履歴をもとに移動しますが、もし前後ページの履歴がない場合はメソッドを実行しても何も起こりません（再読み込みもなし）。 以下のコードは「前のページへ」ボタンを押すと前のページへ移動するhistory.backメソッドが実行され、「次のページへ」ボタンが押されるとhistory.forwardメソッドが実行されます。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset

ページを再読み込みする方法について解説します。 この記事のポイント location.reloadメソッドでページをリロードする 現在開いているページをリロードする Locationオブジェクトのreloadメソッド�は現在表示しているページを再読み込みすることができます。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JS Test</title> <script> if( confirm('再読み込みしますか？') ) { location.reload(); } </script> </head> <body> <h1>JS Test</h1> </body> </html> 上記のコードを実行すると次のように確認ウインドウが開き、「OK」を選択したときのみ再読み込みを行います。

ブラウザを表示している端末のピクセル比を取得する方法について解説します。 この記事のポイント ブラウザを表示する端末が高解像度かどうか分かる 端末の解像度によって処理を分ける 端末が高解像度か判定する windowオブジェクトのdevicePixelRatioプロパティはブラウザを表示している端末のピクセル比を取得することができます。 このプロパティの値が1だと通常の解像度、2だと高解像度となります。 例えば、RatinaディスプレイのMacbookなどでdevicePixelRatioプロパティの値を出力すると次のように2が出力されます。 RetinaディスプレイでdevicePixelRatioプロパティを出力 通常の解像度の端末と高解像度の端末で処理を分けたい場合は、次のようにdevicePixelRatioプロパティの値を使って条件分岐をします。 また、windowオブジェクトはグ