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フレームワークの違いを把握すると分かりやすいでしょうか？ 近所の本屋にも置いてあったので、パラパラと眺めてみました。

ChromeやSafariなどのモダンブラウザーは、ほぼES2015の機能をカバーしているようなので、今後は生でJavaScriptを書くときでもES2015で良いでしょうか？ ↓ブラウザーの対応状況一覧表 ECMAScript 6 compatibility table ↓回答者のアドバイスが参考になります。 teratail.com 今でもES2015だと不具合が生じる事態もあるかもしれませんが、一応基本はES2015にしておき、必要に応じてトランスパイラーを使って後方互換性を維持する作戦で考えてみたいと思います。 （Webアプリは、対応ブラウザーさえ明記しておけば、何とかなるかな？） で、ES2015の本をチラ見してみました。 「初めてのJavaScript 第3版」という本です。 初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発 作者: Ethan Brow

中国ではWebブラウザーで動作するHTML5ゲームが流行しているそうです。 note.mu 2014年には北京でEgret Technologyという会社が創業し、HTML5に特化したゲームエンジンEgret Engineを開発します。Egret TechnologyはEgret Engineに対応したゲーム開発ツールを立て続けにローンチします。 技術者の方々の中にはCocos 2d-jsを聞いたことはあっても、Egret Engineを知らないという方もいると思います。理由は簡単でEgret Engineのツールには中国語版しかないものが多く、マニュアルも一部しか英語化されていないためです。日本語の技術情報にいたっては皆無です。 今では一通りゲームを開発できるチュートリアル程度のマニュアルが英語でも整備されていますので、興味のある方は試してみてください。 Egret Developer

最近、関数型プログラミングの基礎知識を学ぶことに時間を割いています。 きっかけは、「関数型プログラミングの基礎 JavaScriptを使って学ぶ」という本でした。 jsstudy.hatenablog.com Haskellに寄り道 「関数型プログラミングの基礎」を読んでいると、ちょいちょい「Haskell」の話が出てきます。 以前、話題になってたのでHaskellの本を読んでみましたが、そのときはあまりよく分かりませんでした。（使う場面もなかったですｗ） 改めて、「Haskellって何だったんだろう？」と思って読み返してみると、「なるほど、そういうことだったのか～」と新たな気付きが得られました。 自分のスキル不足のため、Haskellで実用的なアプリを作る機会はないだろうけど、それでもHaskellは良くできたパズルみたいなかんじで、ちょっとしたコードを書いて練習してみるだけでも楽しめま

「関数型プログラミングの基礎 JavaScriptを使って学ぶ」のコードをVisual Studio Code上で試そうとしたら、エラーメッセージが表示されて動きませんでした。 原因は、Node.js v0.12.0を使っていたのですが、「--harmony」オプションを有効にしてNodeを動作させないと、JavaScript ES2015のアロー関数（=>）が使えないことでした。 解決策の1つは、Node.jsのバージョンを上げることでした。 以下、解決方法をメモ。（備忘録） アロー関数とは？ Node.jsの歴史 --harmonyオプション Node.jsのバージョンアップ エラー解決 アロー関数のサンプルコード Node.js v0.12.0（harmonyモードなし）で、ES2015のアロー関数が動かない！ Node.js v6.11.2で、ES2015のアロー関数が動いた！ ま

JavaScriptの勉強で、ES2015の「アロー関数」を使う必要が出ました。 Visual Stuidio Code＋Node.jsでES2015のJavaScriptコードを動かしていますが、ブラウザーでES2015はもうちゃんと動くのでしょうか？ Google Chromeなど、ブラウザーのES2015対応状況を調べてみました。 最新のモダンブラウザーは、ほぼES2015に対応してましたが、「末尾再帰の最適化」という機能だけ未対応のブラウザーが多かったです。（2017年8月現在） ECMAScript6（ES6、ES2015）のブラウザー対応一覧表 末尾再帰とは？ 末尾再帰の最適化 末尾再帰の解説記事 関数型プログラミング まとめ ECMAScript6（ES6、ES2015）のブラウザー対応一覧表 各ブラウザーのES2015対応状況が一覧表になってました。 ECMAScript

JavaScriptの練習で、Node.jsを使っています。 Node.jsは、バージョンによって使える機能が違います。 Node.jsのバージョンの違い～Node.jsの歴史についてメモ。（備忘録） Node.jsのバージョン一覧 バージョンによる違い 安定版（LTS） harmonyモード（ハーモニーオプション） Node.jsのバージョン変更 (1) コマンドプロンプト（黒い画面）を起動します。 (2) インストール可能なversionの一覧を表示します。 (3) 指定したversionをインストールします。 (4) 指定したversionを使用します。 (5) Node.jsのバージョンを確認します。 まとめ Node.jsのバージョン一覧 Node.jsの公式サイトで、バージョンの一覧が公開されていました。 リリース一覧 | Node.js 「Node.js 6.x」、「Node

Windows7でNode.jsを使い、JavaScriptの練習をしています。 コマンドプロンプト（黒い画面）で、Node.jsの対話モードを起動＆終了する方法をメモ。 Node.jsのインストール Node.jsの対話モード（REPL）とは？ Node.js 対話モードの起動 Node.js 対話モードの終了 まとめ Node.jsのインストール 前提：WindowsパソコンにNode.jsをまだインストールしてない場合は、インストールしておきます。 （参考） nodistでWindowsにNode.jsをインストールする 【読書メモ】 - JavaScript勉強会 nvm（Node Version Manager）でWindowsにNode.jsをインストールする - JavaScript勉強会 Node.jsの対話モード（REPL）とは？ JavaScriptの実行環境の１つであ

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の使い方について