JavaScript、三角関数！画像の回転アニメーションを実装しよう！！

こんにちは、すぐるです！

sugulogをお読みいただきありがとうございます！！

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。

少しでもお役に立てれば幸いです。

今回は、JavaScriptの三角関数ということで

•  回転アニメーションの実装

について簡単に解説します！！

その為このブログを読むことで、画像を円に沿って回転さるための予備知識について理解が深まるのはもちろん、画像の回転アニメーションの実装技術を手に入れることができます。

是非最後までご愛読ください。

今回は、

• 画像の回転アニメーションの実装

の順で解説していきます。

では早速、みていきましょう！！

・画像の回転アニメーションの実装

円上（孤）を計算する際は三角関数の概念を用いて計算していきます。

円を座標に当てはめた際、コサインはX軸、サインはY軸にあたります。

このX軸、Y軸を元に角度を一定に変化させることで円を描きます。

ではまず始めにHTMLを記述します。

今回は以下のように画像だけ記述しています。

次にCSSを記述します。

今回はJavaScriptでmargin-left、margin-topの値を変更し続けることで回転させていきます。

そして最後にJavaScriptの記述です。

関数ではまず始めに角度をラジアンに変換しています。

そしてラジアンを使い定数xでX軸の値を求め、定数yでY軸の値を求めています。

その際にウインドウの縦横幅を取得し割る2した値を足しているのは、ウインドウの真ん中らへんで回転を表示させたいためです。

そしてMath.cos、Math.sinにかけている値（今回は200）を変更することで円の大きさを変えることができます。

また200のように同じ値にすることで綺麗な円を描きます。

あとは取得したX軸、Y軸をCSSに適用し、処理が行われるごとに角度に1を足すことで変化させていきます。

最後にrequestAnimationFrameを使い、処理を繰り返しています。

では実際に動きをみていきましょう！

画像が回転し続けていますね！！

因みにコサイン（x軸）のみ適用してみるとX軸のみで動きます。

次にサイン（Y軸）のみ適用してみるとY軸のみで動きます。

この動き（値）を合わせて円を描いているのがわかりますね！！

以上、今回のブログでした。

画像を円に沿って回転さるための予備知識について理解が深まり、画像の回転アニメーションの実装技術を手に入れることができましたか？？

僕自身もサイン、コサインなどの三角関数に関する知識をより深められるように、これからも励んでいきますね(^_^)/

最後に！！

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします！

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました！！

JavaScript、ランダム変更！ランダムに色、大きさを変えてみよう！！

こんにちは、すぐるです！

sugulogをお読みいただきありがとうございます！！

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。

少しでもお役に立てれば幸いです。

今回は、JavaScriptでランダムに色、大きさを変えてみようということで

•  ランダム変更

について簡単に解説します！！

その為このブログを読むことで、ランダムに色を変更できるようになるのはもちろん、大きさまでも変更できるようになります。

是非最後までご愛読ください。

今回は、

• ランダムにグラデーションを変えてみよう

• ランダムにBOXの大きさを変えてみよう

の順で解説していきます。

では早速、みていきましょう！！

・ランダムにグラデーションを変えてみよう

まずはHTMLの設定からです。

ボタンと色を変えたいboxだけ作成しています。

次にCSSでboxにグラデーションを設定します。

今回は数値で色を変更させたいため、hslで色を指定しています。
またCSS変数を使い指定することで、JavaScriptでその変数のみを後ほど変更することができます。

この変数の値をランダムに変更することで、ランダムにグラデーションを変更していきます。

では最後にJavaScriptの設定をします。

CSS変数の値を更新することによりlinear-gradientの値を変更し、グラデーションが変更されるという流れです。

では実際に動きを確認してみましょう。

ボタンを押すたびにグラデーションがランダムに変更されているのが確認できますね！！

・ランダムにBOXの大きさを変えてみよう

では先程の実装を参考にBOXの大きさも変えてみましょう。

JavaScriptに以下を追記しました。

randomな数値を2つ変数として定義することで縦横の大きさを同じ比率ではなく、個々で変更されるように定義しています。

