学習メモ

【学習メモ】JavaScriptコードレシピ集 その12

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter13 処理の実行タイミングを制御する C…

【学習メモ】JavaScriptコードレシピ集 その11

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter11 画像・音声・動画の取り扱い 191 …

【学習メモ】JavaScriptコードレシピ集 その10

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter10 アニメーションの作成 181 CSS Tra…

【学習メモ】JavaScriptコードレシピ集 その9

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter9 フォーム要素の操作方法 161 テキス…

【学習メモ】JavaScriptコードレシピ集 その8

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter8 HTML要素の操作方法 DOM操作まわり…

【学習メモ】JavaScriptコードレシピ集 その7

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 7 ユーザーアクションの取り扱い 114…

【学習メモ】JavaScriptコードレシピ集 その6

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 6 ブラウザーの操作方法 jQuery でば…

【学習メモ】JavaScriptコードレシピ集 その5

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 5 日付や時間の取り扱い 085 曜日を…

【学習メモ】JavaScriptコードレシピ集 その4

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 4 データについて深く知る データ =…

【学習メモ】JavaScriptコードレシピ集 その3

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 3 複数データの取り扱い 複数データ …

【学習メモ】JavaScriptコードレシピ集 その2

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 2 真偽値や数値や文字の取り扱い 022…

【学習メモ】JavaScriptコードレシピ集 その1

JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る 株式会社ICSというフロントエンドに強い会社の方2名が著者の本です。 コードレシピ集という本の…

【学習メモ】Vue.js のツボとコツがゼッタイにわかる本 その3

Vue.js のツボとコツがゼッタイにわかる本 の学習メモ続きです。 Vue.jsのツボとコツがゼッタイにわかる本作者: 中田亨出版社/メーカー: 秀和システム発売日: 2019/03/21メディア: 単行本この商品を含むブログを見る 第3章全体で作成した商品一覧、6-2. でコ…

【学習メモ】Vue.js のツボとコツがゼッタイにわかる本 その2

Vue.js のツボとコツがゼッタイにわかる本 の学習メモ続きです。 Vue.jsのツボとコツがゼッタイにわかる本作者: 中田亨出版社/メーカー: 秀和システム発売日: 2019/03/21メディア: 単行本この商品を含むブログを見る 第3章 Vue.js で商品一覧を描画してみよ…

【学習メモ】Vue.js のツボとコツがゼッタイにわかる本 その1

Vue.js のツボとコツがゼッタイにわかる本 という本を読んでいます。 Vue.jsのツボとコツがゼッタイにわかる本作者: 中田亨出版社/メーカー: 秀和システム発売日: 2019/03/21メディア: 単行本この商品を含むブログを見る Amazon でググってて把握したのです…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その6

7 Vuex によるデータフローの設計・状態管理 もスキップ。ざっくり読みましたが、データをどう持たせて処理するのが良いのかの参考になりました。 8 中規模・大規模向けのアプリケーション開発 ① 開発環境のセットアップ ② 設計 ③ 実装 を実際に手を動かさず…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その5

5.3 カスタムディレクティブ 5.4 描画関数 5.5 ミックスイン はスキップ。もう少し基礎的な部分を理解したらもう一度読み直そうと思います。。 6 単一コンポーネントによる開発 6.2 単一コンポーネントとは Vue.js では、上記のような単一ファイルコンポーネ…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その4

5 Vue.js の高度な機能 5.1 トランジションアニメーション 5.1.1 transition ラッパーコンポーネント transition コンポーネントは、自身が囲んでいるコンポーネントあるいは要素が出入り(enter/leave)する際にトランジションを追加します。出入りは、以下…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その3

4 Vue Router を活用したアプリケーション開発 4.2 ルーティングの基礎 4.2.2 ルーティング設計 ルート と ルーターコンストラクタ を用います。 <div id="app"> <router-link to="/top">トップページ</router-link> <router-link to="/users">ユーザー一覧ページ</router-link> <router-view></router-view> </div> <script src="https://unpkg.com/vue@2.5.17"></script>

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その2

