2019/11/27

今日の日報

学んだこと  

git入門

https://dotinstall.com/lessons/basic_git 

#05 gitのログを見てみよう

わかったこと

  • git log で出てくる英数字の羅列はcommitにつくユニークのID
  • Authorは、commitした人
  • Dateは、commitした日時
  • 最後の行は自分がつけたメッセージが表示される
  • git log --oneline とオプションを入力するとIDの一部とメッセージだけが表示される（ざっと履歴を見たい時は便利！）
  • git log -p と入力すると変更された場所を具体的にみれる
  • null＝なにもない

  • f:id:kmimre:20191128012145p:plain

    git log -p ででてくる
  • git log --stat でどのファイルが何箇所変わったかが見える（たくさんのファイルを扱っている時に便利！）

わからなくて調べたこと

  • コマンドの-と--は違うのか？

    ◎やったこと
    -で済むものを--で入力してみたらエラーになったので、違うみたい

    ◎調べたこと・参考にしたサイト

    qiita.com

    ja.wikipedia.org

    eng-entrance.com

    - そもそもコマンドの後につく「-」「--」は引数（オプション）という
    - UNIXスタイルとGNUスタイルというのがある
    - UNIXスタイル（UNIX＝色々なOSの土台になったOS）
    　　・ハイフン１つ(-)ではじまる
    　　・オプションは英数字１文字の省略形
    　　・全てのオプションは省略できる
    - GNUスタイル（GNU＝UNIXと互換性のあるシステムソフトウェア）
    　　・ハイフン２つではじまる
    　　・オプションの省略形は不可
    - スタイルの違いで「-」の数自体に意味はなさそう（本当か？）

  • コマンドを誤った時「error」「fatal」と違う表示だったのだけど違いがあるのか（致命的な…と言われて焦った）

    ◎調べたこと・参考にしたサイト

    w.atwiki.jp

    - レベルの違いだった
    - ERRORはアプリケーションの稼働が継続できるが、FATALエラーはアプリケーションの稼働が継続できないといった分類がされることがある
    - 「error」「fatal」以外にもある

  • そもそもLinuxってなんだ

    ◎思ってたこと
    OS？Mac、Windowsと同列？

    ◎調べたこと・参考にしたサイト

    eng-entrance.com

    www.sejuku.net

    - OSで合ってた。Mac、Windowsと同列だった
    - OS＝コンピューターのすべてのハードウェアを管理しているソフトウェア
    - リーナス・トーバルズ氏によって開発された
    - Linuxは、主にサーバー用として使うOS
    - Unixを参考にして作られている
    - 黒い画面

本日の感想

  • ハイフンの調べ、甘そうなので明日もうちょっと調べてみよう
  • 調べるたびに知らない単語がでてくる
  • 黒い画面の文字が羅列されているのがもとで、それがいろいろ進化してこうやってビジュアル的にみれて、カーソルとかで操作できるようになったということなのか（な？）

2019/11/25

今日の日報

学んだこと  

git入門

https://dotinstall.com/lessons/basic_git 

#04 初めてのコミットをしてみよう

わかったこと

  • pwd は現在の作業ディレクトリが表示するコマンド
  • cd は現在の作業ディレクトを移動するコマンド（cd 移動したい場所/）
  • git init はリポジトリを新規作成するコマンド
  • cat index.html と入力すると「index.html」ファイルの中身が見れる
  • git add index.html でステージング環境にアップできる
  • git commit でリポジトリにアップできる（エディタが経ち上がるので、変更箇所・内容などを記載して閉じる）
  • git log で変更履歴が見れる

わからなくて調べたこと

  • git init の前にディレクトリの指定は必須なのか

    ◎調べたこと・参考にしたサイト

    www.sejuku.net

    - 現在のディレクトリまたは指定したディレクトリに「.git」というリポジトリを構成するディレクトリが作成
    - 指定しなければ現在のディレクトリに作成されるので必須ではなかった

  • vim index.html でエディタが立ち上がったけどどういうことなのか（vimが別途立ち上がったわけじゃなくて、iTermだった画面がvimになったので）

    ◎考えたこと
    - iTermからvimを使う（起動）することができるということなのか

    ◎調べたこと・参考にしたサイト

    original-game.com

    - vim index.html と入力するとVimが起動され、「index.html」ファイルが作られる

  • vimからiTermに戻る方法がわからない

    ◎考えたこと
    - 最後の行に :wq とコマンドを入力している様子だが、最後の行にいけない
    - 文字入力できるところにコマンドを入力してもただのテキストになってしまう
    - 逆に普通のテキストが入力できないこともあるから、テキストモードとコマンドモードみたいなのがありそう（にしてもどうやって切り替えるのかわからない）

    ◎調べたこと・参考にしたサイト

    qiita.com

    www.sejuku.net

    - vimには通常時コマンドモードと入力時のインサートモードがある
    -  コマンドモード＝文字の編集や加筆を行う
    - インサートモード＝移動や編集コマンドを実行する
    - 起動時はコマンドモード
    - escキーで切り替えができる（i はコマンドモードからインサートモードへ）
    - :wq で「保存して閉じる」というコマンド