後は予めCSSで定義されていたwidht、heightにランダムな数字を適用するだけです。

ではこちらも実際に動きを確認してみましょう。

グラデーションだけではなく、大きさもランダムに変更されているのが確認できますね！！

数値で値を定義することができるCSSにはこのランダム変更が適用でき、さまざまな形で応用できそうですね！！

以上、今回のブログでした。

ランダムに色を変更できるようになり、大きさまでも変更できるようになりましたか？？

 様々な形で応用できるので、知識として習得しておきたい実装ですね(^_^)/

最後に！！

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします！

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました！！

JavaScript、Number型！数値を取り扱うメソッドを集めてみた！！

こんにちは、すぐるです！

sugulogをお読みいただきありがとうございます！！

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。

少しでもお役に立てれば幸いです。

今回は、JavaScriptのNumber型ということで

•  数値を取り扱うメソッド

について簡単に解説します！！

その為このブログを読むことで、新しい数値に関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです！

また、新しい数値に関するJavaScriptメソッドに出会うたびに追記していきます！！

是非最後までご愛読ください。

・数値に関するJavaScriptメソッド

数値に関するJavaScriptメソッドに出会った順に書いてます。

もっともっと学びたいと貪欲に学習した思い出順なのでご了承ください。

・Math.round

数値を四捨五入する。

例）Math.round(6.18) → 6　Math.round(-6.18) → -6

・Math.floor

数値以下の最大整数を返す。

例）Math.floor(6.18) → 6　Math.floor(-6.18) → -7

・Math.ceil

数値以上の最小整数を返す。

例）Math.ceil(6.18) → 7　Math.ceil(-6.18) → -6

・Math.trunc

数値の整数部分を返す。

例）Math.trunc(6.18) → 6　Math.trunc(-6.18) → -6

・Math.random

0以上1未満の浮動小数点の疑似乱数を返す。

例）Math.random() → 0.010150095716460417

因みに、Math.floor(Math.random() * 100)で0以上100未満のランダムな整数、10 + Math.floor(Math.random() * 10)で10以上20未満のランダムな整数を返すように設定することもできます。

sugulog.hatenadiary.jp

・Math.abs

数値の絶対値を計算する。

 例）Math.abs(-6.18) → -6.18

・Math.pow

第一引数の第二引数乗を計算する。

 例）Math.pow(6, 3) → 216

・Math.sign

引数に渡された数値が正なら1、負なら-1、0なら0を返す。

 例）Math.sign(6) → 1　Math.sign(-6) → -1　Math.sign(0) → 0

・Math.sqrt

数値の平方根を計算する。

 例）Math.sqrt(36) → 6 

・Math.log

自然対数を計算する。

例）Math.log(Math.E) → 1

・Math.exp

指数関数（eの累乗）を計算する。

 例）Math.exp(6) → 403.4287934927351

・Math.cos

ラジアンで指定されたコサインを返す。

 例）Math.cos(1) → 0.5403023058681398

・Math.sin

ラジアンで指定されたサインを返す。

 例）Math.sin(1) → 0.8414709848078965

・Math.tan

ラジアンで指定されたタンジェントを返す。

 例）Math.tan(1) → 1.5574077246549023

sugulog.hatenadiary.jp

・Math.acos

ラジアンで指定されたアークコサインを返す。

 例）Math.cos(1) → 0

・Math.asin

ラジアンで指定されたアークサインを返す。

 例）Math.sin(1) → 1.5707963267948966

・Math.atan

ラジアンで指定されたアークタンジェントを返す。

 例）Math.tan(1) → 0.7853981633974483

・Math.atan2

第一引数（y座標）と第二引数（x座標）がなす角度をラジアンで返す。

 例）Math.atan2(1, 1) → 0.7853981633974483

<おまけ>

・Math.E

自然対数の底 (e)で約 2.718 を表す。

・Math.PI

円周率を表す。

・ラジアンの求め方

ラジアン =（度 * Math.PI）/ 180

以上、今回のブログでした。

新しい数値に関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか？？

