JavaScriptでtextareaに改行を入れる方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでtextareaに改行を入れる方法について現役エンジニアが解説しています。textareaとは、複数行のテキストを入力できるHTMLタグです。改行を入れるには改行コードを使います。バックスラッシュ(\)と小文字nとを組み合わせた\nが改行コードです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでtextareaに改行を入れる方法について解説します。これができるようになると複数行に渡る内容を入力することができます。ぜひ参考にしてみてください。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでtextareaに改行を入れる方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

textareaとは

textarea とは、複数行のテキストを入力できるHTMLタグです。

inputタグでもテキスト入力は可能ですが、textareaでは前述の通り、改行を使って複数行に渡る内容を入力することができます。

<input type="text" value="1行">

<textarea>
複数行に
渡って
内容を入力
</textarea>

 

JavaScriptでtextareaに改行を入れる方法

textarea に改行を入れる方法の前に、JavaScriptでinput タグの値を設定する方法を確認しておきましょう。JavaScriptでinputの値を設定するには、querySelectorgetElementByIdなどで要素を取得後に、valueプロパティを使います。

// <input id="text" type="text"> の値を設定する
let input = document.getElementById('text');
input.value = 'my input';

textarea に対しても同じ流れで設定できます。

// <textarea id="textarea"> の値を設定する
let textarea = document.getElementById('textarea');
textarea.value = 'my text';

textareaに値を設定する方法が分かったので、次に「改行」について説明します。改行を入れるには「改行コード」と呼ばれる、特殊な文字を使います。バックスラッシュ(\)と小文字nとを組み合わせた\nが改行コードです。

ここまでを踏まえて、textareaに改行を入れる(改行を含む内容を入力する)には、次のようなJavaScriptを用います。

// <textarea id="textarea"> の値を設定する
let textarea = document.getElementById('textarea');
textarea.value = 'こんにちは\n今日は\n良い天気ですね';

上のスクリプトが実行されると、以下の内容がtextareaに設定されます。

こんにちは
今日は
良い天気ですね

また、別の方法としてバッククォート(`)を使うことでも、改行を含む内容を設定できます。

// <textarea id="textarea"> の値を設定する
let textarea = document.getElementById('textarea');
textarea.value = `こんにちは
今日は
良い天気ですね;`

ただし、インデントが崩れて見づらくなるため、使い所には注意が必要でしょう。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

以下の textarea に対して、改行を含む内容を設定してみましょう。

<textarea id="test"></textarea>

まずは textarea要素を取得しましょう。

let textarea = document.getElementById('test');

続いて、textareaに値を設定してみましょう。

textarea.value = 'Hello\nmy\nworld';

これで改行ありの内容が設定できたかと思います。他にも色々と設定して試してみてください。

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。