1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
ここ数年前から2015までのモダンフロントエンドを総まとめしてみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 (ここではフロントエンドというのを、ざっくりとHTML/CSS/JavascriptをつかったWeb技術のことをいうことにします)。 目次 Javascriptフレームワーク React.js Angular.js
大規模Reactアプリケーションを構築するためのベストプラクティス | POSTD
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する（破綻するのではなく）ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
フロントエンドエンジニアであり続けるために効率的に情報収集を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
またHTML5 Minutesに登壇してきました。今日はPCを自宅に忘れてiPhoneでブログを書いています。こんにちは先生です。 今日はHTML5 Minutesでお話した「フロントエンドエンジニアとして維持するために」という内容を整理してお届けします。本テーマはHTML5の話ではなく、その前の段階である“情報をいかに効率よく集めるか”というお話です。 はじめに フロントエンド界隈は非常に変化が激しくなっています。 HTML,CSS,JavaScriptはもちろんのこと、SassやLESSなどのプリプロセッサ、TypeScriptやCoffeeScriptなどのAltJS、GulpやGruntなど開発環境も多様化しました。JavaScriptだけ見ても、BackboneからEmber、Angular、Reactなどさまざまなライブラリやフレームワークが注目され、使われています。 そんな激
実用的なJavaScriptフレームワーク比較用サンプルアプリ「TODO-Module」を作ってみた - フルスタックエンジニアに
リッチなWebアプリケーションを作る上でJavaScriptフレームワークは欠かせませんが、 次々と新しいものが出てきてどれを使えばいいかわからないという方も多いと思います。 様々なフレームワークでシンプルなToDoアプリケーションを公開している TodoMVCというサイトがありますが、 大規模なアプリケーションをつくろうとした時、これでは少しシンプル過ぎてイメージが湧きにくいのではないでしょうか。 なので、もう少し実用的なToDoアプリケーション TODO-Module (source) というのを作ってみたので公開します。 また、このAPIを使ったSPA（シングルページアプリケーション）のクライアントも作りました。 TODO-Module-AngularJS (source) TODO-Module-Backbone (source) TODO-Module-Marionette (s
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題の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
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
BACKBONE.JSによるWebアプリケーション開発について
フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。 Read less
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
JavaScriptフレームワークはもうこりごり | POSTD
JavaScriptでフレームワークを書くのはもうやめましょう。 JavaScriptフレームワークというものは、あたかも避けられない死と税金のようなもの、絶対にぶちあたる避けられないものといわれています。こっそり聞いてみましょう、新しいウェブプロジェクトが始まるとき、一番初めに聞かれる質問は？十中八九は「どのJSフレームワーク使っているの？」でしょうね。昨今の業界においてJSフレームワークというものは本当に根深く浸透しているのです。でも、だから必須だというものではないのです。実際、もう使うべきではないのです。 どうしてこういった結論に至ったのか、振り返ってみましょう。 AngularにBackbone、Ember・・・ ここのところ長い間、 ウェブプラットフォーム とはHTML+CSS+JS、と簡潔に技術用語の羅列でまとめられてしまっていましたが、そこにはもっとぴったり表す用語“大混乱”
Backbone.jsアプリケーション開発ガイド
Backbone.jsをはじめとして、コードの構造や保守の容易さを向上させてくれるJavaScriptフレームワークが人気です。本書の解説は、MVCによって構造化されたJavaScript SPAアプリケーションを作成する方法など、Backbone.jsについての基礎的な事柄にとどまりません。モジュール形式の開発やさまざまなプラグインの紹介、開発者がよく遭遇する問題への解決策、アプリケーションの骨組みの自動生成やユニットテストに至るまで、Backbone.jsアプリケーション開発のさまざまな局面を多角的にとらえた一冊です。 まえがき 1章 イントロダクション 1.1 MVCとは 1.2 Backbone.jsとは 1.3 JavaScriptのMVCフレームワークが必要になるとき 1.4 Backbone.jsを検討するべき理由 1.5 本書の構成 2章 MVC 2.1 MVCとは 2.1
Rendr入門(1): Node.js + Backbone.jsでサーバ & クライアントを構築する"Rendr"の紹介 - Qiita
Rendr入門(1): Node.js + Backbone.jsでサーバ & クライアントを構築する"Rendr"の紹介JavaScriptNode.jsBackbone.jsExpress.jsRendr はじめてQiitaで記事を書いています。先日「Node.js + Express.js + Backbone.js」でサーバとクライアントの両方のシステムを構築する"Rendr"というウェブフレームワークを試しました。Rendrは、アメリカで人気のサービス"AirBnb"のチームが開発し、オープンソースとして公開したものです。クライアント側での採用事例は増えているBackbone.jsですが、サーバでの利用は珍しいのでは無いでしょうか。Rendr自体もまだ日本語での紹介例が無い事もあり、システムを紹介しつつ、使用感やメリット、そしてデメリットをメモしておこうと思います。 ※2回目を書
いまさらですが、増井雄一郎さんのメモ帳サービス「wri.pe」がすごい件 #HTML5 #プログラミング #wri.pe #markdown - CodeIQ Blog
CodeIQ中の人、babaQです。 ちょっと前になるのですが、コワーキングスペース茅場町 Co-Edo（コエド） で開催されたmasuidriveこと増井雄一郎さんのトークセッションに参加してきました。 HTML5を活用したメモ帳アプリ「wri.pe」誕生のきっかけ テーマは、増井さんが個人でつくった（とは思えない）メモ帳アプリ「wri.pe」 ゴールデンウィークを利用して、何かゴリゴリと作りたいと思い立ち、 1週間で「自分で使いたいものを作る！」と決めたのがきっかけなんだとか。 まず、浮かんだアイデアは2つ。 煩雑なメモをどうにかできるアプリと、未読のチャットを整理できるアプリ。 でも、1週間で開発するにはチャットはちょっと重い… ということで、メモアプリを作ることに決定。 まず最初に「メモアプリの課題」を整理したそうです。 - いつでも、どこでも使える（iPhone、iPadでも）
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
昨今の自分用Webアプリケーションひな形 - naoyaのはてなダイアリー
ちょっと jQuery と簡単なサーバサイドの処理を組み合わせた処理を試しに書いてみよう･･･なんて時に、いちいち jQuery を取ってきて HTML を書いて script タグを書いてロードして sinatra 立ち上げて云々･･･というのが毎度面倒なので、ひな形になるアプリケーションを作った。 https://github.com/naoya/boilerplate ひとまず sinatra でサーバーサイドを書き、HTML は slim で、CSS は sass 。JavaScript は CoffeeScriptで書くにあたって jQuery、underscore、Backbone をロードしてある、というような構成にしてあります。 まあ、この類のことは人それぞれ自分なりにカスタマイズしてやっていると思いますが、どういうコンポーネントで構成しているかを、備忘録も兼ねてちょっと紹
RequireJS＋Backbone.jsでモジュール管理されたWebアプリ開発 | DevelopersIO
Todoアプリもどきを作る 今回はRequireJSの理解を深めるため、Backbone.jsと組み合わせてTodoを追加するだけの簡素なデモを作ってみました。 Backbone.jsについても触れているため、記事が少し長いです。 お急ぎの方はページ下部にデモとサンプルコードがあるので、そちらをさくっとご確認ください。 RequireJS： http://requirejs.org/ RequireJS API： http://requirejs.org/docs/api.html Backbone.js： http://backbonejs.org/ なにができるの？ Webアプリを制作する際に、RequireJSを使ってBackbone.jsで構成されるModelやViewをモジュール化することで、開発時の管理コスト削減を目指します。 なお、モジュール化するとファイル数が増えて読み込み
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
