[B! JavaScript] [18ページ] jsstudyのブックマーク

とっても短いJavaScript入門と関数型プログラミングへの入り口 - Qiita

Javascriptのローカルスコープは関数スコープだ。 http://www.ntt pc.co.jp/yougo/ローカルスコープ.html ローカルスコープ ... コンピュータ・プログラムの中では、変数や関数といった機能が使われている。この変数や関数を参照できる範囲が、プログラムの一部に絞られた状態をローカルスコープ（local scope）という。 Javascriptは結構異質で、関数ブロックの範囲がローカルスコープになる。ブロックスコープ (if文やfor文)の範囲とローカルスコープとは(ES2015(JavaScriptの中核仕様を抜き出して標準化した規格)以前は)全く何の関係もない1。注) ES2015では、const, let宣言が登場した。これは、ブロックスコープで有効な変数宣言。varはいらない子。なので、constかletを使おう。コードがだいたい読める！ほぼ

jsstudy 2017/07/27

Javascriptは結構異質で、関数ブロックの範囲がローカルスコープになる。単純にローカルスコープの手段が関数ブロックしかないのだから、functionをただの箱だと思って使う方法。 → JSの違和感はスコープにあった？

リンク

JavaプログラマのJS忘備録[ES5] - Qiita

はじめに現在JavaScriptを学習中のJavaプログラマです。既存の知識ベースを元にJavaScriptを体系的に学習しました。そこで学習した事のうち、Javaとの差分を記録しました。今後も知識が増えるたびに随時追記していきます。本記事のECMAScriptのバージョンについて ECMAScriptはEcma internationalが仕様を策定するJavaScriptの標準です。このECMAScriptに則ることでその仕様に準拠する環境での動作が保証されます。 Babelといったトランスパイラの導入も含め、ES6の構文についての記事も別に書こうと考えています。今回は、ES5までのJavaScriptについてまとめています。 ECMAScript5のstrict mode コードの先頭行に以下のディレクティブを書くと、strict modeとなります。サポートされてい

jsstudy 2017/07/23

JSまとめ　参考文献パーフェクトJavaScript

JavaScript

リンク

Vue.jsでGet/Setの作成　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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( 引数 ){……処理……} } } プロパティに直接メ

jsstudy 2017/07/20

Vue.jsのComputedプロパティの使い方　getとsetで値の取得と更新ができる

リンク

Vue.jsのComputedプロパティ　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.com 4-3-1　Computedプロパティ Computedプロパティとは？ SwiftのComputedプロパティ HTML CSS JavaScript 実行結果まとめ 4-3-1　Computedプロパティ (p.132) Vue.jsには、ViewModelをより深く使いこなすための機能が多数盛り込まれています。基本的な使い方がわかったところで、覚えておくと役に立つVue.jsの機能について一通り説明していきましょう。まずは、Computedプロパティ（算出プロパティ）についてです。 Computedプロパティとは？プロパティは、基本的に値を保管するだけのものですが、場合によっては値に何らかの処理を施したいこともあります。単純に保

jsstudy 2017/07/19

Vue.jsの計算プロパティ　Swiftにもある機能　中身はメソッドだけど、プロパティとして利用（アクセス）する。　アクセサー（ゲッター/セッター）と違い、値をキャッシュしており、名前が１つで済むところが便利？

リンク

Vue.jsのフィルターを使う　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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では、仕様が変更されていました。（参考）

jsstudy 2017/07/18

値を表示する前にちょっとした加工を行う＝フィルター機能を使えばOK　Vue.jsバージョン2では、フィルターの仕様が変わったので使い方に注意！

リンク

Vue.jsでJavaScript式を使う　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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

jsstudy 2017/07/16

Vue.jsのマスタッシュタグでJavaScript式を使える。処理を自動的に挿入するフック（インスタンスライフサイクルフック）が用意されている。

リンク

Vue.jsでHTMLの表示　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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では、やり方が違いました。本書「

jsstudy 2017/07/15

Vue.jsでHTMLタグを含む文字列を表示する方法　v-htmlディレクティブを使えばOK

リンク

連載: IBM Watson Workspace #鬼わかアプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか解説（前編）

IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant techno logies such as generative AI, data science, AI, and open source.

jsstudy 2017/07/15

モジュール、コレクション、プロキシーその他多数の機能を利用する　Promiseを活用してコールバック地獄を解消ｗ

JavaScript

リンク

連載: IBM Watson Workspace #鬼わかアプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか解説（前編）

IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant techno logies such as generative AI, data science, AI, and open source.

jsstudy 2017/07/15

