JavaScriptでフォームにある利用規約に「同意する」チェックボックスのボタンとチェックしたら送信フォームを無効化から有効化に切り替える良くあるコンテンツのサンプルコードです。 同意するチェックと送信ボタンの無効化・有効化同意するチェックと送信ボタンの無効化・有効化の切り替えを実装した動作サンプルとサンプルコードになります。 See the Pen CSS | focus-within by yochans (@yochans) on CodePen. HTMLには、同意ボタンと送信ボタンの最小限のフォーム要素を配置しています。 送信ボタンは初期値でdisabledを指定しておき、同意ボタンにチェックが入るまで無効化します。 <div class="container"> <form> <p><input type="checkbox" id="consent-chk" name="c

複数の変数をショートハンドを使って同時に宣言するサンプルコードを紹介しています。 変数の数が多い場合はまとめて宣言しておくとコード量を抑えられます。 複数の変数名をショートハンドで宣言する 値を用意せず変数名のみを宣言する場合の通常記述、ショートハンドそれぞれのサンプルコードになります。 行にわけて変数を宣言していくところを、ショートハンドではカンマ区切りで変数を宣言していくことで短縮して記述する事が可能です。 let aaa, bbb, ccc 値を持つ複数の変数名をショートハンドで宣言する 値を持つ変数もカンマ区切りで宣言していく事ができます。 let aaa = 'banana', bbb = 'apple', ccc = 'pine' 違う型を持つ変数を同時にショートハンドで宣言する ショートハンド記述でもそれぞれ違う型の値を宣言する事が可能です。 文字列型（string）、数値型

JavaScriptでfilter()メゾッドをショートハンドで記述する方法を紹介しています。 filter()は配列から条件を満たした値で新しい配列を生成する事ができる便利な関数です。 filter()を使ったショートハンドのサンプル filter()を使ったショートハンドのサンプルコードになります。 filter()を使って配列から文字列型（string）の値のみを取得して新しい配列を作成するサンプルです。 通常は以下のように記述する事で実装できます。 let array = [25, 16, 'apple', 'pine', 11, 'banana'] let str = array.filter(function (v) { return typeof v === 'string' }) console.log(str) // ["apple", "pine", "banana"]

JavaScriptで表示中のサイトのページサイトをフルスクリーンモードに切り替える方法を紹介しています。 以下は動作サンプルになります。 「Request Full Screen」ボタンでページをフルスクリーンモードに切り替え、「Cancel Full Screen」ボタンでフルスクリーンモードを解除します。 Request Full ScreenCancel Full Screen ページをフルスクリーンモードで表示する表示中のページをフルスクリーンモードにするシンプルなサンプルコードです。 HTMLは上記サンプルに使っているbutton要素を追加しています。 <button id="request-full-screen">Request Full Screen</button>ボタンに対し、addEventListener()でクリックイベントを実装しています。 Document.

テキストをクリップボードにコピーする テキストをクリップボードにコピーするボタンイベントを実装するJavaScriptのサンプルコードです。 サンプルではコピーボタンを設置して<p>タグにあるテキストをクリップボードにコピーします。 See the Pen JavaScript Get browser zoom level by yochans (@yochans) on CodePen. HTMLには、コピーするテキストのある<p>タグ、押したらコピーを実行する<button>タグ、結果を表示する用の<p>タグを作成しています。 <p id="copy-text">Copy text</p> <button id="copy-btn">Copy</button> <p id="output"></p> querySelector()でコピーするテキストのある要素を、textContent

