クリック編集可能な要素の実装：blur()後の状態復元方法

はじめに (対象読者・この記事でわかること)

この記事は、Web開発者やJavaScriptを学習中の方を対象にしています。特に、動的なUIを実装する際に必要となる「クリックで編集可能な要素」の実装方法について解説します。この記事を読むことで、要素をクリックすると編集モードに切り替わり、フォーカスが外れたら元の状態に戻る機能を自分で実装できるようになります。このような実装はユーザーインターフェースの向上に役立ちますが、実装時に状態管理に悩むことも多いでしょう。本記事では、その実装方法とポイントを具体的なコード例と共に解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識 - JavaScriptの基本的な文法とDOM操作の理解 - イベント処理の基本的な概念

クリック編集可能な要素の実装概要

Webアプリケーションでは、ユーザーが直接テキストを編集できるUIが頻繁に利用されます。例えば、プロフィールの名前や自己紹介文を直接編集できる機能などがその一例です。このような「クリック編集可能な要素」を実装する際には、いくつかの技術的な課題があります。

まず、要素がクリックされた際に編集可能な状態（例えばinput要素）に切り替える必要があります。次に、ユーザーが編集を終えた後（blurイベント発生時）、元の表示状態に戻す必要があります。この過程で、編集前の値を保持しておくことが重要です。なぜなら、ユーザーが編集をキャンセルした場合に元の値に戻すためです。

この記事では、このようなクリック編集可能な要素を実装するための基本的なアプローチと、blur()後に元の状態に戻すための具体的な実装方法について解説します。また、実装上の注意点やベストプラクティスも紹介します。

具体的な実装方法

ここでは、クリック編集可能な要素を実装する具体的な手順を解説します。基本的な流れは以下の通りです。

HTML要素の構造を定義する
初期状態のスタイルを設定する
クリックイベントを処理する関数を実装する
blurイベントを処理する関数を実装する
編集前の値を保持・復元するロジックを実装する

ステップ1：HTML要素の構造を定義する

まず、編集可能な要素を含む基本的なHTML構造を作成します。以下に例を示します。

Html

<div id="editable-container">
  <span id="editable-text">クリックして編集</span>
  <input type="text" id="editable-input" style="display: none;">
</div>

この例では、編集可能なテキストを表示するspan要素と、実際に編集を行うinput要素を用意しています。初期状態ではspan要素を表示し、input要素は非表示にしています。

ステップ2：初期状態のスタイルを設定する

次に、CSSで初期状態のスタイルを設定します。以下に例を示します。

Css

#editable-text {
  cursor: pointer;
  padding: 5px;
  border: 1px solid transparent;
}

#editable-text:hover {
  background-color: #f0f0f0;
}

#editable-input {
  padding: 5px;
  border: 1px solid #ccc;
}

これにより、テキストがクリック可能であることが視覚的にわかるようになります。また、マウスをホバーした際に背景色が変わることで、インタラクティブな要素であることを示しています。

ステップ3：クリックイベントを処理する関数を実装する

次に、JavaScriptでクリックイベントを処理する関数を実装します。以下に例を示します。

Javascript

const editableText = document.getElementById('editable-text');
const editableInput = document.getElementById('editable-input');

// 元の値を保持する変数
let originalValue = '';

editableText.addEventListener('click', function() {
  // 元の値を保存
  originalValue = this.textContent;

  // input要素の値を設定
  editableInput.value = originalValue;

  // 表示を切り替え
  this.style.display = 'none';
  editableInput.style.display = 'inline';

  // input要素にフォーカスを当て、テキスト全体を選択状態にする
  editableInput.focus();
  editableInput.select();
});

このコードでは、テキストがクリックされた際に以下の処理を行います。 1. 元の値をoriginalValue変数に保存します 2. input要素の値を元の値に設定します 3. 表示を切り替え、input要素にフォーカスを当てます 4. input要素内のテキスト全体を選択状態にします

ステップ4：blurイベントを処理する関数を実装する

次に、blurイベントを処理する関数を実装します。以下に例を示します。

Javascript

editableInput.addEventListener('blur', function() {
  // 新しい値が空の場合は元の値に戻す
  if (this.value.trim() === '') {
    this.value = originalValue;
  }

  // 表示を切り替え
  editableText.textContent = this.value;
  editableText.style.display = 'inline';
  this.style.display = 'none';
});

このコードでは、input要素からフォーカスが外れた際に以下の処理を行います。 1. 新しい値が空の場合は元の値に戻します 2. span要素のテキストを更新し、表示を切り替えます

ステップ5：編集前の値を保持・復元するロジックを実装する

上記の実装では、originalValue変数を使用して編集前の値を保持しています。しかし、より堅牢な実装には、以下のような改良点が考えられます。

複数の要素を扱う場合に対応する
編集中に値が変更されたかどうかを判定する
Enterキーで確定した場合の処理を追加する

以下に、複数の要素を扱う場合の実装例を示します。

Javascript

// 編集可能な要素をすべて取得
const editableElements = document.querySelectorAll('.editable-text');

// 各要素にイベントリスナーを追加
editableElements.forEach(element => {
  const inputId = element.getAttribute('data-input-id');
  const inputElement = document.getElementById(inputId);
  let originalValue = '';

  // クリックイベント
  element.addEventListener('click', function() {
    originalValue = this.textContent;
    inputElement.value = originalValue;

    this.style.display = 'none';
    inputElement.style.display = 'inline';
    inputElement.focus();
    inputElement.select();
  });

  // blurイベント
  inputElement.addEventListener('blur', function() {
    if (this.value.trim() === '') {
      this.value = originalValue;
    }

    element.textContent = this.value;
    element.style.display = 'inline';
    this.style.display = 'none';
  });

  // Enterキーで確定
  inputElement.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      this.blur();
    }
  });
});