プロパティーと継承について理解する　プロトタイプチェーンは相変わらず　Swiftと同様にComputed Propertyが使える　アクセサー＝オブジェクトのハンドリングが簡単に書ける

JavaScript

リンク

連載: IBM Watson Workspace #鬼わかアプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか解説（前編）

IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant techno logies such as generative AI, data science, AI, and open source.

jsstudy 2017/07/15

並列処理は関数型で書く　アロー関数やジェネレーター関数などの関数型要素を使用する　無限ストリームの概念は、リアクティブ・プログラミングなどの他の興味深い ECMAScript ベースの手法の中核となっています。

JavaScript

リンク

連載: IBM Watson Workspace #鬼わかアプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか解説（前編）

IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant techno logies such as generative AI, data science, AI, and open source.

jsstudy 2017/07/15

ES6への移行戦略　ブロック・スコープ　ECMAScript 6 に用意されている新仕様　これまで 10 年近く、開発者を苦しめていた欠陥が修正されています。

JavaScript

リンク

Vue.jsでイべントとメソッドの利用　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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

jsstudy 2017/07/15

Vue.jsでイベントを扱う方法　「v-on」ディレクティブを使えばOK

リンク

HTML側からVueに値を設定する　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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に伝える方

jsstudy 2017/07/14

双方向のデータバインディング（データ結合）には、「v-model」ディレクティブを使えばOK。　リアルタイムの書き換えが超簡単！→MVVMパターンの長所？

リンク

Vueオブジェクト　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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

jsstudy 2017/07/14

Vue.jsの基本的な使い方　HTMLファイルにマスタッシュタグを下記、Vue.jsで置換する。Vueオブジェクトを作るコンストラクタ関数をカスタマイズする設定情報を書くのがプログラマーの役割 → APIリファレンスを見ておく。

リンク

技術評論社の連載記事「Vue.js入門 ― 最速で作るシンプルなWebアプリケーション」が分かりやすい！ - JavaScript勉強会

Vue.jsの学習メモ。分かりやすい解説記事がありました！ gihyo.jp 入門書「JavaScript フレームワーク入門」の第4章「Vue.js」を読み終えました。この本の説明とサンプルコードは、Vue.jsのバージョン1だったので、最新のバージョン2で動かすとたまにエラーが出ます。バージョン2で動くようにコードを修正してみましたが、ブログにまとめるのは時間がかかり面倒なので、とりあえず次へ進みたいと思います。公式サイト Vue.jsの公式ガイドを読み終えました。過不足なく説明されているかんじですが、実際の使い方について、いまいち分かりづらかった？です。まとめ入門書と公式サイトの隙間を埋める情報として、サンプルコードがたくさんある説明記事があったので助かりました。「Vue.js入門 ―最速で作るシンプルなWebアプリケーション」を読んで、Vue.jsの使い方について

jsstudy 2017/07/13

Vue.jsのチュートリアル。そのうち連載記事が書籍化されるかも！？

リンク

Node.js with WebRTC DataChannel

東京Node学園祭2016 1日目のLT資料です。Node.js で WebRTC DataChannel をつかってみた話

jsstudy 2017/07/12

リンク

JavaScriptにおけるMVC（MVVM）　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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（ビュー）」「

jsstudy 2017/07/11

MVVMは「データバインディング」＝ViewとModelの間の情報伝達を管理する仕組みが便利になってます。Vue.jsで手軽にWebアプリを作りたいです！

リンク

Vue.jsの基本　【JavaScript フレームワーク入門】 - JavaScript勉強会

Vue.jsの学習メモ。今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatena blog.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」など、いろいろあります。とりあえず、使い方が簡単な「

jsstudy 2017/07/11

Vue.jsは、MVVM（Model-View-ViewModel）のJSフレームワーク。　手軽にWebアプリを作ってみる。

リンク

ホストオブジェクト　【開眼！JavaScript】 - JavaScript勉強会

JavaScriptの学習メモ。今日は「開眼！JavaScript」の第2章を読んでみます。 jsstudy.hatena blog.com 2.9　ホストオブジェクトネイティブオブジェクトホストオブジェクトグローバルオブジェクト windowオブジェクトのプロパティを列挙 window.documentオブジェクトのプロパティを列挙 Node.jsのホストオブジェクト JavaScriptのグローバルオブジェクトを調べる方法ホスト環境とは？「ホスト」の意味ホストオブジェクトは外部ライブラリー？いろいろなホストオブジェクトまとめ 2.9　ホストオブジェクト JavaScriptのオブジェクトについて、ネイティブオブジェクトホストオブジェクトグローバルオブジェクトという用語が出てきます。 (p.47) WebブラウザなどのJavaScript実行環境は「ホストオブジェ