見出し画像

プログラミングにおいて大切な知識3選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

  1. class 属性と id 属性。

  2. そのほかの transform。

  3. degree = degree%360 について。

class 属性と id 属性。

CSS を適用するために class 属性を使用しました。
この class は同じクラス名を複数の要素に指定でき、同じクラス名の要素全てにスタイルを設定できます。

id 属性は、 1 つの要素を特定するために設定するものなので、文章全体で 1 つの要素にしか設定できません。 仮に同じ id を 2 つ以上の要素に設定した場合、予期しないトラブルが発生しますので注意しましょう。

そのほかの transform。

Java Script  からCSSを操作するのには、rotateX (x 軸方向に回転)を使いましたが、 rotateY や rotateZ もあります。また、 scale のようにサイズを変えるものもあります。
応用的な内容になりますが、そのほかの変形については MDN にも掲載されているので興味がある人は調べてみるとよいでしょう。
なお、複数の変形を指定する場合は以下のように半角スペースを挟んで書きます。

heading.style.transform = 'rotateX(60deg) rotateZ(10deg) scale(2)';
CSS に直接書く場合も同様です。
transform: rotateX(60deg) rotateZ(10deg) scale(2);

degree = degree%360 について。

361度, 721度 と 1度 は同じ角度として取り扱うことができます。
同じ角度を示す表記方法が 1度, 361度, 721度, ... とあるのは非常にややこしいです。
そのため、 361度, 721度 は 1度 として取り扱うほうが楽であるため全て 1度 と書き換えるほうが一般的です。
また、このような書き方もあります。

while(degree >= 360) {
   degree -= 360;
}
このプログラムは、 degreeが 360以上である場合に360を引くことを繰り返し続け、 360未満になると停止するプログラムです。 しかしプログラムが長く直感的でなく、また、 degree が非常に大きい場合に、計算が終了しループを抜けだすまでに時間がかかります。
360度以上の角度を360度未満の表記で表す時は、先ほど用いた degree = degree % 360; を用いるのが一般的です。
今使われていた算術演算子 % は、左に置かれた数値を右に置かれた数値で割った時の余りを求めるもので、多くのプログラミング言語で用いることができます。
ただしプログラミング言語やコンパイラによって負の数を用いた場合の挙動が異なるため注意しましょう。

まとめ

今回はプログラミングをする上で知っておくと良い大切な知識3つ解説しました。
CSSをもっと深掘りしたような内容でもありましたが、このような知識が今後に役立ってくる可能性も充分あるのでしっかり覚えておきたいです。

この記事が気に入ったらサポートをしてみませんか?