12日目 - プログラミング備忘録

今日の学習

今日の学習
- JavaScript
- jQuery
- Sass
  - 入れ子構造
  - 変数
  - mixin
  - 関数
  - import

JavaScript

昨日、JavaScriptもしっかり学んでおかないとRailsでつまづかないか不安になり、改めてProgateでJavaScriptのコースを学習した。

正直、Progateで学べる範囲はRailsとあまり関係がないと思ったが、とりあえずもう一周してみた。

一週目の頃と比べてはるかに理解度が高まっていることを実感できて、感動してしまった。

丁度20日ほど前にJavaScriptの一回目の学習を行ったはずだが、アロー関数が出たあたりで意味が分からなくなり、「自分はプログラミングなんて絶対できないのではないか？」「この程度のことが分からないなら、もうついていけないのではないか……」とかなり不安に思っていた。

当時は関数やメソッドの後ろに()がついていて、一体どういった役割があるのか理解できなかったし、とにかく難しかった。

そして、Rubyの簡潔さ、扱いやすさを改めて実感した。いちいち末尾に;つけなくていいし、console.logって長いし、引数ないなら()もつけなくていいし、if文も条件をかっこに入れなくていいし、とにかく初心者にとって理解しやすいなと感じた。

ドットインストールでは、JavaScriptにてミニアプリを作成したりできるようなので、そちらの方がよかったかもしれない。

Progateの契約が明日で切れるので、とりあえずProgateで復習してみようと思い復習してみたが、自分のように数的処理や数学が大の苦手で論理的思考が出来ない人間でも、数を重ねていけばプログラミングができるかもしれないという希望が見えたので良かった。

jQuery

Railsで何度か見かけたこのjQuery。

前述の通りProgateの契約が明日で切れてしまい、更新する気はないので今のうちにまだ未学習のものは学習しておこうと思った。

jQueryオブジェクト

jQueryオブジェクトは、$('セレクタ')とすると作成できる。このオブジェクトの後ろにメソッドを追加することにより、セレクタの内容を変更できる。

また、classとidもセレクタにできる。idはid名の前に#を用いて、classはclass名の前にドット(.)をつけること。

変数を定義することもできるので、複数回同じものを使う場合は、変数にすること。＊変数の頭に$を付ける。

例

$('h1').hide();

//idの場合
$('#list').css('margin', '20px');

//classの場合
$('.list-item').css('color', 'red');

学習したメソッド一覧

メソッド名	効果
hide	要素を隠す
fadeOut	要素をフェードアウトさせる（引数にアニメーション速度を指定可）
slideUp	fadeOutと異なるアニメーションでフェードアウト
show	隠れた要素を表示する
fadeIn	要素をフェードインさせる
slideDown	slideUpの反対のアニメーション
css	CSSを変更できる。プロパティ、値の順に引数が設定されている
text	要素の中身を引数の文字列に書き換える
html	要素の中身のHTMLを引数の内容で書き換える
find	すべての子孫要素から、指定したセレクタを持つ要素を取得
children	指定したセレクタが持つ子要素から、セレクタに合致した要素のみを取得
addClass	指定した要素にクラスを追加する
removeClass	指定した要素から指定したクラスを取り除く
hasClass	引数に指定したクラスをオブジェクトが持っているかどうか判定

イベント

指定の処理を行うタイミングを設定できる。

$('セレクタ').イベント名(function(){ });

clickイベント

clickイベントを用いると、セレクタがクリックされたときにどんな処理をするかを指定できる。

$('セレクタ').click(function(){
        行いたい処理を記述
 });

モーダル

何かしらのイベントに基づいて、表示・非表示が行われる要素。

this

$(this)は、そのイベントが起こった要素を取得することができる。

＊thisをクォーテーションで囲まないように注意。

特定の要素にのみ、効果をつけたいときに使用する。

hover

要素にマウスが乗ったとき、外れたときに指定した処理を行うイベント。

乗った時、外れたときで二つの処理を指定する。

$('セレクタ').hover(
    function() {
        マウスをのせた時の処理
    }, 
    function() {
        マウスをはずした時の処理
    }
);

ready

jQueryの操作は、HTMLの読み込みが完了してから開始するようにするために、readyイベントを使用し、その中にjQueryの処理を書いていく。

readyイベントを使用せずとも、省略形の$(function(){ });を使用し、この中にjQueryを記述していけばよい。

Sass

Railsでもscssファイルを扱うことがあったため、普通のcssファイルとの違いをおさえて学んでおきたい。

学習してみると、普通に関数や引数が出てくるため、一か月前にHTML & CSSを学んだすぐ後に「上位互換みたいなのがあるのか」とSassに突入しなくてよかったと思う。

入れ子構造

通常のCSSだと、例えば

.header {
    width: 100%;
}

.header ul {
    padding: 10px;
}

この場合、.headerの部分を二回書いている。

しかし、Sassで記述をすると、

.header {
    width: 100%;

    ul {
        padding: 10px;
    }
}

このように、共通のセレクタの中に別のセレクタを入れることができる。

また、:hoverや:active、class名がある場合も、&記号を使うことによって書き換えることができる。

li {
   color: red;
}
li:hover {
    color: blue;
}
li.black {
    color: black;
}

liを繰り返し書かなければならないが、Sassで書き換えると、

li {
   color: red;
    &:hover {
        color: blue;
    &.black {
        color: black;
    }
}

かなりすっきりするし、どのセレクタのホバーなのかが一目瞭然で分かりやすい。

classの場合は、&.とすること。

変数

なんと、Sassでは変数を定義できる。

$変数名: コード;

で定義をする。また、Rubyなどと同じで、変数にスコープがあったり、使用する場合は使用する箇所より前に記述しておかないといけないという決まりがある。

mixin

いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能。

mixinの定義の仕方は、@mixin mixin名 { コード }。

定義した後は、@include mixin名;で呼び出すことができる。

さらに、mixinには引数を設定できる。柔軟に変更したい部分には、引数を設定すればいい。

引数には変数を記述することもできる。

@mixin font-data($color){
    font-size: 10px;
    color: $color;
}
.text {
    @include font-data(#fff);
}

関数

関数まで使える……。

色を操作する関数が、主に使われる関数らしい。

よく使われる関数例

color: darken(色, 50%);
//色を暗くする関数

color: lighten(色, 50%);
//色を明るくする関数

color: rgba(色, 0.5);
//色の不透明度を指定する関数

import

Railsの部分テンプレートのように、外部ファイルを読み取ることができる。

部分テンプレートと同じく、設定を記述するファイルの先頭にはアンダーバー(_)をつけること。

読み込む場合は、@import "_ファイル名.cscc";とする。

また、ファイル名は省略できるので、単に@impot "ファイル名";とするだけでもよい。