また新しい知識をどんどん蓄えていきますね(^_^)/

最後に！！

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします！

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました！！

2、8、10、16？進数についてまとめてみた！！

こんにちは、すぐるです！

sugulogをお読みいただきありがとうございます！！

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。

少しでもお役に立てれば幸いです。

今回は、進数についてまとめてみたということで

•  進数

について簡単に解説します！！

その為このブログを読むことで、進数について理解できるのはもちろん、2進数などの概念についても知識を深めることができます。

是非最後までご愛読ください。

今回は、

• 進数とは

• 10進数

• 2進数

• 8進数

• 16進数

• bitとは

• byteとは

の順で解説していきます。

では早速、みていきましょう！！

・進数とは

予め定められたN種類の記号（数字）を並べることによって数を表す方法のこと。

PCの世界では2進数という進数で全てを表現します。

そのためPCは2進数や2の乗数である8進数や16進数で計算する方が得意です。

それに対し人間の世界では一般的に10進数という進数を利用します。

では1番始めに馴染み深い10進数からみていきましょう！！

・10進数（Decimal Number）

0~9までの10個の数字を使って数を表現する進数のこと。

数は0、1、2、3、4、5、6、7、8、9と順に増えていき、次に10と位が繰り上がります。

例）9→10→11...19→20...99→100...

普段使用している数の数え方のことですね！！

10進数では例えば、『1101』という数字を位ごとに以下のように表現することができます。

これを数式で表すと、1×10³+1×10²+0×10¹+1×10⁰=1101です。

このように表現される進数のことを10進数と呼びます！！

・2進数（Binary Number）

0、1のみの2個の数字を使って数を表現する進数のこと。

数は0、1と順に増えていき、次に10と位が繰り上がります。

例）0→1→10→11→100...

2進数では例えば、『1101』という数字を位ごとに以下のように表現することができます。

これを数式で表すと、1×2³+1×2²+0×2¹+1×2⁰=13です。

この13という数字は2進数を10進数で表した時の数字です。

逆に10進数を2進数に変換する場合は10進数の数字を2で割るを繰り返し、割り切れなくなるまで割った時のそれぞれの余りを逆から並べた数字です。

逆から並べると1101ですね！！

・8進数（Octal Number）

0~7までの8個の数字を使って数を表現する進数のこと。

数は0、1、2、3、4、5、6、7と順に増えていき、次に10と位が繰り上がります。

例）7→10→11...17→20...77→100...

8進数では例えば、『1101』という数字を位ごとに以下のように表現することができます。

これを数式で表すと、1×8³+1×8²+0×8¹+1×8⁰=577です。

この577という数字は8進数を10進数で表した時の数字です。

逆に10進数を8進数に変換する場合は10進数の数字を8で割るを繰り返し、割り切れなくなるまで割った時のそれぞれの余りを逆から並べた数字です。

こちらも逆から並べると1101ですね！！

・16進数（Hexadecimal Numbre）

0~9までの10個の数字とA~Fまでの6個のアルファベットを使って数を表現する進数のこと。

数は0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、Fと順に増えていき、次に10と位が繰り上がります。

例）9→A...F→10...1F→20...99→A0...A9...AF→B0...FF→100...

16進数では例えば、『1101』という数字を位ごとに以下のように表現することができます。

これを数式で表すと、1×16³+1×16²+0×16¹+1×16⁰=4353です。

この4353という数字は16進数を10進数で表した時の数字です。

因みに10進数ではAを10、Bを11、Cを12、Dを13、Eを14、Fを15として計算します。

例）AFBCを10進数で表すと10×16³+15×16²+11×16¹+12×16⁰=44988です。

逆に10進数を16進数に変換する場合は10進数の数字を16で割るを繰り返し、割り切れなくなるまで割った時のそれぞれの余りを逆から並べた数字です。

こちらも逆から並べると1101ですね！！

因みに44988を16で割ってみると以下のようになります。

この余りをアルファベットに当てはめるとCBFAです。

そして逆から読むとAFBCになりますね！！

