javascript[React] 現在の日付と時刻を表示する(デジタル時計) Reactで現在の日付や時刻を表示する方法の備忘録となります。 JavaScriptでは下記のメソッドを利用することで日付や時刻の値を取得することができます。 let d = new Date(); console.log(d... 2023.01.17javascriptReactプログラミング
javascript[JavaScript] JSONデータのエンコード・デコードまとめ JSONデータを扱う場面は多々あります。 今回はJavaScriptを利用して、配列オブジェクトをJSONデータにエンコードおよび、JSONデータを配列にデコードする方法の備忘録となります。 配列をJSONデータに... 2023.01.16javascriptプログラミング
javascriptMacOS環境にNuxt3をインストールする方法まとめ はじめに 今回は、2022年11月16日に正式リリースされたNuxt3の環境をMacOSに用意し、実際にTypeScriptを実装してみたいと思います。 Nuxt3 とは Nuxt3 はReactでいうところ... 2022.12.21javascriptNuxtプログラミング
javascript[JavaScript] xml-jsを使ってJSONデータとXMLデータを相互変換する方法 今回は JavaScriptを利用して JSONデータをXMLデータに、XMLデータをJSONデータに相互変換するための方法をまとめます。 本処理で利用するライブラリは「xml-js」となります。 xml-js ライブラリを... 2022.11.02javascriptプログラミング
javascript[javascript] スタックとキューの使い所と実装方法まとめ 今回はjavascriptでスタックとキューについての簡単な知識と、実際の使い所と実装方法についてまとめます。 スタックとは スタックとは最後に入れたものを最初に取り出すデータ構造を指し、「LIFO(Last In, Fir... 2022.09.14javascriptプログラミング
javascript[javascript] textareaに入力した文字数や行数をリアルタイムにカウントして画面に表示する方法 Twitterやinstagramなどフォームに文字制限が付いているのをみたことがある人は多いかと思います。 今回はこの文字数のカウントと行数のカウント方法をjavascriptを利用して表現します。 textareaにキー... 2022.09.13javascriptプログラミング
javascript[javascript] 自動で共有先を用意してくれる「Web Share API」の使い方まとめ アクセス数を増やすための試みの一つとして、WebコンテンツをSNSへシェアする方法があります。 最近ではSNSのツールがかなり増えてきたことでシェアボタンがない場合もあります。 ここで登場するのがWeb Share APIとなります。 ... 2022.09.12javascriptプログラミング
javascript[javascript入門] 文字列の中に数字が入っているかどうかチェックする方法まとめ javascriptを利用して、文字列の中に数値が入っているかどうかをチェックする方法の備忘録となります 今回は下記の方法をご紹介します 文字列の中に数値があるかどうかチェック Regex.test()を利用する ... 2022.11.01javascriptプログラミング
javascript[javascript入門] クリップボードにアクセスし、コピー&ペーストをする方法まとめ コピー(Ctrl + C)やペースト(Ctrl + V)をjavascriptを利用して実装する方法の備忘録となります。 クリップボードとは、テキストや画像などを一時的に保存する場所のことで、基本的には次のコピーを行うとデータは消えてしま... 2022.11.01javascriptプログラミング
javascript[javascript入門] JSONデータをCSVデータに変換する方法まとめ 今回はjsonオブジェクトをcsvデータに変換する方法の備忘録となります。 下記2パターンをご紹介します。 Json → CSV変換方法 mapを利用した変換 json2csv(npm)を利用 ma... 2022.11.01javascriptプログラミング
javascript[javascript入門] showDirectoryPickerを使ってファイルシステムにアクセスする方法 今回はブラウザ上からユーザのデバイス上のファイルやフォルダに対して読み書きを行うことができるshowDirectoryPickerについて紹介します。 Window.showDirectoryPicker()について Win... 2022.11.01javascriptプログラミング
javascriptNPMによるインストール推奨!開発時によく利用するjavascriptライブラリ5選 今回は、javascript開発時に特に入れておくと便利なパッケージを紹介します。 ここで紹介するパッケージは開発時にほぼ使う可能性が高いパッケージとなります。 自身の環境にあったパッケージをインストールすること推奨します。 ... 2022.11.01javascriptプログラミング
javascriptWarning: 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 ... 2022.11.01javascriptプログラミング
javascript[javascript入門] 文字列が空かどうかチェックする方法まとめ javascriptでの文字列に対する空チェックは、C#やPHPなどと異なり、「undefined」「null」「' ' (空)」など対象がさまざまです。 今回は、文字列の空チェックの方法を、状態含めてまとめておきたいと思います。 ... 2022.11.02javascriptプログラミング
javascript[javascript入門] 数値の長さ(桁数)を取得する方法まとめ 本投稿では、数値の長さを取得する方法の備忘録となります。今回は2パターンの取得方法をご紹介します。 数値の長さを取得する方法 toString()を使ってlengthで取得する Math.ceil()とMath.log... 2022.11.01javascriptプログラミング
javascript[javascript入門] URL文字列かどうかをチェックする方法まとめ 今回は、URL文字列かどうかをチェックする方法の紹介です。今回紹介する方法は3つとなります。 ヘルパー関数を作成するメリット URL()を利用したチェック方法 正規表現を利用したチェック方法 npmパッケージの... 2022.11.02javascriptプログラミング
javascript[javascript入門] 3Dコンテンツを作成できるThree.jsを実際に使ってみた 今回は簡単に3Dコンテンツを作成することができるjavascriptライブラリ「Three.js」について導入方法から使い方までをまとめておきたいと思います。 Three.js とは? Three.jsは「Web... 2022.07.22javascriptプログラミング
javascriptJavaScriptでスケジューラーを簡単に作成するおすすめライブラリ5選 アプリケーション開発にてカレンダーを作成することがあると思います。現在では、様々なライブラリが世の中に出回っていますので、今回は有料/無料問わず、おすすめのスケジューラ(カレンダー)フレームワーク、ライブラリを紹介します。 ... 2023.05.08javascriptプログラミング
javascript[JavaScript入門] definePropertyを使ってGetterおよびSetterを作成する 今回は、JavaScriptでGetterとSetterを表現していきます。 Getterとは、「フィールドの値を取り出すだけのメソッド」であり、Setterというのは「フィールドに値を代入するためのメソッド」となります。 ... 2022.07.14javascriptプログラミング
HTML/CSS[Webデザイン] HTML/CSS/Javascriptで作成するおしゃれなタイムラインデザイン5選 会社の沿革やポートフォリオの作成過程やフローなど、タイムラインを利用する用途は多々あるかと思います。 今回は、おしゃれなタイムラインデザインについて紹介したいと思います。 おしゃれなタイムラインデザイン5選 Vertica... 2022.06.28HTML/CSSjavascriptデザインプログラミング