【プログラミング学習】JavaScriptの基本的な構文

■プログラミング学習

◎デベロッパーツール
JavaScriptはデベロッパーツールを使うことで、コードを実行→結果表示の確認ができます。
デベロッパーツールはブラウザ開発者ツール、検証ツールなどとも呼ばれており、ブラウザに付属して使うことができます。
下記のようなことができます。
・表示しているサイトのHTMLの要素の確認・編集
・表示しているサイトのCSSの確認・編集
・JavaScriptの実行
※このページのデベロッパーツールを使うとこうなります

ElementsはHTML,CSSの確認編集
ConsoleはJavaScriptの実行をすることができます。

デベロッパーツールをブラウザで起動するには、
Command  + Shift + Cで起動できます。


◎コンソールに文字を表示させる方法
・console.log

console.log("ここに文字を入力")し、Enterで文字が表示されます。

◎変数定義について
・var 　コンソール

varは再定義、再代入可能な古い書き方になります。
特徴は再定義、再代入可能。
リンゴが再代入、バナナが再定義。
※現在の開発現場において、varはあまり使われていないです。

・const(コンスト)
constは、後から書き換えることが出来ない変数を定義する書き方です。
再代入、再定義が不可という制約があります。
※constで指定する「書き換えることが出来ないデータ」は正確には「定数」と呼ぶ。

・let(レット)
letは後で書きけることが出来る変数を定義する書き方です。
再代入は可能、再定義は不可という制約があります。

【プログラミング学習】JavaScriptの概要を学ぶ

■プログラミング学習

◎JavaScript

JavaScriptとは、プログラミング言語の一つです。主にクライアントサイドにおいて、力を発揮する言語で、「ブラウザ上のアプリケーションの使いやすさ」や「リクエストの送り方の工夫」をJavaScriptは担っています。
JavaScriptを用いることによって、より使い勝手の良いアプリケーションの作成ができます。
JavaScriptは現在ほとんどのWEBアプリケーション開発現場で用いられているほど人気のある言語です。また、世界でもっとも使用されている言語だと言われています。

JavaScriptを用いうことで、下記のような操作が可能です。
・ページ遷移なしで、画面の表示切り替えができる。
・画面を更新せずにサーバーから値を取得することができる。

メリットとして、ページ遷移の度に起きる待ち時間の短縮ができ、ユーザー体験の向上が見込める。

【プログラミング学習】Webアプリケーションの正規表現使用 例2

■プログラミング学習

◎passwordの英数字混合の判断
英数字混合チェックになります。
英数字が混合したパスワードであるか確認をする際には、
英字もしくは数字が少なくとも０回以上続き、
末尾までそれが続くことが前提条件となります。

/\A(?=.?[a-z])(?=.?[\d])[a-z\d]+\z/i

◎「?=」
「?=」の直後に設定した文字でcheckをかけ、設定した文字が続く文字列が存在する場合、その文字列にマッチします。

[1] pry(main)> name = "スティーブ・ジョブズ"
=> "スティーブ・ジョブズ"
[2] pry(main)> name.match(/スティーブ・(?=ジョブズ)/)
=> #<MatchData "スティーブ・">
[3] pry(main)> name = "スティーブ・ブシェミ"
=> "スティーブ・ブシェミ"
[4] pry(main)> name.match(/スティーブ・(?=ジョブズ)/)
=> nil

直前が同じ「スティーブ・」から始まる文字列でも、後ろに続く文字が違うと結果が変わります。 今回の場合は、ジョブズが後ろに続く場合のみマッチするように設定したため、
2度めのcheckにはマッチせず、nilが返ってきています。

◎「*?」
「」は、直前の1文字が0回以上続くとマッチします。
下記のように、「(design)」とした場合は、「design」や、「(de)」とした場合、
「de」がマッチします。
この「」のあとに「?」をつけることで、checkした文字の中で「?」の直後の文字が出てきた段階でその1文字のみ返します。

[7] pry(main)> name.match(/design*/)
=> #<MatchData "design">
[8] pry(main)> name.match(/de*/)
=> #<MatchData "de">
[10] pry(main)> name = "deeeeee"
=> "deeeeee"
[11] pry(main)> name.match(/de*/)
=> #<MatchData "deeeeee">

◎正規表現のパターン表記一覧

• [a-z]　|　角カッコで囲まれた文字のいずれか1個にマッチ
  
• \d　　|　数字にマッチ
  
• {n,m} |　直前の文字が少なくともn回、多くともm回出現するものにマッチ
  
• . |　改行以外どの1文字にもマッチ
  