本日の感想

  • 動画では初歩的なコマンドやVimの機能についての説明がなく、かなり手探りに調べながら進めて時間がかかってしまった

2019/11/24

今日の日報

インストールしたもの 

  • Git

git-scm.com

学んだこと  

git入門

https://dotinstall.com/lessons/basic_git 

#02 バージョン管理の流れを理解しよう

わかったこと

  • gitにおけるバージョン管理の流れ
    　①ファイルを作ったり修正したりする
    　　↓
    　②ある程度のまとまりになる
    　　↓
    　③履歴データベースに保存する
  • gitでは３つの状態を用意している
    　- 作業エリア
    　- ステージングエリア（インデックス）
    　- リポジトリ
  • 「作業ディレクトリ」で①を行う
  • 「ステージングエリア（インデックス）」に②（作業経過）を保存できる
  • 「リポジトリ」に③で行う
  • リポジトリにはローカルリポジトリとリモートリポジトリがある
  • ローカルリポジトリ＝データベース、ひとりで作るときに使う（元に戻したり、別のバージョンを作ったりする）
  • リモートリポジトリ＝ウェブ上・ネット上にある、人と共有するときに便利（上級者向け）

#03 gitの設定をしよう

わかったこと

  • gitを使い始める前に必須な設定
    　- 名前（git config --global user.name "名前"）
    　- メールアドレス（git config --global user.email "メールアドレス"）
    　※gitはデータを保存するときに名前とメールアドレスを記載することになっている
  • gitを使い始める前に便利な設定
    - メッセージの色分け（git config --color.ui true）
  • git config -l　で設定一覧の確認ができる（git config --list　でも同じ）
  • git config --help　でマニュアルが見れる（configの他にどんなオプションがあるか見れる）（git help config でも同じ意味）
  • Gitは「git」に続けて命令を書いていく

その他

わかったこと

  • git --version　でバージョンの確認ができる

本日の感想

  • gitとの心の距離が近くなった（実際に触れ合えたので）
  • 間違った命令をしてパソコンがおかしくなっちゃわないか不安になる

2019/11/21

今日の日報

学んだこと 

これまでの疑問解決を進める 

現状Flexboxは要素を横並びにできるもの、という認識だったので「Flexboxで縦方向に〜」ということがわからなかった。（ display: flex; と記入すればFlexboxの持つ？プロパティが使えるということなのか？）

ー#12 align-itemsを使ってみよう

わかったこと

  • FlexboxとはFlexible Box Layout Module（柔軟なレイアウトを短いコード実現できるCSSの新しいレイアウトモジュール）のこと
  • HTMLの親要素に「display: flex;」を指定するだけでFlexboxを使える
  • 要素内の縦横の配置が簡単にできる

 

 

git入門

https://dotinstall.com/lessons/basic_git 

#01 gitとは何か？ 

わかったこと

  • git（ギット）はバージョン管理システム
  • 昔の履歴を管理、別バージョンを同時に開発するための管理するシステム
  • gitの公式サイト

    git-scm.com

  • gitを使用するにあたり、Linuxのコマンドを勉強する必要がある
  • テキストファイルを編集するためvim（テキストエディタ）の知識が必要
  • コマンドラインとはキーボードからコマンドを入力してコンピュータに仕事を行わせるたり操作する方法のこと

わからなかったこと、疑問

  • Linux、Vimのことが全然わかってない（明日調べながらやってみる…）

本日の感想

  • gitの勉強がはじまったけれど、さっぱりわからなくて泣きそう…（わからない単語、イメージできないものが一気に出てきたために…）

2019/11/20

今日の日報

学んだこと 

これまでの疑問解決を進める

CSS基礎学習において「わからなかったこと・疑問」にあげていた内容について調べた（Shoota先生のコメントにて解決したものに関しては記載していない）

 

末尾につく「;」は閉じタグ的な存在なのかな

ー#04 フォントを設定していこう 

わかったこと

  • 宣言が１つの場合はセミコロンは不要
  • 宣言が複数の場合は「；」で区切る必要がある

 

  • 指定フォントがなかった場合というのは、環境的に持っていないということなのかな（古いPCだと持ってなかったり、ということなのかしら）

  • なかった場合のゴシック体も環境によって様々になるのかな…（windowsだったらMSゴシックとか、Macだったらヒラギノ角ゴとかそういうこと？）

ー#04 フォントを設定していこう 

わかったこと

  • 設定されたフォントが表示されるかどうかは閲覧側の環境による
  • PCに指定したフォントがなければ、ブラウザのデフォルト設定になる

わからなかったこと、疑問

  • Mac、Windowsのデフォルトではいっているシステムフォント一覧を見たかったのだけれど見つからなかった…（2017年の情報はあった↓）

    mw-s.jp

 

CSSのボックスモデルの説明（概念）が全然理解できなかった…（とりあえず進めてみて、理解できるかもしれないので一旦置いておこう…）

ー#05 CSSのボックスモデルを確認しよう 

