Riot.jsの落とし穴まとめ - Qiita
はじめに 軽量かつ学習コストも低めで書きやすいライブラリのRiot.jsですが、いわゆる落とし穴がいろいろあります。が、このライブラリに関する日本語の記事があまり多くなく、コード書いていると突然「あれっ！？」となることがたまにあるので、自分が知っているものを書いていきます。 ※執筆現時点でのバージョンは2.4.1です。 ※2016/11/10追記 既に3.0.0-alpha.13がリリースされた今、2.4.1なんて古いバージョンを使っている方はいないと思いますので、今の時点での2系の最新である2.6.7でも確認しました。 親タグマウント時に子タグもマウントされる タグ(.tagのこと)がネストしていると、親タグをマウントすると子タグも一緒にマウントされます。 例えば以下の様な場合、親タグ（appタグ）で何か処理する必要があって、その結果でマウントする子タグを決めたい場合、子タグ（child
Riot.js で短冊ジェネレータつくった - Qiita
今日は七夕！ってことで Riot.js の練習も兼ねて簡単な短冊ジェネレータをつくってみました。 ソースコードはここら辺。 ちなみに元サイトはここを参照しました。 Riot.js 自体そんなに難しくないのでたたき台は 2時間もかからないぐらいでサクッとつくる事が出来ましたね。 まあ結局 permalink とか複数の短冊表示を実装してたら結局5時間ぐらい作業していたんですが…。 強いて言えば HTML と CSS と JavaScript を .tag ファイルにまとめて書くのが Vim 的にちょっとつらい感じですね。 シンタックスとかどないせーっちゅうねん。 context_filetype.vim を使うにしても判定するのが難しいしなあ…。 まあ、そのあたりは追々考えてみます。 絶対にバグがあると思うんで不具合があったら教えてもらえると助かります。 元記事
JavaScript のモダン開発環境を求めて 〜 前編・Riot.js 導入まで - Qiita
関連 JavaScrpt - JavaScript のモダン開発環境を求めて 〜 中編・Hello Mithril - Qiita JavaScript のモダン開発環境を求めて 〜 後編：Bonjour React - Qiita ゴール Riot.js でフロントエンドアプリケーションを開発するための、モダン環境を用意することがゴールです。表題に Riot.js と入っていますが、Riot.js に限定される話題はわずかですので、各種フレームワーク用に転用できると考えられます。 ちなみに「前編」をつけたエントリで続編を書いたためしがないので後編はでてこないかも知れません。 はじめに この投稿は、我が国における JavaScript の周辺環境に関して Grunt の登場あたりで知識が止まっている開発チーム（というかおもにぼく）が、モダンな開発環境を調査していくうちに「なにこれ、Java
Riot+Gulp+Browserifyで時計サンプルを動かす - Qiita
RiotはReactライクなマイクロMVPライブラリです。タスクランナーを噛ませたいのでこちらのサンプルを動くようにしたり、いろいろいじってみた。 デモ 時計を表示するclockタグを表示します。インスタンスごとに長針・短針・秒針の表示を変えています。マウスホバーでポーズします。 via http://www.triplet.fi/blog/adding_compiled_riot_tags_to_your_gulp_browserify_build/ Riotタグを書く Riotの特徴はなんといってもHTML+CSS+JavaScriptの混ぜ書き。一見HTMLに見えますが、JavaScriptとしてトランスパイルされます。 <clock> <svg> <line></line> <circle></circle> ... </svg> <style scoped> :scope { .
Riot.js ことはじめ - Qiita
端的に結論を言うと、もうこれで良いじゃないかな、です。 背景 ちょっと前にこのへんとかを中心にWebのフロントエンドを作るのにフレームワークはいるかいらないかみたいな議論（適当）がありましたが、業務で静的データを使ったWebページ（サーバサイドの状態がフロントエンド側から変化しないページ）を作ることが多い自分としてはこう思いました。 確かにjQueryで直接DOMをいじるのは、いじる要素が片手で数えられるうちはいいが、それを超えるとうまく管理できなくなるからあんまり上手い方法でないのは同意できる かといってReactJSは確かに便利そうではあるが、正直ぱっと見ではよくわからないので、使うなら腰を入れて勉強する必要がありそう＝ミニマムスタートしにくそう ということでうまく折衷案的なものはないかと思っていたら riot.js というのを見つけたので試してみました。 Riot.jsの超入門 Ri
現在（2.2.4）のRiot.jsのifステートメントはfalseでも実行されてしまう件とその回避法 - Qiita
Riot.jsに魅せられてしまったemadurandalさんですこんにちは。 Riot.jsいいですよね。Reactから移ってきたのですがもう戻れません。 記述がとにかくシンプルかつHTMLセントリック（デザイナーさんにとっても抵抗少ない）。 HTMLとJavaScriptだけでなく、CSSまでコンポーネントにカプセル化できる。 サイズが超小さい（モバイルにも優しい） などなど、メリットは計り知れません。ただ、まだ若いプロジェクトなので、罠もそれなりにありますね。 今回はそんな罠の一つ。表題の件です。 例えばですね。↓こういうのがあったとしましょう。 <my-app> <my-heavy-ui if={enable} arg={opt.foo} /> this.enable = false; </my-app> これ、if=false なわけですが、実はページ上見えなくなるだけで、実際は<
Riot.jsのHTML部分をJadeで書いてgulpするメモ - Qiita
普段Railsでhamlを使っていた身としては、 どうせコンパイルするのなら、slimとかJadeとかインデントで書いてスッキリしたいよね。 ってことでRiot.jsはJadeで書けます！ Jadeだとこんな感じで書ける scriptの後に.（ドット）を付けるとベタ書きできる hello h1#title.center {title} ul.list(each="{content, i in contents}") li(class="{even: (i % 2 === 0)}") p.number {content} script. this.title = "HELLO" this.contents = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
【中級編】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
Riotのテストと宿命の反乱(karma-riot) - Qiita
AngularのテストではおなじみのKarma(=宿命、業)ですが、すごい名前ですよね...。karmaのRiotプラグインは日本語だと「宿命の反乱」でしょうか。フロントエンドのテストの話です、念のため。 というわけで、Riotの公式リポジトリにこのKarmaプラグインが仲間入りしたので、簡単に要所をまとめたいと思います。 アプリケーション構成(例) 極小構成ということで、この記事の登場人物はこの5ファイルだけです。動いているのをまず触りたいという方は、こちらにPlunkerで編集可能なものがあります。ソースとテスト一式はこちら。 app.tag index.html karma.conf.js package.json test/ specs.js アプリケーション本体 まずapp.tagですが、簡単なルーティングのデモになっています。ここではテストの説明が主眼なので、細かい話は略。 <
Riot.js ドキュメント日本語版 - Qiita
このドキュメントは、Riotの公式ドキュメントのWhy Riot?とRiot developer guideの全訳です。修正あれば、こちらにプルリクエストください 追記・公式に取り込みました! 記事はこのまま置いておきますが、最新版は公式サイトを参照してください。 公式ドキュメント: http://riotjs.com/ja/ なぜ Riot? 答え1: カスタムタグ RiotはIE8以降の全てのブラウザで、カスタムタグを実現します。 <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </f
Riotjsのいいところ - Qiita
Riot.js 2.0 を触ってみた — まだReactで消耗しているの? を読んで Riotjs のいいところまだあるんやで！とおもったので補足がてらいくつか書きます。主にコンパイラまわりです。 ファーストインプレッションでめっちゃ面白かったので、gulp-riot 作ったりとかモリモリと触り続けて PR 送ったりしていたら今、みたいな感じです、よろしくお願いします。 コンパイル後のファイルがめっちゃ単純 上の記事でも書かれているんですが、Riot には独自のシンタックスを持っています。 <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ ite
Riot.jsのカスタムタグを使わずに、divタグでmountして使う方法 - Qiita
Riot.jsは今流行りのReact.jsライクで比べて軽量なライブラリーです。 React.jsに比べてシンプルで簡単に導入できるので、Reactには興味あるけどなんか難しそうって方にもおすすめなライブラリー。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ Riot.jsを使っている中で ちょっとネックになるのがカスタムタグの存在です。 例えばこんなソースコード場合、 <body> <hello></hello> <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script> <script type="riot/tag"> <hello> <h1>{ title }</h1> this.title = "hello world!" </h
Riot.jsで通貨コンバータを作る - Qiita
Riot.jsを使った、シンプルな通貨コンバータです。Browserifyでプリコンパイルするサンプルとして作ってみました。Yahoo!からAPIで現在の通貨レートを取得して表示するだけ。インクリメンタルサーチができます。(よく考えたら、「コンバータ」ですらないですね) ※この記事は、こちらの日本語版的な内容になります。 試す GitHub Pagesに置いておきました。Riot.js Currency Calculatorにアクセスしてみてください。 クローンとビルド 手元で試すには、次の手順でどうぞ。 このリポジトリをクローン $ npm install $ npm start Gulp と Browserify この例では、いくつかのgulpタスクが定義されています。 clean: 生成されたファイルを削除する browserify: .js, .tagファイルをコンパイル css:
Riot@2.0.11 雑感 - Qiita
Riotjs の 2.0.11 がリリースされました。 リリースノートはこちら -> https://muut.com/riotjs/release-notes.html#2-0-11-em-feb-23-2015-em- リリースノートでは riot.mount, riot.mountTo, riot.unmount あたりのことが書いてあるんですが、僕としては 2.0.7 にエンバグされたコンポーネントに値が渡るときに遅延する問題がついに修正されたのが一番の朗報です！！！！！！！！ ちょっと前に自分で直そうと試行錯誤していたのですがいまいちどこが問題か特定できずに断念したので...。コミットログ追ってみると修正コミットはたぶん https://github.com/muut/riotjs/commit/2eecb48ebf5d2b112f25167bc8133c752454a8af が
HTMLのタグ属性に配列やオブジェクトを指定する - Qiita
素のHTMLでは、もちろんできないんですが、仮想DOM系のライブラリ、 React Polymer Riot.js あたりを使うとできます。設計上ありかという話は置いておいて、便利です。Reactだと何を今更というかJavaScriptなのでやり放題。Polymerもシリアライズが途中に入るもののOKです。 HTML慣れしているほど案外盲点な気がするので、Riotの例を中心に書き留めておきたいと思います。 複数の属性を渡すとき HTMLで慣れた作法に従うと、例えば、 <path file-name={ file.name } file-ext={ file.ext } file-dir={ file.dir } file-icon={ file.icon }> </path> みたいにして複数の属性を渡すことを考えると思います。ただ、属性値をひとつずつ分解して渡すのはかなり面倒ですし、Ja
Riot 2.0 のホームページを読んでみる - Qiita
https://muut.com/riotjs/ 軽量JavaScript UIライブラリらしいRiotのバージョン２を試していきます。3.5KBでReactのようなユーザインターフェースが提供できるらしいです。まずはRiotのホームページを読んで、どのようなものか理解していきましょう。 Why Riot? そしてなぜ新しいUIライブラリが必要なのか 1. Custom tags RiotはIE８は始めとする全てのブラウザにカスタムタグを提供します。 <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</but
Riot Bootstrap - Qiita
1) HTMLファイルの中で直接使う riot.jsを読み込む normalize.cssを読み込む riot-bootstrap (これ) を読み込む その後、riot.mount('*') <!DOCTYPE html> <html> <head> <title>riot-bootstrap</title> <link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.3/normalize.css"> </head> <body> <section> <btn>Default</btn> <btn option="primary">Primary</btn> <btn option="success">Success</btn> </section> <script src="//cdn.jsdelivr.net/riot
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Riot.jsでAjaxではなくFetchを使って標準的なやりかたでAPIを取得する - Qiita
Riot.jsでAjaxではなくFetchを使って標準的なやりかたでAPIを取得する - Qiita
まいいんたれすと on Twitter: "Riot.js ドキュメント日本語版 - Qiita http://t.co/OsXRHQSCDc"
