ReactReactやTypeScriptの実践的な開発を学習できるサービス「mosha React」
はじめに2024年3月15日に「合同会社Jsers」によってリリースされたmoshaReactという学習サービスを使ってみました。このmoshaReactというサービスは、オンライン上（ブラウザ上）で実際にコードを書きながらReactやTy...
javascript
React
javascript[React] データを可視化するためのおすすめチャートライブラリ6選
データを可視化する方法としてグラフ化が挙げられます。Reactでのグラフ化をするためのライブラリを探す機会があり、そのときにいろいろ調べた結果、結構いい感じのライブラリがあったので紹介します。今回紹介するチャートライブラリは下記となります。...
javascript[JavaScript] これだけ押さえておけばOK！try-catchの便利な使い方まとめ9選
フロントエンド開発やバックエンド開発など、JavaScriptでコーディングする場合「try-catch」構文は必ずといっていいほど利用されています。今回は、このtry-catch文の便利な使い方をご紹介します。全ての例外をcatchするみ...
javascriptTypeScript 5.0の新機能を簡単に紹介
MicrosoftのTypeScript開発チームが、5.0のバージョンを2023年3月16日に正式リリースしました。本投稿では、最も注目すべき変更点について紹介します。デコレータ（Decorators）const修飾子extendsオプシ...
javascript[React] 現在の日付と時刻を表示する（デジタル時計）
Reactで現在の日付や時刻を表示する方法の備忘録となります。JavaScriptでは下記のメソッドを利用することで日付や時刻の値を取得することができます。letd=newDate();console.log(d.getFullYear()...
javascript[JavaScript] JSONデータのエンコード・デコードまとめ
JSONデータを扱う場面は多々あります。今回はJavaScriptを利用して、配列オブジェクトをJSONデータにエンコードおよび、JSONデータを配列にデコードする方法の備忘録となります。配列をJSONデータにエンコード配列オブジェクトをJ...
javascriptMacOS環境に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] HTMLにscriptタグを動的に生成する方法まとめ
HTMLではjavascriptを実行するために「script」タグを使ってjavascriptコードを直接記載したり、jsファイルを読み込むように記載します。今回はこの「script」タグを動的にHTML側に生成する方法をまとめます。sc...
javascript[javascript] スタックとキューの使い所と実装方法まとめ
今回はjavascriptでスタックとキューについての簡単な知識と、実際の使い所と実装方法についてまとめます。スタックとはスタックとは最後に入れたものを最初に取り出すデータ構造を指し、「LIFO（LastIn,FirstOut:後入れ先だし...
javascript[javascript] textareaに入力した文字数や行数をリアルタイムにカウントして画面に表示する方法
Twitterやinstagramなどフォームに文字制限が付いているのをみたことがある人は多いかと思います。今回はこの文字数のカウントと行数のカウント方法をjavascriptを利用して表現します。textareaにキーが入力されたかどうか...
javascript[javascript] 自動で共有先を用意してくれる「Web Share API」の使い方まとめ
アクセス数を増やすための試みの一つとして、WebコンテンツをSNSへシェアする方法があります。最近ではSNSのツールがかなり増えてきたことでシェアボタンがない場合もあります。ここで登場するのがWebShareAPIとなります。WebShar...
javascript[React] 開発者ツールなどでソースコードを隠す方法まとめ
GoogleChromeやSafariなどのブラウザ開発者ツールでは、作ったReactのコードが参照できてしまいます。しかし、セキュリティ上ソースコードを見せたくない場合があるかと思います。今回は、このソースコードを見えなくする方法の備忘録...
javascript[javascript入門] 文字列の中に数字が入っているかどうかチェックする方法まとめ
javascriptを利用して、文字列の中に数値が入っているかどうかをチェックする方法の備忘録となります今回は下記の方法をご紹介します文字列の中に数値があるかどうかチェックRegex.test()を利用するstring.match()を利用...
javascript[javascript入門] クリップボードにアクセスし、コピー&ペーストをする方法まとめ
コピー（Ctrl+C）やペースト（Ctrl+V）をjavascriptを利用して実装する方法の備忘録となります。クリップボードとは、テキストや画像などを一時的に保存する場所のことで、基本的には次のコピーを行うとデータは消えてしまいます。クリ...
javascript[typescript] typeとinterfaceの違いと使い方についてのまとめ
業務でよく見かける「type」と「interface」ですが、実際どう違うのか、とういうときに使えばいいのかがわからず、なんとなく使っている方も多いかと思います。今回は、この「type」と「interface」についての違いと使い方について...
javascript[javascript入門] JSONデータをCSVデータに変換する方法まとめ
今回はjsonオブジェクトをcsvデータに変換する方法の備忘録となります。下記2パターンをご紹介します。Json→CSV変換方法mapを利用した変換json2csv(npm)を利用mapを利用した変換jsonオブジェクトに対して、mapメソ...
javascript[javascript入門] showDirectoryPickerを使ってファイルシステムにアクセスする方法
今回はブラウザ上からユーザのデバイス上のファイルやフォルダに対して読み書きを行うことができるshowDirectoryPickerについて紹介します。Window.showDirectoryPicker()についてWindows.showD...
javascript[javascript入門] Turndownを利用してHTML文字列をMarkdown形式に変換する方法
今回は、HTML形式の文字列をMarkdown形式に変換する方法の紹介となります。Markdown形式に変換するためには「Turndown」と呼ばれるライブラリを利用します。HTML文字列をmarkdown形式に変換まずはnpmにてturn...
javascriptNPMによるインストール推奨！開発時によく利用するjavascriptライブラリ5選
今回は、javascript開発時に特に入れておくと便利なパッケージを紹介します。ここで紹介するパッケージは開発時にほぼ使う可能性が高いパッケージとなります。自身の環境にあったパッケージをインストールすること推奨します。npmのインストール...