わかったこと

  • HTML内に記述したタグはコンテンツを表示するための四角い領域を生成する
  • これ（↑）を「ボックス」という
  • 「ボックス」は４つの領域で構成されている（「content area」「padding」「border」「margin」）
  • content area …実際の内容が表示される部分
  • padding …要素の中に保持される余白（content areaとborderの間にある領域）
  • border …要素の境界（content areaとpaddingを囲んでいる枠線）
  • margin*1 …隣接する要素との余白（borderと他の要素の間にある領域）
  • このような要素が展開する領域の考え方を「ボックスモデル」と呼ぶ

 

各要素が四角の中に入っていて、divタグに入れるとさらに大きな四角にいれるみたいな感じなのかな

ー#05 CSSのボックスモデルを確認しよう

わかったこと

  • divタグは単体では意味を持たない
  • divタグで囲った要素をブロック要素としてグループ化できる

shoota先生の講座を受けて

わかったこと

  • Cascadingは「階段状の滝のような」「連鎖的に伝わる」という意味
  • CSSは上流で定義されたものが下流へ引き継がれて文書に適用される（上書きされる）
  • マークアップしただけでスタイルがかわるのは、ブラウザが標準で持っているCSSがあるため（文字色は黒とか）

  • HTML＝表示するものの構造を示すもの（書式を指定）（まとまりをつくる＝構造化）（スタイルには関与しない）

  • classはあらゆるHTMLタグにつけられる
  • HTMLの中にCSSをかくことはできるけど、別ドキュメントでつくる（複数ページで共通のスタイルを使うときに効率的）
  • gitはバージョン管理システム
  • git学習のあとは、はてなブログの記事文をHTMLで書いてみる予定（答えを見ながらやる＝見た目とタグの一致）

本日の感想

  • 調べる中でそのものの意味を理解できたこともよかったけれど、それよりもわからなかった部分が明確化できたのがよかった
  • Flexboxについては明日調べる
  • わかっているつもりのことが言葉にできるレベルの理解に至っていないことに気づいた
  • 対面（？）で教えてもらえるありがたさよ…

*1:色の指定ができない

2019/11/15

今日の日報

学んだこと

はじめてのCSS

https://dotinstall.com/lessons/basic_css_v5 

#12 align-itemsを使ってみよう

わかったこと

  • Flexboxで縦方向に要素を中央揃えにするプロパティがある

  • Flexboxを指定したセレクターに align-items: center; と記入する

わからなかったこと・疑問

  • 現状Flexboxは要素を横並びにできるもの、という認識だったので「Flexboxで縦方向に〜」ということがわからなかった。（ display: flex; と記入すればFlexboxの持つ？プロパティが使えるということなのか？）

#13 セレクタの適用範囲を限定しよう

わかったこと

  • text-align を使って要素の中のテキストの行揃えを制御できる

  • text-align: center; で中央揃えになる

  • .works > h1　不等号記号で区切るとworksの直下にあるh1という指定になる 

#14 line-heightで行間を調整しよう

わかったこと

  • line-height を使って行間の調整ができる
    例）line-height: 1.8;　行の高さを文字の1.8倍にする

#15 プロフィールサイトを完成させよう

わかったこと

  • とくになし

本日の感想

  • CSS基礎が終了した。未解決の疑問があるので、明日はそれらを解決していきたい。

2019/11/14

今日の日報

学んだこと

はじめてのCSS

https://dotinstall.com/lessons/basic_css_v5 

#08 Flexboxを使ってみよう

わかったこと

  • Flexboxを使って横並びにする（横並びにしたい親要素のプロパティに display: flex; と記載する）

#09 アイコン画像のスタイリングをしよう

わかったこと

  • img{ border-radius: 20px; } とすると全画像が角丸になる
  • .icon img{ 〜とすると「.icon」内にある画像を、という指定になる
  • 正方形の画像であれば角丸を 50% とすれば正円になる
  • border-wiedth 線の太さ
  • border-style　線の種類（solid＝実線）（その他点線などある）
  • border-color　線の色

#10 見出しのスタイルを整えよう

わかったこと

  • user agent stylesheetによって設定されているものもCSSで上書きすることができる
  • font-weight　フォントの太さ（normal＝普通の細さ）
  • font-size　フォントのサイズ

#11 リストのスタイリングをしていこう

わかったこと

  • あらかじめ指定されている余白をまずリセットしてから、必要なものだけつけていくとわかりやすい
  • list-style-type: none; とするとリストの黒丸が無くなる

先生のお言葉

「わからなかったので調べたらこういうのがあったんだけど合ってますか？」といった質問の仕方が理想

本日の感想

  • 現状は上辺をすくい取っているだけで完全理解（どういうタグでどういうときに使える など）に至っていないため、すぐ忘れてしまいそうな不安もあるけれどとにかく触れ合って行きたいという気持ち。
  • 実際、突然言葉としてでてくると「あれpタグってなんのタグだっけ…」となってしまったのでその度脳にすりこんで覚えれるようにしていきたい…。
  • 睡魔と戦いながら日報を書くと日本語が整わないな…。（これも日本語おかしいな…）