テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ

前のページ Overview: First steps 次のページ

プログラミングでは文字の羅列を文字列と呼びますが、次はこれを学習しましょう。この記事では、JavaScript でよく使われる、文字列を作ったり、引用符をエスケープしたり、文字列を結合したりといった、文字列について本当に知っておくべきことだけを見てみましょう。

前提条件:	基本的なコンピュータの知識および HTML と CSS への理解、JavaScript とは何かを知っている。
目的:	JavaScript の文字列操作に慣れる。

言葉の力

言葉はコミュニケーションの大部分を担う、人類にとって、とても大切なものです。Web は情報の共有やコミュニケーションができるように設計された大規模な文字ベースの媒体ですので、そこで使用される言葉を操作できると便利です。HTML は意味付けされ、構造化されたテキストを提供し、CSS がきれいに体裁を整える事を可能にし、そして JavaScript には、挨拶用の文章を生成したり、適切なラベルを表示したり、言葉を並べ替えたりといった、文字列を操作するたくさんの機能が含まれています。

今までこのコースでお見せしたプログラムのほとんどが、何らかの文字列操作を含んでいましたね。

文字列 — 基本

文字列は一見すると数値と同じように見えますが、少し深く見ていくと、違いに気づくことでしょう。まずは慣らすために基本的なコードをコンソールに入力してみましょう。すぐ下にコンソールを用意しています (このコンソールを新しいウィンドウまたはタブで開くこともできますし、ブラウザの開発者ツールでも開くことができます)。

Hidden code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript コンソール</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    </style>
  </head>
  <body>

    
  </body>

  <script>
    var geval = eval;
    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '>';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      if(document.querySelectorAll('div').length > 1) {
        inputForm.focus();
      }

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'エラー — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = '結果: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }
    
    createInput();

  </script>
</html>

文字列を作る

初めに、次の行を入力してみましょう。
```
var string = '革命はテレビでは放送されない。';
string;
```
数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。
もし引用符で囲わななかったり、どちらか一方を書き忘れたりすると、エラーになります。
```
var badString = これはテストです;
var badString = 'これはテストです;
var badString = これはテストです';
```
これらの行は動きません。なぜなら引用符で文字を囲わなければ、変数名や、プロパティ名や、予約語などと解釈されてしまうためです。もしブラウザが引用符を見つけられないと、エラーとなります (たとえば "missing ; before statement" [文の前に、セミコロンが見つかりません] のようなエラーです)。2行目の例のように、ブラウザが引用符を見つけても、文字列の終わりが示されていなければ、これもエラーとなります ("unterminated string literal" [文字列リテラルの終わりがありません] というエラーです)。このようなエラーがプログラムで起きたら、全ての文字列について、引用符の付け忘れがないかを確認してください。
続くコードは先ほど変数を string という名前で宣言していれば、動くでしょう。試してみましょう。
```
var badString = string;
badString;
```
badString という変数に string という変数の値が設定されたことでしょう。

シングルクォーテーション vs. ダブルクォーテーション

JavaScript では、文字列を囲む引用符として、シングルクォーテーションとダブルクォーテーションを使用することができます。以下のどちらの例も正しく動きます。
```
var sgl = 'シングルクォーテーション';
var dbl = "ダブルクォーテーション";
sgl;
dbl;
```
どちらを使ってもほとんど違いはありません。どちらを使うかは好みの問題ですが、どちらを使うかは統一するべきでしょう。両方を同時に使うと混乱してしまいます、特に同じ文字列に二種類の引用符を使ってしまうときなど！次の行はエラーです。
```
var badQuotes = 'なんということだ！";
```
ブラウザは上の文字列が閉じていないと認識します。なぜなら、文字列を囲うのに使用していない引用符はその文字列の中に含めることができるからです。たとえば次の例は問題ありません。
```
var sglDbl = 'Would you eat a "fish supper"?';
var dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;
```
ただし、文字列の中に、囲んでいるのと同じ種類の引用符を含めることはできません。以下の例は文字列の終わりがわからないので、ブラウザを混乱させてしまいます。
```
var bigmouth = 'I've got no right to take my place...';
```
それでは同じ種類の引用符を含めるにはどのようにすればよいでしょうか。

