$ git clone https://github.com/7nohe/rails-js-lessons.git
$ cd rails-js-lessons
$ docker-compose up -d
- フロントエンドロードマップ2018
- JavaScript
- ECMAScriptとは
- ES5 vs ES6
- ブラウザサポート
- Vanilla JavaScript
- ブラウザでJavaScriptを使ってみよう
- RailsアプリでJavaScriptを導入してみよう
- jQuery
- jQueryとは
- jQueryを使ってみよう
- RailsアプリでjQueryを導入してみよう
- Ajax (非同期通信)
- jQueryの問題点
- Node.jsについて
- パッケージマネージャ (npm/Yarn)
- Babel
- Webpack
- JSフレームワーク
- React
- Angular
- Vue
- MPA vs SPA
- Rails + VueでMPAを作ってみよう
- Nuxt.jsでSPAを作ってみよう
- ルーティング
- 状態管理(時間あれば)
(おまけ)
- タスクランナー
- 型チェック
- テストツール
https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
JavaScriptの標準規格。今は大体ES6に各ブラウザが対応している。
https://qiita.com/rifutan/items/a55f132d4dae7e2f1941
http://kangax.github.io/compat-table/es6/
普通のJavaScriptのこと。Pure JavaScriptとも呼ばれることも。
fusic.co.jp へアクセス、ブラウザのDevToolsを開いて、以下を実行してみよう!
document.getElementsByTagName('h2')[0].innerText = 'hoge'
docker-compose up -d
docker-compose exec web bash
bundle init
- Gemfileの
gem "rails"
のコメントを外す bundle install
rails new .
rails db:create
rails s -b 0.0.0.0
rails g scaffold Todo title:string body:string
rails db:migrate
- app/assets/javascripts/ に
todos.js
を作成 - 以下コードを記述
// DOMコンテンツの読み込みが終わった後に処理を実行
document.addEventListener("DOMContentLoaded", function(event) {
// todoクラスの要素を取得
var todos = document.getElementsByClassName("todo");
// 各要素にクリックイベントを登録
for (var i = 0; i < todos.length; i++) {
todos[i].onclick = function (e) {
this.style = 'display: none;'
};
}
});
app/views/todos/index.html.erb を編集
<p id="notice"><%= notice %></p>
<h1>Todos</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Body</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @todos.each do |todo| %>
<tr class="todo"> <%# <- 追加 %>
<td><%= todo.title %></td>
<td><%= todo.body %></td>
<td><%= link_to 'Show', todo %></td>
<td><%= link_to 'Edit', edit_todo_path(todo) %></td>
<td><%= link_to 'Destroy', todo, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Todo', new_todo_path %>
JSライブラリの一つ。JavaScriptをシンプルに書けたり、便利メソッドが使える。
https://www.w3schools.com/jquery/
- Gemfileに
gem 'jquery-rails'
を追加、bundle install
- app/assets/javascripts/application.jsに
//= require jquery
を追加
todos.jsをjQueryに書きかえください。
Lesson3とほぼ同じ記述でできます。
"Asynchronous JavaScript and XML" の略。
簡単に言うとブラウザのページリロードなしでサーバーとの通信ができる技術。
todos_controller.rbを編集
def index
@todos = Todo.where('title LIKE ?', "%#{params['title']}%")
end
todos.jsを編集
// 検索
function search(el) {
if (event.key === "Enter") {
$.get("todos.json", { title: el.value }, data => {
const tbody = $("tbody");
tbody.empty();
data.forEach(({ title, body, id }) => {
tbody.append(`
<tr class="todo">
<td>${title}</td>
<td>${body}</td>
<td>
<a href="/todos/${id}">Show</a>
</td>
<td>
<a href="/todos/${id}/edit">Edit</a>
</td>
<td>
<a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/todos/${id}">Destroy</a>
</td>
</tr>
`);
});
});
}
}
todos/index.html.erbのtbodyタグ下に以下を追加
<input type="text" onkeydown="search(this)">
- 大規模になってくるとコードの管理が難しくなる
- DOM操作が難しい
- 状態管理が難しい
サーバサイドのJavaScript。
今回はサーバーサイドで使用するわけではなですが、パーケージ管理ツールを使うためにインストールしてあります。
Node.jsのpackageを管理するためのツール。
gem ≒ package
npm/Yarn ≒ Bundler
ES6/ES7などで書かれたコードをES5に変換するトランスパイルツール。
これを使うことで、開発者は最新のJavaScript構文で書くことができ、本番環境で配布する際に、全ブラウザがサポートしているES5のソースコードへトランスパイルして配布することができます。
ビルドツール。JSフレームワークなど使う際には必須のツール。
以下のようなことができる。
- Vue/Angualrなどのフレームワークのコンパイル
- リント、テストなどのタスク実行
- Sass/SCSSなどのコンパイル、CSSファイルの読み込み管理
- Babel/TypeScriptなどのトランスパイル
- ローダーの実行
などができます。
他にもPercel, Rollupなどあります。
フロントエンドといえばReact。Facebookとオープソースのコミュニティで開発されている。
立ち位置としてはあくまでライブラリで、実はフレームワークではない。
そのため、自由にカスタマイズして使え、大規模な場合は設計を間違えると大変ですので、上級者向けな気がします。
成熟度は高く、周辺ツールは多く存在します。
Google製。
TypeScript標準など、学習コストは高めだが、堅牢なアプリケーションを作ることができる。
Angularのレールにのって開発できるので、設計に悩まない。
Googleさんが周辺ツールを色々用意してくれてるので、サポートは手厚いです。
作者はEven You (元Google)のオープソースのコミュニティで開発されているフレームワーク。
軽量(と言われている)で学習コストも低め。最近かなり人気。
VueのラッパーのNuxt.jsをつかえば規約にのっとった開発ができる。
- Gemfileに
gem 'webpacker', '~> 4.x'
を追加、bundle install
rails webpacker:install:vue
を実行
- todos/index/html.erbに
<%= javascript_pack_tag 'hello_vue' %>
を追加。 - 適当なところに
<hello></hello>
を追加。 - 別ターミナルで
bin/webpack-dev-server
でサーバー起動
以下のようなTodoList.vueを作成してみます。
<template>
<div>
<tr v-for="todo in todos" :key="todo.id">
<td>{{ todo.title }}</td>
<td>{{ todo.body }}</td>
<td>
<a :href="`/todos/${todo.id}`">Show</a>
</td>
<td></td>
<a :href="`/todos/${todo.id}/edit`">Edit</a>
</td>
<td>
<a data-confirm="Are you sure?" rel="nofollow" data-method="delete" :href="`/todos/${todo.id}`">Destroy</a>
</td>
</tr>
</div>
</template>
<script>
export default {
data: function() {
return {
todos: []
};
},
created () {
$.get("todos.json", { title: '' }, data => {
this.todos = data
})
}
};
</script>
<style scoped>
</style>
todos/index.hyml
<p id="notice"><%= notice %></p>
<h1>Todos</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Body</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<todo-list></todo-list>
</tbody>
</table>
<br>
<%= link_to 'New Todo', new_todo_path %>
<%= javascript_pack_tag 'todo_list' %>
エントリファイルを作成
todo_list.js
import Vue from 'vue'
import App from '../TodoList.vue'
document.addEventListener('DOMContentLoaded', () => {
const el = document.body.appendChild(document.createElement('todo-list'))
const app = new Vue({
el,
render: h => h(App)
})
})
jQueryで実装したような検索機能を実装してみよう。
https://vuejs.org/v2/guide/forms.html
yarn create nuxt-app my-app
cd my-app
yarn run dev -p 3000 -H 0.0.0.0
https://ja.nuxtjs.org/guide/directory-structure