JavaScriptでCanvasに枠線のみ、枠線なし、枠線ありしのそれぞれの円を描画する方法を紹介しています。 Canvasに円を描画する JavaScriptでCanvasに各タイプ別の円を描画するサンプルコードになります。 左から枠線のみ、枠線なし、枠線ありの円となっています。 See the Pen JavaScript cv by yochans (@yochans) on CodePen. このサンプルではHTMLはcanvas要素にid=canvasを指定しています。 <canvas id="canvas"></canvas> 枠線のみ、枠線なし、枠線ありそれぞれのタイプの円を描画します。 一度に複数の図形を描画する場合、パスをbeginPath()でリセットする必要があります。 円の描画にはarc()メゾッドを利用しています。 context.arc( x座標, y座標,

JavaScriptでCanvasに枠線のみ、枠線なし、枠線ありしのそれぞれの四角形を描画する方法を紹介しています。 Canvasに四角形を描画するJavaScriptでCanvasに各タイプ別の四角形を描画するサンプルコードになります。 左から枠線のみ、枠線なし、枠線ありの四角形となっています。 See the Pen JavaScript Canvas circle by yochans (@yochans) on CodePen. HTMLはcanvas要素にid=canvasを指定しています。 <canvas id="canvas"></canvas>枠線のみ、枠線なし、枠線ありそれぞれのタイプの四角形を描画します。 一度に複数の図形を描画する場合、パスをbeginPath()でリセットする必要があります（新しいパスを開始）。 このサンプルでは四角形の描写にはrect()メゾッドを

JavaScriptでCanvasに枠線なし、枠線ありしのそれぞれのテキストを描画する方法を紹介しています。 Canvasにテキストを描画するJavaScriptでCanvasに各タイプ別のテキストを描画するサンプルコードになります。 左から枠線なし、枠線ありのテキストとなっています。 See the Pen JavaScript Canvas draw rect by yochans (@yochans) on CodePen. HTMLは<canvas>要素にid「canvas」を指定しています。 <canvas id="canvas"></canvas>枠線なし、枠線ありそれぞれのタイプのテキストを描画します。 一度に複数の図形を描画する場合、パスをbeginPath()でリセットする必要があります（新しいパスを開始）。 このサンプルではテキストの描写には色付きテキストにfillTe

Canvasの背景色を描画するJavaScriptでCanvasの背景色を描画するサンプルコードになります。 See the Pen JavaScript Canvas draw text positions by yochans (@yochans) on CodePen. HTMLはcanvas要素にid=canvasを指定しています。 <canvas id="canvas"></canvas>Canvasは背景色を指定するオプションはありません。 Canvasに背景色を付ける場合は、Canvasのサイズと同じサイズの四角形を最初に描画する事で実装可能となっています。 サンプルでは、Canvasの縦、横のサイズと同じサイズの黒色の四角形を左上（0, 0）を基準に配置しています。 CanvasのサイズはCanvas、heightにて取得する事が可能です。 let canvas = doc

Canvasのサイズを変更するJavaScriptでCanvasのサイズを変更するサンプルコードになります。 See the Pen JavaScript Canvas background color by yochans (@yochans) on CodePen. HTMLはcanvas要素にid=canvasを指定しています。 <canvas id="canvas"></canvas>Canvasのサイズはwidth、heightにて変更・取得する事が可能となっています。 pxでの指定ではなく、数値のみを指定します。 let canvas = document.querySelector('#canvas'); canvas.width = 横幅; canvas.height = 高さ;サンプルでは背景色としてCanvasと同じサイズの四角形を描画しています。 let canvas

JavaScriptのPath2D()コンストラクタを利用してCanvasでSVGのpathを使う方法を紹介しています。 CanvasでSVGのpathを使う Path2D()コンストラクタを利用してCanvasでSVGのpathを使うサンプルコードになります。 See the Pen JavaScript Canvas change size by yochans (@yochans) on CodePen. HTMLはcanvas要素にid=canvasを指定しています。 <canvas id="canvas"></canvas> 新しいpathのデータを作成するにはnew Path2D()として引数にpathを記述します。 このPathはSVGと同じ記述で実行可能です。（fillなどの情報は入れられないので別途記述） 改行を含む複数行で記述したい場合は「｀（バッククォート）」で括れば

JavaScriptでCanvas描画するテキストの縦横中央揃えほか、左上、左下、右上、右下などの各ポジションの指定方法を紹介しています。 テキストの各ポジションの指定パターン JavaScriptでCanvasに各タイプ別のテキストを描画するサンプルコードになります。 左から枠線なし、枠線ありのテキストとなっています。 See the Pen JavaScript Canvas draw text positions by yochans (@yochans) on CodePen. HTMLはcanvas要素にid=canvasを指定しています。 <canvas id="canvas"></canvas> サンプルでは左上から順にそれぞれの位置にテキストを描画を指定してます。 位置を調節する場合は、CSSとは違ってCanvasのテキストの基準点は左下である事に注意して下さい。 ※例えば

JavaScriptを使って横棒グラフを作成するサンプルコードです。 アニメーションあり・なしバージョンを紹介しています。 横棒グラフのサンプルコード（アニメーションなし） JavaScriptだけで作る横棒グラフ、アニメーションなしバージョンの動作サンプルとそのサンプルコードです。 See the Pen JavaScript Horizontal bar graph by yochans (@yochans) on CodePen. HTMLにはグラフを挿入するコンテナ要素を作成しています。 <div id="container"></div> 色やサイズなどの見た目的な部分はCSSにまとめています。 .graf { display: flex; align-items: center; margin: 2px; } .data-name { padding: 0 6px; color

JavaScriptで対象の変数が定義されているか判別する方法のサンプルコードです。 typeof演算子を利用して変数の型を取得し、未定義となる「undefined」かどうかを判別します。 if (typeof 変数名 !== 'undefined') { //変数が定義されている }else{ //変数が定義されていない } 定義済みの変数かどうかを判別する実装サンプルコード let variable = 'abc'; if (typeof variable !== 'undefined') { console.log('変数が定義されている'); }else{ console.log('変数が定義されていない'); } //変数が定義されている if (typeof variable !== 'undefined') { console.log('変数が定義されている'); }else

JavaScriptでフォーカスされているフォームの文字色や背景色、サイズなどのスタイルを変更する方法のサンプルコードです。 See the Pen JavaScript Get form text in real time by yochans (@yochans) on CodePen. フォーカスされているフォームのスタイルを変更する フォーカスされているフォームのスタイルを変更するにはCSSで「:focus」を使って指定する事も可能ですが、今記事ではJavaScriptで動的に変更させる方法の紹介となります。 上記、動作サンプルのサンプルコードです。 <p><input type="text" class="text_box" name=""></p> <p><input type="text" class="text_box" name=""></p> <textarea cla