icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ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] コーディングで副業する方法とは

実際に書いてみよう

以下の 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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。