2020-01-01から1年間の記事一覧
JavaScript DOM編 vol.4 JavaScript備忘録 Vol.15 目次 input要素の操作 セレクトボックスの操作 今回もJavaScriptの記事になっています。 input要素の操作 ここではinput要素に入力された値をリストに追加していきたいと思います。 index.html <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScri</title></meta></head></html>…
JavaScript DOM編 vol.3 JavaScript備忘録 Vol.14 目次 カスタムデータ属性 要素の追加 要素の複製・挿入 要素の削除 今回もJavaScriptの記事になっています。 カスタムデータ属性 まずは最初の段階のindex.htmlとmain.jsの中身です index.html <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScri</title></meta></head></html>…
JavaScript DOM編 vol.2 JavaScript備忘録 Vol.13 目次 要素の属性を操作 classNameを取得 classList( ) 今回もJavaScriptの記事になっています。 今回もDOMの操作を見ていきます。 要素の属性を操作 まずは最初の段階のindex.htmlとmain.jsの中身です index…
JavaScript DOM編 vol.1 JavaScript備忘録 Vol.12 目次 要素の操作 複数の要素を取得 要素の取得方法 addEventListner( ) 今回もJavaScriptの記事になっています。 まだオブジェクト編は残っていますが、今回はDOMの操作を見ていきます。 要素の操作 まずは…
JavaScript オブジェクト編 vol.8 JavaScript備忘録 Vol.11 目次 ランダムな整数値 日時 alert( )・confirm( ) 今回もJavaScriptの記事になっています。 ランダムな整数値 ここではランダムな整数値の出力してみましょう 前回の記事の Math.random( )を使っ…
JavaScript オブジェクト編 vol.7 JavaScript備忘録 Vol.10 目次 join( ) split( ) Math.floor( ) Math.ceil( ) Math.round( ) toFixed( ) Math.random( ) 今回もJavaScriptの記事になっています。 今回は様々な命令のみの記事になっていますのでサクッとい…
JavaScript オブジェクト編 vol.6 JavaScript備忘録 Vol.9 目次 Object.keys( ) 変数 文字列の操作 今回もJavaScriptの記事になっています。 Object.keys( ) 例えば、オブジェクトのプロパティを全て取り出したいとします。 ですがオブジェクトにはforEach( …
JavaScript オブジェクト編 vol.5 JavaScript備忘録 Vol.8 目次 プロパティの操作 オブジェクトの操作 今回もJavaScriptの記事になっています。 プロパティの操作 ここではオブジェクトのプロパティの操作方法を見ていきます。 const fruit = { name: 'orang…
React 基礎編 React備忘録 目次 ReactDOM.render( ) JSX Component 今回はReact.jsの記事になっています。 Reactの導入についてはいろんなとこで紹介されているので今回は省略させてもらいます。 今回はこんなのを作っていこうと思います。 各色がクリックさ…
JavaScript オブジェクト編 vol.4 JavaScript備忘録 Vol.7 目次 map( ) filter( ) オブジェクトの作成 今回もJavaScriptの記事になっています。 map( ) 例えばこんな配列があって const prices = [100, 200, 300, 400]; この配列のそれぞれの金額を50円ずつ…
JavaScript オブジェクト編 vol.3 JavaScript備忘録 Vol.6 目次 スプレッド構文 分割代入 forEach( ) 今回もJavaScriptの記事になっています。 スプレッド構文 2つの配列があったとします。 const price1 = [500, 600]; const prices = [100, 200, 300, 400]…
JavaScript オブジェクト編 vol.2 JavaScript備忘録 Vol.5 目次 配列の要素変更 今回もJavaScriptの記事になっています。 配列の要素変更 今回は配列の要素を変更する方法を見ていきましょう unshift() push() shift() pop() splice() 全て例文で見ていきま…
JavaScript オブジェクト編 JavaScript備忘録 Vol.4 目次 配列を作る 要素にアクセスする ループ処理との組み合わせ 今回もJavaScriptの記事になっています。 配列を作る 例えば商品の金額を管理したい場合 { const price1 = 120; const price2 = 110; const…
JavaScript基礎編 Vol.3 JavaScript備忘録 Vol.3 目次 アロー関数 スコープ 今回もJavaScriptの記事になっています。 アロー関数 まずは前回の記事でも使用した例文 const sum = function(a, b, c){ return a + b + c; }; const total = sum(1,2,3) + sum(3,…
JavaScript基礎編 Vol.2 JavaScript備忘録 Vol.2 目次 関数 引数 return 関数式 今回もJavaScriptの記事になっています。 関数 関数はJavaScriptの基本的な構成要素のひとつです。 JavaScriptの処理__つまり、タスクや値計算を実行する文の集まりです。 まず…
JavaScript基礎編 JavaScript備忘録 目次 if文 switch文 for文 while文 今回もJavaScriptの記事になっています。 if文 前回の記事にも出てきましたがif文を見ていきます。 そこまで難しくは無いのでサクッと まずは例文 const score = 60; if(score >= 80){ …
宝探しゲーム JavaScript備忘録 目次 HTMLファイルにCSS・JavaScriptを書き込む方法 宝探しゲームの全体のコード 各部解説 今回はJavaScriptの記事になっています。 HTMLファイルにCSS・JavaScriptを書き込む方法 以前２記事に渡ってHTMLについて書きました…
べき乗 Rubyメソッド(備忘録) vol.12 目次 べき乗 今回も備忘録としてRuby関連の記事になっています。 数値をべき乗する 2の４乗を出力する input = 2 result = input**4 puts result # 出力結果 16 2×2×2×2の結果が出力されます。 学習初めて半年経ってから…
文字列に使用する便利なメソッド Rubyメソッド(備忘録) vol.11 目次 .chop! .gsub! 今回も備忘録としてRuby関連の記事になっています。 文字列の最後の１文字を取り除く マウスの「ス」を取り除く str = 'マウス' result = str.chop! puts result # 出力結果…
特定の文字を数える Rubyメソッド(備忘録) vol.10 目次 .count() 今回も備忘録としてRuby関連の記事になっています。 文字列の中に特定の文字がいくつあるのか数える mmmTECHmmmという文字列にmがいくつ入っているのか数える str = 'mmmTECHmmm' result = st…
nまでの和 Rubyメソッド(備忘録) vol.9 目次 nまでの和 今回も備忘録としてRuby関連の記事になっています。 nまでの和 数値nまでの数字を足した合計を出力します。 n = 10 result = n*(n+1)/2 puts result # 出力結果 55 1~10を合計した値が出力されます。 1…
文字列を反対から出力 Rubyメソッド(備忘録) vol.8 目次 .reverse 今回も備忘録としてRuby関連の記事になっています。 reverseメソッド 文字列を逆転させることができます。 input = "abcdef" str = input.reverse puts str # 出力結果 fedcba 逆転された文…
奇数か偶数かを調べる Rubyメソッド(備忘録) vol.7 目次 .even?/.odd? 今回も備忘録としてRuby関連の記事になっています。 evenメソッド 数値が偶数かどうかを調べるメソッドです。 input = 6 result = input.even? puts result # 出力結果 true 偶数の場合…
文字列を切り取り Rubyメソッド(備忘録) vol.6 目次 .slice 今回も備忘録としてRuby関連の記事になっています。 sliceメソッド 文字列から任意の文字を切り取ることができるメソッドです。 いくつかの使い分けができます。 まずは input = "abcdefghijklmnop…
絶対値を取得する Rubyメソッド(備忘録) vol.5 目次 .abs 今回も備忘録としてRuby関連の記事になっています。 absメソッド こちらは単純、数値に使用できるメソッドで絶対値を取得することができます。学生の頃は絶対値とか何に使うん？！って思ってましたけ…
改行を取り除く Rubyメソッド(備忘録) vol.4 目次 .chomp 今回も備忘録としてRuby関連の記事になっています。 chompメソッド 改行を取り除いてくれるメソッドです。 input = gets puts "///#{input}///" として文字列を入力した際、自動で改行が入ってしまい…
数値の桁数を調べる Rubyメソッド(備忘録) vol.3 目次 .lengthメソッド 今回も備忘録としてRuby関連の記事になっています。 lengthメソッド これは配列なんかにも使用できるメソッドですが、今回は文字列です。 例えば数字の桁数を取得したい時 input = 2456…
入力を半角スペースで区切る Rubyメソッド(備忘録) vol.2 目次 split(" ") 今回も備忘録としてRuby関連の記事になっています。 split(" ") splitメソッドは入力を分割できるメソッドです。 例えば入力が input = "マウス キーボード" puts input として間に…
小文字を大文字に Rubyメソッド(備忘録) 目次 upcase/downcaseメソッド かなり間が空いてしまいました。変わらず学習は進めていたのですがアプリ開発にアウトプットするのにいっぱいいっぱいでした。 今回はcssの予定でしたが、備忘録としてRuby関連の記事に…
HTML/CSSについて No.2 HTML/CSSのお話 2回目 目次 head要素 div要素 今回は前回割愛したhead要素について cssを適用させるにあたり、知っておきたいdiv要素についてです。 head要素 まずは、前回のコードがこちら <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>HTML/CSSについて</title> </head> <body> <div> これは一つの塊で</div></body></html>…
