マンガを無料で読むならcomico（コミコ）！ オリジナルのタテカラー漫画から定番のコミックス、投稿作品まで豊富に取り揃え！ お得なキャンペーンも毎日実施中！
comico (コミコ) | タテカラー漫画が毎日無料、毎日更新！
マンガを無料で読むならcomico（コミコ）！ オリジナルのタテカラー漫画から定番のコミックス、投稿作品まで豊富に取り揃え！ お得なキャンペーンも毎日実施中！
React.jsとCycle.js、Polymer俯瞰、そしてどれがいいのか - Qiita
現在のプロジェクトではVueを使っています。他のフレームワークを調査した結果のメモです。 用語とか一般的な話とか 用語 データ 情報を表現したもの Model 加工したいデータ ViewModel 描画したいデータ DOM ブラウザが解釈する表示データ Event 外界から入力されたデータ 一般的な話 情報処理の本質はデータを他のデータに変換することです。 フロント、バック、ゲーム、なんであろうがそこは変わりません。 フロントにおいて、プログラムは、 Event+Model -> DOM の変換を行うものです。 ですが、この問題は一気に解くには大きすぎます。よって中間データを導入します。 Event+Model -> Model+ViewModel -> ViewModel+DOM -> DOM これが情報を処理するという観点から見た、フロントの構造です。 フレームワーク俯瞰 React.
React に対する感情とかコンポーネント管理ライブラリの選定とか
コンポーネント管理できそうなライブラリの選定 ここでいうコンポーネントは HTML 要素をコンポーネントに見立てるような、近代 Web フロントエンドにおける狭義のコンポーネントです。大まかな条件は次の3点。 コンポーネント中心の開発ができること >= IE9 をサポートすること（切っても良さそうなんだけど...） 既製品・スクラッチは問わないが極端なリスクは踏めない（納期がシビア） あとは期待度や API のセンスなど、個人的な審美眼判定に依ります。 angular/angular : 2.0 が正式リリースしたらまた会いましょう jashkenas/backbone : 最近のコンポーネント管理には及ばない Custom Elements ( Polymer ) : polyfill が >= IE10サポート segmentio/deku : 振る舞いは十分だったけど、>= IE10
React のコードを ESLint で検証する - blog @arfyasu
はじめに 相変わらず、TODOアプリを作りながら React の勉強をしています。 JavaScript に lint ツールがあるのを知らずにコーディングしていたのですが、ESLint を使ってみて便利だったので手順をまとめておきます。 eslint.org これで、 セミコロンのつけ忘れ console.log 残したままだった〜 なんていうこととはおさらばです！ 環境 OS X 10.10.5 ESLint 2.3.0 ESLintの導入 npm から ESLint をインストールします。 $ npm install --save-dev eslint $ node_modules/.bin/eslint -v v2.3.0 設定ファイルの作成方法 ESLint の最大の魅力は、検証項目を自由に設定出来ることです。 逆に、検証項目が多すぎて導入が大変となっては元も子もありません。 初
JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を
大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck
All slide content and descriptions are owned by their creators.
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に マイクロソフトがオープンソースで公開している「Visual Studio Code」が、Chromeブラウザのデバッガプロトコルに対応したことが発表されました。 Visual Studio Codeのエディタ画面から、Chromeブラウザで実行しているJavaScriptのブレークポイントの設定と実行と停止、変数の参照などが可能になります。 JavaScriptのSoruce Map機能も働くため、圧縮済みのコードを実行しても自動的にVisual Studio Code上の圧縮前のJavaScriptコードに対応してそのままデバッグ可能。また同様の仕組みのおかげでTypeScriptのコードもVisual Studio Code上でそのままデバッ
これはかなり気になる！スタイルシートの可能性が広がるReact.jsのCSS版のようなスクリプト -Descartes | コリス
「React: CSS in JS」からインスピレーションを得て、CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できるスクリプトを紹介します。 Descartes Descartes -GitHub 上記ページではクリックする度に、背景色の値が動的に適用されています。 Descartesの特徴 Descartesの使い方 Descartesの特徴 DescartesはSassやLessのようなCSSプリプロセッサの良い点を取り入れ、CSSをJSONとして記述するとどうだろうと始めたオープンソースのプロジェクトです。スタイルのセットだけでなく、DOMへのアクセスや基本的なイベントリスナーに対応しています。 Descartesの書式は、SassやLessに似ています。 Descartesの基本スタイル パフォーマン
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
gulp でJS, CSS, イメージファイルのキャッシュ問題を回避する - Qiita
キャッシュ問題について Web ページの高速化のため、キャッシュを利用して高速化等を行ったりしますが、公開した JS,CSS 等に問題があったときに、それらを修正し、 即座に反映させたいがキャッシュにより、それが反映されないといったことが度々起こります。 これは、キャッシュにより、改めてデプロイした最新の CSS,JS 等が読み込まれ無いことで起こっている現象で、 これを回避するために、Rails であれば Asset Pipeline という機能があり、具体的には読み込む JS, CSS のファイル名にハッシュ値を追加し、デプロイ時にそれを実行することで、読み込む JS, CSS を制御しています。 今回はこれを gulp の task で実現したいと思います。 使用する node_module gulp-rev 各ファイルに対して、ファイル名にハッシュ値を付与するモジュール 変換したフ
RxJSでMVVMやってる - @hadashiA
Rxは、すごくUIを書くのに向いているのではないだろうか。アプリケーションの状態を山盛りの変数で管理することから解放され、状態から状態へ変換する関数を書けばよくなるから。 非同期処理を同期っぽく書きたいならawait でいいじゃん。UIイベントを宣言的に書きたければ 2-wayバインディングがあれば良いじゃん。という話では終わらず、その辺の問題解決に加えて、値の発生器を全て同じ宣言にまとめられ、状態変数がなくなるところが書いていて楽しいところです。 // たとえば、、 Observable.fromEvent(searchBox, 'input') // 検索窓に字が打ちこまれたら .debounce(500) // 0.5秒ごとに .map(e => e.target.value) // 入力されたテキストを .filter(q => q.length > 0) // 1文字以上の場合だ
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
リアクティブプログラミングとは何だったのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ※この記事はずいぶん内容がわかりづらかったようで、さまざまな反応を頂きました。追記が複数ありますので、併せてご覧ください。 TL;DR Version: リアクティブプログラミングに挑戦しようとした。がっかりした。 はじめに 私のこの記事は「【翻訳】あなたが求めていたリアクティブプログラミング入門」に触発されて？書かれたもので、そちらの元ネタの記事に先に目を通しておいたほうが理解がしやすいと思います。そちらの記事は本当に解説がわかりやすく、そして何よりとても説明が具体的なので、リアクティブプログラミングについて知りたいかたには大変おすす
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
Object.assignが実装された - JS.next
概要 Object.assignはオブジェクト同士をマージするJSerの誰もが長年追い求めた夢のメソッドである。 使い方 Object.assign( target, ...sources ) 第一引数で渡したオブジェクトに、第二引数以降のオブジェクトが直接持つ、 全ての列挙可能なStringまたはSymbolプロパティを加え、結果として返す。 例： var sym = Symbol() var obj1 = { "str": 1, } var obj2 = { "str": 2, [sym]: 2 } var obj3 = Object.assign( obj1, obj2 ) console.log( obj1 == obj3 ) // true console.log( obj1["str"] == 2 ) // true console.log( obj1[ sym ] == 2
Fundamentals of Redux Course from Dan Abramov
In this comprehensive tutorial, Dan Abramov - the creator of Redux - will teach you how to manage state in your React application with Redux. State management is absolutely critical in providing users with a well-crafted experience with minimal bugs. It's also one of the hardest aspects of a modern front-end application to get right. Redux provides a solid, stable, and mature solution to managing
fluxフレームワークreduxについてドキュメントを読んだメモ - fukajun - DeepValley -
この辺を読みながらfluxの各パーツの役割、reduxの登場人物について 自分のめもとしてまとめてみた http://rackt.github.io/redux/index.html reduxの思想 1つ情報源を正とする アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー 状態を変更する唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う 状態を変更するための処理はreducersに定義する fluxの登場人物 actionCreator actionを作るための関数 ajaxリクエストなどの処理を行い、結果を含めたactionを作成する action アプリケーションで何が起きたのかとそれに付随するデータ nTypeと任意のデータを持つ単なるObject acitonCreatorによって作成されてdispacherに渡され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ian Hansen - RxJS for Metrics and Music
VJing with Web MIDI and RxJS
v86