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実行環境は「ホストオブジェ

JavaScriptをネタにした面白いマンガがありました。 www.comico.jp 結構話題になっていたみたいですねｗ nlab.itmedia.co.jp 作者の村田川さん 村田川 (@muratagawa) | Twitter mrtgw.me 村田川さんの作品 omocoro.jp 「ドンジニア」（ドジなエンジニア？）もシュールなかんじで結構オモロイですｗ マンガでわかるJavaScript 作者: クロノス・クラウン柳井政和 出版社/メーカー: 秀和システム 発売日: 2015/04/14 メディア: Kindle版 この商品を含むブログを見る

JavaScriptの学習メモ。 今日は「開眼！JavaScript」の第1章を読んでみます。 jsstudy.hatenablog.com 1.1　オブジェクトの生成 オブジェクトとは何か？ オブジェクトの初期化方法 オブジェクトにプロパティを追加 オブジェクトにメソッドを追加 Stringオブジェクトの生成 コンストラクタ関数とは？ コンストラクタ関数の作り方 自作コンストラクタ関数の使いどころ JavaScriptの特徴 まとめ 1.1　オブジェクトの生成 (p.1) JavaScriptの世界では、オブジェクトが王様です。 この世界では、ほぼすべてがオブジェクトそのものか、もしくはオブジェクトのようにふるまいます。 オブジェクトを理解すると、きっとJavaScriptを理解できることでしょう。 まずはJavaScriptのオブジェクト生成方法を調べてみましょう。 オブジェクトは、名

JavaScriptで学ぶ「関数型プログラミング」の本がありました。 「JavaScript関数型プログラミング」という本です。 本屋で立ち読みしたら、面白そうだったので買っちゃいましたｗ JavaScript関数型プログラミング 複雑性を抑える発想と実践法を学ぶ (impress top gear) 作者: Luis Atencio,株式会社イディオマコムニカ加藤大雄 出版社/メーカー: インプレス 発売日: 2017/06/09 メディア: 単行本（ソフトカバー） この商品を含むブログを見る 目次 ■Part1　発想の転換とキーコンセプト 第1章　関数型で思考する 第2章　関数型言語としてのJavaScript ■Part 2　関数型のデザインとコーディング 第3章　データ構造の数を減らし、操作の数を増やす 第4章　モジュール化によるコードの再利用 第5章　複雑性を抑えるデザインパター

JavaScriptの学習で、「開眼！ JavaScript」という本を読んでみます。 jsstudy.hatenablog.com 学習のポイント 学習のポイント この本は、わりと薄くてページ数が少ないので、読むだけなら２～３日で読めます。 この本の内容は、「付録A レビュー」にまとめられています。 なので、先にこの部分を見て、何が学習のポイントか？押さえておきたいです。 (p.163) 付録A　レビュー 本書を読んだ結果、あなたが学んでいるはずのポイントを次に列挙しています。 それぞれのポイントを読んで、わからないポイントがあれば、解説しているそれぞれのトピックに戻ってください。 (1) オブジェクトは、名前を与えられたプロパティとその値によって構成される。 (2) JavaScriptでは、ほぼすべてがオブジェクトのようにふるまう。 オブジェクトはもちろん、プリミティブ値もオブジェク

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第５章を読んでみます。 jsstudy.hatenablog.com 5.2 プルダウンメニューで指定ページへ サンプルコード 実行結果 querySelectorメソッド 書式：CSSセレクタで要素を取得する querySelectorメソッドの使用例 CSSセレクターとは？ DOMとは？ HTMLタグのブール属性の変更 ブール属性とは？ プルダウンメニューでonchangeイベントが発生するタイミング 別ページのジャンプ 書式：URLを書き換える（新しいURLを指定する） まとめ 5.2 プルダウンメニューで指定ページへ (p.200) 別のページに移動するためにURLを書き換えること。 HTMLの操作で、フォーム関連のタグでよく使われるブール属性の設定や、id属性のないHTML要素を取得する

