Riot.js初心者向け記事・スライド
フロントエンジニア必見!フロントエンド界隈で注目を集めるRiot.js入門資料まとめ

  • このエントリーをはてなブックマークに追加

メイン画像

JavaScriptのフレームワークはReact、Angularなどが人気ですが、ここ最近フロントエンド界隈を中心にRiot.jsが注目を集めています。

軽量でHTMLに似通った文法を採用しており、扱いやすいJSフレームワークとして人気急上昇中です。

そこで今回は、これからRiot.jsを始めるエンジニア、Riot.jsに興味のあるエンジニアに向けて、Riot.jsの入門資料(記事・スライド)をまとめました。

比較的扱いやすいJSフレームワークなので、難しく考えずにまずは使ってみてください。
 

Riot.js入門記事

Riot.js — A React-like user interface micro-library

http://riotjs.com/ja/
 
Riot.jsの日本語公式サイトです。

ガイド、FAQ、APIなど、各メニューが日本語化されているので、英語が苦手な方も心配ありません。
公式サイトからRiot.jsをダウンロードし、とりあえず触ってみるのが習得の近道かと思います。
 

とりあえず試してみたいって方のためのRiot.js入門 / phiary

http://phiary.me/riotjs-tutorial-try/
 
Riot.jsの使い方をデモ付きで解説している記事です。
Riot.jsってどんなフレームワークだろう?という方は、本記事を参考にRiot.jsを触ってみると参考になるかと思われます。
 

フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 / phiary

http://phiary.me/frontend-riot-js-no1/
 
先ほどと同じブログの記事です。

Riot.jsの特徴であるコンポーネント指向から、選択できるコンパイルのタイミングと言語、Scoped CSS、ルーティング、他のライブラリとの比較(AngularJS、Angular2、React、Vue.js)について解説しています。

よりRiot.jsのことを知りたい方はぜひ読んでみてください。
 

Riot超入門 / 1 piexl

http://ameblo.jp/ca-1pixel/entry-12086298377.html
 
サイバーエージェントの公式ブログ「1 piexl」によるRiot.jsの入門記事です。

Riot.jsの構文・文法の紹介と簡単なToDoリストの作り方を解説しています。

ToDoリストのソースコードは「GitHub」からダウンロードできるので、参考にしながら作ってみてください。
 

Riot.js 2.0 を触ってみた — まだReactで消耗しているの? / Qiita

http://qiita.com/cognitom/items/fb1295f3f93911e9e92d
 
Riot.jsのコード例、HTMLへの組み込み、コンポーネントのネストについて解説しています。

筆者はRiot.jsのドキュメントをほとんど読まずになんとかなったそうなので、難しく考えずにとりあえず触ってみたいという方におすすめの記事です。
 

無謀にもJavaScriptなしでやってみる! Riot.js入門 / Qiita

http://qiita.com/cognitom/items/8010e0779950df574cc9
 
Riot.jsを使って簡単なWebページを作ることを目的としたチュートリアルです。

本チュートリアルを読み進めるのに必要な知識はHTMLとCSSだけなので、JavaScriptが苦手な方もトライしやすいものとなっています。

 

Riot.jsでフロントエンドの複雑さに反乱するときがやってきた / Qiita

http://qiita.com/aggre/items/928eb2bedbac6a7829c0
 
フロントエンドの複雑さを解消するためにRiot.jsを採用した理由を、Riot.jsの特徴を交えて紹介しています。
 

React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル / Qiita

http://qiita.com/narikei/items/1a7fbd7895cfb4220172
 
ゲーム攻略コミュニティ「GAMY」をRiot.jsでリニューアルしたそうです。
Riot.jsの実装例記事は少ないので、Riot.jsでサイト構築を考えている方には参考になると思います。
 
 

Riot.js入門スライド

Reactがメンドクサイ僕らのためのフロントエンド 

 



https://speakerdeck.com/cognitom/riot-dot-js-in-wpd-week 

前半はRiot.jsでのコンポーネントの書き方をはじめ、Riot.jsの特徴を解説。
後半は最近のフロントエンドが面倒くさい理由について言及しています。

 

Riot.jsを用いたweb開発 takusuta tech conf #1

Riot.jsを用いたweb開発 takusuta tech conf #1 from Keisuke Imai

 
Riot.jsを用いたWeb開発の例を紹介しているスライドです。

 

Riot.jsに触れてみた話

Riot.jsに触れてみた話 from エンジニア勉強会 エスキュービズム

 
Riot.jsと他のJavaScriptフレームワークとの軽量さの比較、仕様、書き方をまとめたスライドです。
簡潔にまとめられているので、Riot.jsがどういうフレームワークなのかがよくわかります。

 
 

まとめ

Riot.js関連の資料はまだ少ないので、学びにくそうという印象をお持ちの方は多いかもしれません。

しかし、HTMLに似通った文法を採用しているのでHTMLを理解している方であればすぐに慣れると思います。

公式サイトのガイドは日本語化されていますので、今回紹介資料と併せて参考にしながら使い方を覚えていきましょう。

 




■求人・案件をお探しの方へ
フロントエンドの求人・案件
JavaScriptの求人・案件

  • このエントリーをはてなブックマークに追加

プライバシーマーク

© 2014-2017 Leverages Co., Ltd.