TechAcademy（テックアカデミー） Webデザインコース Webデザイン 最先端を感じる！HTML5で3D表現をしているサイト10選
オーダーメイドコース
icon
icon
Webデザイン

最先端を感じる！HTML5で3D表現をしているサイト10選

HTML5で3D表現されているサイトを集めています。最先端を感じるような出来栄えになっているサイトばかりなので、こういったものを作りたいと感化されるでしょう。立体的なサイトを作りたいという人は、ぜひ参考にしてみてください。

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

HTML5で3D表現をしているサイトを集めてみました。特に難しい技術を使用せず、ここまでクオリティの高いものが作れるという点で参考になるはずです。

サイト上で立体的な表現をしているものは、日頃あまり見ないので新鮮さを感じるでしょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

ROME

html14_01

シンプルな雲の3D背景が広がるサイトです。

マウスを動かすことによって、雲の視点が変わり、実際に空を飛んでいるかのような感覚になります。

ROME

 

The GLOBE of ECONOMIC COMPLEXITY

html14_02

世界のお金のバランスを見やすく3Dで具現化したのがこのサイトです。ハーバード大学の学生が作り上げました。

学生でもこのクオリティのものが作れるとは感服ですね。

The GLOBE of ECONOMIC COMPLEXITY

 

[PR] Webデザインで副業する方法とは

Chemdoodle

html14_03

化学結合を3Dで表現したサイトです。

高校時代にこのような方法で化学を勉強していたら、とても楽しくなること間違い無しです。

Chemdoodle

 

8-bit Destruction

html14_04

昔懐かしい8bitのドット絵を3Dで表現したのがこのサイトです。

マウスによって視点を変えることができるので、本来2Dのドット絵の横側を見ることもできてしまいます。

8-bit Destruction

 

Nine Point Five

html14_05

地震の起きた量を3Dで具現化したサイトです。

マグニチュードや起きた時間などで絞ることもでき、HTMLの可能性を感じるサイトになっています。

Nine Point Five

 

Materials Skin

html14_06

人の顔を3Dで表現したサイトです。

3D技術の使い道がわかるサイトだと感じます。

Materials Skin

 

Hello Racer

html14_07

リアルなF1カートを3D表現したサイトです。

車好きの方にはたまらないサイトとなっています。

Hello Racer

 

webcammesh

html14_08

Webカメラに映った映像をメッシュ表現するサイトです。

Webカメラとも連携ができるとなると、技術力の進歩を感じます。

webcammesh

 

Shapespark

html14_09

インテリアを3Dで表現したサイトです。

今後家具業界などで、このような3Dで家具のイメージを共有する技術が進んでいきそうですね。実際に自分がそこに住んでいるイメージが湧くので見ているだけでも楽しめるでしょう。

Shapespark

 

Suisse Mania

html14_10

スイスを可愛い3Dで表現したサイトです。

自然豊かなスイスを気球で旅している気分になれます。

Suisse Mania

 

以上、HTML5で作られた3Dのサイトをまとめてみました。

実際に自分が動かしてみたり、その場にいるような新鮮さを感じることができると思いますが、自分でも表現したいと思ったものがあればぜひチャレンジしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

CSSで"cursor: pointer"が効かない原因と対処方法を現役エンジニアが解説【初心者向け】

CSSで”cursor: pointer”が効かない原因と対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
CSS

今すぐ使える！CSSフレームワークのCompassとは【初心者向け】

CSSを効率的に書くためのフレームワークである、Compassについて解説しています。 Compassを使用するためにはSassの知識、開発環境が必要とな...
CSS

80年代スタイルが2017年注目のトレンドになる8つの理由

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのCarrie Cousins氏...
Webデザイン

HTMLのinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

「かわいい！」を感じさせるデザインのWebサイトまとめ

webデザインでかわいいを表現するというのは、とても難しいと思います。そんなデザインで悩んだ時に参考になるサイトを紹介したいと思います。女性向け・子供向けのサイ...
Webデザイン