またそれぞれどの進数で表しているかを区別するために1001b、1001o、1001d、1001hというように、それぞれの英語読みの頭文字を数字の後ろにつけることもあります。

・bitとは

情報量の最小単位で2つの選択肢から1つを特定する情報の量のこと。binary digitと呼ばれ、2進数の1桁として表される。

2進数の1の位を1bit、10の位を2bit、100の位を3bit...というように扱います。

因みに情報をすべてビット列に置き換えて扱うことをデジタルといいます。

・byteとは

情報量の単位の1つで8ビットのことで、2進数で8桁の数を表すことができる。

256種類（2の8乗）の異なる状態を表現することができます。

このバイトをもとにキロバイト、メガバイト、ギガバイト、テラバイト、ペタバイト、エクサバイトといった単位もあります。

以上、今回のブログでした。

進数について理解でき、2進数などの概念についても知識を深めることができましたか？？

少し難しい概念ではありますがPCはこの進数を元に処理されていますので、少しずつでも理解を深めていきましょう(^_^)/

最後に！！

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします！

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました！！

プライバシーポリシー

当ブログにおける個人情報の取扱いについて、以下のとおりにプライバシーポリシーを定めます。

運営者情報

運営者：suguru
ブログURL：https://t.co/eH78DG32Ga?amp=1
お問い合わせ：Twitter、またはブログのコメントまで。

個人情報の利用目的

当ブログでは、Twitter等でのお問い合わせやコメントの際に、お名前（ハンドルネーム）・メールアドレス等の個人情報をご登録いただく場合があります。

これらの個人情報は、質問に対する回答や必要な情報をご連絡するために利用し、それ以外の目的では利用しません。

個人情報の第三者への開示

個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。
・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示・訂正・追加・削除・利用停止

個人情報の開示・訂正・追加・削除・利用停止をご希望の場合には、ご本人であることを確認したうえで、速やかに対応致します。

Cookieについて

当ブログでは、一部のコンテンツにおいてCookieを利用しています。
Cookieとは、webコンテンツへのアクセスに関する情報であり、お名前・メールアドレス・住所・電話番号は含まれません。

また、お使いのブラウザ設定からCookieを無効にすることが可能です。

広告の配信について

当サイトは第三者配信の広告サービス（Google Adsense）を利用しています。

広告配信事業者は、過去にアクセスしたサイトの情報に基づきユーザーの興味に応じた広告を表示するためにCookie（クッキー）を使用することがあります。

また、第三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookie（クッキー）を設定したりこれを認識したりする場合があります。

なお、Cookie（クッキー）を無効にする設定およびGoogleアドセンスに関する詳細はポリシーと規約にてご確認ください。

アクセス解析ツールについて

当ブログでは、Google Inc.が提供するアクセス解析ツール「Googleアナリティクス」を利用しています。
Googleアナリティクスは、トラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ます。

Googleアナリティクスの詳細は「Googleアナリティクス利用規約」をご覧ください。

当ブログへのコメントについて

当ブログでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。

また、以下の内容を含むコメントは運営者の裁量によって削除することがあります。
・特定の自然人または法人を誹謗し、中傷するもの
・極度にわいせつな内容を含むもの
・禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの
・その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの

著作権について

当ブログで掲載している画像の著作権・肖像権等は各権利所有者に帰属します。権利を侵害する目的ではありません。

記事の内容や掲載画像等に問題がある場合、各権利所有者様本人が直接メールでご連絡下さい。本人確認後、対応致します。

また、当ブログのコンテンツ（記事・画像・その他プログラム）について、許可なく転載することを禁じます。引用の際は、当ブログへのリンクを掲載するとともに、転載であることを明記してください。

免責事項

当ブログからリンクやバナーなどによって他のサイトに移動した場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当ブログのコンテンツについて、可能な限り正確な情報を掲載するよう努めていますが、誤情報が入り込んだり、情報が古くなっている場合があります。当ブログに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

プライバシーポリシーの変更について

当ブログは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。

初出掲載：2021年1月1日
最終更新：2021年1月1日

