JavaScriptでナビゲーションの種類を調べる方法
今回の記事では、Navigation Timing APIを使用して、ブラウザ上のナビゲーションの種類を取得する方法について解説します。概要まずナビゲーションとは、ユーザーがWEBページにアクセスした際に、新しくHTML、CSS、JS、画像などのリソースを読み込み、WEBページを描
JavaScript
WEB制作で使用するDOM操作から、開発で使用するサーバーサイドとの通信、配列操作などJavaScript全般の技術を解説しています。筆者のコアになる言語です。
記事数
75
【JavaScript】背景画像を動的に切り替える方法
今回の記事では、JavaScriptで背景画像を動的に切り替える方法について解説します。実装では、最速最軽量のJavaScriptフレームワーク「Vanilla JS」(素のJavaScript)を使用しております。結論だけ知りたい方のために、ソースコードだけ先に共有します。具体的な要件や
【JavaScript】slickで複数行スライドさせる方法
slickはsliderレイアウトを構築する際によく使用するレイアウトですが、複数行の実装は初めてだったので、使用したオプションを忘備録として残します。サンプルコードはそのままコピペで動作しますが、レイアウトは各々調整してください。■ 関連記事 : JavaScriptの基礎習得に役立つ技術
【JavaScript】画像URLからバイナリデータを取得してサーバーに送信する方法
このブログでは、画像アップロード機能をいくつか紹介していますが、今回は画像URLからデータを取得して、サーバーサイドに送信する方法について解説します。オブジェクト変換などの新しい知識を得ることができたので、忘備録として残します。■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【
【JavaScript】ブラウザ埋め込み型のACEエディタを導入
WEBサイトやCMSの構築に関わっていると、クライアントから管理画面に編集用のエディタを埋め込んで欲しいという依頼をいただくことがあります。非エンジニアの立場からすると、いくらシンプルなHTMLでも触りたくないのは当然です。またWEBサイトを公開した際に、ファイルはサーバー上にあるので更新
【JavaScript】ドラッグ&ドロップでの画像アップロード機能(非同期処理)
JavaScriptとPHPを使用したファイルのアップロード機能を作成したので、処理内容を解説します。処理はDrag & Drop API、Fetch API、Files APIを使用して実装し、非同期処理でサーバーサイドにデータを送信するまでの記述になります。私が作成して
【JavaScript】Fetch APIを使用してFormDataを送信する方法
この記事ではFormDataオブジェクトとfetch()を使用して、サーバーにデータを保存するまでの処理を学ぶことができます。今回はCakePHP(サーバーサイド)のコントローラーの処理も記載していますので、データの取得・送信・保存・レスポンス処理までの一連の流れを解説します。非同期処理と
【JavaScript】Files APIを使用して拡張子チェックする方法
ファイルアップロード機能を実装するためのソースコードはネット上に多く出回っているので、実装するのはそれほど難しいことではありません。機能を作る時に重要になるのが、不適切な形式のファイルはアップロードできないことです。拡張子チェックなどの処理が実装されていない状態で、悪意のあるユーザーが不適
【JavaScript】File APIについて解説
WEBアプリケーションでは、ファイルのアップロードやダウンロード、編集などのやりとりが盛んに行われています。開発に関わるエンジニアとしては、ファイルなどのデータを適切に扱うことができるかどうかでレベルが分かれるとも言われています。今回はJavaScriptでファイルを扱う際に使用するFil
【JavaScript】非同期処理の種類と解説② fetch編
前回XMLHttpRequestを用いた非同期処理について解説をしましたが、今回はFetch APIを使用した非同期処理について解説します。元々XMLHttpRequestが非同期通信の主格として存在感を発揮していましたが、その代替としてfetchが登場しました。XMLHttpReques
【JavaScript】非同期処理の種類と解説① XMLHttpRequest編
Ajaxは、JavaScriptでサーバー側と非同期通信を行うための技術です。非同期処理や同期処理については前回の記事で解説していますので、イメージが掴めていない方はまず前回の記事を読んで非同期処理について理解を深めてください。/javascript/asynchronous-proces
【JavaScript】非同期処理(Promise)とは何か
非同期処理は快適なUI / UXを実現する上で重要な概念です。例えば、ファイルアップロードなどのデータの取り扱いにおいて一定の待ち時間が発生する処理を同期処理で行った場合、ユーザーはそれが完了するまでローディングを眺めるしかありません。1つの画像を読み込むのに数秒かかり、それが終わ
【JavaScript】FormDataオブジェクト解説とデータの作成
FormDataオブジェクトは、非同期処理(XMLHttprequest, fetch)を使用してデータを送信するために、keyとvalueのセット値を追加することができるインターフェイスです。WEB開発で非同期処理を使用する場合に、ユーザーのアクションに応じて一部のデータのみ書き換え・更
【JavaScript】DOM要素の変更を検知するMutationObserver
フロントエンド開発の現場でDOMの変更を検知して処理を実行する場面は多くあります。DOMに変更が加わる場面としては、ユーザーのアクションによってページの一部が描画されたり、ページ内のエディタにfocusが当たった or 外れたタイミングで処理を実行するものもあるでしょう。今回、非同期処理で
【JavaScript】JavaScriptの実行タイミングを正確に理解する
JavaScriptはWEB制作・WEB開発共に非常に多く使われている言語です。その中で「処理の実行順」というのは非常に重要です。ほんのわずかな実行順序の違いでエラーを引き起こすのがJavaScriptの難しいところです。私自身がJavaScriptを使用した制作や開発において、他の処理よ