【今すぐ知っておきたい！】Webデザイナーの転職に必要なスキルとは

IT関連の職種で「Webデザイナー」という言葉を耳にしたことがある人は多いでしょう。 プログラミングやWebマネジメントなどIT関連の専門職は多様化し、増...
Webデザイン

あわせてよく読まれている記事

書きながら覚えよう！Pythonで正規表現を使う方法【初心者向け】

今回は、Pythonで正規表現を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 普段見慣れない文字を入力していますが、実際に書いてみて慣れていきましょう。 目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   Pythonの正規表現とは 正規表現とは、文字列を1つのパターン化した文字列で表現する表記法です。 正規表現を使用して、文字列をパターン化した文字列に置き換えることで、文字列の検索や置換を行えます。 また、自然言語処理といったAI技術の基礎的な処理も行うことができます。   メタ文字 正規表現において、パターン化した文字列のことをメタ文字と言います。 ★は文字列を意味します。 メタ文字 説明 指定例 合致する . 任意の1文字 a.c abc, acc, aac ^ 行の先頭 ^abc abcdef $ 行の末尾 abc$ defabc * 0回以上の繰り返し ab* a, ab, abb, abbb + 1回以上の繰り返し ab+ ab, abb, abbb ? 0回または1回 ab? a, ab {m} m回の繰り返し a{3} aaa {m,n} m〜n回の繰り返し a{2, 4} aa, aaa, aaaa [★] ★のどれか1文字 [a-c] a, b, c ★|★ ★のどれか a|b a, b   特殊シーケンス よく利用される正規表現のパターンは、特殊シーケンスと呼ばれます。 特殊シーケンスは、（バックスラッシュ）を先頭に記載します。 特殊シーケンス 説明 同じ意味の正規表現 d 任意の数字 [0-9] D 任意の数字以外 [^0-9] s 任意の空白文字 [tnrfv] S 任意の空白文字以外 [^tnrfv] w 任意の英数字 [a-xA-Z0-9_] W 任意の英数字以外 [a-xA-Z0-9_] A 文字列の先頭 ^ Z 文字列の末尾  $   Pythonで正規表現を使う方法 Pythonではreモジュールを使って正規表現を扱います。 reモジュールをimportすることで正規表現を利用できます。 import re importを詳しく知りたい人は、Pythonでimportを使う方法について解説している記事もあわせてお読みください。   reモジュールには、以下のような関数があります。 match()：文字列の先頭から正規表現にマッチしている部分を返す fullmatch()：文字列全体が正規表現にマッチしているかを返す search()：文字列中で正規表現にマッチする最初の部分を返す findall()：文字列中で正規表現にマッチするすべての部分を文字列のリストで返す finditer()：文字列中で正規表現にマッチするすべての部分をイテレータとして返す sub()：文字列中で正規表現にマッチする部分を置換して返す subn()：文字列中で正規表現にマッチする部分を置換してタプル(置換後文字列, マッチした数)で返す split()：文字列を指定した正規表現で分割する それぞれの関数について、サンプルをもとに書き方を確認していきましょう。   match()関数の書き方 文字列の先頭から正規表現にマッチしている部分を返します。 結果はマッチした情報を取りまとめた「マッチオブジェクト」で返ります。 マッチオブジェクトからマッチした文字列を取り出す方法は、次の具体例でご紹介します。 マッチしない場合、Noneが返ります。 書き方のサンプル： # マッチする例 result = re.match(r'a.c', 'abcdefg') print(result) # マッチしない例(Noneが返る) result = re.match(r'a.c', 'Alphabet starts with abcdefg.') print(result) 解説： match関数で、文字列の先頭から正規表現「r’a.c’」にマッチしている部分を検索します。 マッチした場合の例では、マッチオブジェクトが返ります。 マッチオブジェクトの「span」はマッチした位置を表しています。 今回の場合、0～2文字目がマッチした位置になります(3文字目は含みません)。 実行結果： <re.Match object; span=(0, 3), match='abc'> None マッチオブジェクトの「match」はマッチした文字列を表しています。   fullmatch()関数の書き方 文字列全体が正規表現にマッチしているかを返します。 結果はマッチオブジェクトで返ります。 マッチしない場合、Noneが返ります。 書き方のサンプル： # マッチする例 result = re.fullmatch(r'a.c', 'abc') print(result) # マッチしない例(Noneが返る) result = re.fullmatch(r'a.c', 'abcde') print(result) 解説： fullmatch関数で、文字列全体が正規表現「r’a.c’」にマッチしているかを確認します。 マッチした場合の例では、マッチオブジェクトが返ります。 span、matchについてはmatch関数と同様ですので説明は省略します。 実行結果： <re.Match object; span=(0, 3), match='abc'> None search()関数の書き方 文字列中で正規表現にマッチする最初の部分を返します。 結果はマッチオブジェクトで返ります。 マッチしない場合、Noneが返ります。 書き方のサンプル： # マッチする例 result
Python

