高さを自動調整するテキストエリアコンポーネント Vue

スポンサーリンク

データベースのテーブルのスキーマ情報をもとに、エンティティクラスのソースコードを自動生成するジェネレーターを作成する際に、ソースコードの行数に応じて高さを自動で調整するテキストエリア (textarea) 要素が必要になったので、その作成例を記載します。

今回は Vue CLI を使用したプロジェクトをローカルにインストールして作成します。

環境設定

Vue CLI を使用したプロジェクトで作成するので、以下のコマンドを実行してプロジェクトを作成します。

Vue CLI をインストールするディレクトリに移動する

上記の例ではCドライブに「vue-cli」フォルダを作成し、その中に「projects」フォルダを作成して、そこにVue CLIをインストールします。

Vue CLI をインストールする

Vue CLI をインストールする前に package.json を作成します。

次に Vue CLI をインストールします。

ここまでのコマンドはローカルに Vue CLI をインストールするための操作になりますので、既に Vue CLI をグローバルインストールしている場合は不要になります。

プロジェクトを作成する。

Vue CLIをインストールしたディレクトリ (プロジェクトを作成するディレクトリ) に移動してプロジェクトを作成します。

上記の例では「C:\vue-cli\projects」フォルダーに「sample-project」という名前でプロジェクトを作成しています。

プロジェクトの階層

プロジェクトの設定

createコマンドを実行すると、プロジェクトの作成方法を「デフォルト (default)」で行うか「手動 (Manually)」で行うかの選択が表示されます。
「デフォルト」を選択すると、babel, eslintがインストールされます。

今回は「手動」を選択します。
「手動」を選択すると、必要とする機能の選択肢が表示されます。

TypeScriptを使用したいので選択して次へ進みます。

機能の設定に関する質問がいくつかされますが、リンター (linter) の設定以外はそのまま (Enter キー押下で) 進みます。
リンターの設定では、TSLint (deprecated) を選択します。

全ての設定が終わると、プロジェクトの設定内容を保存するかどうかが確認されます。

今回は保存しないので No で進みます。

プロジェクトの作成が無事終わったら、プロジェクトのフォルダーに移動して「npm run serve」で開発サーバーを起動します。

http://localhost:8080/ とブラウザのアドレスバーに入力して以下の画面が表示されれば、プロジェクトの作成に成功しています。

プロジェクトの枠組みができたので、テキストエリアコンポーネントを作成していきます。

Vue CLI で作成されるコンポーネントファイルは単一ファイルコンポーネントとして作成されますので、自作のテキストエリアコンポーネントも同様に単一ファイルコンポーネントとして作成します。

テキストエリアコンポーネントの作成

作成したプロジェクトのフォルダ、ファイル構成は以下のようになっています。

上記のファイルについて、以下の3点を改変します。

  1. public フォルダーの index.html を変更する。
  2. src\components フォルダーの HelloWorld.vue を削除して CustomTextarea.vue を追加する。
  3. src フォルダーの App.vue を変更する。

改変後の public フォルダと src フォルダは以下のようになります。

public\index.html

index.htmlでは必要な参照を追加します。

index.html 変更前

index.html 変更後

index.html では、CSS フレームワークの Bulma と、アイコンフォントの Font Awesome を使用したいので参照しています。

src\components\CustomTextarea.vue

高さを自動調整するテキストエリアコンポーネントを作成します。
テキストエリアのプロパティには以下の4つを作成します

  1. value: string
  2. placeholder: string
  3. disabled: boolean
  4. readonly: boolean

イベントには以下の3つを作成します。

  1. input
  2. focus
  3. blur

CustomTextarea.vue の作成

CustomTextarea.vue についてはデコレータを使用する場合と、使用しない場合の両方のソースコードを記載します。

デコレータを使用する場合

デコレータを使用しない場合

CustomTextarea.vue では、テキストエリアの改行の数に応じて、テキストエリアの高さ (rows) を変更しています。
また、ソースコードを表示するので、自動改行が行われないように wrap=”off” を指定し、スタイルでテキストエリアのリサイズを禁止して、フォントを等幅フォントの「MS ゴシック 13px」にしています。

src\App.vue

テキストエリアを使用するアプリケーションを変更します。
App.vue では、HelloWorld コンポーネントを配置していた箇所を、新しく作成したテキストエリアの CustomTextarea コンポーネントに置き換えます。
テキストエリアに必要なプロパティをバインドして、イベントを処理します。

App.vue 変更前

App.vue 変更後

App.vue についてもデコレータを使用する場合と、使用しない場合の両方のソースコードを記載します。

デコレータを使用する場合

デコレータを使用しない場合

テキストエリアの値は v-model でバインドします。
その他のプロパティの placeholder, disabled, readonly は v-bind でバインドします。
focus イベントと、blur イベントではサンプルとしてコンソールにログを表示する処理を記載しています。

テキストエリアの表示

ここまでの変更を適用して、ブラウザで http://localhost:8080/ に接続すると、以下のようなテキストエリアが表示されます。

自動高さ調整テキストエリアプレビュー

このテキストエリアにコードを入力すると、以下のように改行に合わせて高さを自動で調節してくれます。

自動高さ調整テキストエリアコード入力後

Vue.js の単一ファイルコンポーネントを使用すると、簡単にコンポーネントが作成できるのでとても便利です。