はてなブックマークでVue.jsのYouTube動画が人気を集めていました。 b.hatena.ne.jp 動画を見てみたら、「たにぐち まことのプログラミング学習応援チャンネル」というコンテンツでした。 https://www.youtube.com/user/tomostajp/playlists www.youtube.com たにぐちまことさんと言えば、HTMLやJavaScriptの本を書かれている方ですね。 twitter.com www.amazon.co.jp 本屋で、たにぐちさんの著書をよく見かけます。 これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん 作者: たにぐちまこと 出版社/メーカー: マイナビ出版 発売日: 2017/03/27 メディア: 単行本（ソフトカバー） この商品を含むブログを見る さて、動画チャンネルを見たら、Vu
Reactの勉強メモ。 Reactを準備なしですぐに練習してみたい場合、オンラインの実行環境が用意されているので、すぐに試してみることができます。 「CodeSandbox」というオンラインエディターを使うと、すぐにReactを試せます。 jsstudy.hatenablog.com CodeSandboxとは？ (p.31) 「CodeSandbox」は、オンライン上で直接Reactなどのコードを記述できるエディターアプリケーションです。 ブラウザーでページを開くだけで、Reactを記述する環境が一式揃っており、雛形から書き始めることができます。 codesandbox.io https://codesandbox.io/ ブラウザーでこのURLにアクセスすると、以下のようなWebページが表示されます。 「OPEN REACT」ボタンをクリックすると、エディター画面が表示されます。 これ
Vue.jsの学習メモ。 jsstudy.hatenablog.com Vue.jsの基本的なコードを見ると、「el」というプロパティーがあるけど、これって何なんだろう？と思いました。 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) ↑この「el: '#app'」という部分ですね。 本ではサラッと説明されていて、いまいちピンと来なかったので、他の説明を調べてみました。 マウントする要素 まずは本書の説明です。 (p.43) オプションには使用するデータやメソッドを定義していきます。 var app = new Vue({ // （コンポーネントの）オプションをここに書く }) 基本的なオプションの構成 // 基本的なオプション構成（使用するデータやメソッド） var app = new Vue({
Vue.jsの学習メモ。 jsstudy.hatenablog.com テキストのバインディング (p.36) Vue.jsを使って、最も基本的な処理である、画面に文字を表示させるという処理を実現してみます。 （サンプルコード） https://cr-vue.mio3io.com/guide/chapter1.html#テキストのバインディング HTML（index.html） <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <!-- この#appの内側にテンプレートを書き込んでいく --> <p>{{ message }}</p> </div> <scr
Vue.jsの本「基礎から学ぶ Vue.js」を読んでたけど、途中でやめてたので復習！ 最初に読んだ部分を忘れたので、少し戻りますｗ jsstudy.hatenablog.com データをDOMに変換するのがVue.jsの役目 データ駆動、リアクティブ・プログラミング テンプレート、ディレクティブ データバインディング コンポーネント Vuex、Vue Router（コンポーネントの管理） データをDOMに変換するのがVue.jsの役目 (p.26) はじめてVue.jsを使う時に意識すべきなのが、画面を描画する構造の本体はDOMではなくJavaScriptのデータということです。 先にDOMが存在してそれを読み込んだり操作するのではなく、Vue.jsでは最初にデータが存在してそのデータ状態に適したDOMを構築します。 JSのデータを Vue.jsがDOMに変換して Webページの画面が描
Vue.jsの勉強メモ。 jsstudy.hatenablog.com Vueの起動 (p.37) Vueアプリケーションの作成 アプリケーションの作成をはじめるには、コンストラクタ関数Vueを使ってルートとなるVueインスタンスを作成します。 var app = new Vue({ // オプション }) 返り値はルートのインスタンスになっており、変数化しておくことでコンソールからアクセスできますが必須ではありません。 慣例的にappやvm（ViewModelの略）といった変数名が使用されます。 「ルート」という用語が、いまいちピンと来なかったので検索。 jp.vuejs.org Vue インスタンスの作成 全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。 var vm = new Vue({ // オプション }) V
今日はVue.jsのお勉強。「基礎から学ぶ Vue.js」を読んでます。 jsstudy.hatenablog.com (p.36) 学習用のひな形ファイルを用意 CHAPTER 1 | 基礎から学ぶ Vue.js ↑上記のような「index.html」「main.js」を作って、Chromeで開き、コンソール画面を見ると、以下のようなメッセージが表示されていました。 vue.js:8542 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools vue.js:8553 You are running Vue in development mode. Make sure to turn on production mode w
JavaScriptフレームワークの「Vue.js」の使い方を学ぶために「基礎から学ぶ Vue.js」という本を読んでみます。 基礎から学ぶ Vue.js 作者: mio 出版社/メーカー: シーアンドアール研究所 発売日: 2018/05/29 メディア: 単行本（ソフトカバー） この商品を含むブログを見る 目次 CHAPTER 1 Vue.jsとフレームワークの基礎知識 01 Vue.jsについて 02 Vue.jsのキーコンセプト 03 豊富なリソースを活用しよう 04 Vue.jsのインストール 05 Vue.jsの基本機能 06 オプションの構成を見てみよう □まとめ CHAPTER 2 データの登録と更新 07 基本のデータバインディング 08 テキストと属性のデータバインディング 09 テンプレートにおける条件分岐 10 リストデータの表示と更新 11 DOMを直接参照する$
Amazonを見ていたら、JavaScriptの新刊がいろいろありました。 その中で気になった本をいくつかメモ。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎 出版社/メーカー: 技術評論社 発売日: 2018/05/09 メディア: 単行本（ソフトカバー） この商品を含むブログを見る Reactなど、最近のJavaScriptフレームワークの使い方を広く浅く紹介してくれています。 Reactを基準として、その他のJSフレームワークの違いを把握すると分かりやすいでしょうか？ 近所の本屋にも置いてあったので、パラパラと眺めてみました。
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-3-2 Get/Setの作成 HTML CSS JavaScript 実行結果 Computedプロパティとメソッドの違い まとめ 4-3-2 Get/Setの作成 前回、Computedプロパティの使い方を練習しました。 (p.134) Computedプロパティは意外と簡単に作れます。 ただし、このやり方だと、値を取り出す場合はいいのですが、変更する方法が用意されてないことに気がつくでしょう。 Computedプロパティでも、値の設定を行うことは可能です。 computed: { プロパティ名 : { get : function(){……処理……}, set : function( 引数 ){……処理……} } } プロパティに直接メ
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-3-1 Computedプロパティ Computedプロパティとは？ SwiftのComputedプロパティ HTML CSS JavaScript 実行結果 まとめ 4-3-1 Computedプロパティ (p.132) Vue.jsには、ViewModelをより深く使いこなすための機能が多数盛り込まれています。 基本的な使い方がわかったところで、覚えておくと役に立つVue.jsの機能について一通り説明していきましょう。 まずは、Computedプロパティ（算出プロパティ）についてです。 Computedプロパティとは？ プロパティは、基本的に値を保管するだけのものですが、場合によっては値に何らかの処理を施したいこともあります。 単純に保
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-8 フィルターを使う Vue.js バージョン1のフィルター HTML CSS JavaScript 実行結果 Vue.js バージョン2のフィルター HTML CSS JavaScript 実行結果 Vue.jsのフィルターとは？ バージョン1からバージョン2への変更点 まとめ 4-2-8 フィルターを使う (p.130) toStringを使って配列をテキストにして表示させましたが、実は別のやり方もあります。 前回、JavaScript式を使って配列を文字列に変換しましたが、Vue.jsの「フィルター」という機能でも同じことができます。 Vue.jsのフィルターは、バージョン1とバージョン2では、仕様が変更されていました。 （参考）
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-7 JavaScript式を使う HTML CSS JavaScript 実行結果 createdフック まとめ 4-2-7 JavaScript式を使う (p.129) Mustacheタグには、dataの値を指定するだけでなく、もっと複雑な内容を記述することもできます。 それは「JavaScriptの式」です。 式といっても、四則演算のような式だけではありません。 要するに「結果を値として返すことのできる文」と考えておけばよいでしょう。 値として得られないようなものは設定できません。 HTML index.html <!DOCTYPE html> <html> <head> <title>Hello</title> <meta ch
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-6 HTMLの表示 HTML CSS JavaScript 実行結果 まとめ 4-2-6 HTMLの表示 (p.127) ここまでは単純なテキストを表示していましたが、HTMLのコードを設定できればもっと複雑な表現も可能ですね。 Mustacheタグ（ {{ }} タグ）は、HTMLのタグを自動的にエスケープ処理してタグとして機能しないようになっているのです。 このため、HTMLのタグを出力しても動作はしません。 HTMLのタグを含むテキストをそのまま表示させたい場合は、{{{ }}}というタグを使います。 Vue.jsでHTMLタグを含む文字列を出力したい場合、Vue.jsのバージョン1とバージョン2では、やり方が違いました。 本書「
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-5 イべントとメソッドの利用 HTML CSS JavaScript 実行結果 v-on属性 まとめ 4-2-5 イべントとメソッドの利用 (p.125) テキストを入力などする場合、入力が完了したところでボタンなどをクリックし、処理を行うようになっています。 こうした「クリックしたら処理を実行する」という一般的なやり方もVueでは行えます。 これにはクリックのイべント処理の利用の仕方を覚える必要があります。 Vue.jsでイベント（ボタンのクリックなど）を扱う方法を見ていきましょう！ HTML index.html <!DOCTYPE html> <html> <head> <title>Hello</title> <meta cha
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-4 HTML側からVueに値を設定する HTML CSS JavaScript 実行結果 v-model属性 v-bind属性 ディレクティブとは？ まとめ 4-2-4 HTML側からVueに値を設定する (p.124) HTML側から入力した値をVueオブジェクト側に渡すには？ Vue.jsはMVVMパターンのJavaScriptフレームワークです。 MVVMパターンの特徴として「双方向のデータバインディング」（データ結合）という仕組みがありました。 Modelのデータ → Viewに表示する （前回練習した方法） Viewを変更 → Modelにも反映させる （今回練習する方法） 今回は、(2)Viewの変更をModelに伝える方
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-1 HTMLファイルを用意する HTMLファイル スタイルシート Mustacheタグ 4-2-2 スクリプトを作成する JavaScript 4-2-3 Vueオブジェクト まとめ 4-2-1 HTMLファイルを用意する (p.121) Vue.jsは、HTMLに基本的なタグを用意しておき、JavaScript側でそれらのタグの表示を操作します。 したがって、HTMLファイルとスクリプトファイルを用意する必要があります。 HTMLファイル index.html <!DOCTYPE html> <html> <head> <title>Hello</title> <meta charset="UTF-8"> <script src="v
Vue.jsの学習メモ。 分かりやすい解説記事がありました！ gihyo.jp 入門書 「JavaScript フレームワーク入門」の第4章「Vue.js」を読み終えました。 この本の説明とサンプルコードは、Vue.jsのバージョン1だったので、最新のバージョン2で動かすとたまにエラーが出ます。 バージョン2で動くようにコードを修正してみましたが、ブログにまとめるのは時間がかかり面倒なので、とりあえず次へ進みたいと思います。 公式サイト Vue.jsの公式ガイドを読み終えました。 過不足なく説明されているかんじですが、実際の使い方について、いまいち分かりづらかった？です。 まとめ 入門書と公式サイトの隙間を埋める情報として、サンプルコードがたくさんある説明記事があったので助かりました。 「Vue.js入門 ―最速で作るシンプルなWebアプリケーション」を読んで、Vue.jsの使い方について
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-1-1 JavaScriptにおけるMVC（MVVM） MVCパターン MVVMパターン MVCとMVVMの違い データバインディングとは？ まとめ 4-1-1 JavaScriptにおけるMVC（MVVM） JavaScriptフレームワークの「Vue.js」は、MVCパターンの派生であるMVVMパターンで設計されています。 まず最初に、 MVCパターン MVVMパターン という用語の意味を確認しましょう。 MVCパターン (p.114) 昨今、大規模なアプリケーション開発で多用されるようになっているのが「MVCフレームワーク」と呼ばれるものです。 これはアプリケーションのプログラムを 「Model（モデル）」 「View（ビュー）」 「
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-1 Vue.jsの基本 公式サイト 日本語ドキュメント 参考資料 Googleトレンド まとめ 4-1 Vue.jsの基本 (p.113) Vue.jsは、MVVM（Model-View-ViewModel）アーキテクチャーに基づくフレームワークです。 値をバインドしリアルタイムに更新する仕組みはとてもシンプルです。 この種のシステムの入門として最適なVue.jsの使い方をここで覚えましょう。 JavaScriptを使ってWebページ（Webアプリ）を作るとき、JavaScriptのフレームワークを使うと便利です。 JavaScriptフレームワークには、「React」「Angular」など、いろいろあります。 とりあえず、使い方が簡単な「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
