mio3io Homemio3io WebSite
書籍詳細｜株式会社 C&R研究所
「Vue.js が楽しい! 」ウェブフロントエンド界隈でこの言葉を耳にすることが増えました。 フロントエンドを取り巻く技術の発展によって、フロントエンドの役割は増え、フレームワークもより身近なものになっています。 この本では「Vue.js ってなに?」「フレームワークってなに?」という基礎概念と導入から、プロダクトに役立つ情報までを、体系的に解説しています。 これから JavaScript のフレームワークを始める方にはもちろん、すでに Vue.js をお使いの方が基礎を学ぶにも最適な1冊です。 チュートリアルや実例集盛りだくさんのサポートページも公開しており、書籍と合わせてお読みいただけます。 ●こんな方におすすめです ・プレーンなJavaScriptや、jQueryだけの開発からステップアップしたい方 ・Vue.jsの公式ガイドを読んではみたものの、専門用語が多く難しかった方 ・コンポ
JavaScriptフレームワークの本 - JavaScript勉強会
Amazonを見ていたら、JavaScriptの新刊がいろいろありました。 その中で気になった本をいくつかメモ。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎 出版社/メーカー: 技術評論社 発売日: 2018/05/09 メディア: 単行本（ソフトカバー） この商品を含むブログを見る Reactなど、最近のJavaScriptフレームワークの使い方を広く浅く紹介してくれています。 Reactを基準として、その他のJSフレームワークの違いを把握すると分かりやすいでしょうか？ 近所の本屋にも置いてあったので、パラパラと眺めてみました。
ブラウザ上にAngular,React,Vue等の環境を一発構築＆開発できる「CodeSandbox」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、面倒な開発環境を一瞬で構築してブラウザ上からWebアプリを気軽に開発＆公開できる無料のWebサービスをご紹介します！ 完全なオープンソースで開発が進められており、React / Angular / Vueなどのプロジェクトを誰でも簡単にプログラミングできる高度なエディタを搭載しているのが特徴です。 【 CodeSandbox 】 ■「CodeSandbox」の使い方 それでは、まず最初に「CodeSandbox」の使い方から見ていきましょう！ サイトにアクセスしたら、画面右上にあるボタンをクリックします。 次に、「React」「Vue」「Angular」などのプロジェクトを選択する画面が開きます。 ここで好きなフレームワークを選んだり、素のJavaScript（Vanilla JS）やCLIツール、GitHubからリポジトリを読み込んだ
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
Vue.jsでGet/Setの作成 【JavaScript フレームワーク入門】 - 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のComputedプロパティ 【JavaScript フレームワーク入門】 - JavaScript勉強会
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 フレームワーク入門】 - JavaScript勉強会
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式を使う 【JavaScript フレームワーク入門】 - JavaScript勉強会
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でHTMLの表示 【JavaScript フレームワーク入門】 - JavaScript勉強会
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 フレームワーク入門】 - JavaScript勉強会
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
HTML側からVueに値を設定する 【JavaScript フレームワーク入門】 - JavaScript勉強会
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オブジェクト 【JavaScript フレームワーク入門】 - JavaScript勉強会
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入門 ― 最速で作るシンプルなWebアプリケーション」が分かりやすい！ - JavaScript勉強会
Vue.jsの学習メモ。 分かりやすい解説記事がありました！ gihyo.jp 入門書 「JavaScript フレームワーク入門」の第4章「Vue.js」を読み終えました。 この本の説明とサンプルコードは、Vue.jsのバージョン1だったので、最新のバージョン2で動かすとたまにエラーが出ます。 バージョン2で動くようにコードを修正してみましたが、ブログにまとめるのは時間がかかり面倒なので、とりあえず次へ進みたいと思います。 公式サイト Vue.jsの公式ガイドを読み終えました。 過不足なく説明されているかんじですが、実際の使い方について、いまいち分かりづらかった？です。 まとめ 入門書と公式サイトの隙間を埋める情報として、サンプルコードがたくさんある説明記事があったので助かりました。 「Vue.js入門 ―最速で作るシンプルなWebアプリケーション」を読んで、Vue.jsの使い方について
JavaScriptにおけるMVC（MVVM） 【JavaScript フレームワーク入門】 - JavaScript勉強会
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 フレームワーク入門】 - JavaScript勉強会
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」など、いろいろあります。 とりあえず、使い方が簡単な「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mio (@mio3io) | Twitter
Amazon.co.jp: 基礎から学ぶ Vue.js: mio: 本
複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ
