[B! qiita][javascript][riot.js] [3ページ] nabinnoのブックマーク

nabinno id:nabinno

qiitaとjavascriptとriot.jsに関するnabinnoのブックマーク (94)

Riot.jsでjQueryライクにDOM操作する - Qiita
Riot.jsでも、jQueryライクに$()とかで、簡単にDOM操作できないのかなと思って調べてみました。環境は Riot.js 2.5.0 Riot.js本体のコードはどうやら短いらしいので、直接読んでみると、$()と$$（）の定義を発見。 lib/browser/tag/util.js のL.376行目くらいに以下のような記述があります。 /** * Shorter and fast way to select multiple nodes in the DOM * @param { String } selector - DOM selector * @param { Object } ctx - DOM node where the targets of our search will is located * @returns { Object } dom nodes fou
nabinno 2017/10/10
qiita

riot.js

javascript

html
リンク
Riot.js + webpack + babel でitunes APIを利用したWEBアプリを作ってみる - Qiita
const webpack = require('webpack') module.exports = { entry: './app/main.js', output: { path: '/public', publicPath: '/public/', filename: 'bundle.js', crossOriginLoading: 'anonymous' }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.ProvidePlugin({ riot: 'riot' }) ], module: { preLoaders: [ { // test : /\.js$|.tag$|.es6$/, <= k-kuwaharaさんからご指摘いただき、以下に修正 test : /\.js|\.tag|\.e
nabinno 2017/09/03
qiita

riot.js

javascript

html
リンク
pug+riot.jsでyieldを使う。 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
nabinno 2017/08/08
qiita

riot.js

javascript

html
リンク
RiotとGo言語でデジモンのドット絵打つだけのサイト作った - Qiita
16*16の2色のドット絵を打って投稿するサイトです。突発的に思いついて5時間近く費やして作りました。「Digital Pixel Monster」 http://digimon.laineus.com/ Digital Pixel Monster、略してデジモンです。何気にGoで作ったapiを公開サーバーで実際に運用するの初めてだったりします。使い方左のキャンバスはピクセルをクリックすると着色できます。着色済みのピクセルをクリックすると無色に戻ります。右側ではサイトに投稿された作品一覧を閲覧できます。何でも自由に投稿して大丈夫ですが、僕の独断で整理（削除）する場合があります。 riotとcssで描画しているだけなので画像データになったりはしません。ソース以下、RiotとGoのソース（一部）です。ご指摘・アドバイス大歓迎です。 Riot ソース描画と編集を行うコンポ
nabinno 2017/06/26
qiita

riot.js

javascript

html

go
リンク
Vue.jsはRiot.jsより良いんじゃないかと思ったのでメモ - Qiita
RiotとVue検討段階の人が書いたものです。実用してみての感想ではないのでご注意願います。 Vue.jsのドキュメントに優位性の説明があった他のフレームワークとの比較 - Vue.js Riot 2.0 はよく似たコンポーネントベースの開発モデル（”タグ”と Riot では呼ばれています）を提供しており、必要最小限の美しく設計された API を持っています。Riot と Vue はおそらくその設計哲学の多くが共通しているのでしょう。しかしながら、Riot よりも少し重いにも関わらず、Vue はいくつか著しく優れた点を持っています：トランジションエフェクトシステム。Riot にはありません。ずっと強力なルータ。Riot のルーティング API は極めて最小限です。より優れた性能。Riot は仮想 DOM を使用しているというよりむしろDOM ツリーをトラバースしているため、Ang
nabinno 2017/05/30
qiita

riot.js

javascript

html

vue.js
リンク
Webをほとんど分からない奴がRiot.jsを触ってみる(多分①) - Qiita
⚠はじめに文章を書くのが下手なので見苦しくて読みにくく理解しづらいかもしれませんがご了承くださいこの文章書いてるアホ、まっじで初心者なので、何か間違っていたらコメント等でやさ～～～～しく教えてくれると助かりますイントロタイトルを三回読みましたでしょうかそうです、HTML CSS js 全て超基礎レベルでしか覚えてない野郎がRiotに挑戦してみますしかも続きますたぶんあ Webエンジニアとかそういうのは目指してませんこういうの使えたらかっこいいみたいな自己満です私みたいな同じような初心者の方で挑戦してみたいとか、参考になればいいかなぁなんて思ってこの記事を書いています Q, てかなんで挑戦しようと思ったの？知り合いがRiotを使用していたのを見て私もやりたいな～～～～(唐突)と、思ったからですインターン探してたらWeb系多くてちょっと覚えておこうとか思ったわけではない
nabinno 2017/05/28
qiita

riot.js

javascript

html
リンク
Riot.js 3.3 と Lumen 5.4 でつくる初めてのSPA　フロントエンド編 - Qiita
はじめに最近 Riot が気になっていたので、 Lumen 5.4 と Riot 3.3 で簡単なブログを作ってみることにした。今回はフロントエンド編。 DB との接続なしのモックアップを作っていく。 Material Design for Bootstrap も気になっていたのでついでに使ってみる。ダミーテキストはWebtoolsのダミーテキストジェネレータで作成している。これを使えば日本語・英語・数字混合のダミーテキストが作れる。そのほかのエントリーはこちら。 Riot.js 3.3 と Lumen 5.4 でつくる初めてのSPA　バックエンド編 Riot.js 3.3 と Lumen 5.4 でつくる初めてのSPA　つなぎこみ編作るものいろいろ頑張って最終的にこんな感じのブログを作る。記事一覧の表示（カテゴリーの絞り込みあり）記事詳細の表示記事の新規作成・更新
nabinno 2017/05/10
qiita

riot.js

javascript

riot.js-3.3

lumen-5.4

lumen
リンク
https://qiita.com/n-ken/items/2cf2ce482d0e8dc2caee
nabinno 2017/04/29
qiita

riot.js

javascript

data-binding
リンク
Riot.jsベースのお手軽開発環境「Yosegi」を公開しました - Qiita
※ 2017/07/21追記 Riot v3とWebpack v3に対応しました。その他package.jsonも更新済みです。はじめに Riot.jsがんばれ。そんな思いから生まれたRiot.jsベースのお手軽開発環境「 Yosegi 」を公開しました。 https://github.com/hisayatanaka/yosegi 導入は基本 npm install 一発で完了。 ES6/Sass対応でWebpackによる自動コンパイル＆バンドル（minify）、ブラウザリロードまで面倒を見てくれるパッケージです。あくまでも基本フレームとなりますので、お好みで自由にカスタマイズしながらご利用ください。 Google Compute Engineでの導入手順もまとめましたので、慣れた方なら10分程度で環境が構築できると思います。コンポーネント指向なフレームワークは敷居が高そう…そんな
nabinno 2017/04/14
qiita

riot.js

javascript
リンク
Svelte ナメてたけど結構スゴい - Qiita
Front-end Developer Handbook 2017 でも言及されていたりと少しずつ注目を集めている印象の Svelte ですが、「はいはいまた JS の流行り物 FW でしょ」とか「No Framework って Serverless みたいなバズワードになるんでしょ〜」などと正直ナメてたんですが、ナメっぱなしではいけない、とガイドを一通りさらったところ「なるほどこれは新しい勢力だな」と思い至ったので同じくナメてる人向けにスゴいところを紹介します。一応断っておきますが、さすがに商用環境に投入できるかというとまだ全然出来る気がしないので、今すぐあなたの xxx を置き換えるものではないです。 Svelte のルック&フィール Svelte は Riot.js のコンポーネントや Vue.js のコンポーネントのように html ファイルにテンプレートとロジックを書いていくのが
nabinno 2017/04/12
qiita

svelte

riot.js

javascript
リンク
僕的なRiotプロジェクト構成のお話 - Qiita
Riot.js Advent Calendar 2016 の19日目です。今まで書いた人と似通ってたりしますが、よろしくお願いします。 <- 前日 @clown0082 さん: karma + mocha + Riot.jsでのテストはじめの第一歩 -> 翌日 @potato4d さん: Riot.jsを通じて気軽に翻訳とOSSへの貢献を体験してみようはじめに今回は、僕的なriotのプロジェクト構成についてディレクトリ構成を晒しながらざっくり説明します。 SPAしつつ、クローラー対策としてSSR(サーバーサイドレンダリング)してます。ふんわり話す程度なのでリファレンスっていうより読み物と思っていっただけたらと。今回説明することディレクトリ構成それぞれのディレクトリが何してるかの解説使ってるライブラリ(ちょっとだけ) 今回説明しないことソースコード解説さっそくさっそく
nabinno 2017/03/27
qiita

riot.js

javascript
リンク
JavaScript初心者がriot.jsを使い始めるまで - Qiita
はじめに Ruby on Railsを通してフロントエンドも何となくわかった気になっていたJavaScript初心者がイマドキのフレームワークを使い始めるまでに辿ったステップをまとめました。前提となる今のスキルレベル Ruby on Rilsは1年間やってきて基本的なことはわかるレベルだが、JavaScriptは全くの初心者。フロントエンドはBootstrapでできる範囲で済ませ、Rails内で使うJavaScriptといえば<form>タグにremote='true'を設定してあれこれするだけでAjaxの処理が余裕でできる〜！で終わっていました。この状態でJavaScriptを自分のスキルに入れていました。もちろんコードはイチからは書けず、検索したものをコピペで済ます日々。 JSON,DOM...なんとなくはわかったつもりでいるけど具体的に何、そしてどう書くの？最新のフレームワ
nabinno 2017/03/11
qiita

riot.js

javascript
リンク
Riot を React の文脈で理解する - Qiita
Riot は React のような UI ライブラリです。ライブラリの特徴については公式サイトの比較や以前に書いた Qiita を参照してもらえれば伝わるかと思います。 React が DOM の複雑な操作をあくまでも JavaScript で解決しようとしているライブラリに対して、Riot はそこを HTML+α で解決するため Web Components を先取りして書けるようにしたライブラリを指向しているという点で大きな思想の違いは存在しています。実際、Riot の issue では構文を Web Components 準拠にする変更があがったり、Shadow DOM 実装が検討されていたりと、割りと HTML の世界に近いライブラリとなっています。その上で、ここではコードベースで、React でこう書くとき Riot はどう書くの？という視点で比較してみます。 Re
nabinno 2017/03/05
qiita

riot.js

javascript
リンク
[riot 習作]riotでAPIテストツールを作ってみよう - Qiita
皆さん、こんにちは最近のJavaScriptのフロントサイドのフレームワークもしくはアーキテクチャは、AngularとReactJSが主流となっているように感じますが、一方で、vue.jsやriot.jsのような大企業がバックにないようなフレームワークにも光が当たってきています。個人的にはどれがいいというよりは、作成するアプリの性質に応じて使い分けるのがいいんじゃないかなぁと思いますが、弊社内ではAngular, ReactJS, vue.jsを推す人はいるのですが、riot.jsを推す人がいなかったので、じゃあ私がやっちゃおうということでやりました。 TODOアプリとかはすでに公式サイトにあるので、ここではAPIをテストするためのツール作成を通して、riot.jsの挙動を調べてみましょう。ちなみに今回のはriot 3.0を使っているのでそれ以前のバージョンを使っている場合は、動かな
nabinno 2017/02/28
qiita

riot.js

javascript

web-api

software-testing
リンク
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 も省略できるが、わかりづらいので個人的に使わない。表示/非表示
nabinno 2017/02/14
qiita

riot.js

javascript

cheatsheet
リンク
Riot.jsによる再利用しやすいコンポーネントの作り方 - Qiita
Riot.jsは単純な仕様のため、複合したHTMLタグとJavaScript機能を持ち合わせた、いわゆるコンポーネントが非常に作りやすい。今回実際作成したコンポーネントの解説を通して作りやすさを感じてもらい、Riotの普及活動に繋げたい。 #再利用しやすいコンポーネントとはこれには諸説あると思うが、自分が思うに「利用したくない」と思われるコンポーネントは再利用されない。自分が利用したくないコンポーネントは使い方が複雑依存関係が複雑カスタマイズできない。もしくはしづらい見た目がかっこわるいなので、これらの逆をつけば再利用しやすくなるのではと考える。 #作ったもの手書き入力した内容を自動認識し、変換された文字列を返せるもの → <input type="text">の代替として利用可能なもの仕様としてはタッチもしくはマウス操作で手書きすると右下に認識した文字列を表示し、J
nabinno 2017/02/14
qiita

riot.js

javascript
リンク
Riot.jsのコンポーネント外からデータを渡す方法 - Qiita
背景現在のプロジェクトではjQueryを使ってDOM操作しているけれども、DOM操作だけはRiot.jsに置き換えたい。そのようなときに、Riot.jsのコンポーネントと既存の処理をどのように連携させたらよいのか... ということで、Riot.jsの外からRiot.jsのコンポーネントに処理を移譲する方法を調べていました。解決策の概要 Riot.jｓを使っていない既存の処理から、Riot.jsのコンポーネントにデータを流し込んで表示させる場合、オブザーバブルという機構をつかって実現できます。コンポーネント間の通信でも、この方法を利用します。【Riot.js】タグ間で動作を連動させるというエントリを参考にさせていただきました。実装サンプルサンプルとして、jQueryでajax通信した後、JSONで受け取った結果を表示するコンポーネントを作るとします。ここでは、result-l
nabinno 2017/02/14
qiita

riot.js

javascript
リンク
Riot+SATで数独ソルバー - Qiita
以前、ブラウザ内で動くSATソルバーを使ってパズルのソルバーを作っていましたが、じつは表示＆入力部分を作るほうが圧倒的に面倒だということもあって、しばらく放置していました。最近知ったRiotを使えば、このあたりの複雑性もなんとかなりそうだと思ったので、アルゴリズム自体に悩むことがほぼない数独で試作してみました（https://jkr2255.github.io/js_puzzle_solvers/sudoku.html）。入力＆表示部分今までは、「内部的な盤面データ」と「表示」を連動させる処理にてこずっていたのですが、Riotを使えば、内部用のデータを書き換えるだけで、あとは.updateすれば表示は適宜書き換えてくれます。マス目自体は<table>で適宜CSSをかけて表現しています。ビルド方法 JavaScriptのビルドシステムをbrowserify+rakeで組んでいたのですが
nabinno 2017/02/13
qiita

riot.js

javascript

sudoku
リンク
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":
nabinno 2017/01/26
qiita

riot.js

javascript

webpack
リンク
チームをReady for Riotにするワークショップ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はRiot.js Advent Calendar 2016の24日目の記事です。前置きご注意ある程度Riotが分かっている人が、JavaScript初心者のチームにRiot的な考え方に親しんでもらうワークショップについて書いた記事です。 Riotについての説明はほぼ皆無ですので、ご注意を。 Riotなら誰でも使いこなせると思った Riot.js、良いですよね。JavaScript初心者集団でも、現代的なコンポーネント指向でサクサク作れるようになんて、夢のようじゃないの！ ……そんな風に思って、Riotの基礎の勉強会を開催。
nabinno 2017/01/24
qiita

riot.js

javascript
リンク
前のページ 1 2 3 4 5 次のページ