You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Update: this article was written in 2015 and is obsolete. Please refer to the official up-to-date guide that I co-authored: https://webpack.js.org/guides/caching/ Webpack is a great way to package all your static resources such as JavaScript, CSS or even images, but to effectively use generated assets in production one should leverage long-term caching. Documentation on this topic is scattered acr
ハイブリッドとモバイルWebアプリ開発の決定版 開発環境のセットアップを一切することなく、JavaScript・HTML・CSSを用いたモバイルアプリ開発を始めましょう。クラウド上の開発環境Monacaと組み合わせることで、あなたの開発環境は常に最新の状態に保たれます。 クラウド上にすべてのツールを 強力なCLI(コマンドラインツール)やデスクトップ向けアプリ(WindowsとmacOSに対応)を通じて、Onsen UIアプリはとても簡単に制作できます。それ以外にも、Monacaが提供するライブリロード対応のデバッガーや、リモートビルド機能といったクラウドの機能にアクセスできます。 美しいUIコンポーネントと自動スタイル モバイルアプリに特化した、ネイティブのようなパフォーマンスに優れたUIコンポーネントが自慢です。タブ、サイドメニュー、ナビゲーションといった共通デザインだけでなく、リスト
※この記事を書いたのは2016年4月です。Qiitaでは記事をアップデートするとその日付のみが表示されていまうため、新しい記事のように見えるかもしれませんが、現代ではもっと進化していることにご注意ください。素直にReact Hooks を使いましょう。あと Redux は用法用量を守って気をつけて使ってください。なんならReduxは使わない方がいいでしょう。 最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか?それはただの誤解かもしれません。React+Reduxはそんなに難易度の高いものではありません。ただ単に、新しい概念で構成されているから、カルチャーショックのようなものがある、というだけのことです。React+Reduxに入門してみましょう。 僕自
※(2016/01/19)react-routerのバージョンは1.xを前提にしています。 ※(2016/02/18)2.xネタはこちら なんらかのサービスを作成した場合、製品カテゴリーごとに画面が存在するとか、メインの画面とは別にに設定画面があるとか、会員制サイトであればログイン画面があって、ログインしたら、ポータル画面に遷移したり、といったように、複数の画面が存在して、それらの画面に行き来できる仕掛けが必要になってきます。 react-routerというライブラリは画面遷移を管理してくれるライブラリです。 インストール npm install react-router --save npmのバージョンが3以上の場合は、historyもインストールします。 npm install history --save react-routerとhistoryはバージョンの対応関係があるため、 n
React でルーティングをする react-router を試しました。 インストール Browserify + Babel でコンパイルするのでそのツールを React 、 react-router と一緒にインストールしておきます。 $ npm install -g browserify $ npm install -D babelify babel-preset-es2015 babel-preset-react $ npm install -S react react-dom react-router Hello, World! とりあえず画面になにか表示するところからやってみます。 import React, { Component } from 'react'; import { render } from 'react-dom'; import { Router, Rout
はじめに (2017/08/10追記) この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template (追記ここまで) JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch (または -w)オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えて ローカルサーバーも起動してくれ
などをやってください。 以下の内容は古くなりました。 表題通りでReactとmatrial-uiを使ったウェブページをwebpackを使って最小手順で作るための手順をまとめた。 準備 まずはディレクトリを作成してnpmの準備をする。 $ mkdir webpack-exe $ cd webpack-exe $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `np
deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
アロー関数とは 基本構文 通常の無名関数との違い thisの扱いに注意 jQueryでコールバック関数としてアロー関数を使う場合 アロー関数で即時関数 まとめ 参考リンク アロー関数とは ES2015の新構文の一つ「アロー関数」とは、無名関数の省略記法です。無名関数ではない、いわゆる「関数宣言」には使うことができません。また、後述しますが無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要です。 //従来の関数式 var fn = function (x) {/* 関数本体 */}; //上記の関数式の無名関数部分(右辺)をアロー関数に置き換えたものが以下です。 var fn = (x) => {/* 関数本体 */}; //次の様な「関数宣言」をアロー関数に置き換えることは出来ません。 function fn(x) {/* 関数本体 */} 基本構文
未だにモジュール管理してないので、基本っぽい RequireJS を勉強する。 RequireJS とは JavaScript 用のモジュール管理フレームワークの1つ。 JavaScript を実装していて、 view や model などで細かくファイルを分割していると、ファイル間の依存関係を意識して読み込む順序を注意しないといけなくなる。 (<script> タグの読み込み順序を調整するか、もしくはコンカチしているのであれば、そのコンカチ順序を管理しないといけない) ファイル数が少なかったり、個人で開発しているのであれば手動管理でも大きな問題はない。 しかし、ファイル数が多くなってきたり複数人で開発していると、手動管理では限界がある。 RequireJS では、 JavaScript のコードをモジュールという単位で管理する。 そして、各コードは実装の先頭で使用するモジュールを宣言する
Parsley, the ultimate JavaScript form validation library Validating forms frontend have never been so powerful and easy. Get started today v2.9.2 Intuitive DOM API Like no other form validation library, simply write in English your requirements inside your form HTML tags, Parsley will do the rest! No need to write even a single JavaScript line for simple form validation. View example » Dynamic for
日本では、2016年1月13日でIE8の正式サポートが終了しました。 それでも、まだIE8でもちゃんと閲覧できるサイトを作って欲しいと言われることがあります。 正式なサポートが終了したブラウザを使うリスクや対応工数を考えると、 クライアントには「IE8は対応外です」としっかり説得すべきです。 でも、大人の事情で対応することになった際に、気をつけるべきことをまとめました。 1. IE8は対応外と突っぱねるべし 一番良いIE8対策は、動作確認対応外にすることだと思います。 公式サポートが止まったことで予期せぬ攻撃を受け、そのリスクを誰が負うのかクライアントさんにも説明してください。 ブラウザシェアなどをお見せして、そろそろ推奨環境をアップデートしませんかと説得してみてください。 古いユーザーさんに支えられているサービスは…頑張って対応してください。 2. HTML5とCSS3が使えない ついく
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する var rect = element.getBoundingC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く