JavaScript 【JavaScript】JSONの取り扱い方法について(基礎的な使い方)
はじめにSEの開発現場では、データのやり取りが欠かせません。その中でも特に登場頻度が高いのが JSON（JavaScript Object Notation） です。Web APIとの通信、バックエンドとの連携など、あらゆる場面で利用される...
フロントサイド関連
JavaScript JavaScript 【JavaScript】カスタムエラークラスとエラーログ管理
はじめにシステムエンジニアとして日々開発をしていると、「エラー処理がもっと整理されていれば」と感じる場面は少なくありません。前回のエラーハンドリングの記事から一歩進み、単純に try…catch でエラーを捕まえるだけでなく、発生したエラー...
JavaScript 【JavaScript】エラーハンドリングの実施方法 （try – catch）
はじめにJavaScriptで開発していると、「データが取得できない」「サーバーが応答しない」などエラーに遭遇することは避けられません。そこで重要なのが エラーハンドリング です。正しくエラーをハンドリングすれば、アプリの信頼性やバグの早期...
JavaScript 【JavaScript】fetchでAPI通信する方法（GET・POST）
はじめにWebアプリを開発する上で、APIとの通信・連携は高頻度で発生します。JavaScriptでは、今までは「XMLHttpRequest 」が使われていましたが、現在ではよりシンプルな「fetch API」が主流です。今回は、Java...
JavaScript 【JavaScript】 localStorage / sessionStorageの使い方
はじめにWebアプリを作るときに、「ページをリロードしてもデータを保持したい」「一時的にユーザーの入力を記憶したい」等を実現するためにStorage機能が存在します。今回は、localStorage と sessionStorage につい...
JavaScript 【JavaScript】リアルタイムバリデーション（入力中に即時チェック）
はじめに前回記事のボタンを押してからバリデーション実施では、大量のエラーがどっと出ると一つ一つ直していくのは大変です。リアルタイムバリデーションなら、入力中にすぐ「何を直せばよいか」を示すことができます。今回は、リアルタイムバリデーションの...
JavaScript 【JavaScript】フォームのバリデーション（入力チェックの実装方法）
はじめにWebサイトやアプリケーションを作る際に、フォームは欠かせない要素のひとつです。入力内容に間違いがあったまま送信されてしまうと、サーバー側でエラーになったり、意図しないデータが保存されてしまったりする危険があります。そこで必要になる...
JavaScript 【JavaScript】非同期処理のの使い方について（Promise / async・await）
はじめにJavaScript はシングルスレッドで動作するため、処理を大量に書くと処理が長引き画面が固まってしまう可能性があります。これを避け、ユーザー操作を止めずに並行して処理を進めるために使われるのが非同期処理です。今回は、非同期処理に...
JavaScript 【JavaScript】音声の取り扱いについて（再生・停止・制御）
はじめにWebで音声を扱いたい場面は多々存在します。JavaScriptを使えば、ボタン操作で音を鳴らしたり、ユーザーの操作に応じて再生・停止・音量調整などを簡単に行うことができます。今回は、音声の取り扱いについてLogとして記載していきた...
JavaScript 【JavaScript】画像の取り扱い方法（表示・切り替え・操作について）
はじめにWebページにおける画像は、視覚的な情報は重要な役割を果たします。JavaScriptを使えば、画像の表示だけでなく、動的な切り替えやユーザーから選ばれた画像の表示など、簡単に実装できます。今回は、これらの画像の取り扱いについてLo...