JavaScript初心者がriot.jsを使い始めるまで - Qiita
はじめに Ruby on Railsを通してフロントエンドも何となくわかった気になっていたJavaScript初心者がイマドキのフレームワークを使い始めるまでに辿ったステップをまとめました。 前提となる今のスキルレベル Ruby on Rilsは1年間やってきて基本的なことはわかるレベルだが、JavaScriptは全くの初心者。 フロントエンドはBootstrapでできる範囲で済ませ、Rails内で使うJavaScriptといえば<form>タグにremote='true'を設定してあれこれするだけでAjaxの処理が余裕でできる〜！で終わっていました。 この状態でJavaScriptを自分のスキルに入れていました。 もちろんコードはイチからは書けず、検索したものをコピペで済ます日々。 JSON,DOM...なんとなくはわかったつもりでいるけど具体的に何、そしてどう書くの？ 最新のフレームワ
Webデザイナーがコンポーネント指向な実装をはじめるなら、まずはRiotから入ってみるといいかもしれない｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは。ほそだです。 以前、このブログでReactについて書いてから早一年あまり。まわりを見渡せば、ReactはもはやかつてのjQueryのように当たり前の存在になっていて、時の流れの早さを感じます。 とはいえ、僕はエンジニアではなくデザイナーなので、従来のようなデザイナーだけで完結する規模感のWeb実装も相変わらず行います。その際、せっかくReactを通して培ったコンポーネント指向な実装をもうちょっとカジュアルにやれないかなと思い、この半年ほどRiotを使ってみました。 ということで、今回は主にデザイナー向けにRiotについて解説します。 Riotとは コンポーネント指向でビューを作っていく、だいぶReactっぽいライブラリです。 Riot.js — Simple and elegant component-based UI library 国内だと2016年春くらいに若干ブレイクの
関Javaのフロントエンド勉強会でRiot.jsの発表をしました。 #kanjava | nocono
2017/02/18(土) 開催の下記のイベントで、Riot.jsを紹介するLTをやりました。 [関ジャバ] フロントエンド初心者勉強会 in 大阪 - connpass Quiver のプレゼンモードで発表したためSpeakerdeckなどへのアップロードができないので、発表内容はこの記事に直接載せておきます。 Riot.js 自己紹介 Abe Asami “きの子 ” フリーランスプログラマ http://nocono.net/ @aa7th Scala、Andorid(Java/Kotlin) 今日の内容 今の案件でRiot.jsを使っているので紹介します。 採用の経緯 Webアプリの動的な部品をちょっとだけ作りたい JQueryでゴリゴリ書きたくない 大げさなJSフレームワークは使いたくない そこで試してみたのがRiot.js http://riotjs.com/ Riot.jsと
Riotチートシート - Qiita
エスケープ {} を記述したいがコードを評価されたくない場合。 \{ 1 + 2 \} で { 1 + 2 } ループ <app> <div each={elem, index in array}> {index}: {elem} </div> this.array = ['hoge', 'fuga', 'piyo', 'pompopo'] </app> array の要素の数だけ、 <div> が増える。 indexは省略可能。 ArrayじゃなくてObjectでもeachできるが、パフォーマンス的な問題で推奨されない。 また、Arrayの要素がObjectだと elem も省略できるが、わかりづらいので個人的に使わない。 表示/非表示
チームをReady for Riotにするワークショップ - Qiita
この記事はRiot.js Advent Calendar 2016の24日目の記事です。 前置き ご注意 ある程度Riotが分かっている人が、JavaScript初心者のチームにRiot的な考え方に親しんでもらうワークショップについて書いた記事です。 Riotについての説明はほぼ皆無ですので、ご注意を。 Riotなら誰でも使いこなせると思った Riot.js、良いですよね。JavaScript初心者集団でも、現代的なコンポーネント指向でサクサク作れるようになんて、夢のようじゃないの！ ……そんな風に思って、Riotの基礎の勉強会を開催。 「大まかにはこんな感じだから、後は公式サイトを見てね」で勉強会を終えて、さっそく実戦投入してみました。 結果！ うん、まあ、導入の勉強会はもっと丁寧にやるべきだよね……。ごめんなさい。 チームの状況・理解の状況 当時のチーム(デザイナ＋PHPプログラマ)の
Riot.js+Webpackの構成 - Qiita
{ "name": "asset", "version": "1.0.0", "description": "", "main": "webpack.config.babel.js", "scripts": { "watch": "webpack --watch --progress" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-es2015-riot": "^1.1.0", "riotjs-loader": "^4.0.0", "webpack": "^1.14.0" }, "dependencies": { "riot":
【JavaScript】明日から使えるRiot.js - Tumbling Dice
前書き 相変わらず Web エンジニアみたいなお仕事をしているんですが、最近訳あって IE 8 からの呪縛から解き放たれました。 で、前々から使ってみたかったんだけど機会がなかったRiot.jsを使うことができるようになったので、ここ一ヶ月ほどもりもり書いていました。 ある程度の知見を得ることができたので、適当にメモしていきます。 Riot.js の目的 割とReactと比較されることが多い…と言うか、自分でReact の目指すところは悪くないんだけどあの文法はいくらなんでもクソすぎと言っている*1んですが、最終目標はDOM 操作における jQuery みたいな立ち位置を Web Components で目指すところっぽいです。Polymerの方が実質的なライバルでしょう。*2 また、ちょっとしたデータバインディングもできる*3ためか、Vue.jsからイチャモンをつけられているんですが、そ
Riot.js + webpack + ES6(Babel, buble)での開発環境構築例 ※追記webpack2 - Qiita
Riot.js + webpack + ES6(Babel, buble)での開発環境構築例 ※追記webpack2webpackriotriot.jsbabelBuble Riot.js Advent Calendar 2016の23日目です！ Riot.js（以下riot）は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。（ここまでテンプレート） 今更ですが、ちゃんとES6で書こうと思いまして、riot+webpack+ES6の開発環境を作りました。 準備 ディレクトリ構成 今回のサンプルのディレクトリ構成は以下です。 ./ ├ .gitignore ├ node_modules ├ package.json ├ webpack.config.js ├ index.html ├ app │ └ app.js │ ├ tag │ └ app.t
AMESTAGE を支える Riot.js とその構成について紹介
この記事は Riot.js Advent Calendar 2016 の 7 日目の記事です！！ Riot.js で芸能人とあそべる生放送サービス AMESTAGE というのを作っていて、動画サービスだったり、芸能人と一緒に遊べるクイズやコメント・ランキングといった各種機能盛りだくさんなせいか、そこそこ規模が大きくなってきました！ 是非遊んでみてください！！ そんな AMESTAGE での Riot.js との付き合い方について、どういう構成でやっているかをサーバー構成からビルド方法、Atomic Design というデザイン手法の導入、Flux な構成までザックリ紹介してみようかなと思います！ 基本構成 Node.js で Web サーバーを建てて、API サーバーやログイン基盤とのやり取りをまとめています。API サーバーを直接ブラウザからは叩きに行かず、 Web サーバーに実装した
ES6で書くRiot - Rollup編 - Qiita
Advent Calendarの何日目かです。近年、JavaScriptでプログラムを書くのに避けて通れない「プリコンパイル」について、Riotの文脈で3本ほど書いてみたいシリーズの2本目です ES6で書くRiot - riot.config.js編 - (サンプルコード) ES6で書くRiot - Rollup編 - (サンプルコード) ES6で書くRiot - Felt編 (予定) バンドラ? トランスパイラ? riot.config.js編では、riotコマンド経由でトランスパイルする方法を扱いました。具体的なツールとしては、babelやbubléが「トランスパイラ」にあたります。要は、この手の(↓)変換です。 変換前: this.message = `Hello ${name}!` 変換後: this.message = "Hello " + name + "!" ただ、タグからi
ES6で書くRiot - riot.config.js編 - Qiita
Advent Calendarの3日目です。近年、JavaScriptでプログラムを書くのに避けて通れない「プリコンパイル」について、Riotの文脈で3本ほど書いてみたいと思います。 ES6で書くRiot - riot.config.js編 - (サンプルコード) ES6で書くRiot - Rollup編 - (サンプルコード) ES6で書くRiot - Felt編 - (サンプルコード) はじめてのriotコマンド Riotでは、次のような「タグ(tag)」ファイルを書いて、コンポーネントを作成します。 <my-tag> <p>{ message }</p> <script> this.message = 'Hello Riot!' </script> <style> :scope { display: block; color: #f04 } </style> </my-tag> デス
Riot.js を利用してTODOアプリケーション構築のハンズオンを作成しました #riotjs - the industrial
Riot.js Advent Calendar 2016 の２日目！ １日目はkuwahara_jsngさんの「今年1年真剣にRiot.jsと付き合ってきたので振り返ってみた」です。 さて、ついにv3がリリースされたRiot.jsですが、実は以前、社内向けに作ったハンズオンがあるので、Riot.js Advent Calendar 2016の場をお借りして紹介させていただきたいと思います。 ただ、バージョンは2.6時点のものですのでご了承下さい。 v3版も、いずれ近いうちに!!! デモ http://omiend.github.io/riotjs_todo/ はじめに Riot.jsとは 関連するHTMLとJavaScriptを結合し、再利用可能なコンポーネントとしてまとめたカスタムタグを利用してアプリケーションを構築することができる、超軽量Webフレームワークです。 http://rio
phiary
『yield』 に引き続きマニアックな Riot.js tips です. 先日下記のようなツイートが流れてきました. ちょっとこれは驚愕の事実かも...riotjsでタグで直接onscroll="{hoge}"ってかたちでbindするじゃん？スクロールする度に、updatedが呼ばれる。。。つまり、スクロールする度にupdate()がかかってる。。。！？ — 杏z (@AnzNetJp) 2016年10月27日 もれなく私も昔これにハマったことがあったので, その対処法を紹介したいと思います. Riot.js におけるイベント発火時のライフサイクル Riot.js は, onほにゃらら に設定している関数を呼ぶと自動で update を呼ぶ仕様になっています. onclick や ontouchstart といったそれほど頻繁に発火しないイベントならそれでも良いのですが, onscroll
フロントエンジニア必見！フロントエンド界隈で注目を集めるRiot.js入門資料まとめ
JavaScriptのフレームワークはReact、Angularなどが人気ですが、ここ最近フロントエンド界隈を中心にRiot.jsが注目を集めています。 軽量でHTMLに似通った文法を採用しており、扱いやすいJSフレームワークとして人気急上昇中です。 そこで今回は、これからRiot.jsを始めるエンジニア、Riot.jsに興味のあるエンジニアに向けて、Riot.jsの入門資料（記事・スライド）をまとめました。 比較的扱いやすいJSフレームワークなので、難しく考えずにまずは使ってみてください。 JavaScript案件を提案してもらう Riot.js入門記事 Riot.js — A React-like user interface micro-library http://riotjs.com/ja/ Riot.jsの日本語公式サイトです。 ガイド、FAQ、APIなど、各メニューが日本語化
Riotjsハンズオン
This document provides an introduction to React including key concepts like JSX, props and state, keys, component life cycle, event bus, and Flux. It also includes examples and contact information for the author Võ Duy Tuấn, CEO and founder of Teamcrop.com, for any additional questions about React. React is a JavaScript library for building user interfaces using reusable components. It is used to
Riot.js と Atomic Design ではじめるテクニカルクリエイター｜Technical Creator Hub
紫竹佑騎 2010年新卒入社。アメーバのサービスやソーシャルゲーム数タイトルのサーバーサイドを担当。著書に「Web制作者のためのGitHubの教科書」。BaPA１期生。 7月頃リリースされた AMESTAGE の Web 版を担当している 紫竹 です。 AMESTAGE は"芸能人とあそべる生放送"と銘打ったサービスでして、芸能人の放送する番組に対してコメントしたりギフトを贈ったり、クイズなどのコーナーに回答して一緒にあそんだりできます！！是非放送を見てみてくださいね＾＾ AMESTAGE 今回はこの AMESTAGE で利用した Riot.js というライブラリを使って、Web 開発しやすいコンポーネントをデザインの時点からワンストップで行うことができる手法をご紹介したいと思います。 俺がテクニカルクリエイターだ！ ↑これは言ってみたかっただけなんですが簡単に自己紹介をすると、僕は
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
[phiary] とりあえず試してみたいって方のための Riot.js 入門 - Qiita
※本家はこちらのブログエントリーになります. 毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪ 先日書いた 『Electron の入門エントリー』 が好評だったので私の大好きな Riot.js の入門も書いてみました. AngularJS や React でもいくつか Web アプリケーション作ってきましたが, 私にとっては Riot.js が一番しっくりきました. なので今回は Riot.js について紹介します. とにかく詳しい説明はいいから触って試してみたいって方はぜひ読んでみてください. Runstant を使って作ったデモを並べているので, 実際に動かしたりコードをいじることができます. 実際に動かしながら, Riot.js がどれだけ使いやすいか体感してみてください♪ Riot.js とは？ 今のところ私にとって(使いや
![[phiary] とりあえず試してみたいって方のための Riot.js 入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/05bb68049608a8a0c1431459914ccd52eaec65e8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCcGhpYXJ5JTVEJTIwJUUzJTgxJUE4JUUzJTgyJThBJUUzJTgxJTgyJUUzJTgxJTg4JUUzJTgxJTlBJUU4JUE5JUE2JUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJUUzJTgxJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUU2JTk2JUI5JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJTIwUmlvdC5qcyUyMCVFNSU4NSVBNSVFOSU5NiU4MCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzRmZTVmODM4MDU3MTQwNjg3NGVhMjA4NDg2NWE4NGE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTViZWQxYTFhYjlkZGQxZTYyY2NhZTY4N2QwNjIzZTFj%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0fe929792e8b9f49f22d7d0dcda6bfbf)
Riot はミニマルで Web Components のような UI ライブラリ - Qiita
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
【中級編】Riot.js + Typescript + karmaで今日から始めるElixir on Phoenixフロント開発入門 その１ - Qiita
【中級編】Riot.js + Typescript + karmaで今日から始めるElixir on Phoenixフロント開発入門 その１TypeScriptElixirkarmaPhoenixriot はじめに 皆さん、おはこんばんちは。 年の瀬です。 コミケの入稿割引が減っていきます。 第２回 企業対抗トーナメントも大晦日に、あります。ギルティです。 正直色々忙しいですね。分かります。だって師走だもの。 そんな時は肩の力をいったん抜いて、Elixir on Phoenix、入門していきましょう。 CentOS + Erlang + Elixir + PhoenixのDockerイメージで今日から始めるElixir on Phoenix入門 【中級編】drone.io + exrmで今日から始めるElixir on Phoenixホットデプロイ入門 前回、前々回に引き続き、Elixir
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
