javascript [JavaScript] これだけ押さえておけばOK！try-catchの便利な使い方まとめ9選
フロントエンド開発やバックエンド開発など、JavaScriptでコーディングする場合「try-catch」構文は必ずといっていいほど利用されています。今回は、このtry-catch文の便利な使い方をご紹介します。全ての例外をcatchするみ...
javascript
javascript 
Webサービス/ツール系 フロントエンジニア必見!! 必ず導入すべきVSCode拡張機能10選
フロントエンジニアにとって生産性と効率性を維持するためには、適切なツールを使うスキルが必要となります。Visual Studio Code (VSCode) は軽量でカスタマイズ可能なエディタの一つであり、ほとんどの開発者が利用しているエデ...
javascript [React] 現在の日付と時刻を表示する（デジタル時計）
Reactで現在の日付や時刻を表示する方法の備忘録となります。JavaScriptでは下記のメソッドを利用することで日付や時刻の値を取得することができます。let d = new Date();console.log(d.getFullYe...
javascript [JavaScript] JSONデータのエンコード・デコードまとめ
JSONデータを扱う場面は多々あります。今回はJavaScriptを利用して、配列オブジェクトをJSONデータにエンコードおよび、JSONデータを配列にデコードする方法の備忘録となります。配列をJSONデータにエンコード配列オブジェクトをJ...
javascript MacOS環境にNuxt3をインストールする方法まとめ
はじめに今回は、2022年11月16日に正式リリースされたNuxt3の環境をMacOSに用意し、実際にTypeScriptを実装してみたいと思います。Nuxt3 とはNuxt3 はReactでいうところのVue.js版やNext.jsでイメ...
javascript [JavaScript] xml-jsを使ってJSONデータとXMLデータを相互変換する方法
今回は JavaScriptを利用して JSONデータをXMLデータに、XMLデータをJSONデータに相互変換するための方法をまとめます。本処理で利用するライブラリは「xml-js」となります。xml-js ライブラリをインストールnpmを...
javascript [javascript] スタックとキューの使い所と実装方法まとめ
今回はjavascriptでスタックとキューについての簡単な知識と、実際の使い所と実装方法についてまとめます。スタックとはスタックとは最後に入れたものを最初に取り出すデータ構造を指し、「LIFO（Last In, First Out : 後...
javascript [javascript] textareaに入力した文字数や行数をリアルタイムにカウントして画面に表示する方法
Twitterやinstagramなどフォームに文字制限が付いているのをみたことがある人は多いかと思います。今回はこの文字数のカウントと行数のカウント方法をjavascriptを利用して表現します。textareaにキーが入力されたかどうか...
javascript [javascript] 自動で共有先を用意してくれる「Web Share API」の使い方まとめ
アクセス数を増やすための試みの一つとして、WebコンテンツをSNSへシェアする方法があります。最近ではSNSのツールがかなり増えてきたことでシェアボタンがない場合もあります。ここで登場するのがWeb Share APIとなります。Web S...
javascript [javascript入門] 文字列の中に数字が入っているかどうかチェックする方法まとめ
javascriptを利用して、文字列の中に数値が入っているかどうかをチェックする方法の備忘録となります今回は下記の方法をご紹介します文字列の中に数値があるかどうかチェック Regex.test()を利用する string.match()を...
javascript [javascript入門] クリップボードにアクセスし、コピー&ペーストをする方法まとめ
コピー（Ctrl + C）やペースト（Ctrl + V）をjavascriptを利用して実装する方法の備忘録となります。クリップボードとは、テキストや画像などを一時的に保存する場所のことで、基本的には次のコピーを行うとデータは消えてしまいま...
javascript [javascript入門] JSONデータをCSVデータに変換する方法まとめ
今回はjsonオブジェクトをcsvデータに変換する方法の備忘録となります。下記2パターンをご紹介します。 Json → CSV変換方法mapを利用した変換json2csv(npm)を利用mapを利用した変換jsonオブジェクトに対して、ma...
javascript [javascript入門] showDirectoryPickerを使ってファイルシステムにアクセスする方法
今回はブラウザ上からユーザのデバイス上のファイルやフォルダに対して読み書きを行うことができるshowDirectoryPickerについて紹介します。Window.showDirectoryPicker()についてWindows.showD...
javascript NPMによるインストール推奨！開発時によく利用するjavascriptライブラリ5選
今回は、javascript開発時に特に入れておくと便利なパッケージを紹介します。ここで紹介するパッケージは開発時にほぼ使う可能性が高いパッケージとなります。自身の環境にあったパッケージをインストールすること推奨します。npmのインストール...
javascript Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension. が発生した時の対処法
Node.js開発で以下のようなエラーが発生しました(node:21253) Warning: To load an ES module, set "type": "module" in the package.json or use th...
javascript [javascript入門] 文字列が空かどうかチェックする方法まとめ
javascriptでの文字列に対する空チェックは、C#やPHPなどと異なり、「undefined」「null」「' ' (空)」など対象がさまざまです。今回は、文字列の空チェックの方法を、状態含めてまとめておきたいと思います。文字列が「空...
javascript [javascript入門] 数値の長さ(桁数)を取得する方法まとめ
本投稿では、数値の長さを取得する方法の備忘録となります。今回は2パターンの取得方法をご紹介します。数値の長さを取得する方法 toString()を使ってlengthで取得する Math.ceil()とMath.log10()を組み合わせて使...
javascript [javascript入門] URL文字列かどうかをチェックする方法まとめ
今回は、URL文字列かどうかをチェックする方法の紹介です。今回紹介する方法は3つとなります。 ヘルパー関数を作成するメリットURL()を利用したチェック方法正規表現を利用したチェック方法npmパッケージの「is-url」を利用したチェック方...
javascript [javascript入門] 3Dコンテンツを作成できるThree.jsを実際に使ってみた
今回は簡単に3Dコンテンツを作成することができるjavascriptライブラリ「Three.js」について導入方法から使い方までをまとめておきたいと思います。Three.js とは？Three.jsは「WebGL」と呼ばれるWebブラウザで...
javascript JavaScriptでスケジューラーを簡単に作成するおすすめライブラリ5選
アプリケーション開発にてカレンダーを作成することがあると思います。現在では、様々なライブラリが世の中に出回っていますので、今回は有料/無料問わず、おすすめのスケジューラ（カレンダー）フレームワーク、ライブラリを紹介します。おすすめスケジュー...