文字列をエスケープする

先ほどのコード行を直すには、問題となっている引用符をエスケープする必要があります。文字のエスケープとは、その文字が、コードではなく、文字列の一部であるとブラウザに認識させる書き方です。JavaScript ではバックスラッシュ ( \ [環境によっては円マーク (￥)]) を文字の前におくことでエスケープすることができます。

var bigmouth = 'I\'ve got no right to take my place...';
bigmouth;

これでうまく動きます。同じ方法で他の文字をエスケープする (例えば \") ことができ、それ以外にも特別なコードがあります。詳細はエスケープ記法を見てください。

文字列を連結する

コンカチする (concatenate) という単語は「結合する」ことを表すプログラミングの用語です。JavaScript で文字列を結合するにはプラス (+) 演算子を使用します。数値の加算をするのに使用した演算子ですが、今回は違う動作をします。下の例をコンソールに入力してみてください。
```
var one = 'こんにちは、';
var two = 'ご機嫌いかがでしょう？';
var joined = one + two;
joined;
```
この例の実行結果は joined という変数に格納され、値は "こんにちは、ご機嫌いかがでしょう？" となります。
今の例は 2 つの文字列を結合しましたが、+ 演算子が変数と変数の間にあれば、いくつでも結合することができます。例えば、次の例を試しましょう。
```
var multiple = one + one + one + one + two;
multiple;
```
変数のほかに、実際の文字列と結合することもできます。
```
var response = one + '私は元気です。' + two;
response;
```

注: コード中に、シングルクォーテーションおよびダブルクォーテーションで囲われた、実際の文字列を書いたときそれは文字列リテラルと呼ばれます。

様々な結合

実際に文字列が結合されている場面を見てみましょう。これはこのコースの最初の方からの例です。

<button>押してみて！</button>

var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('あなたの名前は？');
  alert('こんにちは、' + name + 'さん。初めまして！');
}

4行目でユーザに答えてもらうため、Window.prompt()関数を使用して、テキストを入力できるポップアップダイアログを表示し、ユーザによって入力された文字列を name 変数に格納しています。そして、5行目でWindow.alert()関数を使用し、2 つの文字列リテラルと name 変数を結合して別のポップアップに文字列を作り上げています。

数値 vs. 文字列

それでは文字列と数値を足したら (もしくは結合したら) 何が起きるでしょうか。コンソールに入力してみましょう。
```
'フロント' + 242;
```
エラーが起きると予想したかもしれませんが、普通に動きます。文字列を数値として表すのには意味がありませんが、数値を文字で表すのはわかりますね。つまりブラウザはどうやら、数値を文字列に変換し、2 つの文字列としてから結合しているようです。
数字同士でやっても同じです。数字を引用符で囲むと文字列になります。次の行を実行してみてください。(typeof演算子で変数が文字列なのか数値なのか調べています。)
```
var myDate = '19' + '67';
typeof myDate;
```
もし、数値を文字列に変換したかったり、文字列を数値に変換したかったりする場合には、次の 2 つの生成方法を見てください。
- Numberオブジェクトは渡されたものすべてを数値に変換します。次の例を実行してみましょう。
```
var myString = '123';
var myNum = Number(myString);
typeof myNum;
```
- 反対に全ての数値は toString() という文字列に変換するメソッドを持っています。
```
var myNum = 123;
var myString = myNum.toString();
typeof myString;
```
この生成方法は状況によってはとても便利です。例えば、ユーザがフォームのテキストフィールドに数字を入力した場合、入力された値は文字列です。しかし、その数字を使って計算したい場合、数値にしなければなりません。そんな時は Number() に任せましょう。これは実際に数字当てゲームの 61行目で使用した方法です。

結論

ここまでが JavaScript での文字列の基礎になります。次の記事では、JavaScript で使える文字列操作の組み込み関数と、それを使って思い通りの形に文字列を変換する方法を、その基礎の上に建てていきましょう。