プログラミング学習
JavaScriptをファイルに書く script要素 script要素とは、実行できるコードを埋め込んだり参照するために使用するHTMLです。一般的には、JavaScriptのコードの埋め込みや参照に使用します。 index.html <html> <head> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> <meta charset="UTF-8"> // 省略 をhtmlファイルに記述をします。 JavaSc</meta></link></head></html>…
DOM(Document Object Model) DOMとはHTMLを解析しデータを作成する仕組みです。 HTMLがWebページとして閲覧されるまでの流れ HTMLは階層構造で、DOMによって解析されたHTMLは階層構造のあるデータとなります。これを、DOMツリーやドキュメントツリーと呼びま…
ブラウザで用意されたオブジェクトを学ぶ JavaScriptはブラウザで動くプログラミング言語です。そのためあらかじめブラウザを操作するメソッドをもつオブジェクトが定義されています。 その最上位であるオブジェクトがwindowオブジェクトです。 windowsオブ…
メソッド JavaScrptにおけるメソッドとは、プロパティに紐づけられた処理のことです。 プロパティには「●●をしてほしい」という処理を関数を用いて代入できます。 変数名 = { プロパティが記述されている状態 メソッド名 : function() {...} } 変数humanを定…
プログラミング学習 オブジェクトの値を取得する オブジェクトの値を取得した場合、 オブジェクト名.プロパティ名のように記述することで、オブジェクトのプロパティの値を取得することができます。 let human = {name :`sato`} console.log(human.name) コ…
JavaScriptにおけるオブジェクトの概念 - JavaScriptにおけるオブジェクトは、データや処理といった情報を一つにまとめた集合体です。 データとは、「キー」と「バリュー」のセットを指します。 処理に関しては、別の記事で解説いたします。 プロパティ プロ…
プログラミング学習 JavaScriptにおけるセミコロン JavaScriptにおいて、変数定義などの最後にはセミコロンを以下のように付与します。 文章の終わりを示すためです。 const name = "太郎" ; const age = 27; const introduction = `私の名前は${name}、${ag…
名前の無い関数 ◎無名関数 関数式で記述されている function(){} が無名関数と呼ばれる部分になります。 無名関数は、関数名なしで関数を定義でき、より簡潔なコードが記述できるメリットがあります。 // 関数宣言 function hello(){ console.log('こんにち…
JavaScriptの様々な関数定義 関数宣言 関数のときに紹介した定義する方法です。 ingkiym926.hatenablog.com function 関数名( 引数 ) { // 関数内の処理 } こちらの関数宣言はRubyと共通部分も多かったと思います。 JavaScriptでは関数の定義のために、別の…
プログラミング学習 ◎戻り値 - Rubyではメソッドにおける最後の戻り値が、戻り値として処理されました。 def calc(num1,num2) num1 * num2 end num1 = 5 num2 = 6 puts calc (num1,num2) # 戻り値は30が表示 一方JavaScriptでは、関数の戻り値をreturnを用い…
◎JavaScriptの関数 JavaScriptの関数とは、Rubyでいうところのメソッドのことを 関数と呼びます。Rubyでメソッドを定義する際はdef メソッド名 ~ endと記述をしていました。 JavaScriptでは、function 関数名( ) { 処理 }と記述することで関数を定義します。…
■プログラミング学習 ◎forEach関数 forEach関数とは、配列に格納されている要素の１つひとつに対して 繰り返し処理を行う場合に用いられる関数です。 配列.forEach( function(value){ // 処理の記述 }) 上記のように、forEach関数の引数に、関数(function)を…
■プログラミング学習 ◎条件分岐 JavaScriptで条件分岐をする際には、Ruby同様if文を使います。 if (条件式1){ // 条件式1がtrueのときの処理 } else if (条件式2) { // 条件式1がfalseで条件式2がtrueのときの処理 } else { // 条件式1も条件式2もfalseのと…
■プログラミング学習 ◎文字列の中に変数を含める方法 前回の内容で、変数の定義、「let」「const」「var」についてまとめました。次は変数に値を定義する際に、文字列の中に変数を含める方法になります。1.+ を用いてそれぞれの値を連結させる 2.テンプレー…
■プログラミング学習 ◎デベロッパーツールJavaScriptはデベロッパーツールを使うことで、コードを実行→結果表示の確認ができます。デベロッパーツールはブラウザ開発者ツール、検証ツールなどとも呼ばれており、ブラウザに付属して使うことができます。下記…
■プログラミング学習 ◎JavaScript JavaScriptとは、プログラミング言語の一つです。主にクライアントサイドにおいて、力を発揮する言語で、「ブラウザ上のアプリケーションの使いやすさ」や「リクエストの送り方の工夫」をJavaScriptは担っています。JavaScr…
■プログラミング学習 ◎passwordの英数字混合の判断 英数字混合チェックになります。 英数字が混合したパスワードであるか確認をする際には、 英字もしくは数字が少なくとも０回以上続き、 末尾までそれが続くことが前提条件となります。 /\A(?=.?[a-z])(?=.?…
■プログラミング学習 ◎正規表現のWebアプリケーションの利用 Webアプリケーションのバリデーションにおういて、正規表現は非常に有用なものです。 正規表現を用いることで、より細かいバリデーションの設定ができるからです。 よく利用するものとしては、以…
■プログラミング学習 ◎応用的な使用方法のパターン 電話番号のハイフンを取り除く パスワードに英数字8文字以上という制約を設定する メールアドレスからドメイン部分のみを抽出する ◎電話番号のハイフンを取り除く 特定の文字を取り除く場合は、「特定の文…
■プログラミング学習 ◎正規表現とは 正規表現とは、文字列の一部分を抽出・置換したり、 文字列が制約を満たしているかを調べるための表現方法です。 例：パスワードが6文字未満、メールアドレスに＠がないとエラー ◎使うシーン 例えば、電話番号の入力など…
■プログラミング学習 ◎ライブラリの種類 Rubyには最初からさまざまな機能が用意されています。 プログラミングを書くことでこの機能を適宜呼び出して使用をしています。 文字列を記述する、数値を計算する、配列で複数の要素を管理するなど、これらはすべでR…
■プログラミング学習 ◎クラスの継承 Rubyでは、データの元になる設計図（クラス）を作り、その設計図を元に実態となるデータ（インスタンス）を作るというのが手順になります。 このクラスに親子関係を作ることをクラスの継承と呼びます 親子関係とは、既存…
■プログラミング学習 ◎ブロックとは do~ endまでをRubyではブロックと呼びます。また｜｜の部分で囲んだ部分をブロック変数と言います。 fruits = ["apple","orange","strawberry"] fruits.each do |fruit| puts fruit end Rubyに標準で組み込まれているeach…
■プログラミング学習 ◎while文 Rubyの繰り返し処理としては、eachの他にもwhile(ワイル)文という構文があります。 while文は、指定した条件が真である間、処理を繰り返します。 while 条件式 do #条件が真であるときに繰り返す処理 end ※条件式のあとのdoは…
■プログラミング学習 ■プログラミング学習 ◎Rubyの条件分岐の表現方法「case文」 case文とは、条件分岐を表現するための文法です。 if文のelsifを重ねるよりもシンプルにコードを書くことができます。 並列する条件が多数ある場合は、if~elsif~elsif~・・els…
■プログラミング学習 ■読書 リフレクション（REFLECTION） 自分とチームの成長を加速させる内省の技術 ■プログラミング学習 ◎レスポンシブ対応方法 WEBサイトをレスポンシブ化するためには、下記３つの工程が必要 1. 表示領域の設定をする 2.画面サイズによ…
■プログラミング学習 ■読書 世界のビジネスエリートが知っている 教養としての茶道 ■プログラミング学習 ◎Faker FactoryBotで設定した値は、固有のものになるため、複数のテストを行う際に、「すでに重複したインスタンスが存在する」といった、意図しない形…
■プログラミング学習 ◎FactoryBot テストコードの記述では、ユーザーを生成する記述を下記のように都度記述をしました。 user = User.new(nickname:' ',email:'test@mail',password:'00',password_confirmation'00') これらの同じような記述はまとめてしまっ…
■プログラミング学習 ■読書 日本の美意識で世界初に挑む 細尾 真孝 (著) ■プログラミング学習 ◎valid? valid?はバリデーションを実行させて、エラーがあるかどうかを判断するメソッドです。 エラーが無い場合は、trueを、ある場合はfalseを返します。 また、…
■プログラミング学習 ■読書 アメリカの高校生が学んでいるお金の教科書 ■プログラミング学習 ◎describeメソッド describeとは、テストコードのグループ分けを行うメソッドです。 「どの機能に対してのテストを行うか」をdescribeでグループ分けし、その中に…
