JavaScript

JavaScript

入力文字量に応じて、高さを自動調整するtextareaを作る【JavaScript・jQuery】

概要 textareaの高さを文章量に応じて自動調整するように作れば、長文テキストを入力した際に内容が把握しやすくなりま...
JavaScript

draggableで要素をドラッグアンドドロップで移動する【jQuery】

デモ See the Pen Untitled by masahiro nomura (@masahiroview) o...
JavaScript

FormDataの基本【JavaScript】

概要 FormDataオブジェクトとは、フロントエンドのデータをサーバに送るためのオブジェクトです。 これを使えば、HT...
JavaScript

URLSearchParamsの基本:getパラメータを管理する【JavaScript】

概要 これまではURLのパラメータを管理するときに、文字列としてパラメータの追加・削除等を行なっていました。 しかし、U...
JavaScript

ドラッグアンドドロップでファイルアップロード【jQuery・PHP】

チャット系のウェブサービスによくあるのが、ドラッグアンドドロップによるファイル添付です。 今回はそのような機能の実装方法...
JavaScript

ShadowDOMの基本と使い方の解説

概要 ShadowDOMとは、DOMをカプセル化する技術です。 これを使うことによって他の要素とは独立した(相互に影響し...
JavaScript

Macでローカルにnode.js環境を構築して動かしてみる

前提 ・MacOSのバージョンmacOS Monterey 12.3.1 作業の流れ ①homebrewをインストールす...
JavaScript

バイナリ形式の画像をアップロードする【HTML・JS(jQuery)・PHP】

通常であれば、画像のサーバへのアップロードはformを使って行います。 しかし、imgやcanvas要素の画像を直接アッ...
JavaScript

canvas要素を使って、画像の上にテキストを描画。【HTML・JS(jQuery)】

ウェブ開発を行う際に、「画像の上にテキストを描画したい」というケースがあったため、やり方のメモを残しました。 HTMLの...
JavaScript

DOM操作でHTML要素の追加・削除【jQuery】

jQueryでHTMLの操作をしたい時があります。 そのような場合に必要なのがDOM操作です。 追加・削除等、様々なパタ...