体重計を作る ～フロントエンド編～

この記事は大阪工業大学 Advent Calendar 2019の23日目の記事です．

こんにちは，Hibiki(@4afS_)です．
今回は初めてのWebページ作成に挑戦しました．期間が２週間弱ほどしか取れなかったので完成できるか不安でしたが，無事間に合ってよかったです．完成したものは実際にここから，ソースコードはここから見ることができます．

はじめに

このプロジェクトはモノ編・バックエンド編・フロントエンド編の３部構成です． 作成に至る経緯などは上の記事をを参照していただけると幸いです．

自己紹介

関西の情報系大学で２回生で，普段はHaskell書いたりウォーキング・デッドを見たりしてます． Web周りの経験としては，少しHTMLとCSS，Elmに触れたことがある程度でJavaScriptや他のフレームワークの経験は0です．

開発環境

Angular CLI : 8.3.20
npm : 6.13.2
chart.js : 2.9.3

開発過程

表示したいものを考える

今回は友人の体重を表示するためのものなので，それがひと目でわかるグラフを表示することにします．

デザインを考える

はじめからコードを書くのは流石にしんどいと思うので，まずAdobe XDを使ってプロトタイプを作ります．その際にアイコンが欲しくなったので体重計のようなものを簡単にillustratorで作りました． 実際のアイコンとXDで作成したプロトタイプが↓です．

構成を考える

Angularはcomponent単位で考えるので，プロトタイプから分割して，Header，大きく文字が書かれたTitle，グラフがあるWeightChart，最後にFooterの構成で作成することにします．また，Httpリクエスト部分はサービスへ分離することにしました．

実際にコーディング

コーディング環境は，NeoVim + coc.nvimにTypeScript，Angular，HTMLのLanguageServerを導入して書いていきます．coc.nvimは今すごく気に入ってるプラグインなので，またそれについての記事も書こうと思います．

今回のWebページはPC，スマホどちらからも崩れずに見れるように，知識がないので無理矢理ですがレスポンシブにしていきます．

Header・Footer

まずはHeaderとFooterです．ここでは，Angular Materialから提供されているmat-toolbarを使います．使うのはとても簡単で，

<mat-toolbar>
    <mat-toolbar-row>
        要素を列挙する
    </mat-toolbar-row>
</mat-toolbar>

とするだけでツールバーが作成されます．これを上下においてHeader，Footerとすることにします．

タイトル

ここでは文字が大きく表示されるのでフォントにこだわりました．正直どう選べばいいかよくわからなかったので雰囲気で．

グラフ

今回は体重がどのように変化しているかを見ることが目的なので，折れ線グラフを採用します．グラフの描画にはChart.jsを使い，X軸に日付，Y軸に体重を割り当て，量ってない日もわかるように値があるところには丸いポイントをつけます．

完成！

初めてのWebページ作成で，しかもあまり勉強時間が取れないなかで無事完成までたどり着けてよかったです．間違っているところもたくさんあると思うので，これからWeb系の勉強をしていこうと思います．

おまけ

右上にひっそりいる数字ですが，一応アクセスカウンターです．もともと「あなたは○○人目の訪問者です」をやりたかったんですけど，しっくりこなかったので小さめに表示しました．

論理式を読みたかった

この記事は，OIT Advent Calender 2018 22日目の記事です．

 自己紹介

• 数学にハマった情報科学部生（数学歴4ヶ月程度）．
• Haskellが好き．
• 圏論やりたい．
• Twitter（@4afS_）．

 この記事の対象者 / 非対象者

 この記事の対象者

• 論理学ってどんなのか見てみたいなぁって人

雰囲気こんな感じなんだなぁってだけでも知ってもらえると嬉しいです．

 この記事の非対象者

• しっかり論理学を勉強したい人

こんなもあるってことを知ってもらう程度の内容なので，しっかり勉強したい方には向かないと思います．

 導入

数学をしていると，見たこともない記号や文字を使ってよくわからないものを解説している文がよくあります．なので，最低限解説の部分は読めないと先に進めないなと思い勉強したので，そのことについて書いていきます．
今回は簡単な集合の話をしてから，命題論理，述語論理という流れで解説していきます．前提知識が無くても読めるよう，できるだけ詳しく書いていきます．それゆえ，知識がある人にとっては退屈な文章が多いと思うので，適当に流し読みしてもらえると嬉しいです．また，集合や命題論理の話は高校数学でも扱われているので，覚えてる方は述語論理まで飛んでもらってわからなかったら戻る，という形で読むといいかもしれません．
わからないなぁと思っても少し進んだら例題がある場合もあるので，ちょっと我慢して読み進めてみると良いかもしれません．
少し長くなりますが，最後まで見ていただけると嬉しいです．
また，間違っている点などありましたらTwitterのDM等で知らせていただけると幸いです．

 集合

 集合とは

Wikipediaから引用すると，
集合 - Wikipedia

数学における集合 (しゅうごう、英: set, 仏: ensemble, 独: Menge) とは、大雑把に言えばいくつかの「もの」からなる「集まり」である。