JavaScriptで正規表現を使ってメールアドレスをチェックする方法を現役エンジニアが解説【初心者向け】

Web制作でメールアドレス入力フォームを作ることがあります。 入力された文字が、きちんとメールアドレスの形式になっているか確かめたいですよね。 そんな時に役立つ、JavaScriptの正規表現でメールアドレスをチェックする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 正規表現が呪文みたいでよくわからないという方、ぜひ本記事でマスターしてください。 目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで、正規表現を使ってメールアドレスをチェックする方法について詳しく説明していくね！ 大石ゆかり お願いします！   メールアドレスチェックの方法 JavaScriptで、正規表現を使ってメールアドレスをチェックするサンプルコードはこちらです。 See the Pen pattern by TAKAYOSHI (@lspuwbkv) on CodePen. /*入力フォームの要素*/ var form=document.getElementById("form"); /*結果出力用の要素*/ var result=document.getElementById("result"); /*メールアドレスのパターン 正規表現*/ var pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/; /*フォーム入力のイベントハンドラ*/ form.addEventListener("input", (e) => {     /*メールアドレスのパターンにマッチするかチェック*/     if (pattern.test(form.value)) {         /*パターンにマッチした場合*/         result.textContent = "メールアドレスです";      } else {         /*パターンにマッチしない場合*/
JavaScript

JavaScriptで正規表現のmatchを使う方法【初心者向け】

JavaScriptで正規表現のmatchを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで正規表現のmatchを利用することでデータの効率的に扱うことが可能になります。 実務でも正規表現を利用して、電話番号や住所データを扱うため、ぜひ学習してみてください。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。 目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！正規表現というのは何でしょうか？ 田島悠介 様々な文字列を一つの文字列で表現できるようにした表記法のことだよ。 大石ゆかり どのような書き方があるのですか？ 田島悠介 例を見ながら説明していくね！   正規表現とは 例えばユーザーが入力した文字列が、郵便番号として正しいか確認するにはどうしたら良いでしょう。 郵便番号にはいろんな数字があり、プログラムを作って確認するにしても大変そうです。 そんな時に便利なのが、正規表現です。 正規表現は、郵便番号であれば「数字4桁-数字3桁」というような文字列を表現できるようにした表記法のことです。 正規表現で指定した表記を利用して、該当パターンに合致するデータを検索できます。 JavaScriptではmatchメソッドなどで正規表現を利用できます。 matchメソッドを利用すると、matchメソッドで指定した文字列が存在した場合、指定文字列を配列で返します。 もし、存在しなかった場合はnullを返します。 matchの書き方 基本的なプログラムは以下のようになります。 対象となる文字列の後ろに「.」ピリオドを付けて記載します。 文字列.match( 正規表現 ) [PR] Webデザインで副業する方法とはmatchメソッドとtestメソッドとの違い ここでは、matchメソッドとtestメソッドの違いについて解説します。 testメソッドの書き方 正規表現パターン.test(対象の文字列) matchメソッドを利用すると、matchメソッドで指定した文字列が存在した場合、指定文字列を配列で返します。 もし、matchメソッドの存在しなかった場合はnullを返します。 testメソッドを使う場合、指定した文字列が存在した場合はtrueが返ります。 指定した文字列が存在しない場合はfalseが返ります。 サンプルコード   let str = "123-4567, 一二三ー四五六七, 000-1111"; let reg = /d{3}-d{4}/g; console.log( str.match( /d{3}-d{4}/g ) ); console.log( reg.test(str) ); 実行結果 解説 let str = “123-4567, 一二三ー四五六七,
JavaScript

PHPのpreg_matchで正規表現によるマッチングする方法

今回は、preg_matchについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 preg_matchを利用することで、文字列の検索や置換を行うことができます。 実務でも、preg_matchを利用した文字列の検索や置き換えを行う処理を実装するので、ぜひ学習してみてください。   目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   preg_matchとは preg_matchでは、ある文字列から正規表現で指定したパターンにマッチした文字列を検索できます。 パターンにマッチした場合は1を返し、マッチしなかったら0を返します。 例えば、検索対象の「これからphpを勉強します。」という文字列から、パターン「php」を検索すると1を返します。 一方、「ruby」を検索すると0を返します。 「php」の場合は文字列内にありますが、rubyはないのでこういった結果になります。 他にも大文字・小文字を区別せずにパターンにマッチさせることや、指定文字列が先頭にあるだけマッチさせることもできます。   正規表現とは 正規表現とは、文章中の特定文字を検索、置き換え、削除することができる文法です。 正規表現を利用する例として、文章中にある「,」という英文字のカンマを、「、」という日本語の読点に一括変換する場合などです。 その他にも、次のような使い方が可能です。 〇〇〇から始まる文字列を検索したい ×××で終わる文字列を▼▼▼に置き換えたい 大文字で始まる英単語を検索したい HTML内のcol-から始まり、そのあとは1～2桁の数字となっているコードを別のコードに置き換えたい 全角と半角、両方のスペースを削除したい 正規表現には非常に多くの指定方法があり、正規表現だけで1冊の本を書くことができるほど非常に深い内容です。 まずは、基本的な使い方を、サンプルコードを利用して使っていきましょう。     大石ゆかり 正規表現で指定したパターンにマッチするかどうかって少し難しいですね。 田島悠介 そうだね。簡単に言うと、ある形式にマッチしているかどうかってことなんだ。 大石ゆかり ある形式とは何ですか？ 田島悠介 例えばメールアドレスの形式になっているかどうかだったり、電話とか日付でもいいね。そういう単純には表せないものに使うんだよ。書き方を見てみよう！   [PR] Webデザインで副業する方法とはpreg_matchの書き方 preg_matchの書式は以下の通りです。 [ ]はオプションで省略できます。 preg_match(/正規表現パターン/,検索対象の文字列,[配列],[動作フラグ],[検索開始位置])   返り値 preg_match関数の返り値は、パターンにマッチすれば1、マッチしなければ0です。 返り値の部分に変数を指定することで、パターンマッチの結果である1か0が代入されます。   正規表現パターン 「正規表現パターン」でマッチさせたいパターンを指定します。 正規表現は/で囲んで記述します。   検索対象の文字列 「検索対象の文字列」では、正規表現でマッチさせる対象文字列です。   配列 「配列」を指定した場合は、検索結果が配列として代入されます。   動作フラグ 「動作フラグ」で「PREG_OFFSET_CAPTURE」を指定すると、マッチした文字列の登場した位置（オフセット）をバイト数で取得できます。   検索開始位置 「検索開始位置」では、先頭ではなく検索を始めたい位置を指定できます。 ただし、指定はバイト数なので注意が必要です。   実際に書いてみよう それでは実際に、preg_match関数を使用してPHPのプログラムを書いてみましょう。   文字列「PHP」を検索する 以下は、文字列「PHP」にマッチするか確認しています。 サンプルコード <?php if (preg_match("/PHP/", "今PHPを勉強しています。")) { echo "マッチしました。"; } else { echo "マッチしませんでした。"; } 出力結果 解説 <?phpでは、PHPプログラムを開始することを意味します。 if (preg_match(“/PHP/”, “今PHPを勉強しています。”)) {では、preg_matchを利用して、今PHPを勉強しています。という文字列からPHPという文字列がパターンマッチするかどうかを調査しています。 if文で、もし適合していたらという条件分岐を行っています。 echo “マッチしました。”;では、if文の条件に合致したら、マッチしました。と表示しています。 } else {では、if文の条件に合致しない場合の条件を指定しています。 echo “マッチしませんでした。”;では、if文の条件に合致しない場合、マッチしませんでした。と表示しています。 }ではif文の処理を終了します。   文字列「PHP」を大文字、小文字を区別せずに検索する 以下では、大文字・小文字の区別をせずにマッチするか確認しています。 これは、preg_matchの/正規表現パターン/の最後にアルファベットのiを記載することで、大文字、小文字を区別せずに検索します。 サンプルコード <?php if (preg_match("/PHP/i", "今phpを勉強しています。")) { echo "マッチしました。"; } else {
PHP

Rubyで正規表現を使う方法を現役エンジニアが解説【初心者向け】

Rubyで正規表現を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 正規表現を使う方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 正規表現とは 正規表現を使う方法 実際に書いてみよう まとめ   正規表現とは 正規表現は、Rubyだけではなくいろいろなプログラミング言語で使われていますが、文字列をパターンとして読み取る表現方法のことを指します。 現代では膨大なデータがアップロードされており、多くの情報が存在していますが、この正規表現はweb上などに存在するデータから特定のものを抜き出す場合などに利用します。 例えば、携帯電話の番号は3桁、4桁、4桁の数字のパターンですが、正規表現では、 (d{3})-(d{4})-(d{4}) このように表現し、この3-4-4のパターンである半角数字の並んだものを表現しています。「d」は半角数字を表しており、携帯電話の番号が全角で書かれていたり、数字が足りない場合にはこの正規表現のパターンに一致しないことになります。 お問い合わせ機能などにも実装することができ、入力フォームなどで桁数が足りない場合などにも確認をすることが出来ます。   [PR] Webデザインで副業する方法とは正規表現を使う方法 Rubyで正規表現で意味するプログラミングはスラッシュで前後を囲みます。 /(d{3})-(d{4})-(d{4})/ このように記述をします。 スラッシュの間に既述する文字は「メタ文字」と呼ばれる特殊な文字を記述します。上記のdはアルファベットとしてのdではなく、バックスラッシュと連続して記述することでメタ文字として「半角数字」を意味します。 /[01]/とした場合は、0または1を表現しています。 他には、/D/とした場合は、数字以外の部分を表現しています。   実際に書いてみよう if文により、該当する文字列パターンがあるかを判別しています。 if '電話番号：090-1234-5678' =~ /(d{3})-(d{4})-(d{4})/ puts '該当あり' else puts '該当なし' end if '電話番号：090-1234-5678' =~ /[01]/ puts '該当あり' else puts '該当なし' end   []で正規表現を囲むことにより、正規表現に該当する箇所の最初の部分を抜き出すことが出来ます。 test = '電話番号：090-1234-5678' puts test[/(d{3})-(d{4})-(d{4})/] puts test[/[01]/] puts test[/D+/]   まとめ 正規表現のメタ文字は上記の他にもたくさんあり、概念としてはとても奥深い分野です。 プログラミングを記述する場合には避けて通れない知識ではありますが、時間を掛けずに必要な部分から理解をしていくことが必要です。 様々なメソッドと組み合わせて利用することで正規表現を活用できるようにしていきましょう。   監修してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Ruby

JavaScriptで正規表現を使って郵便番号をチェックする方法を現役エンジニアが解説【初心者向け】

JavaScriptで正規表現を使って郵便番号をチェックする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 正規表現を使って郵便番号をチェックする方法について詳しく説明していくね！ 大石ゆかり お願いします！   正規表現とは 正規表現とはいくつかの文字列を1つの文字列(正規表現パターン)で表現する表現手法です。 たとえば、 私はプログラミングを勉強しています。 僕はプログラミングを勉強しています。 私はプログラミングを学習しています。 といった文章を１つの文字列で表現することが出来ます。 複数の文字列を1つの文字列で表現することが出来ると、複数の文章から特定の部分を抜き出したり、複数ある文章が指定したパターンに一致しているか調べることが出来ます。   正規表現の使い方 JavaScriptで正規表現を使うには、まず正規表現のパターンを用意しそのパターンを使って目的の処理を行っていきます。パターンを作成するには、以下のようにスラッシュで囲まれた正規表現リテラルというものを使います。 /.+はプログラミングを.+しています。/ また以下のようにRegExpクラスを使ってパターンを作成することも出来ます。 let re = new RegExp('.+はプログラミングを.+しています。'); 特定の文字列が正規表現のパターンにマッチしているかどうか調べるには以下のようにtest関数を使います。 var isMatch = /.+はプログラミングを.+しています。/.test('私はプログラミングを勉強しています。'); また特定の文字列から正規表現のパターンにマッチしている部分を取得するにはmatch関数を使います。 var matchedStr = '私はプログラミングを勉強しています。'.match('/.+はプログラミングを.+しています。/');   [PR] Webデザインで副業する方法とは郵便番号をチェックする方法 それでは郵便番号が正しい形式であるかどうかを正規表現でチェックする方法について見ていきましょう。郵便番号の形式は[数字3桁]ハイフン[数字4桁]といったものです。 適切な正規表現パターンを作成し、パターンにマッチしているかどうかをtest関数を使って調べてあげれば適切な郵便番号かどうかチェックすることができます。   実際に書いてみよう では実際に正規表現を使って郵便番号をチェックするプログラムを書いていきましょう。 window.onload = function() {   // 正常な郵便番号   var postalCode1 = "114-0211";   // 異常な郵便番号(ハイフンがない)   var postalCode2 = "1140211";   // 異常な郵便番号(数値3桁-数値5桁)   var postalCode3 = "114-02111";   // 正規表現パターン   let pattern = /^[0-9]{3}-[0-9]{4}$/;   console.log(pattern.test(postalCode1));   console.log(pattern.test(postalCode2));   console.log(pattern.test(postalCode3)); } 実行結果 true false false 今回は3つの郵便番号を用意しそれぞれに対して正規表現で形式のチェックを行っています。正規表現のパターンとして「/^[0-9]{3}-[0-9]{4}$/」を指定しています。 このパターンでは0から9の数字が3桁ありその後-(ハイフン)があり再度0から9の数字が4桁ある文字列のパターンを示しています。 先頭と末尾にある^と$記号は、行の先頭と末尾を表しています。この先頭、末尾の記号を入れないと郵便番号の前と後に余分な文字列が含まれている場合でも正常とみなしてしまいます。 そしてtest()関数によってそれぞれの郵便番号を検査した結果、postalCode1は正常、その他の2つの郵便番号は異常であると正しくチェックすることができます。   まとめ 今回は正規表現を使った郵便番号のチェック処理の方法を紹介しましたがいかがでしたでしょうか。このように正規表現を使うことで様々な文字列のチェック処理や文字列の抽出処理を行うことが出来ます。 正規表現はプログラムを書く上で様々な場面で活用されるため、是非習得しておきましょう！   監修してくれたメンター 黒木一志（くろきかつし） TechAcademyジュニアのゲームアプリコースを担当しています黒木です。現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン 最先端を感じる！HTML5で3D表現をしているサイト10選