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…

AMP の amp-position-observer と amp-animationを使って、スクロール量に応じてナビゲーションの現在地のスタイルを変更するというのをやってみる。 結果 See the Pen AMP amp-position-observer & amp-animation by jotaki (@yuheijotaki) on CodePen. つ…

AMP を少し触ってみたので所感をメモしておきます。 おおまかな制約 HTML 基本的に HTML のタグ要素は使える。 使えるタグは AMP HTML Tag Addendum に記載。 <img> 要素は <amp-img> で対応する。width, height 属性は必須。 CSS CSS はインラインで記述。 基本的なプロパ</amp-img>…

VS Code の MarkdownPreview が、開いていた右ペインのファイルを閉じてしまったり、相変わらず日本語変換が入力している文字に重なって使いづらいので.md ファイルだけ Atom で編集できるように設定しました。 主に Atom を Markdown エディタとして整備 - …

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

Vue CLI を使って JSON から情報を引っ張る。 とりあえず WordPress の /wp-json/ から。 Vue CLI の導入 こちらとだいたい同じですが、SassとリセットCSSとaxiosを追加。 Sass scssを有効化 npm install sass-loader node-sass --save-dev VueCLIでHelloWor…

ググってコマンド打つものの、あまり意味が分かっていなかったのでおさらいします。 homebrew とは？ 「Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである」 Homebrew (パッケージ管理システム) - W…

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 (…

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

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>

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

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が変…

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

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つ目以降からの表示にするため（['種類',…

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>

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

Chapter3 属性の指定をするとき 01 要素の属性をデータで指定する：v-bind 用意したデータで HTML の属性を指定したいときは、v-bindを使います。 <div id="app"> <figure><img src="face1.png" /></figure> <figure><img v-bind:src="fileName" /></figure> <p><a href="https://yuheijotaki.com">リンクを直接指定</a></p> <p><a v-bind:href="myURL">リ…</a></p></div>

Vue.js の初心者向けの本が新しく出ていたので読みながらコード書きながら気になった箇所、覚えたい箇所をメモしていきます 動かして学ぶ！Vue.js開発入門 (NEXT ONE)作者: 森巧尚出版社/メーカー: 翔泳社発売日: 2019/01/15メディア: 単行本（ソフトカバー…

案件で初めて WordPress5.x 以降を触わり、Gutenberg に対応する際に参考にしたサイトをメモしておきます。 【WordPress】Gutenberg 周りの情報まとめ（随時更新） - Qiita 包括的にまとまっているのはこちらでした。 【2018 年最新版】Gutenberg の使い方！…

今年は読書をしようと思って、本当は技術書を読んだほうがいいのですが、とりあえず習慣づけるためにライトな本を読みました。 メルカリ 希代のスタートアップ、野心と焦りと挑戦の5年間作者: 奥平和行出版社/メーカー: 日経BP社発売日: 2018/11/22メディア:…

インタビュー記事などいろいろ見ていて、主観ですが面白い取り組みや考え方のコンテンツをメモしておきます。 開発者クレド Aiming 開発者クレド | 株式会社 Aiming(エイミング) ゲーム会社なのでひとつ目は当てはまりづらいですが、「チーム対問題の原則」…