ものからなる集まり，という抽象的なもので少しわかりにくいかもしれませんが，こんなのがあるんだなぁ程度で大丈夫です．
例) 「数」の集まり，「文字」の集まり，「生徒」の集まりなど
また，集合の内，「自然数全体の集合」，「整数全体の集合」，「有理数全体の集合」，「実数全体の集合」を特別に $// <![CDATA[ N, Z, Q, R // ]]>$ と書き，なにも「もの」を持たない集合を $// <![CDATA[ ∅ // ]]>$ と書きます．

 もの

ある集合を $// <![CDATA[ A // ]]>$ とすると，集合 $// <![CDATA[ A // ]]>$ の中に入っている個々の 「もの」 を $// <![CDATA[ A // ]]>$ の元（または要素）といいます．
元 $// <![CDATA[ a // ]]>$ が集合 $// <![CDATA[ A // ]]>$ の元であることを

$$// <![CDATA[ a ∈ A // ]]>$$

と書きます．また， $// <![CDATA[ a ∈ A // ]]>$ の否定（ $// <![CDATA[ a // ]]>$ が $// <![CDATA[ A // ]]>$ の元でない）は

$$// <![CDATA[ a ∉ A // ]]>$$

と書きます．

一般に，無限に多くの要素を持つ集合を 無限集合，有限個の要素を持つ集合を 有限集合 といいます．

 記法

次に，具体的に集合を示す方法について解説します．
一般に，元 $// <![CDATA[ a, b, c, ‥ // ]]>$ から成る集合 $// <![CDATA[ A // ]]>$ を

$$// <![CDATA[ A = \{a, b, c, ‥\} // ]]>$$

と書き，これを外延的記法といいます．
例) A={1,2,3,4,5} $// <![CDATA[ A = \{1, 2, 3, 4, 5\} // ]]>$

また，変数 $// <![CDATA[ x // ]]>$ についての条件 $// <![CDATA[ C // ]]>$ を用いて，

$$// <![CDATA[ A = \{x|C(x)\} // ]]>$$

と書き，これを内包的記法といいます．
例) B={x | x∈N かつ 1≤x≤5} (={1,2,3,4,5}) $// <![CDATA[ B=\{x\ |\ x∈N\ かつ\ 1≤x≤5 \}\ (=\{1, 2, 3, 4, 5\}) // ]]>$
この条件 $// <![CDATA[ C // ]]>$ は後半に出てくる命題関数というものなので，ここではこの記法だけ覚えて貰えれば大丈夫です．

 命題論理

次に，命題論理について解説します．

 命題とは

まず命題とは，
命題 - Wikipedia

命題（めいだい、英語: proposition）とは、論理学において判断を言語で表したもので、真または偽という性質をもつもの。また数学で、真偽の判断の対象となる文章または式。定理または問題のこと。

簡単に言うと，「真」か「偽」のどちらかに必ず決まる記述 のことです．

例えば，「犬は動物である」や「 $// <![CDATA[ 1+1=2 // ]]>$ 」は命題ですが，「Aさんは背が高い」は命題ではありません．なぜなら，背が高いかどうかの基準が曖昧で，真偽が定まらないからです．

先程例に出した「犬は動物である」のような，それ以上分解できない最も簡単な命題を 原子命題 といい，これらを命題変数 $// <![CDATA[ A, B... // ]]>$ などで示します．また，この「犬」や上の例の「 $// <![CDATA[ 1 // ]]>$ 」などの特定の個人ないし個物を 個体 といいます．

 真理関数

ここでは，命題論理において基本的な真理関数5つを命題 $// <![CDATA[ P, Q // ]]>$ を用いて見ていきます．

1. 否定 (negation) : $// <![CDATA[ ¬P // ]]>$
   $// <![CDATA[ P // ]]>$ ではない と読む．

2. 連言 (conjunction) : $// <![CDATA[ P∧Q // ]]>$
   「 $// <![CDATA[ P // ]]>$ かつ $// <![CDATA[ Q // ]]>$ 」と読む．

3. 選言 (disjunction) : $// <![CDATA[ P∨Q // ]]>$
   「Pまたは  $// <![CDATA[ Q // ]]>$ 」と読む．

4. 条件法 (conditional) : $// <![CDATA[ P⇒Q // ]]>$
   「 $// <![CDATA[ P // ]]>$ ならば $// <![CDATA[ Q // ]]>$ 」と読む．

5. 同値 (equivalence) : $// <![CDATA[ P⇔Q // ]]>$
   「 $// <![CDATA[ P // ]]>$ と $// <![CDATA[ Q // ]]>$ は同値である．」と読む．( $// <![CDATA[ (P ⇒Q)∧(Q⇒P) // ]]>$ と同じ．)