3 コンポーネントの基礎 3.2 Vue コンポーネントの定義 3.2.1 グローバルコンポーネントの定義 <div id="app"> <fruits-list-title></fruits-list-title> <fruits-list-description></fruits-list-description> <fruits-list-table></fruits-list-table> <fruits-list></fruits-list> </div> // グローバルコンポーネント Vue.component("fruits-list…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その1

Vue.js入門 を読んでいます。 ネコ本、イヌ本を読んだので実践編と勝手に意気込んでいましたが、どうやら逆で概要や考え方的な内容からの記載が多く、より深く学べそうな気がします。 Vue.js入門 基礎から実践アプリケーション開発まで作者: 川口和也,喜多啓…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その11

Chapter13 JSON データを表示させてみよう 01 JSON ファイルの読み込み方 JSON を読み込む <div id="app"> <input type="file" v-on:change="onFileChange" /> <p>読み込みデータ:<br />{{ loadData }}</p> </div> new Vue({ el: "#app", data: { loadData: "" }, methods: { onFileChange: function(e) { file = e.target.files[0]; if (…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その10

Chapter12 部品にまとめるとき 01 部品にまとめる:コンポーネント 部品にまとめるときは、component ある部品が HTML 上で「どのように表示されるのか」をオブジェクトとしてまとめるには、template オプションを使います。そして、そのオブジェクトに名前…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その9

Chapter11 ToDoリストを作ってみよう <div id="app"> <div v-for="todo in todos"> <label> <input type="checkbox" v-model="todo.done"> <span v-bind:class="{donestyle:todo.done}">{{ todo.text }}</span> </label> </div> </div>

【学習メモ】動かして学ぶ!Vue.js 開発入門 その8

Chapter10 アニメーションするとき 01 表示/非表示時にアニメーションする:transition 表示/非表示時にアニメーションするときは、transition CSSスタイル 要素が現れるとき .v-enter:現れる前の状態 .v-enter-active:現れている最中 .v-enter-to:現れ…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その7

Chapter9 Markdownエディタを作ってみよう 02 Markdownエディタを作る <div id="app"> <textarea v-model="input"></textarea> <div v-html="convertMarkdown"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script> new Vue({ el: "#app", data: { input: '' }, computed: { // inputが変…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その6

Chapter8 データの変化を監視するとき 01 データを使って別の計算をする:算出プロパティ マスタッシュタグの中に「JavaScriptの式」を書くのではなく「何を表示するのか」を書くほうがわかりやすくなります。それを「名前」で表したものが「computedオプシ…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その5

Chapter7 Google Charts と連動させてみよう 02 Google Chartsと連動させる <div id="chart_div" style="height: 500px;"></div> <div id="app"> <ul> <li v-for="(item,c) in dataArray" v-if="c>0">{{ item[0] }}:{{ item[1] }} <button v-on:click="addOne(c)">1票足す</button> </li> </ul> </div> v-if="c>0"はデータを2つ目以降からの表示にするため(['種類',…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その4

Chapter6 条件とくり返しを使うとき 01 条件によって表示する:v-if 条件で表示するときは、v-if <div id="app"> <label><input type="checkbox" v-model="myVisible">表示する</label> <p v-if="myVisible">チェックボックスはON</p> <hr> <label><input type="checkbox" v-model="myVisible">表示する</label> </hr></div>

【学習メモ】動かして学ぶ!Vue.js 開発入門 その3

Chapter5 ユーザーの操作をつなぐとき 01 イベントとつなぐ:v-on イベントとメソッドをつなぐときは、v-on メソッドの作り方 メソッド(命令文)は、Vue インスタンスに methods オプションを追加して作ります。 methods オプションでは、「どんな命令があ…