Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LT.20 コーディングとマジックナンバー

553 views

Published on

※ 株式会社GIGでは毎月社内勉強会を実施しています

GIG inc.
Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.

テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。

Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める"きっかけ"をつくりつづけます。

■ お問い合せ
https://giginc.co.jp/contact/

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

LT.20 コーディングとマジックナンバー

  1. 1. GIGLT.20 JUST HACK IT
  2. 2. マジックナンバーマジックナンバー 数字の魔法を解明する数字の魔法を解明する フロントエンド / 揚原 博志
  3. 3. ◆◆ 参考文献参考文献 ◆◆ https://www.amazon.co.jp/dp/415050377X https://www.amazon.co.jp/dp/4274068250
  4. 4. もくじもくじ 1. マジックナンバーとは 2. 数字の種類・分類 3. 比率・数列 4. 実装 5. まとめ
  5. 5. マジックナンバーとはマジックナンバーとは コンピュータプログラムのソースコードなどに直に記述され た数値で、その意味や意図が記述した本人以外には自明では ないもの。
  6. 6. 2と400が何なのかわからない2と400が何なのかわからない 定数化すると他の人にも伝わりやすい定数化すると他の人にも伝わりやすい でも… let $dish = 21; if(2 * $dish >= 400){ console.log('full') } const $sushi = 2; const $stomach = 400; let $dish = 21; if($sushi * $dish >= $stomach){ console.log('full') }
  7. 7. なんでこの数字にしたの?
  8. 8. js cssだと const $slidesAmount = 4; //← const $slideSpeed = 500; //← .container{ width: 1000px; /* ← 1000px */ } #element{ margin: 8px 0; /* ← 8px */ }
  9. 9. マジックナンバーのマジックナンバーの 数字の魔法を解明しよう!数字の魔法を解明しよう!
  10. 10. もくじもくじ 1. マジックナンバーとは 2. 数字の種類・分類 3. 比率・数列 4. 実装 5. まとめ
  11. 11. 数字の種類・分類数字の種類・分類
  12. 12. 数字の種類・分類数字の種類・分類 整数 忌み数 素数 高度合成数 無理数 …たくさんあるが、この5つを取り上げる
  13. 13. ◆◆ 整数整数 ◆◆ 0に1ずつ加えたり、引いたりすることで表せる数 少数でも分数でも無理数でもない、フツーの数字 小1が理解できる数字 印象 数学 時間 身体 4つに分けて、各数字の意味を説明する
  14. 14. ◆◆ 整数(印象編)整数(印象編) ◆◆ 一部ピタゴラス学派の考え方を参考にした ※ 偏見もあるので注意 「昔からこんな文脈で数字は使われてたかも?」 と考えることが大事。 気付かずに意識に刷り込まれてるかも?
  15. 15. ◆◆ 整数(印象編)整数(印象編) ◆◆ 11 ユニーク、理性、統一を表す。 22 二面性、対極性、対立・対比を表す。 女性。
  16. 16. ◆◆ 整数(印象編)整数(印象編) ◆◆ 33 1の統一、2の対立の和。 調和を意味する。 男 性。 44 公正と秩序を表す。 4つの方位、4つの点から生成 される3次元。
  17. 17. ◆◆ 整数(印象編)整数(印象編) ◆◆ 55 2+3で結婚を表す。 66 完全数。世界の創造。
  18. 18. ◆◆ 整数(印象編)整数(印象編) ◆◆ 77 ラッキーセブン。 1010 1の統一、2の対極性、3の調和、4の空間の 和。 万物の数。
  19. 19. ◆◆ 整数(数学編)整数(数学編) ◆◆ 数字の性質を深掘りする
  20. 20. ◆◆ 整数(数学編)整数(数学編) ◆◆ 22 二進数。PCは基本これ。 66 1-3の最小公倍数。 1212 1-4の最小公倍数。
  21. 21. ◆◆ 整数(数学編)整数(数学編) ◆◆ 3030 sin30° = 0.5 4545 tan45° = 1 6060 1-6 の最小公倍数。 cos60° = 0.5
  22. 22. ◆◆ 整数(数学編)整数(数学編) ◆◆ 180180 半円。 三角形の内和。 360360 一周。 四角形の内和。
  23. 23. ◆◆ 整数(時間編)整数(時間編) ◆◆
  24. 24. ◆◆ 整数(時間編)整数(時間編) ◆◆ 77 曜日の数。 1212 月の数。 2424 1日の時間。
  25. 25. ◆◆ 整数(時間編)整数(時間編) ◆◆ 2828 月の周期。 365365 一年の日数(閏年を除く)
  26. 26. ◆◆ 整数(身体編)整数(身体編) ◆◆ 場合によって人の身体構造にあった数字の選定を
  27. 27. ◆◆ 整数(身体編)整数(身体編) ◆◆ 44 マジカルナンバー(人が一度に記憶できる数) 1010 手の指の数。
  28. 28. ◆◆ 忌み数忌み数 ◆◆ 忌んで使用を避ける数。数について吉凶をいうことはいろい ろの事柄について行われている。その多くはことばの音が不 吉なことに通じるのを理由にしていわれている。
  29. 29. ◆◆ 忌み数忌み数 ◆◆ 44 多くの漢字文化で忌み数。(死を連想させる) 6, 96, 9 日本で忌み数。 13, 66613, 666 主にキリスト文化圏で忌み数。
  30. 30. ◆◆ 素数素数 ◆◆ 2, 3, 5, 7, 11, 13...103...2017 1 より大きい自然数で、正の約数が 1 と自分自身のみであ るもののことである。
  31. 31. ◆◆ 高度合成数高度合成数 ◆◆ 約数が最小である、素数と逆の発想約数が最小である、素数と逆の発想 自然数で、それ未満のどの自然数よりも約数の個数が多いも の
  32. 32. ◆◆ 高度合成数高度合成数 ◆◆ 66 約数が4つ(6までの数で、約数の数が最大) 840840 約数が32個 25202520 約数が48個(1-10までの整数全てで割り切れる)
  33. 33. ◆◆ 無理数無理数 ◆◆ 整数や分数で表せない数 √2, √5, 円周率, 外中比 無理数は美しいとされる比、図形によく使われている無理数は美しいとされる比、図形によく使われている
  34. 34. もくじもくじ 1. マジックナンバーとは 2. 数字の種類・分類 3. 比率・数列 4. 実装 5. まとめ
  35. 35. 比率・数列比率・数列
  36. 36. 比率・数列比率・数列 画面比 白銀比 黄金比 フィボナッチ数列
  37. 37. ◆◆ 画面比画面比 ◆◆ 多くのpcは 16:9 タブレットは 3:4 spは 9:16 この理由は?この理由は?
  38. 38. ◆◆ 画面比画面比 ◆◆ The Changing Shape of Cinema: The History of Aspect Ratio FilmmakerIQ.com 17:56 The Changing Shape of Cinema: The History of Aspect Ratio
  39. 39. ◆◆ 画面比画面比 ◆◆ 要約すると、 フィルム時代になんとなく3:4にした もっといいアスペクト比を求めて規格が乱立 大体の規格に合う (余白が少ない) のが16:9
  40. 40. ◆◆ 白銀比白銀比 ◆◆ 1:√2の比率 日本人に好まれやすく、可愛い印象 A4用紙などの紙にも使われる 半分にしても同じ比率を保つ
  41. 41. ◆◆ 黄金比黄金比 ◆◆ 1:(1+√5)/2の比率 (約 1:1.618) 自然界の至る所で見つかる比率 一般的に美しいとされている
  42. 42. ◆◆ フィボナッチ数列フィボナッチ数列 ◆◆ 1 + 1 = 2, 1 + 2 = 3, 2 + 3 = 5, 3 + 5 = 8, .... の数列 隣り合う数字同士の比率は黄金比に近く隣り合う数字同士の比率は黄金比に近く
  43. 43. もくじもくじ 1. マジックナンバーとは 2. 数字の種類・分類 3. 比率・数列 4. 実装 5. まとめ
  44. 44. 実装実装 どうやって数字を活かす?
  45. 45. ◆◆ 表示数で印象付ける表示数で印象付ける ◆◆ 1はユニーク,2は対極性,3は調和,4は秩序 うまく利用すれば印象を変えられる(カード等)
  46. 46. ◆◆ 変更に強くする変更に強くする ◆◆ 高度公倍数を使えば、端数が出にくい 6の倍数でサイズ指定すれば、2~3カラムへの変 更が綺麗にできる
  47. 47. ◆◆ 数字からコードを読む数字からコードを読む ◆◆ 90, 180, 360 の数字は空間を表すことが多いの で、アニメーション系の処理かもしれない 7, 12, 24, 365 の数字は時間処理系の処理かも しれない
  48. 48. ◆◆ 記憶力を利用する記憶力を利用する ◆◆ 記憶に残したい要素を 4±1 にまとめる 10以上の要素にすると、「両手で数えられない 沢山のもの」になる
  49. 49. ◆◆ クレームを避けるクレームを避ける ◆◆ 特定のお客さんには、忌み数に気をつける とか #container { width: 1000px; } #navigation { width: calc(1000px / 3); } #contents { width: 666px; //←666 忌 数 }
  50. 50. ◆◆ 同時処理を避ける同時処理を避ける ◆◆ setTimeoutで素数の秒数を指定すると、処理が 同時に起きづらい(最小公倍数は素数同士を掛 けた数になるから) スライダーのタイミングをバラバラにしたい時 など
  51. 51. HTML CSS (Sass) JS 1 <main> 2  <div class='container'> 1 @keyframes anime 2  100% 3    transform: translateX(0) Last saved 16 hours ago Delete Collections Embed Export ShareConsole Assets Comments Untitled A Pen By age Save Fork Settings Change View
  52. 52. ◆◆ 画面幅を考慮した実装画面幅を考慮した実装 ◆◆ 画面いっぱいに沢山グリッドを引きたい時など 16:9, 4:3 に対応していて、割っても端数が出な いような数字が好ましい PCは1グリッドが16倍数の横幅、タブレットは 3、SPは9
  53. 53. (番外編)8の倍数理論は正しいか?(1)(番外編)8の倍数理論は正しいか?(1) 8は16の約数なので、PCの場合は正しい スマホ、タブレットは、たまたま8で割り切れた 近年のスマホは8で割り切れないものも多い
  54. 54. (番外編)8の倍数理論は正しいか?(2)(番外編)8の倍数理論は正しいか?(2) 実際は奇数を避ける為に32:18, 8:6 になってる PCはコンテンツにmax-widthを指定するものが 多いので、画面比があまり関係ない タブレット、SPの横幅を割れればいい 6の倍数の方がいいこともある6の倍数の方がいいこともある
  55. 55. ◆◆ 印刷を考慮する印刷を考慮する ◆◆ 白銀比でレイアウトすると用紙の縦横比とピッ タリ
  56. 56. ◆◆ 調和した画面構成調和した画面構成 ◆◆ 黄金比は自然界によくある比率 フィボナッチ数列を元にレイアウトすると黄金 比になりやすい 自然(違和感のない)レイアウトが作れる自然(違和感のない)レイアウトが作れる
  57. 57. ◆◆ 複雑な回転複雑な回転 ◆◆ ローディングアニメーションなど 黄金角(約137.5)で回転させると、何回転しても ほぼ元の位置に戻らない
  58. 58. もくじもくじ 1. マジックナンバーとは 2. 数字の種類・分類 3. 比率・数列 4. 実装 5. まとめ
  59. 59. まとめまとめ 数字の意味を理解すると、迷いが減る 数字の意味を理解すると、何がしたいか分かる こともある 結局人が見て判断するので、数字にとらわれず デザイナーの意見を聞く
  60. 60. ご静聴ありがとうございまご静聴ありがとうございま した!した!
  61. 61. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする のこと


×