4の条件法について，直感的にわからない人も多いと思うので少し解説します．
例として，「 $// <![CDATA[ x // ]]>$ が偶数 $// <![CDATA[ ⇒x // ]]>$ の2乗は偶数」を用います．
この「 $// <![CDATA[ P // ]]>$ ならば $// <![CDATA[ Q // ]]>$ 」というのは，誤解を恐れずに言うと「すべての $// <![CDATA[ P // ]]>$ において，必ず $// <![CDATA[ Q // ]]>$ が成り立つ」 ということ，即ち 「 $// <![CDATA[ Q // ]]>$ が成り立たない $// <![CDATA[ P // ]]>$ は存在しない」 という意味になります．先程の例を当てはめると，「すべての偶数 $// <![CDATA[ x // ]]>$ において $// <![CDATA[ x // ]]>$ の2乗は必ず偶数」即ち「2乗して偶数にならない数 $// <![CDATA[ x // ]]>$ は偶数ではない」となります．このように， $// <![CDATA[ Q // ]]>$ が成り立たない $// <![CDATA[ P // ]]>$ の存在を禁止する，という意味で考えるとわかりやすいかもしれません．

 命題関数

命題関数は，命題の個体に当たる部分を $// <![CDATA[ x, y, z... // ]]>$ 等の変項に置き換えたものです．すなわち，個体を引数に取り，命題を返す関数です．例えば，命題関数 「 $// <![CDATA[ F(x) = x // ]]>$ は人である．」 を定義し，引数に「Aさん」を与えると，「 $// <![CDATA[ F( // ]]>$ Aさん $// <![CDATA[ ) = // ]]>$ Aさんは人である．」となります．このAさんを変項 $// <![CDATA[ a // ]]>$ に代入し，「 $// <![CDATA[ F(a) = a // ]]>$ は人である． $// <![CDATA[ = // ]]>$ Aさんは人である．」とすることもできます．

 述語論理

最後に，述語論理について解説します．

 述語論理とは

Wikipediaから引用すると，
述語論理 - Wikipedia

述語論理（じゅつごろんり、predicate logic）とは、数理論理学における記号的形式体系群を指す用語で、一階述語論理、二階述語論理、多ソート論理（英語版）、無限論理などが含まれる。これらの形式体系の特徴は、論理式に含まれる変数を量化できる点である。一般的な量化子として、存在量化子 ∃ と全称量化子 ∀ がある。

今回は，この中でも「一階述語論理」を扱っていきます．

ちなみに一階述語論理とは，
一階述語論理 - Wikipedia

一階述語論理 **（いっかいじゅつごろんり、first-order predicate logic）とは、個体の量化のみを許す述語論理 (predicate logic) である。

簡単に言うと，一階述語論理とは 命題論理の個体を量化可能にしたもの です．

 量化とは

ということで，量化について解説していきます．
量化は，変項に「すべて」や「ある」といった量をもたせること です．例として，命題関数「 $// <![CDATA[ F(x) = x // ]]>$ は動物である．」を量化してみます．「すべて」で量化すると， $// <![CDATA[ F(x) // ]]>$ は すべてのxにおいて，F(x) が成り立ち， $// <![CDATA[ ∀xF(x) // ]]>$ と書きます． $// <![CDATA[ ∀ // ]]>$ は全称量化子と呼ばれます．次に，「ある」で量化すると， $// <![CDATA[ F(x) // ]]>$ は あるxにおいて，F(x) となり， $// <![CDATA[ ∃xF(x) // ]]>$ と書きます． $// <![CDATA[ ∃ // ]]>$ は存在量化子と呼ばれます．また，予め定められた命題関数 $// <![CDATA[ F(x) // ]]>$ が値を取りうる範囲を議題領域 といい，この議題領域は集合です．
例を用いて解説します．ある命題関数 「 $// <![CDATA[ F(x) = x // ]]>$ は鳥でない．」 を定義し，これの議題領域を人間とすると， $// <![CDATA[ ∀xF(x) // ]]>$ は「全ての人間は鳥でない」という意味になります．これは，集合である「人間」のどの要素を $// <![CDATA[ F(x) // ]]>$ に与えたとしても，必ず成立すること，すなわち， $// <![CDATA[ F(a) ∧ F(b) ∧ ... ∧ F(n) // ]]>$ $// <![CDATA[ ((a,b,...,n) ∈ // ]]>$ 人間 $// <![CDATA[ ) // ]]>$ が真となる，ということです．また， $// <![CDATA[ ∃xF(x) // ]]>$ とすることで，「ある人間は鳥ではない．」すなわち「人間の中に少なくとも一人は鳥でない人間がいる．」という意味になります．これは， $// <![CDATA[ F(a) ∨ F(b) ∨ ... ∨ F(n) // ]]>$ が真となる，ということです．
ちなみに．議題領域を定義してない場合，「 $// <![CDATA[ G(x) = x // ]]>$ は人間である．」を用いて， $// <![CDATA[ ∀x(G(x) ⇒ F(x)) // ]]>$ とすることで，同じ意味の命題となります．

 最後に

以上，集合，命題論理，述語論理の大雑把な解説でした．長い間，お付き合いいただきありがとうございました．
この記事は私の人生初の記事なのですが，すごく長い記事になってしまいました．まだまだ数学初心者ですが，これからも精進して高みを目指していきたいと思います．
この記事を読んで，少しでも興味を持った，雰囲気だけでもなんとなくわかった，と思っていただけると嬉しいです．

それでは．