Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに 現在JavaScriptを学習中のJavaプログラマです。 既存の知識ベースを元にJavaScriptを体系的に学習しました。 そこで学習した事のうち、Javaとの差分を記録しました。 今後も知識が増えるたびに随時追記していきます。 本記事のECMAScriptのバージョンについて ECMAScriptはEcma internationalが仕様を策定するJavaScriptの標準です。 このECMAScriptに則ることでその仕様に準拠する環境での動作が保証されます。 Babelといったトランスパイラの導入も含め、ES6の構文についての記事も別に書こうと考えています。 今回は、ES5までのJavaScriptについてまとめています。 ECMAScript5のstrict mode コードの先頭行に以下のディレクティブを書くと、strict modeとなります。 サポートされてい
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」など、いろいろあります。 とりあえず、使い方が簡単な「
JavaScriptの学習メモ。 今日は「開眼!JavaScript」の第2章を読んでみます。 jsstudy.hatenablog.com 2.9 ホストオブジェクト ネイティブオブジェクト ホストオブジェクト グローバルオブジェクト windowオブジェクトのプロパティを列挙 window.documentオブジェクトのプロパティを列挙 Node.jsのホストオブジェクト JavaScriptのグローバルオブジェクトを調べる方法 ホスト環境とは? 「ホスト」の意味 ホストオブジェクトは外部ライブラリー? いろいろなホストオブジェクト まとめ 2.9 ホストオブジェクト JavaScriptのオブジェクトについて、 ネイティブオブジェクト ホストオブジェクト グローバルオブジェクト という用語が出てきます。 (p.47) WebブラウザなどのJavaScript実行環境は「ホストオブジェ
移転しました http://please-sleep.cou929.nu/20110310.html
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く