2/29(Sat)

今日の生放送

Backbone.js 開発入門

Backbone.js 開発入門 - 概要 -

第1回:2016年12月15日公開

60min

Backbone.js 開発入門 - 概要 -

おためし受講する(5分)

コース概要

この授業では、フロントエンドJavaScriptフレームワークBackbone.jsの開発手法を学びます。

jQueryの経験のある方で、構造化されたWebアプリの開発や、新しいJavaScriptの文法である『ECMAScript 2015』での開発に興味がある方にオススメです。

Backbone.jsの概要や基本的なコンポーネントの使用方法をおさえた上で、『ECMAScript 2015』の構文や機能を取り入れた開発方法を学んでいきます。

こんな人にオススメ

jQuery(Ajax, DOMの操作)で開発した経験のある方

担当の先生

パーソナリティ

  • 徳田 葵

    徳田 葵

    スクー放送部

  • 田原 彩香

    田原 彩香

    スクー放送部

参加したい受講生 : 438

カテゴリー

タグ

サンプルファイル

月額980円で、4,600本以上の授業が見放題

授業リスト

Backbone.js 開発入門 - 概要 -

2016年12月15日公開

60min.

◼︎ 授業概要

  1. 目的や背景について
  2. 実行環境導入
  3. 基本コンポーネント(View、Model)

  • 自己紹介
  • 01:30
  • コースの全体の流れ
  • 00:30
  • アジェンダ
  • 00:53
  • 目的や背景について
  • 00:07
  • 【先生からの質問】使用したことがあるJSライブラリ、フレームワークはありますか?
  • 02:03
  • 構造化とフレームワーク導入
  • 02:15
  • JSフレームワークの比較
  • 01:39
  • 実行環境導入
  • 00:07
  • Backbone.js 実行環境と歴史
  • 01:17
  • 【先生からの質問】次のA〜Dの中で、正常実行する JSライブラリの読み込み順序はどれだと思いますか?
  • 02:26
  • 依存ライブラリ導入例
  • 00:45
  • 開発スタイルと主要コンポーネント
  • 02:56
  • サンプルソース・ファイル
  • 00:52
  • 基本コンポーネント
  • 01:38
  • サンプルアプリの分析・設計
  • 02:58
  • jQueryの実装コード例
  • 02:05
  • Modelコンポーネント実装コード例
  • 02:16
  • Viewへ注入
  • 03:31
  • Viewコンポーネント実装コード例
  • 03:57
  • イベント発生(状態変更)と状態監視
  • 03:34
  • リファクタリング
  • 03:26
  • 【先生からの質問】図の①②に、該当するものは、AとBどちらだと思いますか?
  • 04:54
  • まとめ
  • 01:18
  • Q:コールバックって処理した結果をそれ(オブジェクトや関数)に渡すことでしたでしょうか?
  • 01:04
  • Q:initialize JavaやPHPでいうコンストラクタ?
  • 00:57
  • Q:ModelやViewの切り出し方の指針のようなものはありますか?
  • 01:03
  • Q:backbone.jsを勉強するのにおすすめの日本語サイトや教科書はありますか?
  • 01:15
  • Q:node.jsを学ぶ上で、backbone.jsも学んだ方が表現力が上がりますか?
  • 00:44
  • Q:Backbone.jsをお仕事で使ったとおっしゃっていたのですが、どのようなお仕事だったのでしょうか?お話しできる範囲で構わないのでお聞きしたいです。
  • 01:04
  • Q:まだ日本語の本が出ていないと思いますがreact nativeもお使いになるようですがやはりエンジニアは英語サイトは必須ですか?
  • 00:55
  • Q:BackboneはControllerを使わないようなWebアプリ開発に最適なのでしょうか?
  • 00:51
  • Q:jsフレームワークは、実務上複数使えないとやはり厳しいでしょうか?
  • 01:59
  • Q:Backboneは表現力をあげるためのものですか?
  • 01:01
  • お知らせ

スライド資料

Backbone.js 開発入門 - ECMAScript 2015 導入 -

2017年1月4日公開

60min.

◼︎ 授業概要

  1. ユーザ操作イベント反応
  2. ECMAScript 2015(ES6)

  • 自己紹介
  • 01:22
  • アジェンダ
  • 00:40
  • 参考情報
  • 01:46
  • 【前回の確認問題】図の123に、該当するものを選択してください。
  • 03:25
  • ECMAScript 2015(ES6)
  • 01:30
  • 変数、定数宣言
  • 01:55
  • 【確認問題①】①の箇所で、正常に実行するコードを、選択してください。
  • 02:55
  • スコープ比較
  • 01:42
  • 【確認問題②】以下のコードを実行した場合の結果を、選択してください
  • 03:13
  • 【確認問題③】以下のコードを実行した場合の結果を選択してください
  • 02:07
  • クラス構文
  • 02:56
  • アロー関数
  • 02:43
  • Template文字列
  • 02:50
  • 【確認問題④】以下のコードの実行時、コンソールの出力結果を選択してください
  • 04:24
  • コンポーネント関係例
  • 00:49
  • Modelコンポーネント定義比較
  • 02:05
  • コンポーネント関係図
  • 00:19
  • Viewコンポーネント定義比較
  • 02:06
  • イベント発生
  • 01:14
  • Reactクラス定義例
  • 01:45
  • まとめ
  • 04:42
  • Q:生のJSは配列などほんとに基礎しかやらず、いきなりバックボーンやjquery、reactなどを使って、 それで問題なくWEBアプリが作れれば生のJSはそれ以上やる必要はないでしょうか? それとも生のJSでないとできない事や、ライブラリやフレームワークで問題が起きた時に、 生のJSでどう作られているのか確認できないとだめなのでしょうか?
  • 02:43
  • Q:render()やdefaults()などはarrow関数を使ってないのですが、使う箇所と使わない箇所の違いは何でしょうか。
  • 02:58
  • 次回授業について

