はじめに
この頁について
下記経緯で開発したものを置いておく。
- 勉強目的
便宜に供する為
注意事項
実用性は置いておく(考慮したら遠慮して人目につくところに置けない)。
役立たせ得る方の役に立てれば幸い、例えば「Vue.jsでこういうのが実装できるんだー」と知ってもらう・イメージするのに役立てる等。
勉強目的
ToDoList
- Vue.jsの勉強中に作成した。
- HTML+CSS+Vue.js
- CSSは2箇所のみ(①取り消し線 ②中黒を表示しない)。
- Vue.jsの基礎の基礎から、幾つかのディレクティブを使っての実装。
【追加日】2019-06-16
【更新履歴】2019-07-02:Mustache構文のチラツキ防止を追加。htmlとcssにv-cloak追加。
BitcoinPrice
- Vue.jsの勉強中に作成した。
- HTML+CSS+Vue.js+axios
- axiosとは、JavaScriptのライブラリのこと。HTTP通信を行える。
- axiosで https://api.coindesk.com/v1/bpi/currentprice.json を取得し、v-forでbpiオブジェクトからkeyとvalueを取り出し、valueを画面に出力している。
- 通信エラー時のハンドリングも実装。
- インスタンスの準備ができるまで(≒コンパイル終えるまで)はloading表記を出す。
- filters内でtoFixed(2)することで小数点第3位で四捨五入した。
- 初めてだらけで大変勉強になった。
【追加日】2019-07-02
BMI算出アプリ
- Vue.jsの勉強中に作成した。
- HTML+CSS+Vue.js
- オリジナル(※ToDoListやBitcoin価格表示なんかは講義内容通りに手を動かせば作れるが、これは異なる。単位変換アプリの応用)。
- ロジックを、算出プロパティ(computed)と監視プロパティ(watch)のどちらに担わせるか悩み、今回は監視プロパティを採用。理由はソースの見通しの良さ(算出プロパティで実装してみると、考慮の関係でソースがごった返してきた。もっとVue.jsの実装になれたら違うのかも?)。
型チェックは未実装、そのうち実装する。→実装・反映した(190908)。- 学習効率として、基礎をインプットしたら、インプットした基礎を活かせるアウトプットするに限ると再認識した。
【追加日】2019-07-02
【更新日】2019-09-08:数値チェック追加, 最小値(身長50, 体重1)設定, 最大値(身長300, 体重635)設定, 入力値が体重のみの場合にBMI計算をしない, 身長にオートフォーカス, Escキーでクリア, Ctrl+Spaceで身長と体重をalert表示。
echoサンプル
- PHP
- echoのサンプル
- 必要最小限
【追加日】2019-09-09
改行サンプル
- PHP
- 改行のサンプル
- 必要最小限
【追加日】2019-09-09
通常配列サンプル
- PHP
- 通常配列のサンプル
- 必要最小限
【追加日】2019-09-12
連想配列サンプル
- PHP
- 連想配列のサンプル
- 必要最小限+var_dump
【追加日】2019-09-12
foreach(対象は通常配列)サンプル
- PHP
- foreach(対象は通常配列)のサンプル
- 必要最小限+var_dump
【追加日】2019-09-12
foreach(対象は連想配列)サンプル
- PHP
- foreach(対象は連想配列)のサンプル
- 必要最小限+var_dump
【追加日】2019-09-14
var_dumpサンプル
- PHP
- var_dump関数のサンプル
- 必要最小限
【追加日】2019-09-14
print_rサンプル
- PHP
- print_r関数のサンプル
- 必要最小限
【追加日】2019-09-14
countサンプル
- PHP
- count関数のサンプル
- 必要最小限
【追加日】2019-09-21
array_mergeサンプル
- PHP
- array_merge関数のサンプル
- 必要最小限
【追加日】2019-09-22
以上。