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デザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事...
Webデザイン

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

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

流行を知っておきたい！2017年1月のWebデザイントレンド

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

HTMLで複数のチェックボックスを横並びに配置する方法を現役エンジニアが解説【初心者向け】

HTMLで複数のチェックボックスを横並びに配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

写真と動画の良いとこ取り！Webデザインで話題の「シネマグラフ」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、 The Deep End Design...
Webデザイン

事例から学ぶ！Webアニメーションのテクニックまとめ

本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されまし...
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

Javaの正規表現のエスケープ処理について現役エンジニアが解説【初心者向け】

Javaの正規表現のエスケープ処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 正規表現のエスケープ処理について詳しく説明していくね！ 大石ゆかり お願いします！   目次 正規表現のルールとは Javaで正規表現を扱う方法 エスケープ処理とは 正規表現のエスケープ処理を実装してみよう まとめ   正規表現のルールとは 正規表現とは文字列のパターンを一つの形式でまとめて表現するために使うものです。郵便番号や電話番号などを表すことができ任意の文字列から特定の文字列を取得したり、一致しているかを判定したりする際に使います。 正規表現を作成する時には以下のルールがあります。 以下に示す特殊文字を使用する 特殊文字以外の文字は、その文字自体を照合する 大カッコ([])で囲まれた文字セットは、そのセット内の任意の文字を照合する 1文字の正規表現を表します。例えば[abc]と記述すればaもしくはbもしくはcと一致することを表します 正規表現の特殊文字及び記号には以下のようなものがあります。 特殊文字及び記号 記号の説明 . 任意の1文字。改行文字は除く。 * 直前の1文字の0回以上の繰り返しと一致 ^ 行の先頭 $ 行の末尾 [ ] カッコ内の任意の1文字と一致。「-」で範囲指定可。 [^ ] カッコ内の任意の1文字と不一致。「-」で範囲指定可。 + 直前の文字の1個以上の繰り返しと一致 ? 直前の文字が0個または1個の場合に一致 { } カッコ内の数値の繰り返しと一致 | 直前、直後どちらかのパターンに一致   [PR] Webデザインで副業する方法とはJavaで正規表現を扱う方法 Javaで正規表現を使うためには以下のように記述します。 Pattern Patternの変数 = Pattern.compile(正規表現); Matcher Matcherの変数 = Patternの変数.matcher(比較対象文字列); java.util.regexパッケージにあるPatternクラスとMatherクラスを使うことで正規表現を使って処理をすることができます。 最初にPatternクラスをcompileクラスの引数に正規表現を設定することで正規表現を使用する準備をします。 次に先ほど作成したPatternクラスのオブジェクトからmatcherメソッドを呼び出し、引数として正規表現を使って調べたい文字列を設定します。戻り値としてMatcherクラスのオブジェクトを返すためMatherクラスの変数を用意しておきます。 matcherメソッドを使うことで文字列を正規表現に一致する部分に分けることができるため一つの文字列の中に複数正規表現に一致する場合でも調べることができます。   エスケープ処理とは 特殊文字を使うことで正規表現を表すことができます。しかし、特殊文字を正規表現としてではなく、文字として表したい時にはエスケープ処理をする必要があります。 エスケープ処理は以下のようにします。 特殊文字 「」を前に付けることで正規表現としての特殊文字ではなく、普通の文字として扱うことができます。 しかし実際には「」は文字列において特殊な意味を持つため「」に対してもエスケープ処理が必要になるため 特殊文字 という形で記述します。   正規表現のエスケープ処理を実装してみよう では正規表現のエスケープ処理を実装してみましょう ソース import java.io.IOException; import java.io.IOException; import java.util.regex.Matcher; import java.util.regex.Pattern; public class MainClass { public static void main(String[] args) throws IOException { String str01 = "..."; String str02 = ".da.fb.rd"; Pattern p = Pattern.compile(str01); Matcher m =
Java

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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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