JavaScript、式展開と真偽値の取扱について！！

こんにちは、すぐるです！

sugulogをお読みいただきありがとうございます！！

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。

少しでもお役に立てれば幸いです。

今回は、JavaScriptということで

•  式展開、真偽値

について簡単に解説します！！

その為このブログを読むことで、JavaScriptにおける式展開の方法について理解できるのはもちろん、真偽値の取扱についても知識を深めることができます。

是非最後までご愛読ください。

今回は、

• 式展開

• 真偽値（Boolean型）

の順で解説していきます。

では早速、みていきましょう！！

・式展開

JavaScriptでは以下の方法で式展開することができます。

因みにバックフォートはSHIFT + @（mac）で打つことができます。

・真偽値（Boolean型）

true（真）、fales（偽）をによるデータ型のこと。

多くの場合はif文とともに用いられ条件分岐に使用します。

sugulog.hatenadiary.jp

今回は真偽値について少しわかりにくい取扱についてまとめました。

まずはif文などに置いて、0以外の数値型、""以外の文字列型、配列型、オブジェクト型などを条件として使用する場合はtrueとして扱われます。

また真偽値に対し!（論理否定演算子）をつけることで真偽値が反転します。

そして、真偽値以外の値に!を1回付与すると真偽値（false）として扱い、!!を2回付与すると真偽値（true）として扱います。

因みにtypeofは対象の値のデータ型を表す文字列を返す演算子です。

以上、今回のブログでした。

JavaScriptにおける式展開の方法について理解でき、真偽値の取扱についても知識を深めることができましたか？？

特に真偽値の取扱については理解し、プログラミングの中で誤作動を起こさないように注意したいですね(^_^)/

最後に！！

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします！

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました！！

JavaScript、繰り返し処理！for、while文を学ぼう！！

こんにちは、すぐるです！

sugulogをお読みいただきありがとうございます！！

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。

少しでもお役に立てれば幸いです。

今回は、JavaScriptの繰り返し処理ということで

•  for、while文

について簡単に解説します！！

その為このブログを読むことで、for、while文について理解が深まるのはもちろん、continueなど繰り返し処理についての理解をさらに深めることができます。

是非最後までご愛読ください。

今回は、

• for文

• while文

• continue

の順で解説していきます。

では早速、みていきましょう！！

・for文

繰り返し処理を行う。

記述方法としては、for(初期化処理; 反復条件; 反復終わりの処理) {反復処理}です。

実際に記述してみましょう！！

実行される流れとしては、初期化処理（変数indexに0が代入）が行われ反復条件を満たしているかを判定します。

満たされている場合に反復処理（console.log）が実行され、反復終わりの処理（index++）が実行されます。

その後は反復条件を満たしているかを判断し、満たしていれば反復処理を実行し、反復終わりの処理を実行するの流れを反復条件を満たさなくなるまで繰り返します。

その結果、コンソールでは以下のように表示されます。

・while文

繰り返し処理を行う。

記述方法としては、while(反復条件) {反復処理}です。

実際に記述してみましょう！！

実行するに当たって、必ず条件を満たしていく記述が必要です。

今回の場合は変数indexを予め定義し、反復処理の中でindex++を実行することで条件を満たしています。

上記のように条件を満たしていかないと永遠に繰り返し処理が行われるので注意しましょう。

・continue

現在行われている繰り返し処理をスキップし次の繰り返し処理に移行する。

では実際にfor文の中でcontinueを記述してみましょう。

 上記では偶数の場合continueが実行され、奇数の場合はconsole.logが実行されます。

そのため偶数はスキップされ奇数のみが実行されるので、コンソールでは以下のように表示されます。

このように反復処理を行う中で、ある条件の場合はスキップし、ある条件は実行するなどの用途に使用することもできます。

以上、今回のブログでした。

for、while文について理解が深まり、continueなど繰り返し処理についての理解をさらに深めることができましたか？？

繰り返し処理は配列などにも有効なので、しっかりと押さえていきましょう(^_^)/

最後に！！

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします！

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました！！