<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>webpack tutorial</title> </head> <body> <script src="bundle.js"></script> </body> </html>
<link rel="import" href="bower_components/polymer/polymer.html"> <polymer-element name="x-test"> <template> This is <b>{{owner}}</b>'s name-tag element. </template> <script> Polymer('x-test', { // initialize the element's model ready: function() { this.owner = 'Rafael'; } }); </script> </polymer-element> 公式に乗ってるサンプルほぼそのまんまです。polymer-elementのname属性には、必ず -を含んだ名前 をしているする必要があるので注意です。 後はこれをHTML imports
思い立ったが吉日ということで、プロジェクトのモジュール管理をRequire.jsからBrowserifyへと移行し、その直後にWebpackに移行しました。もうちょっと考えてツールを選ぼうと思います。 さて、Require.jsからBrowserifyへ変えた理由は、シンタックスをCommonJS的に書けるようになって、全体がシンプルになるから、という理由でしたが、BrowserifyからWebpackへの移行は、もうちょっと切ない理由での移行になりました。 Webpackとは ドキュメントも若干わかりづらいですが充実しており、基本的にここだけで必要な情報はほとんど得られます。 なのでこちらをどうぞ・・・じゃさすがにあれなので、ドキュメントに書いてある、作られた動機などを若干紹介します。 今はモジュールシステムがいろいろある CommonJS AMD <script> タグ ES6 Mod
Getting started by reading the documentation, which also contains an introduction and a tutorial.
昨年のAdvent Calendarを眺めたり、JS周りの記事を見ていると、RequireJSとか、CommonJSとか、AMD、Browserify、webpackあたりが、同じような文脈で登場するんですが、それぞれ何を指しているのかよくわからなかったため、今更ながらまとめてみます。 前提 小規模にしかJavaScriptを使っていないWebサイトでは、jQueryを使ってDomイベントで色んな処理をして、Domに反映させる。というような処理が、ごちゃっとまとめて書くことが多いかと思います。ごちゃっととは、特にDomにしか情報を保持していない状態を指していて、イメージとしてはこのようなコードです。 $(function() { # イベントハンドラ $("#btn").on("click", function(){ $.ajax({ url: "api/resources", dataT
今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference 外村 和仁(株式会社 ピクセルグリッド) 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If
Ready-to-use foundational React components, free forever.
React をちょっと触ってみたい、というのと 最近すこし Ruby on Rails も勉強はじめた、ということで、rails g scaffoldで作るような管理画面のViewを react-router を使ってSingle Page Applicationで作ってみた。 https://react-router-scaffold.herokuapp.com/ (source code: https://github.com/sugyan/react-router-scaffold) 既に React.jsでRailsのScaffoldを再現してみた - Qiita という記事があり、これをおおいに参考にさせていただいております。 違いとしては、 Bootstrapで見た目を変えてる React 0.13でサポートされているES6 classes記法などを使って書いてみた Hashで
Google+ボタン はてなブックマークボタン 更新日時: 2015年04月23日(木) 作成日時: 2015年04月23日(木) 前の記事 / 次の記事 Railsのテストについて考えまくった結果 一定の結論に達した気がした(たぶん気のせい)のでメモ。 全ての要件を漏れなくテストできればそれがいいに決まってる。 でも無理。 っていうかやる時間があったとしてもそれは果たして意味があるのか。 勝手に天から降りてくるならいいけど。 で、落としどころを探る。 フレームワークはRspecを使う。 大前提としてロジックが介在しないヶ所はテストしない。 例えばCSSが仕様通り書かれているかみたいのはテストしない。 ていうかロジックがないヶ所のテストとかただのコンペアだから不毛。 コンペアが不毛っていうことじゃなくて、 コンペアするために正解である比較対象を用意しなきゃいけないけど その用意した比較対象
今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。 Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。 自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。 Bootstrap 何はともあれまずは定番のBootstrapですがやはりちゃんとあります。 前回のRouterのサンプルでも使っていました。 使う場合は、react-bootstrapの他に別途bootstrapのCSSを読み込む必要があります。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/boo
あなたは、時間を支配できているでしょうか? 逆に、時間に支配されていませんか? 「Time is on my side = 時間は常に私の味方だ」 (中略) 彼らは決して時間に追われることがありません。「時間を支配できる、味方に付けられるものだけが、自分のすべきことを成し遂げられる」と信じているからです。「Time is Money」を超えているのです。 本『世界トップリーダー1000人が実践する時間術』は、トニー・ブレア 元英首相ハワード・シュルツ スターバックスCEOマイケル・サンデル ハーバード大学教授など世界のVIP、1,000人にインタビューしてきた谷本有香さんによる、世界の舞台で活躍するエグゼクティブたちの「時間の使い方」をまとめた本。 谷本さんについてはTV朝日「サンデースクランブル」のコメンテーターとしてもご活躍されているので、ご存知の方も多いでしょう。 今日は、世界トップ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く