スライド資料

Backbone.js 開発入門 - webpack の利用 -

2017年1月4日公開

60min.

◼︎ 授業概要

  1. モジュール分割
  2. webpack の利用

  • 自己紹介
  • 02:16
  • アジェンダ
  • 01:17
  • 【前回の確認問題】アロー関数として正しいものを1つ選択してください。
  • 03:12
  • サンプルソース・ファイルについて
  • 00:31
  • サンプルアプリ① 分析・設計
  • 04:24
  • ユーザ操作イベント対応指定
  • 01:31
  • Viewクラス、eventsプロパティ定義
  • 01:42
  • サンプルアプリ② 複数イベント
  • 01:05
  • 複数イベント対応例
  • 01:46
  • JSファイル分割例
  • 02:09
  • 【確認問題】正常実行する JSファイルの読み込み順序を2つ選択してください。
  • 04:13
  • JSファイルの統合
  • 02:00
  • 分割JSファイル分割(依存分析、結合)
  • 01:57
  • バンドルJSファイルの生成過程
  • 01:31
  • Step① ライブラリのダウンロード
  • 00:48
  • Step② モジュール構文
  • 01:12
  • モジュール構文例① コンポーネント定義
  • 00:52
  • モジュール構文例② index.js
  • 00:59
  • モジュール構文例③ オプション
  • 00:36
  • モジュール構文例④ index.js
  • 00:47
  • Step③ モジュール・バンドル・ツール使用
  • 01:17
  • webpack設定ファイルの編集
  • 01:24
  • webpackコマンド実行
  • 00:59
  • HTMLからバンドルJSファイル読み込み
  • 02:41
  • まとめ
  • 04:16
  • Q:ブラウザを再描画した後に値を保持させるためには、どのような仕組みが必要でしょうか。
  • 01:35
  • Q:なぜgulpなどを使わなくてよくなったのでしょうか?どのような違いや利点が、変更することであるのか具体的に聞きたいです。
  • 03:59
  • Q:こちらのやり方のほうがどんなメリットがあるのでしょうか?シンプルになったのがメリットのようですが、早くて、簡単なのですかね?
  • 02:16
  • 次回授業について

スライド資料

Backbone.js 開発入門 - template の利用 -

2017年1月11日公開

60min.

◼︎ 授業概要

  1. template の利用
  2. collection

  • 自己紹介
  • 01:40
  • アジェンダ
  • 01:29
  • 【前回の確認問題】正しいモジュール構文を2つ選択してください。
  • 04:16
  • サンプルソース・ファイル
  • 00:34
  • サンプルアプリ① Template設計
  • 04:10
  • ステップ① Handlebars Templateファイル
  • 03:57
  • ステップ② Viewコンポーネント(Template関数)
  • 01:50
  • ステップ③ Templateファイルから関数に変換(webpack)
  • 01:06
  • ステップ③ webpack実行環境
  • 00:55
  • 【先生からの質問】圧縮されたバンドルJSが生成されるwebpackコマンドを2つ選択してください。
  • 03:40
  • サンプルアプリ② collection
  • 04:44
  • サンプルアプリ② コンポーネント関連図
  • 00:53
  • ステップ① Modelクラス定義例
  • 00:48
  • ステップ② Templateファイル定義例
  • 02:09
  • ステップ③ Viewクラス定義例 全体
  • 00:20
  • Viewクラス定義例 パート①
  • 01:35
  • Viewクラス定義例 パート②
  • 03:11
  • Viewコンポーネント生成イメージ
  • 01:29
  • ステップ④ index.js コード例
  • 01:13
  • サンプルアプリ③ 要素の削除
  • 03:14
  • Collection内の要素削除 修正行程
  • 01:11
  • ステップ① Model id属性追加
  • 00:48
  • ステップ② Template削除ボタン
  • 00:41
  • ステップ③ Viewイベント反応
  • 03:24
  • まとめ
  • 03:08
  • 次回授業について
  • 01:20
  • Q:「鷹揚」の意味は?
  • 01:29
  • Q:もう実務でES6つかっても問題内容ですが、 良い本や初心者にもわかるように解説しているサイトなどありませんでしょうか? 難しいサイトばかりで、サイ本なども、ES6に対応していないようで困っています。

スライド資料

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