• • |　直前の文字が1回以上の繰り返しにマッチ
    
• \A |　直後の文字が先頭にある文字列にマッチ
  
• \z |　直前の文字が末尾にある文字列にマッチ
  
• [ぁ-んァ-ヶ一-龥々] |　角括弧に囲まれたかな、カナ、漢字のいずれかにマッチ（ヴ、ヵ、ヶ、々を含む）
  
• ?= |　直後に設定した文字が続く文字列にマッチ
  
• *? |　直前に設定した文字が0回以上続く文字列をチェックし、?の直後の文字が出た段階でその1文字を返す
  
  この辺りは、まだまだ自分の中で理解が出来ていないため
  今後実装時に、意味を理解しながら使っていくことで、
  もっと詳しくなっていきたいと思います。

【プログラミング学習】Webアプリケーションの正規表現使用 例1

■プログラミング学習

◎正規表現のWebアプリケーションの利用
Webアプリケーションのバリデーションにおういて、正規表現は非常に有用なものです。
正規表現を用いることで、より細かいバリデーションの設定ができるからです。
よく利用するものとしては、以下の３つがよく使用されます。

• 郵便番号
  

• 全角かな/カナ漢字の区別
  

• passwordの英数混合の判断※例2に
  
  ◎郵便番号
  郵便番号は、「３桁の数字」と「ハイフン」と「４桁の数字」で構成されています。
  きちんとハイフンが記入された正しい形式で郵便番号を入力しているか判別する方法を学びます。
  

[10] pry(main)> postal_code = "100-0000"
=> "100-0000"

[12] pry(main)> postal_code.match(/\A\d{3}[-]\d{4}\z/) 
=> #<MatchData "100-0000">

「\A」は、直後においた文字を、文字列の先頭に持つ場合にマッチします。
今回jは、\A\d{3}としているため文字列の先頭に少なくとも３回数字があるとマッチになります。
「\z」は、直後に置いた文字を、文字列の末尾に持つ場合にマッチします。
今回は、\d{4}\zとしているため、文字列の末尾に少なくとも４回数字があるとマッチします。

◎全角かな/カナ漢字の区別
全角かな/カナ、もしくは漢字を区別するためには、アルファベットをチェックするときに使う[a-z]のように表現します。
[ぁ-んァ-ヶ一-龥々ー]と表現することで、「ぁ」から「ん」まで、
「ァ」から「ン」まで、「一」-「龥」までの文字をチェックしています。
これらの文字の範囲は、Unicodeにおける範囲のため、上記範囲で一般的に指定されます。
ただし、「ヴ、ヵ、ヶ、々」という文字が、弾かれてしまいます。
utf-8文字コード上では「ヴ」「ヵ」「ヶ」は
カタカナの「ン」以降に配列されているため、
「ァ-ヶ」と記載し、また「々」はutf-8文字コード上で記号と認識されているため
別途、「々」で指定を追加しています。
これであらゆる日本語に対応する言葉ができています。
さいごに、長音記号が含まれた文字列「ビーバー」や「ポール」のような場合、
末尾に「ー」を追加して、
[ぁ-んァ-ヶ一-龥々ー]と記載しています。

[1] pry(main)> full_name = "山田いち郎"
=> "山田いち郎"
[2] pry(main)> full_name.match(/\A[ぁ-んァ-ヶ一-龥々ー]+\z/)
=> #<MatchData "山田いち郎">
[3] pry(main)> name = "田中ヨハンソン"
=> "田中ヨハンソン"
[4] pry(main)> name.match(/\A[ぁ-んァ-ヶ一-龥々ー]+\z/)
=> #<MatchData "田中ヨハンソン">
[5] pry(main)> name = "tanakaヨハンソン"
=> "tanakaヨハンソン"
[6] pry(main)> name.match(/\A[ぁ-んァ-ヶ一-龥々ー]+\z/)
=> nil

[5]がnilで返ってきている理由としては、アルファベットを使用しているため
マッチしていないからになります。

Part ２に続く

最近読み始めた本です↓

東京の生活史 (単行本)

【プログラミング学習】正規表現とは Part2

■プログラミング学習

◎応用的な使用方法のパターン

• 電話番号のハイフンを取り除く
  
• パスワードに英数字8文字以上という制約を設定する
  
• メールアドレスからドメイン部分のみを抽出する
  
  
  

◎電話番号のハイフンを取り除く
特定の文字を取り除く場合は、「特定の文字を空文字に置換する」と考えます。
置換するメソッドは前回紹介したsubメソッドになります。
しかし、subメソッドでは最初の文字しか置換されないため
gsubメソッドを使用します。
gが意味するのはグローバルマッチという言葉です。
文字列内に指定した文字が複数含まれている場合、その全てを置換するという意味になります。
gsubではなく、subを使用した場合、最初にマッチした１つだけが置換されます。

[1] pry(main)> tel = '090-1234-5678'
=> "090-1234-5678"

[2] pry(main)> tel.sub(/-/,'')
=> "0901234-5678"
# 最初の-しか置換されていない

[3] pry(main)> tel.gsub(/-/,'')
=> "09012345678"

◎パスワードに英数字8文字以上という制約を設定する
今回のパスワードの条件は「大文字小文字両方可能で、英字もしくは数字8文字以上であること」にします。
設定するパスワードは「Test1234」とします。
matchメソッドを使用して、下記のように記述します。

[1] pry(main)> pass = 'Test1234'
=> "Test1234"
[2] pry(main)> pass.match(/[a-z\d]{8,}/i)
=> #<MatchData "Test1234">

パスワードを1文字減らして、7文字にした場合はどうなるか。

[4] pry(main)> pass = 'Test123'
=> "Test123"
[5] pry(main)> pass.match(/[a-z]\d]{8,}/i)
(pry):5: warning: regular expression has ']' without escape: /[a-z]\d]{8,}/
=> nil

結果はnilになっているため、8文字以上の英数字でないとmatchしないことが確認できました。
よくある処理としては、この結果がnilであればWebサイトのパスワードとして認めないようにする、といったものが例として挙げられます。
下記表現について、解説をいたします。

• [a-z]
  
• \d
  
• {n,m}
  
• i
  
  ◎[a-z]
  角括弧[]を使用することで、囲まれた文字のうちいずれか１つがマッチするかをチェックしています。
  -(ハイフン)を使用することで、範囲を設定することができます。
  つまり、[a-z]はa~zまでいずれかにマッチ、[a-d]はa~dまでいずれかにマッチという意味です。
  
  ◎\d
  このdは数字を表しています。このdのような文字を特殊文字と呼びます。
  特殊文字を使用する際には、直前に\を記述するルールがあります。
  今回の/[a-z\d]の場合は、\dが角括弧の内側にあるため、英数字のいずれか１つにマッチという意味になります。
  
  ◎{n,m}
  直前の文字が少なくとも「n」回、多くてもm回出現するものにマッチすることを確認します。
  こちらで、文字数の制約を追加しています。
  
  ◎i
  最後にiオプションを加えることで、大文字・小文字を区別せずに検索します。
  iオプションをつけない場合、[a-z]と小文字で記述しているため大文字にマッチしなくなってしまいます。
  小文字のみに制約をするという場合は、iオプションをつけないことで対応可能です。
  
  ◎メールアドレスからドメイン部分のみ抽出する
  matchメソッドを使用することで、抽出することができます。
  

[1] pry(main)> mail = 'test_sample@mail.com'
=> "test_sample@mail.com"

[2] pry(main)> mail.match(/@.+/)
=> #<MatchData "@mail.com">

「.」はハイフンやピリオドなどを含めたすべての英数字において、どの１文字にもマッチします。

[4] pry(main)> 'test'.match(/./)
=> #<MatchData "t">
[5] pry(main)> 'abcd1234'.match(/./)
=> #<MatchData "a">

「+」は直前の文字が１回以上繰り返すものにマッチします。

pry(main)> 'aaaabcd1233'.match(/a+/)
=> #<MatchData "aaaa">

上記二つを組み合わせて「.+」とすることで、何かしらの文字が１回以上繰り返すものにマッチします。
先頭に@をつけることで@から始まり、何かしらの文字が１回以上繰り返すものにマッチするという意味になります。
こうすることで、メールアドレスからドメイン部分のみを抽出することが可能で、もしも「@~」という文字列でなかった場合に、メールアドレスとして登録を認めないという処理に応用できます。

【プログラミング学習】正規表現とは Part1

■プログラミング学習 ◎正規表現とは
正規表現とは、文字列の一部分を抽出・置換したり、
文字列が制約を満たしているかを調べるための表現方法です。
例：パスワードが6文字未満、メールアドレスに＠がないとエラー

◎使うシーン
例えば、電話番号の入力などで、「-」のあるなしで入力制限がなかった場合、 ユーザーによって、登録が下記のようなバラバラの上になってしまいます。

ユーザーA　090-1234-XXXX
ユーザーB　0901234XXXX

