アニメーションを実現するにはleftやrightといった記述もできるが、ブラウザのレンダリング処理への影響を考慮すると、transformプロパティを使うのが望ましい。transformプロパティを利用した方がブラウザのパフォーマンスが上がる。 非推奨 leftやrightプ…
sassの@mixinの記述方法についてまとめています。 サマリ cssを簡潔に書くための機能 変数を渡すことでcssのプロパティを適用できる関数のような使い方が可能 引数の初期値を設定できるので、mixinの呼び出し先で同じcssの記述をする必要がない animation~で…
cssのAnimationとKeyframesについてまとめています。 サマリ Animationを楽に、簡潔に記述するための方法としてKeyframesがある animationプロパティの第一引数にKeyframesを記述する animationプロパティの第二引数には、アニメーションが行われる間隔を記…
Sassでfor文を使って記述する方法についてまとめています。 サマリ @forで宣言する 変数は$iで記述する from 1 through 2は1から始まって2回ループするの意味 四則演算は単位がついた状態で計算できる（-0.32sなど） background-imageのファイル名に数字が入…
cssの:nth-child、:nth-of-typeについてまとめています。 サマリ :nth-childは親要素の中の子要素の中で、何番目かを判定してcssを適用する つまり、子要素は指定していない別のhtmlタグもカウント対象となる 逆に、:nth-of-typeは親要素の中の子要素の中で…
Javascriptのthisについてまとめています。 サマリ class内でthisを使うとインスタンス化されたオブジェクトを参照する classの外で使うとグローバルオブジェクトを参照する classの中でwindow.setTimeoutを使い、その中でthisを指定するとwindowオブジェク…
JavascriptのDOMContentLoadedとloadについてまとめています。 サマリ DOMContentLoadedはhtmlをブラウザが解釈してDOMツリーを作成し終わったタイミングで発火する loadは画像や動画など全てのコンテンツをダウンロードし終わった後に発火する DOMContentLo…
JavascriptのaddEventListnerについてまとめています。 サマリ オブジェクトにJavascriptのイベントを登録することができる 複数のイベントを登録することができる イベント内のthisはaddするオブジェクトを指す <body> <button id="btn">Change ButtonText Color</button> <script src="index.js"></script> </body> const btn = doc…
Javascriptのreduceメソッドについてまとめています。 サマリ 配列をループ処理するときなどに利用する accumulatorとcurrentValueの考え方がある accumulator（第一引数）に前のループの戻り値、currentValue（第二引数）に現在の値（配列の値）をとる redu…
JavascriptのforEachメソッドについてまとめています。 サマリ デフォルトで引数が3つ渡り、1つめが値、2つめが添字、3つめが配列となる for文よりシンプルにループ分をかけるのでなるべくforEachを使う方が良い forEachは変数を余分に宣言しなくて良い また…
Javascriptのコールバック関数についてまとめています。 サマリ コールバック関数とは、他の関数から呼び出されて実行される関数のこと 呼び出し先の関数内でコールバック関数を実行することができる コールバック関数に引数を渡して実行することもできる 無…
Javascriptのアロー関数についてまとめています。 サマリ アロー関数は関数を簡略化して記述する方法 returnで戻り値を返す場合は、returnの記述を省略できる 関数で定義する場合は、関数の呼び出し元が関数より前にあっても実行される 関数を変数に格納して…
Javascriptの比較演算子について覚えておきたいことをメモしています。 サマリ ==は値を比較すが型までは比較しない ===は値と型を両方比較してtrue/falseを判定する ==で型が一致しない場合の比較は、まずjsが自動的に型を一致させ、そこから値の比較を行う…
cssを使ってhtml要素をレイアウトする方法についてまとめています。 サマリ letter-spacingを使うと文字間を調整できる display: inline-blockはblock要素を横並びにする flexは縦・横並びだけでなく幅や要素の比率を指定することができる /** * 横方向のレ…
cssを使って3Dアニメーションを設定するtransform-style、perspectiveについてまとめています。 サマリ 3Dアニメーションをcssを実現するにはtransform-style、- perspectiveの2つのプロパティが必要 3Dで動かしたい要素の親要素に設定する 子要素にtransfor…
transitionのタイミングファンクションについてまとめています。 サマリ taransitionプロパティの第三引数で指定できる（easeなど） どのような速度でアニメーションするかを指定する chromeのディベロッパーツールで画面からタイミングファンクションを指定…
cssの擬似要素と呼ばれるbefore、afterについてまとめています。 サマリ beforeは要素内の先頭に挿入される afterは要素内の末尾に挿入される 空のspanのような役割 プロパティでcontent:'';を指定しないと効果を発揮しない 1つのhtml要素に対して指定できる…
cssのpositionとz-indexについてまとめています。 サマリ position:relativeの子要素にposition:abusoluteを指定すると、親要素の高さが消える デフォルトではposition:staticが設定されている positonでstatic以外、かつz-indexが指定されていると、スタッ…
cssのtransformプロパティの使い方について サマリ アニメーションを定義する際に使う 物体の移動位置・回転・拡大・縮小を定義できる 複数の関数を組み合わせて使うことができる .rect { width: 100px; height: 100px; margin: 0 auto; background-color: o…
cssのtransitionプロパティについて サマリ transitionはアニメーションを簡単に定義できる 移り変わりを定義するプロパティ 引数の定義内容によって要素の変化を詳細に決められる .btn { background-color: white; color: black; border: 1px solid black; …
Rubyの便利な配列記法に%記法というものがあります。 通常の配列を記述する方法よりもシンプルに書くことができるので、コードの可読性がよかったりするので覚えておいて良さそうです。 %記法 %w 通常の配列記法はこちらになります。 > ary1 = ['tokyo', 'sa…
Rubyではメソッドから他のメソッドを呼び出すことができます。 さっそくみていきましょう。 メソッドからメソッドを呼び出す オブジェクトのメソッドの中から、同じオブジェクトの他のメソッドを呼び出す例を書いてみます。Userクラスを作成し、名前、メール…
Rubyでユーザークラスを作る場合、次のように書くことができます。 Rubyのゲッター・セッター class User def name=(name) @name = name end def name @name end end 1つめのメソッドは、引数で受け取ったデータをインスタンス変数@nameに代入します。インス…
Rubyのローカル変数とインスタンス変数には次の違いがあります。 ローカル変数：その場限りの一時的な変数。メソッド内で定義した場合、そのメソッドの中でのみ使える インスタンス変数：オブジェクトが保有する変数。オブジェクトのどのメソッド内からも利…
Rubyは「万物」がオブジェクトといわれるように、オブジェクトを理解することが重要なプログラミング言語です。irbではオブジェクトに自分が何者かを確認することができるので、その挙動をみていきましょう。 オブジェクトに何者（クラス）かを聞いてみる ir…
Rubyにはプログラムを柔軟に記述するためにモジュールというクラスに似た機能が用意されています。モジュールの特徴やクラスとの違い、使い方についてみていきます。 モジュールとは モジュールはクラスと同じように定数やメソッドをまとめたり、クラスに組…
Rubyの「Procクラス」について学んだことをまとめてみました。Procはブロックとして記述された一連の手続きを受け渡しするためのクラスです。 Procクラスとは Procを理解するにあたりポイントとなるのがブロックです。ブロックはdo ~ endまたは{ ~ }の形で引…
Rubyのyieldは機能の理解が難しいので整理したいと思います。英単語のyieldは「生み出す、引き起こす」などの意味がありますが、Rubyでは一言で言うと、「他のものに取って代わられる」機能です。 yieldの仕組み サンプルコードをみてみましょう。 def msg y…
Rubyのレシーバとは何でしょうか。 レシーバはselfなどで表され、Ruby以外のプログラミング言語にも共通して使われるオブジェクト指向一般の用語です。 Rubyのレシーバ Rubyのレシーバはインスタンスメソッドを利用するインスタンス自身のことを指します。 …
Rubyで郵便番号を正規表現で判定してみましょう。 判定パターン 郵便番号（String型）とみなす文字列のパターンは下記の2パターンとします。 "390-1401" （3桁-4桁記法） "3901401" （7桁記法） matchメソッドを使って出力される結果は次の通りです。 "郵便…
