gakkie プログラミング 備忘録

tech::expert(現tech camp) 45期

git command 備忘録

git

[感想]

  • addコマンド、ステージングという概念で混乱した。

    • →desktopではステージングを自動的にやっていたので気づけなかった

  • コマンドの場合は様々なオプションがある。正直、覚えることが多く学習コストが高い

    • →主に使うものだけを記憶し慣れてきたら使うようにする

  • プルするときは先にgit checkoutでブランチの切り替えをするのは面倒に思った。
    クリックで切り替えられるdesktopの方が使いやすい。
    コマンドの順序をまとめると

    • →git checkout master（これでmasterブランチに移動）

    →そのあとにgit pull origin master

[目次]

git commandについて

普段GitHubdesktopを使用し開発しているため、git commandを使用する機会が少ない。
練習、アウトプットも兼ねて使用するコマンドをまとめてみた。

使用する状況

場所：ローカル

  • git init
  • git add .
  • git add ファイル名 or ディレクトリ
  • →新規のファイル
  • git add -u
  • →既存のファイルの場合
  • →インデントの修正だけの場合

コミットするとき

  • git commit -m “メッセージ”
  • git commit -a -m “メッセージ”
  • →(git add+git commit)

プッシュのコマンド→プルリク→マージ→ブランチの削除

  • git push origin ブランチ名
  • →ブラウザに移動
  • →プルリクエスト作成
  • →マージする
  • →ブランチデリート

プルのコマンド

  • ローカルに戻る
  • git checkout master
  • git pull origin master
  • →ローカルに反映

Sassとは？

Sass

[結論]

  • Sassとは？

    • → SassとはCSSの機能を拡張した言語です。

  • Sassを利用すると？

    • → CSSを効率的に書けるようになる

    → CSSを簡潔に書ける

    → CSSの中で変数を使える

    → CSSの中で計算を行うことなどができる

  • SassはCSSに非常に似ている

    • →しかし、違う言語である

  • Sassは通常のCSSファイルには記述することができない

    • → 反対にSassファイルにCSSを記述することはできる

[目次]

[本題]

Sassについて

〜や〜を利用していると目にする機会があると思います。
今回はSassについて解説します。

概要

  • Sass（言語）を扱うファイルの拡張子は２種類ある

    1. .sass
    2. .scss

    何が違うのか？

    .sass拡張子

      .sass拡張子の場合
    • 波カッコの省略やセミコロンが不要
    • モダンで非常にシンプルな記法

    →しかしその分CSSとの差が大きく普及しなかった

    .scss拡張子

      .scss拡張子の場合, → .sassの後に作られたSassファイルが.scssの拡張子
    • CSSに非常に似た記法（SCSS記法） である
    • 今ではこちらの記法が主流になっている

    何ができる？

    記述の簡略化ができる

    1. 親子関係にあるセレクタを入れ子にして書くことができる
    2. CSSの場合→親の要素から対象要素までのセレクタを何度も書く必要がある
    3. Sassはネストさせることで、同じ親のセレクタをまとめることができる

    実装例

    Sassのネスト構造

    • SassではCSSをネスト(入れ子)して記述することができます。

    使用するシチュエーション

    参考にしたサイト

    ラムダとは?

    FaaS、サーバレスアーキテクチャを調べていたときなんども出てくる「ラムダ」というワード気になったので調べてみた。その備忘録

    AWS Lambda はサーバーをプロビジョニングしたり管理する必要なくコードを実行できるコンピューティングサービスです。 必要時にのみてコードを実行し、1 日あたり数個のリクエストから 1 秒あたり数千のリクエストまで自動的にスケーリングしてくれる

    docs.aws.amazon.com

    それではラムダ計算とは？ ・計算模型のひとつ ・モデル化・抽象化した計算体系 →計算の実行を関数への引数の評価（英語: evaluation）と適用（英語: application）とする ・ラムダ算法とも言う

    そもそもラムダとは？

    ・ラムダ = 頭蓋冠後部で後頭骨と左右の頭頂骨を結んである骨のつながり方

    骨のつながり方がλ←こんな感じに似てるから、 ラムダって名前にしたのだろう。

    ラムダ計算 関数を表現する式に文字ラムダ (λ) を使うという慣習からその名がある。

    ja.wikipedia.org

    そもそもなぜJSONが使われるのか？

    そもそもなぜJSONが使われるのか？ JSONとは？

    →「JavaScriptObjectNotation」の略 「javascriptにおける'オブジェクト'を表現するための記法」のこと

    JSONデータ = javascriptにおけるオブジェクト

    Q.複数のデータをまとめる際に何故配列ではなくJSONを使うのか？ A.「その方が扱いやすいから」

    参考リンク

    t.co

    t.co

    window​.onloadについて

    JavaScript HTML

    [結論]

    • window​.onloadとは？
      • 　

      → 「何らかの処理を待つ」ことで、実行タイミングを調整するイベント

      → ページ全体が読み込まれると起動される

      →現在は古い手法と言われており、jQueryのload関数やaddEventListenerを使うことが多い

    [目次]

    [本題]

    window​.onloadについて

    JavaScriptを利用していると目にする機会があると思います。
    今回はwindow​.onload について解説します。


    実装例

    window.onload = function(){
//ここに読み込み完了時に実行してほしい処理を書く
}

    使用するシチュエーション

    あらかじめscriptタグ内にJavaScriptで関数を作成。
    それを「bodyタグ」の「onloadイベント」で実行する。
    「onloadイベント」を覚えると、JavaScriptの「書く場所」を意識しなくてもDOMを扱えるようになる。

    引用元（

    https://www.sejuku.net/blog/19754#windowonload

    ）

    <head>
<script>
    window.onload = function() {
        var memo = document.getElementById('memo');

        memo.textContent = 'こんにちは！';
    }
</script>
</head>
<body>
    <p id="memo"></p>
</body>

    を

    <head>
</head>

<!-- bodyにonloadイベントを設定 -->
<body onload="start()">
    <p id="memo"></p>


    <script>
        function start() {
            var memo = document.getElementById('memo');

            memo.textContent = 'こんにちは！';
        }
    </script>
</body>

    参考にしたサイト

    window.onloadに関する個人的なまとめ | JavaScript | Web関連 | KEPRATE

    【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

    HTMLの読み込みが完了してから実行 - Qiita

    window.onload - Web API | MDN

    window, document, body のonload,onreadyイベントのそれぞれの違いの解説