【令和2年10月8日】 〜テックキャンプ4日目〜
〜文字列と数値を使おう〜
◯irbコマンド
ターミナルから直接Rubyのプログラムを動かすことができる機能を起動するためのコマンド。終了する際はexitと書くことで実行できる。
◯文字列
プログラミングの中で文字を扱うための値。生成するには、文字をダブルクォーテーションまたはシングルクォーテーションで囲む。また、文字列同士を＋（プラス）でつなぐことで、連結することができる。
◯メソッド
プログラミングにおける何らかの処理をまとめたもの。
❶ lengthメソッド（レングス）
文字列の文字数を教えてくれる。使用方法としては、『文字列.length』と実行することで、指定した文字列の文字数が表示される。
◯数値
数を表現する値。※クォーテーションを付けないこと。
◯演算子
プログラミングにおける値の計算や比較などに使用する記号のこと。（＋ー＜＞など）
⑴代数演算子（+-:/%）
演算子の中でも計算を行うもの。※％に関しては、剰余と行って余りの数を求めることができる。
❷ to_sメソッド
演算子によって計算・比較された数値を文字列に変換してくれる。使う理由として、文字列と数値の連結はできないので、数値を文字列に変換することで連結することができる。
❸ to_iメソッド
文字列を数値に変換してくれるメソッド。
◯式
文字列や数値の他に、メソッドの呼び出し、変数、演算子式などを含む総称。
⑴ 式展開
文字列の中に式を入れることができる機能。書き方は文字列中で『#{式}』とすることで使える。※文字列がシングルクォーテーションだと式展開されない。
〜値に名前をつけて使おう〜
◯変数
値を入れる箱のようなもの。この箱には名前をつけることができ、どんな値が入っているのかを簡単に識別できるようになります。この名前を変数名と言う。
メリット ・値の意味がわかりやすい。
・値を再利用しやすい。
⑴変数の宣言
変数を作ること。
⑵変数の定義
宣言した変数にどのような値を入れるのか記述すること。
⑶代入
右側の値を左の変数に代入すると言う意味を持つ。
⑷再代入
一度代入した変数に、別の値を再び代入することができる。
⑸自己代入演算子
自分自身に代入すること。
例）number = number + 1 → number += 1
⑹変数の命令規則
1 変数の中身が何かわかる
2 小文字で始める
3 ＿（アンダーバー）で始めない
4 数字で始めない（エラー）
5 日本語を使わない
6 スペースを含めない（エラー）
7 予約語を使用しない（エラー）
〜ターミナル〜
◯putsメソッド
ターミナルに値を出力するメソッド。
◯petsメソッド
ターミナルに値の入力機能を起動するメソッド。※勝手に改行される。
◯chompメソッド
文字列の末尾に存在する改行を取り除いた文字列を返してくれる。
◯バックスラッシュ記法
＼（バックスラッシュ）から始まる文字の記法のこと（option + ¥）※適用されるのは文字を”で囲んだ時のみ。
記法 ⑴ ＼n 改行
⑵ ＼t タブ
⑶ ＼b バックスペース
⑷ ＼＼ バックスラッシュ
〜情報を順番で管理して1つにまとめよう〜
◯配列
1つの変数で複数の値を持つことのできる値。生成方法は、『変数 = []』となります。
◯要素
配列の中のデータ。要素は順番を持っていて、配列へ入れた順に自動的に順番が割り振られます。
◯配列演算子（＜＜）
配列に対してさまざまな処理を行う演算子。追加方法は、配列に続いて＜＜を書くことで、追加したい要素を後ろに書くことができる。
◯添字
配列の各要素に割り振られた番号のこと。一番左の要素からから始まり『0』からのスタートとなる。
◯配列の変更方法
『配列[添字] = 値』となる。
◯lengthメソッド
配列の要素数を知ることができる。
〜複数の値に名前をつけて1つにまとめよう〜
◯ハッシュ
『データ（”バリュー”と呼ぶ）』とそれに対応する『名前（”キー”と呼ぶ）』のセットを要素として持つ値です。
→複数のデータを持つことのできる値という点では、配列と同じだがハッシュは順番ではなく、キーで管理する。このようなキーとバリューで管理する方法を『キーバリューストア』と呼ぶ。キーには、文字列・数値共に使用できるが、多くの場合は、『シンボル』という値を使う。
生成方法 ハッシュの宣言
『 変数 ＝ {キー1 ＝＞ バリュー1, キー2 ＝＞ バリュー2} 』
◯シンボル
見た目は文字列のようだが、実際の中身は数値になっている値。宣言方法は文字列の先頭に『コロン：』をつける。
メリット ⑴処理速度を早くすることができる。
⑵文字列としての役割も果たせる。
2種類のシンボルの使用方法
⑴ hash = { :name => "Taro"}
⑵ hash = { name: "Taro"} ← よく使用される。
◯ハッシュの値の追加方法
『 ハッシュ[追加するキー] = 値 』
◯ハッシュの値の取得方法
『 ハッシュ[取得したいキー] 』
◯ハッシュの値の変更方法
『 ハッシュ[変更したいキー] = 値 』
〜条件分岐処理をしよう〜
◯比較演算子
値同士を比較したい時に使用します。
◯true,false
式が真（true）か偽（false）かを扱う真偽値。
◯論理演算子（！）
式の真偽の確認や、真偽値に対しての演算を行うことができる演算子
irb(main):001:0> 2 * 3 != 6 => false # 2 × 3 は10ではないか？ irb(main):002:0> 2 * 3 != 10 => true
◯条件分岐処理
条件を満たしているかどうかで実行内容を分岐する処理。
◯If文
Rubyの条件分岐で使う文法。
if 条件式 処理 end
◯else
条件式が偽のときに処理を行う時に使う。
if 条件式 # 条件式が真(true)のときに実行する処理 else # 条件式が偽(false)のときに実行する処理 end
◯elseif
elseのように条件式がfalseだったときの処理を記述するものですが、条件を満たさなかった場合に対して、ifのように条件式を追加できます。
if 条件式1 # 条件式1が真(true)のときに実行する処理 elsif 条件式2 # 条件式1が偽(false)のとき、かつ # 条件式2が真(true)のときに実行する処理 else # 条件式1と条件式2がどちらとも偽(false)のときに実行する処理 end
〜繰り返し処理をしよう〜
◯繰り返し処理
同じ内容を繰り返し処理のこと。ループ処理とも呼ばれる。
◯timesメソッド
数値の値によって、その値の回数分だけ処理を繰り返す。
数値.times do # 繰り返す処理 end
また、timesメソッドは以下のように、メソッド野中だけで使用できる変数を｜｜で囲むブロックを使うことができる。
◯eachメソッド
要素ひとつひとつに対して、繰り返し処理ができる。
配列.each do |item| # 処理 end
〜処理に名前をつけて使おう〜
◯メソッドの定義
元々あるメソッドだけでなく、自分で定義することもできる。
def メソッド名 # 実行する処理 end
◯メソッドの実行
# メソッドの定義 def say_hello puts "Hello World" end # メソッドの実行 say_hello
◯戻り値
メソッドから呼び出した場所に渡される値のこと。メソッドが処理されたあとの最終的な値のこと。
def sample "1" "2" "3" # 最後の行が戻り値になる end puts sample # => 3
◯return文
メソッド内にreturn 〇〇と記述することで、〇〇の部分が戻り値になる。
def sample "1" "2" "3" return "4" # ここで処理は終わり "5" # 呼ばれない "6" # 呼ばれない end puts sample # => 4
◯スコープ
定義した変数が使える範囲のこと。
メソッド内で定義した変数はメソッド外で使えない。またメソッド外で定義した変数はメソッド内で使えない。
◯引数
メソッドなどに渡すことのできる値。外にある変数の値をメソッドの中で扱うことができる。
メソッド定義時に仮引数と、メソッドを呼ぶ際に実引数を記載することで使用できる。
def sample(number) # ②仮引数numberで、実引数「3」の値を受け取る puts number * number # ③「3」が代入されたnumberを使って「3 * 3」を行い出力する end sample(3) # ①数値「3」を実引数にしてメソッドを呼び出し
〜データの元となる設計図を作ろう〜
◯クラス
値の元となるもの。値の共通のルールを定義する。ここで決めるルールは、共通の属性と処理（メソッド）である。クラス名は必ず大文字から始める。
class クラス名 # 変数やメソッドの定義 end
クラスを元にして作られるデータのこと。
◯インスタンスの生成方法
クラスは、定義したくてもnewという特別なメソッドをはじめから持っている。newメソッドを使用してインスタンスを生成する。
# インスタンスを生成し変数で扱う 変数名 = クラス名.new
【令和2年10月7日】 〜テックキャンプ3日目〜
HTMLとCSS
〜基本のWebページを作ろう1〜
◯リセットCSS
各ブラウザにデフォルトで設定されているCSSを打ち消す役割を持ったCSS
◯viewport（ビューポート）
ブラウザで表示されている領域を表す。
◯vh（viewport height）
viewportの高さ（height）に対する割合のこと（1vh → 1％）
◯vw（viewport width）
viewportの横幅（width）に対する割合のこと（1vw → 1％）
◯calc()（カルク）
ブロック要素の横幅を決めるwidthプロパティに対して使用するプロパティ。（）の中の計算結果が値となる。異なる単位同士（％、vw、pxなど）で計算することもできる。
〜Webページを作ろう〜
◯font-weightプロパティ
文字の太さを指定するプロパティ
値 ⑴normal（初期値）
⑵bold
→ 文字を太くする。
◯text-decoration（デコレーション）プロパティ
テキストの装飾を指定するプロパティ。下線や上線などを表示あるいは非表示にすることができる。
値 ⑴none
→ 線を非表示にする。
〜ターミナルにCLI操作を学ぼう〜
◯ターミナル
PCに命令をすることができるツール。環境構築を実行するのに、コマンドラインが必要になる。
コンピュータに対してキーボードからコマンドという文字を打ち込んで操作を行うルール
◯GUI（グラフィカルユーザインターフェース）
グラフィックを用いて操作を行う仕組み。
↓
操作の数の違いからプログラミングではターミナルの操作が必須のなる。
ターミナルを操作する際に出てくる用語ということで、ディレクトリがある。
◯ディレクトリ
コンピュータ上で複数のファイルを整理するためのファイルの入れ物。簡単に言えば、フォルダのことを指す。
⑴ルートディレクトリ
ディレクトリは階層構造になっている。その階層構造の一番上にあるディレクトリ
⑵カレントディレクトリ
現在作業中となるディレクトリのこと
⑶ホームディレクトリ
ターミナルを立ち上げた場合に作業中となるディレクトリ。
→新規でターミナルを立ち上げた場合は、現在のカレントディレクトリはホームディレクトリを示している。
◯パス
ディレクトリやファイルの所在を示す文字列。ディレクトリは階層ごとに/（スラッシュ）で区切る。
⑴絶対パス
ルートディレクトリから指定するパス。Macの全ディレクトリにおけるルートディレクトリは/である。絶対パスを指定する時は、一番最初を/を指定する。その後に、Users/ユーザー名と指定されるが、これはホームディレクトリであり、〜を省略することができる。
⑵相対パス
カレントディレクトリから指定するパス。※ルートディレクトリから指定しないため、パスのはじめに／をつけない。
◯Linuxコマンド
PCへ操作を命令するためのコマンド。ターミナルでLinuxコマンドの入力をすることでPCに様々な命令を与えることができる。
◯pwdコマンド
カレントディレクトのパスを表示するコマンド。
◯lsコマンド（エルエス）
ディレクトリやファイルの一覧を表示するコマンド。このコマンドを実行することで、ディレクトリの中身を確認することができる。
◯cdコマンド
カレントディレクトリを移動する時に実行するコマンド。使い方は、『cd 移動したいディレクトリのパス』をターミナルで実行することで、指定したディレクトリに移動できる。また『cd』だけで実行した場合は、ホームディレクトリに移動する。
Ruby（基礎文法）
〜プログラミング言語に触れてみよう〜
プログラミング言語で書かれたテキストやファイルのこと。
⑴Webアプリケーションの開発に特化している。
⑵データベースとの連携が用意。
⑶世界で幅広く使われている。
⑷文法が覚えやすい。
◯rubyコマンド
Rubyに関する様々な操作が実行できるコマンド。実行方法としては、ターミナルに『Ruby [実行したいRubyファイルのパス]』と打ち込むことで、実行できる。
◯コメント方法
先頭に＃をつけることでコメント扱いになる。
【令和2年10月6日】 〜テックキャンプ2日目〜
◯HTMLのレイアウト構造
①左上の基準に情報が記載される（左上に重力のある積木）
②入れ子構造になっている。
③HTMLの要素は中身に応じて高さが変動する
例 2行のP要素 → 2行分の高さのp要素
◯ブロックレベル要素（積木要素 ※縦並びだから） H1 p div
中身に関係なく横幅いっぱいになる
高さは中身によって変わる
◯インライン要素（積木要素にならない ※横並びだから） b a
テキスト分だけの横幅になる
ブロック要素と同じ
◯親要素
ある要素の1つの上位の階層にある要素
◯子要素
親要素から見てその下位階層にある要素
◯header要素
ヘッダー専用のブロックレベル要素
◯div要素
特定の意味がない要素 classをつけることで意味を持つようになる。
◯footer要素
フッター専用のブロックレベル要素
サイズ調整と背景色のプロパティ
◯heightプロパティ
要素の高さを指定できるプロパティ 値はpxと％となる
◯widthプロパティ （ウィッズ。ウィス）
幅を指定できるプロパティ 値はpxと％となる
◯％
子要素のサイズを親要素に対して何％で設定するか
◯background-colorプロパティ
背景色を指定できるプロパティ
箇条書きリストの作成
◯ul要素（親要素）
順序のないリストを示すブロックレベル要素
◯li要素 （子要素）
リストの項目を示す要素
◯list-styleプロパティ
リストのスタイルを変更できるプロパティ
◯練習問題の間違えた場所
問題2の.contentsセレクタの部分で高さを指定したが、3つの子要素で指定しているから必要ない。
FlexBoxの使い方を学ぼう
ブロックレベル要素の横並び
◯displayプロパティ
値 ⑴block
→ブロックレベル要素になる
⑵inline
→インライン要素になる
⑶inline-block
→並びはインライン要素、中身はブロックレベル要素になる
⑷flex（フレックス）
→指定された要素の子要素が横並びになる。そして、子要素の並び順や幅を、
詳細に決めることができる（Flexbox）※必ずflexsboxを適用させたい親要素
にプロパティを指定する。
⑸none
→非表示になる
◯主軸方向と交差軸方向
主軸方向 横並びにした要素が並ぶ方法
交差軸方向 主軸に直角に交わる方向
◯Flexbox
⑴justify-contentプロパティ（ジャステファイ・コンテント）
display:flex;と併用して使用することで、主軸方向の配置の詳細を決めることができる。
値 ⑴flex-start
→左寄せ
⑵flex-end
→右寄せ
⑶center
→中央寄せ
⑷space-between
→両端が左右に寄り、等間隔
⑸space-around
→両端が左右に寄り、等間隔。両端の余白と要素間の余白が1：2
⑵align-itemsプロパティ
display:flex;と併用して使用することで、交差軸方向の配置の詳細を決めることができる。
値 ⑴flex-start
→上揃え
⑵flex-end
→下揃え
⑶center
→中央揃え
⑶flex-directionプロパティ
要素の主軸方向や並び順を変更できる。
値 ⑴row
→左寄せ
⑵row-reverse
→右寄せ
⑶column
→中央寄せ
⑷column-reverse
→両端が左右に寄り、等間隔
◯ボックスモデル
枠をつける『border』と内側の余白『padding』と外側の余白『margin』から成り立っている。
◯borderプロパティ
border: 太さ スタイル 色;とすることで、太さ・スタイル・色をまとめて指定できる。
◯paddingプロパティ
指定方法 ⑴padding: 1px;
→『上下左右』に設定できる
⑵padding: 1px 1px;
→『上下』『左右』に設定できる
⑶padding: 1px 1px 1px;
→『上』『左右』『下』
⑷padding: 1px 1px 1px 1px;
→両端が左右に寄り、等間隔
◯marginプロパティ
指定方法 ⑴margin: 1px;
→『上下左右』に設定できる
⑵margin: 1px 1px;
→『上下』『左右』に設定できる
⑶margin: 1px 1px 1px;
→『上』『左右』『下』
⑷margin: 1px 1px 1px 1px;
→両端が左右に寄り、等間隔
要素の位置を指定する方法を学ぶ
◯positionプロパティ
指定した要素の配置方法を決めることができる。また、top/right/bottom/leftプロパティとセットで使うことが多い。セットで使うことで、基準の距離を指定することができる。
値 relative
現在の位置を基準に相対的な位置を決める。absoluteを指定した要素の基準がブラウザ左上からrelativeプロパティを指定した親要素に変わる。
absolute
特定の地点を基準に絶対的な位置を決める。親要素ではなくブラウザに基準が変わる。また、top/right/bottom/leftプロパティとセットで使うことが多い。セットで使うことで、基準の距離を指定することができる。
fixed
要素を指定して位置に固定する
画像の表示について学ぶ
◯img要素
Wwbサイト上に画像を表示することができる。また、画像の場所を指定するsrc属性、画像が表示されなかった場合に代用テキストなどを表示するためのait属性も併用する。画像の大きさを変更するとき、widthプロパティ、heightプロパティを指定して変更する。
フォームの実装について学ぼう
◯form要素
フォーム関連要素の集まりを表す要素
◯input要素
フォームの入力欄や実行ボタンなどを作成することができるインライン要素。また、type属性という設定があり、それを指定することで様々な種類のフォーム部品を作り出すことができる。
属性 ⑴text
→1行のテキスト入力欄を作成できる。
⑵checkbox
→チェックボックスを複数作成できる。
⑶radio
→複数の中から1つしか選択できない、ラジオボタンを作る。
⑷submit
→送信ボタンを作成できる。
◯placeholder属性（プレースホルダー）
入力フォームに仮の文字列をいれることができる。
◯textarea要素
複数行のテキスト入力欄を作成するインライン要素。
◯value属性
指定した文字が、送信ボタンに表示させる。
【令和2年10月4日】 〜日商簿記2級 固定資産〜
◯固定資産を除却した時の仕訳
固定資産を除却した際は、固定資産の取得価格を固定資産勘定科目で貸方勘定に、償却額を『固定資産累計額』で借方勘定に、除却価格を『貯蔵品』で借方勘定に、貸借差額を『固定資産除却損』で借方勘定に、計上する。
◯固定資産を廃棄した時の仕訳
廃棄した際は、固定資産の取得価格を固定資産勘定科目で貸方勘定に、償却額を『固定資産累計額』で借方勘定に、廃棄額と廃棄費用は合わせて、『固定資産廃棄損』で、借方勘定で、計上する。
◯建設中の固定資産について代金を支払った時の仕訳
◯固定資産が完成し、引き続きを受けた時の仕訳（建設仮勘定あり）
◯固定資産を改良、修繕した時の仕訳
◯固定資産が火災で滅失した時の仕訳
◯保険金額が確定したときの仕訳
◯国庫補助金を受け取った時の仕訳
◯固定資産を取得した時の仕訳（国庫補助金あり）
【令和2年10月5日】 〜テックキャンプ1日目〜
◯HTML
ウェブサイトに表示される情報を記載する言語。
◯CSS
HTMLに装飾を加えるための言語。
◯拡張子
ファイルに書かれる言語の種類を識別するためにファイル端末につける文字列
◯要素
HTMLにおける要素は、HTMLを構成するために必要な成分。そして要素は、タグとういうものに囲まれて表現される
◯タグ
HTMLにおける要素のかたまりを示す記述。要素の始まりを示す開始タグと、終わりを示す終了タグがある。
◯head要素とbody要素
head要素・・・ウェブサイトの基本情報などを記載する。ブラウザ上には表示されない。
body要素・・・ブラウザ上に表示する情報を記載する。
◯DOCTYPE HTML
HTML文章であることを宣言する要素
◯meta要素
HTML文章に関する情報を指定するときに使用する。
◯属性
要素に情報を付け加える役割をもつ。
◯属性値
どのような属性なのかを示す値。
◯charset属性
メタ要素似て、どのようなコードを用いるか示すことができる属性
◯title要素
ウェブサイトのタイトルを指定する要素
◯h1〜h6要素（見出し要素）
文章も見出しを作るための要素
◯p要素
文章の段落を表すもの
◯br要素
テキストを改行するための要素
◯b要素
文字を太くする要素
◯a要素
テキストをリンクにすることができる。
◯href属性
リンクの移動さきを指定する。
ブログラムの中のコードを、無いものとして扱うことができる。（⌘＋/）
◯セレクタ
CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述
◯プロパティ
セレクタで指定したHTMLの「何を変えるのか」を選択するための記述
◯値
プロパティで設定する内容を決めるための記述。プロパティと値の間はコロン（：）で区切り、値の後にはセミコロン（；）を入力する。
◯colorプロパティ
値によって自由に文字の色を指定することができる。
◯font−sizeプロパティ
文字の大きさを指定するプロパティ
◯px
デジタル画面の最小の単位のこと
◯class属性
HTML要素に対して個別に名前を指定することができる属性。class属性の属性値をclass名という。
◯classセレクタ
HTMLで指定したclass名をCSSのセレクタとして使用することができる。
◯span要素
テキストの一部だけを装飾するために使用される要素。
【令和2年10月4日】 〜Ruby on Rails5 2〜
こんばんは、わいにぃです。
今日勉強した内容を記載していこうと思います。
◯Progate
〜Ruby on Rails5 2〜
データベースについて
データを保存しておく場所のこと。
変数の定義と表示
index.html.erbのようなerbという形式のファイルでは、<% %>で囲むことで、HTMLファイルの中にRubyのコードを記述することができる。
また、埋め込むRubyコードをブラウザに表示したい場合は、<% %>ではなく、<%= %>
posts/index.heml.erb
<% post1 = "今日からProgateでRuils"%>
<%=post1%>
出力結果
今日からprogateでRuby
そして、ビューで使う変数はコントロールのアクション内で定義するようにする。通常、アクションで定義した変数はビューで使用することはできないが、変数を『＠』から始めることで、ビューでも使用することができる。
posts_controller.rb
def index
@posts = [
"今日からprogateでRuils"
”投稿一覧ページ作成中！”
]
end
posts/index.heml.erb
<% =@post1[0] %>
出力結果
今日からprogateでRuby
【令和2年10月3日】 〜Ruby on Rails5 １〜
こんばんは、わいにぃです。
さっそくですが、今日勉強した内容を記載していこうと思います。
◯Progate
〜Ruby on Rails5 1〜
Railsアプリケーションの準備について
ターミナルに『rails new アプリケーション名』というコマンドを実行することで、入力したアプリケーション名と同名のファイルが作成され、その中に開発に必要なフォルダやファイルが用意される。
サーバーの立ち上げについて
ターミナルに『rails server』というコマンドを実行することでできる。
トップページの自動生成について
ターミナルにreils generate controller home topというコマンドを実行することで、新しいWebページが自動で作られ、localhosut:3000/home/topというURLにアクセスできるようになる。
ページを表示させるのに必要なファイルについて
⑴ ビュー（view）
app/views/home/top.html.erbに定義されており、編集をすることで、表示する内容を変更することができる。
⑵ コントロール（controller）
app/controllers/home.controller.rbに定義されており、メソッド（アクション）を追加することで、ブラウザに返すビューをviewsフォルダの中から見つけ出す役割を担ってくれる。
⑶ ルーティング（routing）
ブラウザとコントロールをつなぐ役割を担っており、送信されたURLに対してどのコントローラのどのアクションで処理するかを決める対照表のこと。
config/routes.rbに定義されている。
ベージの追加について
トップページを作成して際は、ターミナルにreils generate controller home topというコマンドを実行することで作成されたが、ページを追加するには、ビュー（view）・コントロール（controller）・ルーティング（routing）をそれぞれ追加することで作成できる。
CSSファイルの場所
app/assets/stylesheetsに定義されている。
画像の保存場所
画像は、publicフォルダに配置しておくと、<img src="/画像名">や<background-image: url（"/画像名"）>のように、画像名を指定するだけで、画像を表示することができる。
リンクについて
リンクを作成するためには、<a>タグでテキストを囲み、href=""にURLを指定することで作成できるが、hrefの中身をルーティングのURL部分と同じにすることで、簡単にリンク先を指定することができる。