この実装では、HTML側でdata-input-id属性を使用して対応するinput要素を指定するようにしています。これにより、複数の編集可能な要素を簡単に扱えるようになります。

ハマった点やエラー解決

この実装を行う際に、以下のような問題に直面することがあります。

問題1：blurイベントのタイミング

input要素からフォーカスが外れた際にblurイベントが発生しますが、そのタイミングで他の要素にフォーカスが移る前に処理が実行されるため、意図しない動作をすることがあります。

解決策

blurイベントの代わりに、より確実なフォーカス移動を検知する方法として、以下のような対策が考えられます。

Javascript

// ドキュメント全体にクリックイベントを監視
document.addEventListener('click', function(e) {
  // クリックされた要素が編集可能な要素またはその子孫でない場合
  if (!e.target.closest('.editable-container')) {
    // 現在編集中の要素を取得
    const activeInput = document.querySelector('.editable-input:not([style*="display: none"])');

    // 編集中の要素がある場合
    if (activeInput) {
      const textElement = document.getElementById(activeInput.id.replace('-input', '-text'));
      const originalValue = textElement.getAttribute('data-original-value');

      if (activeInput.value.trim() === '') {
        activeInput.value = originalValue;
      }

      textElement.textContent = activeInput.value;
      textElement.style.display = 'inline';
      activeInput.style.display = 'none';
    }
  }
});

問題2：値の変更検知

ユーザーが値を変更したかどうかを判定し、変更があった場合のみ更新処理を行いたい場合があります。

解決策

値の変更を検知するには、以下のような方法が考えられます。

Javascript

let originalValue = '';

editableText.addEventListener('click', function() {
  originalValue = this.textContent;
  editableInput.value = originalValue;

  // data属性に元の値を保存
  editableInput.setAttribute('data-original-value', originalValue);

  this.style.display = 'none';
  editableInput.style.display = 'inline';
  editableInput.focus();
  editableInput.select();
});

editableInput.addEventListener('blur', function() {
  const currentValue = this.value;
  const originalValue = this.getAttribute('data-original-value');

  // 値が変更された場合のみ更新
  if (currentValue !== originalValue) {
    if (currentValue.trim() === '') {
      this.value = originalValue;
    }

    editableText.textContent = this.value;
  }

  editableText.style.display = 'inline';
  this.style.display = 'none';
});

総合的な解決策

これまで解説してきた実装を統合し、より実用的なクリック編集可能な要素の実装を以下に示します。

Javascript

class EditableText {
  constructor(textElement, inputElement) {
    this.textElement = textElement;
    this.inputElement = inputElement;
    this.originalValue = '';

    // イベントリスナーの登録
    this.textElement.addEventListener('click', () => this.startEditing());
    this.inputElement.addEventListener('blur', () => this.stopEditing());
    this.inputElement.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        this.inputElement.blur();
      }
    });
  }

  startEditing() {
    // 元の値を保存
    this.originalValue = this.textElement.textContent;
    this.inputElement.value = this.originalValue;

    // data属性に元の値を保存
    this.inputElement.setAttribute('data-original-value', this.originalValue);

    // 表示を切り替え
    this.textElement.style.display = 'none';
    this.inputElement.style.display = 'inline';

    // フォーカスとテキスト選択
    this.inputElement.focus();
    this.inputElement.select();
  }

  stopEditing() {
    const currentValue = this.inputElement.value;
    const originalValue = this.inputElement.getAttribute('data-original-value');

    // 値が変更された場合のみ更新
    if (currentValue !== originalValue) {
      if (currentValue.trim() === '') {
        this.inputElement.value = originalValue;
      }

      this.textElement.textContent = this.inputElement.value;
    }

    // 表示を切り替え
    this.textElement.style.display = 'inline';
    this.inputElement.style.display = 'none';
  }
}

// ページ読み込み後に編集可能な要素を初期化
document.addEventListener('DOMContentLoaded', function() {
  const editableContainers = document.querySelectorAll('.editable-container');

  editableContainers.forEach(container => {
    const textElement = container.querySelector('.editable-text');
    const inputElement = container.querySelector('.editable-input');

    if (textElement && inputElement) {
      new EditableText(textElement, inputElement);
    }
  });
});

この実装では、クラスベースのアプローチを採用しています。これにより、複数の編集可能な要素を簡単に管理できるようになります。また、値の変更検知やEnterキーでの確定処理も実装されています。

まとめ

本記事では、JavaScriptでクリック編集可能な要素を実装し、blur()後に元の状態に戻す方法について解説しました。

要点1: HTML構造として表示用要素と編集用要素を用意し、JavaScriptで表示を切り替える
要点2: 元の値を保持し、blurイベント時に値が空の場合は元の値に戻す
要点3: クラスベースの実装により複数の要素を効率的に管理する

この記事を通して、読者は動的なUIを実装するための基本的な技術を習得できたでしょう。今後は、発展的な内容として、編集可能な要素にバリデーション機能を追加する方法や、アニメーション効果を付加する方法についても記事にする予定です。

クリック編集可能な要素の実装：blur()後の状態復元方法✏️