このような状態でデータベースに保存されてしまうと管理が大変になってしまうため フォーマットを統一させるために、電話番号にハイフンが入っていたら、必要に応じて 処理をします。
このように、文字列に特定の文字が含まれているかを確認することや、特定の文字を取り除くなどの操作を行うための技術が正規表現です。
正規表現は、さまざまな言語で同じようなコードで表せるよう設計されいるためほとんどの記述をRubyやJavaScriptなどの別言語間でも共有できます。
今回はRubyの正規表現を書いていきます。

◎subメソッド
subメソッドは文字列の指定した部分を別の文字列に置き換えるメソッドです。
第1引数に置き換えたい文字列を指定し、第2引数に変換後の文字列を指定します。
操作したい文字列は /　で囲みます。

[1] pry(main)> str = "明日は晴れ"
=> "明日は晴れ"
[2] pry(main)> str.sub(/晴れ/,"雨")
=> "明日は雨"

◎matchメソッド
matchメソッドは引数に指定した文字列がメソッドを使用した文字列に含まれているか、否かをcheckするためのメソッドです。
含まれている場合は、指定した文字列がMatchDataというオブジェクトが戻り値で得られます。含まれていない場合は、戻り値としてnilが得られます。

[1] pry(main)> str = "ビジネスの未来"
=> "ビジネスの未来"
[2] pry(main)> str.match(/ビジネス/)
=> #<MatchData "ビジネス">
[3] pry(main)> str.match(/過去/)
=> nil

◎MatchData
マッチした文字列はまず、MacthDataという種類のオブジェクトで返されます。
MatchDataから実際にマッチした文字列などを取り出したい場合は、下記のように最初のデータを取り出すときと同様の形で取り出すことができます。
コード内の変数「md」は「MacthData」を意味します。

[1] pry(main)> str = "ビジネスの未来"
=> "ビジネスの未来"
[2] pry(main)> md = str.match(/ビジネス/)
=> #<MatchData "ビジネス">
[3] pry(main)> md[0]
=> "ビジネス"

◎Rubyプログラムに適用する方法
これらの正規表現や関連するメソッドをプログラムに適用する際は、if文を用います。
パターンにマッチした場合、マッチしたオブジェクトが返されます。マッチしなかった場合はnilが返ってくるため、その性質を使用して、if文で処理を分けます。

str = gets.chomp
if str.match(/hello/)
 puts 'こんにちは'
else
 puts 'あいさつが異なるようです'
end

今回は、subメソッド、matchメソッドの基本的な使い方をまとめてみました。 Part2で、正規表現のさまざまなパターンを使って、応用的な使用方法を紹介していきます。

世界は「関係」でできている: 美しくも過激な量子論

Part 2はこちら

ingkiym926.hatenablog.com

【プログラミング学習】Rubyのライブラリ

■プログラミング学習 ◎ライブラリの種類
Rubyには最初からさまざまな機能が用意されています。
プログラミングを書くことでこの機能を適宜呼び出して使用をしています。
文字列を記述する、数値を計算する、配列で複数の要素を管理するなど、これらはすべでRubyというプログラミング言語に用意された機能です。
このような用意された機能のかたまりを「ライブラリ」と呼びます。
ライブラリには大きく分けて３つの種類があります。

• 標準ライブラリ
• 組み込みライブラリ
• 外部ライブラリ
  
  ◎標準ライブラリ
  インストール不要で、使用する際には明示的に読み込む必要がある
  代表的なものDateクラス
  ◎組み込みライブラリ
  使用する頻度が高いライブラリです。
  文字列のStringクラスや数値のIntegerクラス、配列のArrayクラス、ハッシュのHashクラスなどです。
  使用する際の読み込みは必要ありません。
  ◎外部ライブラリ
  世界中の有志のエンジニアによって提供されるライブラリです。
  Rubyにおける外部ライブラリはgemと呼ばれています。使用するためにはインストールが必要で、かつ読み込みの記述が必要です。
  
  ◎ライブラリの使い方
  標準ライブラリの使い方は、requireを使用します。
  

require "time"
puts Time.now

# ターミナル出力結果
# 2021-11-XX XX:XX:XX 
# PCの現在時刻が表示されます。

1行目でtimeクラスを読み込んで、次の行で、timeクラスに対して使える、nowメソッドを実行しています。

◎gemの使い方
gemの使い方は、下記手順になります。
1. 使いたいgemをインストール
2.インストールしたgemをrequireで読み込む

1.gemをインストール

# ターミナル
$ gem install gemの名前

インストールしたらrequireで読み込んで使用いたします。

require 'gemの名前'

puts gemの使い方に応じて

gemは使い方がそれぞれ異なるため、
その都度調べてインストールから使用をいたします。