「RxJS」（Reactive Extensions for JavaScript）に関するメモ。（随時更新予定） RxJSは、JavaScriptで「関数型リアクティブプログラミング」（FRP, functional reactive programming）を行うためのライブラリーです。 情報源 検索 公式サイト ネットの記事 2017年 2016年 2015年 2014年 2010年 書籍 考察 情報源 「RxJS」に関するGoogle検索、公式サイト、ネットの記事、書籍などのまとめ。 検索 RxJS - Google 検索 公式サイト ReactiveX RxJS API Document GitHub - Reactive-Extensions/RxJS: The Reactive Extensions for JavaScript ネットの記事 2017年 (2017/02/1

JavaScript学習で、「DOM」という用語がよく出てきます。 DOMについてまとめておきます。（メモ） DOMとは？ APIとは？ DOMツリーとは？ DOMツリーのノード DOMの操作 DOMを操作するためのライブラリー JavaScriptでDOM操作 jQueryでDOM操作 MVCフレームワークでDOM操作 Virtual DOM（仮想DOM）の登場 DOMリファレンス まとめ DOMとは？ DOM - Google 検索 DOM（ドム）は、「Document Object Model」の略です。 JavaScriptを使って、ブラウザーのDOMを操作すると、HTMLを書き換えることができます。 ↑こっちのドムではありませんｗ Document Object Model - Wikipedia Document Object Model (DOM) は、HTML文書やXML文

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第５章を読んでみます。 jsstudy.hatenablog.com 5.1 時間の計算とタイマー Dateオブジェクトの日時を設定する方法 サンプルコード 実行結果 Dateオブジェクトに現在の日時を設定する方法 Dateオブジェクトに未来・過去の日時を設定する方法 Dateオブジェクトの専用メソッドを使って日時を設定する Dateオブジェクトを初期化するときに日時を設定する 書式：日時を設定した状態でDateオブジェクトを初期化する Dateオブジェクトのコンストラクタ関数に引き渡す引数の書式 UNIXタイムを利用した時間の計算 getTime()メソッド UNIXタイムを利用して時間の引き算 タイマー処理（一定時間で繰り返す） サンプルコード 実行結果 setTimeout()メソッドの使い

JavaScriptの学習メモ。 今日は「関数型プログラミングの基礎 JavaScriptを使って学ぶ」の第１章を読んでみます。 jsstudy.hatenablog.com 「ラムダ式」という記法（書き方）の発明 数学者、アロンゾ・チャーチ Alonzo Church ラムダ式 無名関数 関数宣言の問題点 関数定義と関数適用を分ける書き方 まとめ 「ラムダ式」という記法（書き方）の発明 (p.15) 数学者、アロンゾ・チャーチ Alonzo Church チューリング機械が発表されたほぼ同時期に、アメリカの数学者であるアロンゾ・チャーチは、全く別のアプローチで「計算」を定義しました。 それは「λ（ラムダ）計算」と呼ばれる数学の理論です。 アロンゾ・チャーチ - Wikipedia アロンゾ・チャーチ（Alonzo Church, 1903年6月14日 - 1995年8月11日）はアメリカ

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.4 端数処理 サンプルコード 実行結果 Mathオブジェクト Mathオブジェクトは初期化しないで使う Mathオブジェクトの主なプロパティーとメソッド 小数点第◯位で切り捨てるアルゴリズム 書式：小数点以下を切り捨てる 例：「3.1415」を小数点第2位で切り捨てる計算方法 まとめ 4.4 端数処理 (p.178) 「小数点第○位」で切り捨てるファンクションを作成します。 例では円周率を小数点第2位までで切り捨てて表示します。 足し算、引き算など四則演算は記号を使えばできますが、それ以外の計算には「Mathオブジェクト」というオブジェクトを使用します。 この実習で作成するファンクションでは、このMathオブジェクトのメソッ

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.3 型変換（キャスト） サンプルコード 実行結果 型変換（キャスト） まとめ 4.3 型変換（キャスト） (p.169) 表示させるデータの文字数を合わせたり、ファイルの並び順を揃えたりするのに、1桁の数字の前に0をつけて桁を揃えることがよくあります。 具体的には「1」「2」という数字をそれぞれ「01」「02」にする処理です。 どうすればこの機能を実現できるか、考えながら進めましょう。 サンプルコード 以下の内容を「index.html」というファイル名で保存します。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>4-03_digit</title>

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.2 Dateオブジェクト サンプルコード　その１ 実行結果　その１ サンプルコード　その２ 実行結果　その２ Dateオブジェクト Dateオブジェクトは初期化する必要がある 初期化とは？ new演算子とは？ コンストラクタ関数とは？ Dateオブジェクトの使い方 オブジェクトには初期化するものとしないものがある まとめ 4.2 Dateオブジェクト (p.160) この実習ではDateオブジェクトという、日時の取得・設定・計算をするオブジェクトを使用します。 今回は取得した日時を加工して、見慣れている12時間表記にしましょう。 Dateオブジェクトの利用方法と、取得したデータの加工がポイントです。 サンプルコード　その１

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。 jsstudy.hatenablog.com 4.1 フォームの入力内容を取得する サンプルコード 実行結果 イベントとは？ 書式：要素にイベントを設定する イベントが発生する場所 イベントハンドラーとは？ 基本動作のキャンセル フォームの入力内容を読み取る 書式：入力内容を読み取る まとめ 4.1 フォームの入力内容を取得する (p.150)　入力内容の取得とイベント これまでの実習では、HTMLページが読み込まれた瞬間に、自動的に処理が開始されるプログラムを書いてきました。 今回のサンプルでは、「イベント」を利用してプログラムが動作するタイミングを制御します。 [検索]と書かれたボタンがクリックされたら、テキストフィールドに入力されている内容を読み取って、それをHTML

以前、JavaScript学習のカリキュラムを考えてみましたが、導入部分を改善できるかも？と思いました。 当初のカリキュラム案 改善点 Visual Studio Code ＋ Node.js 基本事項 プログラミング・パラダイムの説明 プログラムの構成要素 データ構造 制御構造 関数 時間の見積り 環境構築 講義＋演習 シミュレーション 当初のカリキュラム案 jsstudy.hatenablog.com 改善点 改善案を思いつくきっかけになったのが、こちらの記事。 mizchi.hatenablog.com 提案: 初心者にNode.jsから教える 「なるほど」と思ったのは、JavaScriptの実行環境として、「ブラウザー」を使うのではなく「Node.js」を使う点です。 最初のうちは、JavaScriptのコードを書いて、実行結果を確認するのに、わざわざブラウザーを起動しなくてもいい

JavaScriptを練習するときブラウザーで実行していました。 JavaScript（JS）のコードは、Visual Studio Code（VSCode）で書いています。 VSCode上でJSを実行して、動作確認する方法がありました。（メモ） 前提（準備） Windowsパソコンの用意 Node.jsの用意 Visual Studio Codeの用意 Visual Studio Codeのデバッガー Node.jsの設定 ステップ実行 用語 まとめ 前提（準備） 今作業している環境は以下のとおりです。 Windows7（32ビット版） Node.js （バージョン 0.12.0） Visual Studio Code （バージョン 1.11.2） を使っています。 Windowsパソコンの用意 予算あり（多） → ThinkPad X1 Carbon 16GBモデルがイイかな？ 予算あ

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.11　オブジェクト サンプルコード 実行結果 オブジェクト 連想配列とは？ JavaScriptのオブジェクトは連想配列？ ドット演算子とは？ オブジェクトの作り方 オブジェクトを構成する要素の名称 オブジェクトからデータを読み取る・書き換える オブジェクトのメソッド オブジェクトの繰り返し処理 オブジェクトのイテレーター イテレーターとは？ map()メソッド まとめ 3.11　オブジェクト (p.135) 配列に続いて新しいデータの種類「オブジェクト」を紹介します。 「オブジェクトって、windowとかdocumentとか、いままで見てきたオブジェクトのこと？」 そう、同じです……基本的には。 ただ、ここでは複数のデータ

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.10　配列 サンプルコード 実行結果 配列 JavaScriptの配列 配列の作り方 配列からデータを読み取る 配列のメソッド DOM操作 DOMとは？ document.createElementメソッド textContent プロパティ appendChild()メソッド まとめ 3.10　配列 (p.124) 変数に代入する「データ」として、いままで文字列、数値、ブール値などを使ってきましたが、今回は新しいデータの種類として「配列」を紹介します。 これまで使用してきた各種データは、変数１つにつき１つのデータを保存できるだけでした。 配列を使うと、複数のデータを１つにまとめてグループ化することができます。 サンプルコー

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.9　算術演算子 FizzBuzzとは？ サンプルコード 実行結果 算術演算子 剰余演算子 % 冪乗演算子 ** まとめ 3.9　算術演算子 (p.119) FizzBuzzというゲームをプログラムで実現してみましょう。 これまでも +、-、*と、計算のための記号をあまり詳しく説明せずに使ってきましたが、この実習でも新たに割り算の余りを算出する%記号を使います。 FizzBuzzとは？ FizzBuzzとは、何人か組になって、「１」「２」と順番に数字を言っていき、３で割り切れる数字のときは「Fizz！」、５で割り切れるときは「Buzz！」、３でも５でも割り切れるときは「FizzBuzz！」と叫ぶゲームです。 Fizz Buzz