JavaScriptでStringオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptの組み込み関数の1つであるStringオブジェクトを使う方法について解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。 本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。 今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 組み込み関数のStringオブジェクトとは Stringオブジェクトを実際に生成してみよう Stringオブジェクトのプロパティを呼び出してみよう 組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Stringオブジェクトは、組み込み関数の1つで、文字列を操作する際に使います。 参考までに、組み込み関数の代表的なものには次のようなものがあります。 <組み込み関数（代表的なもの）> String　文字列を扱う Number　数値を扱う Boolean　論理値を扱う Array　配列を扱う Date　日付を扱う Math　数値計算で扱う はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。 組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。 大石ゆかり 田島悠介 大石ゆかり 田島悠介 [PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中 Stringオブジェクトを生成してみましょう。適当なオブジェクト名（s）をつけ、文字列hello worldを引数として渡し、出力します。 ※文字列を出力する際は、「”　”」や「’　’」で囲うのを忘れないでくださいね 生成できたら、console.logを使って呼び出してみます。 Stringオブジェクトでは基本的に、文字列を操作して出力する際に、便利なプロパティやメソッドを使います。 次の章から見ていきましょう。 Stringオブジェクトでの文字列の操作の仕方を、3つのプロパティを例に見ていきましょう。 プロパティ1. length（文字列の長さを出力する） プロパティ2. charAt（左から何文字目かをとってきて出力する） プロパティ3. replace（文字を置換する） プロパティ1. length（文字列の長さを出力する） オブジェクトのプロパティを呼び出すやり方の確認です。 変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。 hello world の文字数は11文字なので「11」と出力されました。（※空欄も一文字に含まれます） プロパティ2. charAt（左から何文字目かを指定し出力する） 3文字目を指定したので、「l」が出力されました。 プロパティ3. replace（文字を置換する） 文字を置換してくれるreplace。worldからTaroに置換されました。 Stringを利用するということは、文字列のエスケープシーケンスを意識する必要があります。 エスケープシーケンスとは、特殊文字を利用する際の実装ルールです。 なお、JavaScriptでは’（シングルクォテーション）に囲まれた文字列と”（ダブルクォテーション）に囲まれた文字列に違いはありません。 これはエスケープシーケンスでも同様です。 エスケープシーケンスの例 JavaScriptの組み込み関数の１つであるStringオブジェクトを使う方法は以上です。 ほかの組み込み関数といっしょに、是非活用してみてくださいね。 大石ゆかり 田島悠介 大石ゆかり 田島悠介 ​  댓글 쓰기   카페 Keep 메모 보내기 수정 삭제 설정

게시판 JSON データの操作  autospelljhk ・ 2020. 3. 19. 20:21 URL 복사  통계  JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、JavaScript 構造データオブジェクトの表記法をベースとしています。一般的にはウェブアプリケーションでデータを転送する場合に使われます。(例えば、データをサーバーからクライアントへ送信する場合などで、ウェブページに表示されたりすることもあり、その逆もあります)。頻繁に見かけるデータフォーマットですので、この節では JavaScript を使って JSON をパースする、JSON のデータを参照する、JSON を作るなど、JSON を扱うために必要となる操作を説明します。 JSON とは何か JSON は JavaScript オブジェクトの構文に従ったテキストベースのフォーマットで、Douglas Crockford によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み込む(パースする)ことや生成するが機能があります。 JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った JSON というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。 JSON はそれ自身をファイルとして格納することもできます。それは MIME type が application/json で、.json という拡張子の付いたただのテキストファイルです。 JSON の構造 上で説明したように、JSON は JavaScript オブジェクトにとても似ているフォーマットを持った文字列です。JSON では通常の JavaScript オブジェクトと同様な基本データ型(文字列、数値、配列、ブーリアンやその他のリテラル型)を使うことができます。これにより、以下のように階層的にデータを構成することができます。 もし、このオブジェクトを JavaScript プログラムへ読み込んだ場合(例えば、例えば変数superHeroes へ代入する)、JavaScript オブジェクトの基本の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。 さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中2番目のヒーローの 3番目の能力を参照する場合は、以下のようになります。 まず、変数名superHeroes を指定します。 その中の members プロパティへアクセスしたいので、["members"]と指定します。 members にはオブジェクトの配列が格納されています. ここでは、配列内の 2番目のオブジェクトへアクセスするので、[1]を指定します。 そのオブジェクト内で、powers プロパティへアクセスするため, ["powers"]と指定します。 powers プロパティは選択したヒーローの能力を含んだ配列となっており、その中の 3番目が欲しいので、[2]と記述します。 JSON 配列 ここまで見てきたように、JSON は JavaScript オブジェクトとほとんど同じように扱うことができます。配列も JSON で使うことができ、例えば以下のようになります。 これも有効な JSON であり、パースしたデータには配列のインデックスを指定するだけです。例えば、[0]["powers"][0]のように表記できます。 その他の注意点 JSON はただのデータフォーマットなので、プロパティのみを含むことができ、メソッドを含むことができません。 JSON では文字列とプロパティ名をダブルクォートで括る必要があります。シングルクォートで括ることはできません。 1 つだけカンマやコロンが抜けているだけで無効な JSON になりえます。なので、使用しているデータが有効であるかについては注意してみなければなりません(機械的に作った JSON のほうが、プログラムに問題がなければ、エラーは少なく済みます)。 JSONLint のようなアプリケーションを使ってバリデートすることもできます。 JSON は配列やオブジェクトに限らず JSON内に含むことができるデータ型のデータだけでも有効な JSON となります。 例えば、1 つだけの文字列や数値も有効な JSON です。 プロパティがクォートで括られていない JavaScript コードと異なり、JSON では、クォートされた文字列だけがプロパティとして使われます。 手を動かして学ぼう: JSON をさわってみる それでは、Web サイト上でどのように JSON を使うことができるか例を通して見てみましょう。 はじめに まず、heroes.html と style.css のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な形式の HTML です。 他には、この演習で書く JavaScript を含んだ <script> 要素があります。この時点では、<header> 要素と <section> 要素 を取得して、変数へ代入している 2行コードのみが書かれています。 演習用の JSON データは https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json に用意してあります。 そのデータを演習ページに読み込んで、それを表示するのにいくらかの DOM操作を行います。最終的には、以下の画像のようになります。 JSON の取得 JSON を取得するには、XMLHttpRequest (しばしば XHR と呼ばれる) という API を使用します。これは非常に便利な JavaScript オブジェクトで、JavaScript を使用してサーバからリソース (例：画像、テキスト、JSON、さらには HTML スニペットなど) を取得するネットワークリクエストを行うことができます。つまりページ全体を再読み込みせずに、小さな部分のコンテンツを更新することができます。これにより、よりレスポンシブな Web ページを作成できますが、それをもっと詳細に教えるのはこの記事の範囲を超えています。 まず、取得したい JSON がある URL を変数へ代入します。次のコードを JavaScript の最後の行へ追加してください。 HTTP リクエストを作成するのに、new を使って XMLHttpRequest から新しいリクエストオブジェクトをつくる必要があります。先ほどのコードの下に、次のコードを追加してください。 新しいリクエストを開始するのには open() メソッドを使います。 次のコードを追加してください。 このメソッドは最低２つのパラメータを引数として取ります（他に任意の引数を与えることもできます)。今回の簡単な例では、次の２つの必須パラメータのみを利用します。 リクエストを開始する際に HTTP のメソッドを決める必要があります。今回のケースでは、単純にデータを取得するだけですので GET が良いでしょう。 リクエストを送る先の URL。今回は JSON ファイルが置かれている URL です。 次に、以下の２行のコードを追加してください。XHR オブジェクトがサーバーから返されるデータを判断できるように responseType に JSON を指定します。すると、ブラウザ側で JavaScript オブジェクトへ変換してくれます。それから、send() メソッドでリクエストを送信します。 最後に、サーバーからのレスポンスを待ち、それを処理するコードを用意するので、以下のコードをこれまでのコードの下に追加してください。 ここでは、先ほどのリクエストに対するレスポンス (response プロパティから取得できます) を superHeroes という変数へ代入しています。つまり、この変数に JSON を元にに生成された JavaScript オブジェクトが格納されているということです! それから 2 つの関数をそのオブジェクトを引数として与えて呼び出しています。最初の関数は引数のデータを<header> へ埋め込み、2 つ目は各ヒーローごとのインフォメーションカードを作り、<section>へ埋め込みます。 上記の処理は、リクエストオブジェクトで load イベントが発生した時に呼び出される関数(onload を参照) に記述しました。このイベントはレスポンスがうまく取得できた場合に呼び出されるので、 request.response を使って何か処理をしようとしたときに、それが必ず利用できることが保証されています。 ヘッダーへの値のセット ここまでで、JSON の取得と JavaScript オブジェクトへの変換ができました、先ほどの 2 つの関数を実装して使ってみましょう。まずはじめに、以下のコードをこれまでのコードの下に追加してください。 JSON から変換した JavaScript オブジェクトである jsonObj を使います。まず、createElement()で<h1> 要素を生成、その textContent プロパティに JSON の squadName プロパティをセット、それをヘッダー要素で appendChild()追加します。次には、要素の生成、テキストのセット、ヘッダ要素への追加という同じような操作をパラグラフ要素でも行います。セットするテキストの値が homeTown と formed プロパティの文字列を結合したものであるという点だけが異なります。 ヒーローインフォメーションカードの作成 次に、以下の関数をコードの下へ追記してください。この関数はスーパーヒーローカードの作成と画面表示を行います。 始めに、JavaScript オブジェクトの members プロパティを新しい変数に保存します。 この配列は複数のオブジェクトを持ち、オブジェクトはそれぞれのヒーローについての情報を持ちます。 次に、for ループを使って配列の個々のオブジェクトをなめていきます。それぞれについて: 新しい要素をいくつか作ります: <article> 1つ、<h2> 1つ、3つの <p> と1つの <ul> です。 <h2> の中身を今のヒーローの名前 (name) にします。 3つの <p> の中身を、それぞれの secretIdentity と age、リストにある情報を紹介していくために「超能力 ("Superpowers:")」で始まる行とします。 powers プロパティを superPowers という新しい変数に保存します — この変数は今のヒーローの超能力のリストを持つ配列です。 別の for ループをつかって、今のヒーローの超能力をなめます — それぞれに対する <li> 要素を作成し、超能力をこの要素の中身とし、<ul>要素(myList変数)の listItem に appendChild() を使って追加します。 最後の最後にやるのは、<h2>、<p>、<ul> を <article> (myArticle 変数) の中身に追加し、それから <article> を <section> の中身に追加します。HTML の中身として表示される順序になりますので、これらの要素を追加していく順序は重要です。 オブジェクトとテキスト間の変換 上の例は XHR リクエストで JSON レスポンスを直接JavaScript オブジェクトに変換していたので、JavaScript オブジェクトへのアクセスという面では単純でした。次の部分です: 時にはこんなにツイていない場合もあります — 時には生の JSON 文字列を受けとり、自分でオブジェクトに変換しなければならない場合もあるでしょう。また JavaScript オブジェクトをネットワーク越しに送信したい場合、送信する前に JSON 文字列に変換しなければならないでしょう。ツイている事に、ウェブ開発でこの二つの問題にはしょっちゅう出くわすので、ブラウザには組込みの JSON オブジェクトが備わっていて、これは以下二つのメソッドを備えています: parse(): JSON文字列を引数に取り、それに対する JavaScript オブジェクトを返します。 stringify(): オブジェクトを引数に取り、等価な JSON文字列形式を返します。 一つめの方の動作例が heroes-finished-json-parse.html にあります (ソース を見て下さい) — ここでは前の方で作成した例と全く同じ事をしていますが、XHR では生の JSON 文字列を返させて、それを parse() で JavaScript オブジェクトに変換しているところだけが異なります。コードの重要な箇所はこの部分です: で、ご想像の通り stringify() は全く反対の向きに動作します。次の行をブラウザーの JavaScript コンソールに一つずつ打ち込んでいって、実際に動かしてみて下さい: JavaScript オブジェクトを作成してその中身を確認し、次に stringify() を使って JSON 文字列に変換し — 戻り値を新しい変数に保存しています — その値も確認しています。 まとめ この節では、プログラム内で、JSON を生成する、JSON をパースする、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の節では、オブジェクト指向 JavaScript について見ていくことにします。