学び
「Vue.jsにてトランジション（transition）を学ぶ」を勉強し、作った作品を掲載しました。
作った作品はこちらです。「vue.jsでカレンダーにて双方向データバインド、またレンジ入力とカラー選択を同期について」を勉強し、作った作品を掲載しました。
作った作品はこちらです。「Vue.jsでセレクトボックスでの双方向データバインド」を勉強し、作った作品を掲載しました。
作った作品はこちらです。「Vue.jsでチェックボックス、ラジオボタンでの双方向データバインド」を勉強し、作った作品を掲載しました。
作った作品はこちらです。「Vue.jsでチェックボックスでの双方向データバインド」を勉強し、作った作品を掲載しました。
作った作品はこちらです。「Vue.jsで双方向のデーターバインド」を勉強し、作った作品を掲載しました。
作った作品はこちらです。「Vue.jsでイベントやウオッチャ（watchオプション）を学ぶ。」を勉強し、作った作品を掲載しました。
作った作品はこちらです。「Vue.jsにてイベントを学ぶ」を勉強し、作った作品を掲載しました。
ユーザーの操作を検知してコンピューターを動かすので、よりプログラミングを勉強しての成果が実感できますね。
作った作品はこちらです。「Vue.jsにて算出プロパティを学ぶ」を勉強し、作った作品を掲載しました。
これも必須な学びですね。便利な機能なのでいろいろなパターンを学んでいきたいですね。今回、本で学んで 作った作品はこちらです。学んだ本（Vue.jsのツボとコツがゼッタイにわかる本）はこちらです。
「Vue.jsでフィルター処理をする」を勉強し、作った作品を掲載しました。
この機能は必須な学びですね。いろいろ応用されて使われているのでしょうね。また、今回も読者の方がDOMを動かせるように書いておきました。試してみてプログラミングを体験してみましょう。 作った作品はこちらです。学んだ本（Vue.jsのツボとコツがゼッタイにわかる本）はこちらです。
「Vue.jsでクラス属性、リストデーターにバインドする、条件付きで描画する」を勉強し、作った作品を掲載しました。
今回も読者の方がDOMを動かせるように書いておきました。試してみてプログラミングを体験してみましょう。 作った作品はこちらです。学んだ本（Vue.jsのツボとコツがゼッタイにわかる本）はこちらです。
「Vue.jsでテキストにバインドする」を勉強し、作った作品を掲載しました。
Vue.jsの理解を深めるため新しい本を買って勉強し始めました。本によって教え方が若干違うのでそれもまた勉強になります。あ、こっちのほうが教え方が丁寧だな、とか逆に前の本のほうがここの部分は良い点だなとか比較でき多角的に勉強できます。 作った作品はこちらです。学んだ本（Vue.jsのツボとコツがゼッタイにわかる本）はこちらです。
video、audioタグを使って動画、音声の掲載を勉強し、作った作品を掲載しました。
動画が載っているサイトはよく見かけるようになりました。載せるにはそれ用のタグを使用します。これを覚えておくと個人でもスマホで撮ったたまった画像などを整理して「動画アルバム」も作れますね。 こちらです。勉強した本「文系でもプログラミング副業で月10万円稼ぐ！」こちら
vue.jsを使って「画像ビューワーを作成しよう」を勉強し、作った作品を掲載しました。
これまた結構長いコードで大変でしたが、本に習いコツコツとコードを書いてきました。コンポーネントを使ったものでまずそれを理解し、そのコンポーネントでの親子関係、親子間でのデーターやイベントのやり取りについて学びました。 しかし、これ一つ作成しただけでは正直、まだまだ理解不足であり、これからいろんなものを実装して理解を深化させていこうと思います。 こちらです。 勉強した本「1日で基本が身に付く」こちらvue.jsを使って「TODOアプリを作る」を勉強し、作った作品を掲載しました。
結構長いコードで大変でしたが、本に習いコツコツとコードを書いてきました。途中うまく実装できてなく何度か見直したりしても、バグが見つからず心折れそうにもなりました。 しかし、必ず間違いはあり、合っているという思い込みを捨て、あきらめず完成できたときはうれしかったですね。 こちらです。 勉強した本はこちらvue.jsを使って「クラスバインディングで動的にスタイルを変え、ハンバーガーボタンを作る」を勉強し、作った作品を掲載しました。
クリックすると開閉するハンバーガーボタンを作りました。ハンバーガーとは2～3本の水平線が並んだデザインを指し、スマートフォンアプリでなどでよく見かけるのが代表的です。 こちらです。 勉強した本はこちらvue.jsを使って「バインディングで動的にスタイルを変える」を勉強し、作った作品を掲載しました。
バインディングとはデーターバインディングを略したもので、データーとテンプレート（HTML)の要素を紐づけることによってデーターの変更をテンプレート側に自動で反映する仕組みとのことです。今回は勉強中の本に載っていた「色を変化させるアプリを作ろう」から作ってみました。 こちらです。 勉強した本はこちらvue.jsを使って「バリテーション機能付きの入力フォーム」を勉強し、作った作品を掲載しました。
バリテーションとはフォームなどに入力された値が、決められた規則にそっているかどうかを検証することのようです。 今回は名前は4文字以上、電話番号は数字8文字以上、Eメールアドレス形式での規則としました。そうでない場合、エラー文字がでるようにしました。 こちらです。 勉強した本はこちらvue.jsを使って「v-if、v-else-if、v-elseの３つを組み合わせた条件付きレンダリング」を勉強し、作った作品を掲載しました。
59ならCランク、60以上ならBタンク、80以上ならAランクとなるようにしました。 こちらです。 勉強した本はこちらvue.jsを使って「v-if、v-elseによる条件付きレンダリング」を勉強し、作った作品を掲載しました。
条件分岐の意味自体はjavascriptで習っていたので抵抗なく理解することができました。でもvue.jsでの書き方をこれから学ばなければいけないですね。仕組みを少しずつ勉強しています。こちらです。 勉強した本はこちらvue.jsを使って「カウンターアプリの作り方」を勉強し、作った作品を掲載しました。
ボタンをクリックするたびに画面上で数値が加算されるようになっています。こういった簡単な作品をつくることからvue.jsの仕組みを少しずつ勉強しています。こちらです。勉強した本はこちら
vue.jsを使って「データーをWebブラウザに出力」「イベントハンドリングとメソッド」を勉強し、作った作品を掲載しました。
vue.jsなるものを本を買ってきて勉強しました（こちらが買った本）勉強中でまだまだ理解不足ですが、今は例題が出されている通りコードを書いていき、コツコツと要領をつかんでいきたいと思います。今回、うまく実装できた作品はこちら2点です。作品１「データーをWebブラウザに出力」
作品２「ボタンをクリックすると表示されているものが変わる」
javascriptを使って「理論演算子」を復習し、アレンジして作った作品を掲載しました。
javascriptの著書を復習しました。見る時間帯によってアラート表示が変わりますので、お試しくださいませ。 作った作品はこちらです。 また、復習した著書はこちらです。javascriptを使って「HTMLを書き換える」を復習し、アレンジして作った作品を掲載しました。
javascriptの著書を復習しました。ただ本に書かれていることをそのまま学ぶのではなく、少しアレンジして自分なりに応用してみました。 作った作品はこちらです。 また、復習している著書はこちらです。Jqueryにていろいろな技法を使って学んだことを掲載しました。
動きが出せるJqueryを使って作るサイトは楽しいですね。こちらもたまに復習すると、もっとああしたいなー、どうしたらもっとサイト作りに活かせるかなーなんて気持ちが湧いてきます。こちらが今回作った作品です。 こちらのサイトから学ばせてもらいました。こちらです。CSSのdisplay:flexについて復習しました。
たまに復習することも大切ですね。忘れていたことを思い出させてくれます。こんなふうに横に並べることが出来れば作れるデザインの幅も広がります。 簡単に作ってみた作品はこちらです。 このスキルはこちらの著書「スラスラわかるHTML&CSSのきほん」から復習してみました。本を買っておくといつでも手軽に復習できていいですね。CSSのmin,max,clampについて学んだことを作ってみました。
便利な機能ですね。メディアクエリの細かな設定も不要になり、今後も活用していきたいと思いました。今回しまぶーさんのこちらの動画から学ばせてもらいました。本当にわかりやすく作ってもらって感謝です。自分なりに作ってみた作品はこちらです。jQueryを使って開閉メニューを作ってみた。
いまでは多くのサイトで見られる開閉メニュー。あれはどうやって作られてるのだろうと興味をもちました。便利で見やすいし、使えたらいいなーと思った。ネットで検索するといろいろ出てきて学べますね。 今回はこちらのサイトから学ばせてもらい、出来上がったものはこちらです。今後のサイト作りにも覚えておいて損はないスキルですね。javascriptを使ってスライドショーを作成
昨日、なぜかトップページのスライドショーが出来なくなってしまっていたので、リベンジとばかりに改めてスライドショーを作りました。 こちらをクリックすると見れます。スマホで撮った写真などでスライドショーアルバムを作るのもいいかもしれませんね。
参考したサイトはこちらです。
PHPなるものを学び、お問い合わせ内容の送受信を学びました。
こちらのお問い合わせフォームの「名前」記入し送信すると、 別のPHPファイルに内容が確認できるようにできました。 いやーおじさんの私には新しい言語を学ぶのは大変です。でも苦しんだからこそ学びの定着があるのかもしれません。 お問い合わせの送受信の仕組みが少しだけ学べました。 検索し学び、参考になったサイト サイト1 サイト2 サイト3javascriptを使ってWebAPIを叩く（外部とのデーターをやり取りする） async await構文を使用して。
しまぶーさんの動画を見て、javascriptを使ってWebAPIを叩く、すなわち外部とのデーターをやり取りすることを学びました。 一度で覚えることは難しく何度も繰り返しコードを書かないと自分は覚えられません。都度、コードを書くたびにつまづきがあり、また学びもあります。
こちらが今回その動画を見て作ったものです。nameボタンをクリックすると外部のデータを取得します。こちらが今回学ばせてもらったしまぶーさんの動画です
どうぞ皆さんも学んでチャレンジしてみてください！
Vue.js
Vue.jsなるものを少し学んでみました。マスタッシュ？ディレクティブ？lodashのライブラリー？などなどまだまだ理解不足でわからないことだらけですが、何とか作ってみました。
思い通りに動いてくれる時はうれしいですね。
王冠スタイル
しまぶーさんの動画から「王冠スタイル」を作ってみました。何回か作っているの慣れてきました。昔はこのスタイルを作るのが難しかったみたいですが、今は機能が増えて簡単に作れるようになったようですね。 ヤフーのトップ画面のような感じです。 私でも作ることができました。またパソコンで画面の幅を狭めるとスタイルが適応するようにメディアクエリも使っています。 こちらのリンクからその作品を覗いてみてください。
（スマホでは王冠スタイルは見れません。） しまぶーさんの動画から学べますのでぜひ、こちらもご訪問ください。
王冠スタイルを作る動画
javascriptを使ってBMI計算を作成
BMIが25以上だと、ちょっと肥満気味。18未満だとやせすぎ
| 名前 | 好きな食べ物 | 嫌いな食べ物 |
|---|---|---|
| Aさん | ラーメン | 特になし |
| Bさん | ケーキ | 梅干し |
| Cさん | 焼肉 | たまご |
| Dさん | 白いご飯 | ケーキ |
このブログでの2コラムレイアウト（メイン領域、サブ領域）、パンくずリスト、背景色などは著書「WEBクリエーター能力認定試験、エキスパート」を利用しました。
ギャラリーレイアウトと呼ばれる技法にて。
著書「WEBクリエーター能力認定試験、エキスパート」を参考。
