結局VanillaJSである。 - nobkzのブログ
anond.hatelabo.jp nida3001.hatenablog.com 上記のブログに刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。しかし、なんか書くのダルいので、大分大雑把にかくぞ。 さて、さっそく結論を述べよう。今のフレームワーク論争やらに対する解決策はVanillaJSを使うってことである。 フロントエンドSPAのフレームワークについて まず、今のほとんどのフレームワークが使えないってのはそのとおりである。その話してみよう。その理由は、「フロントエンド」 ってのは一括りにできないからである。「ハッカーと画家」のとある言葉をアレンジして言えば「フロントエンドはユーラシア大陸のようなものである」。フロントエンドが関わる範囲が大きすぎるのである。ヨーロッパもあればアジアもあれば中東もあるという感じである。 範囲が大きすぎて、フレームワー
5000人調査でわかった！世界のフロントエンド開発者が使うツールはこれだ
次々とリリースされるJavaScriptライブラリーにフレームワーク、進化を続けるCSSモジュール……と、変化の激しいフロントエンド開発界隈。いま開発者たちに実際に使われているのはどんなツール？ 開発経験は2年以上ありますか？ 高度なCSSスキルとしてSassやAutoprefixerの使用も含まれていますか？ JavaScriptの知識は十分にあり、Gulp、nmp、jQueryを使いこなせていますか？ そうであれば一般的な開発者だそうです。Ashley Nolan氏によるフロントエンド開発ツールのアンケート調査によれば。 気になる結果を見る前に…… この種のアンケート調査は新たなツールを見つけたり、知識不足の分野の把握に役立ちます。執筆時点で5254件の回答が寄せられていて、アンケート調査としてはかなりのサンプル数です。ただ、結果を疑いようのない真実だと受け取るには慎重になるべきです。
Vue.js Tokyo v-meetup="#3" に参加してきました - tacamy--blog
vuejs-meetup.connpass.com 申し込んだ時点で213/80人と絶望的だったのですが、たまたまブログ書く枠が空いたので勢いでポチってしまいました。ただ、私はVue.js初心者（※）なのでブログを書けるほど内容が理解できるのかかなり不安でしたが、結果的にどのトークも楽しめました（理解したとは言ってない）。なので、同じような初心者の方でも、興味があれば参加してみるとよいのではと思います。 （※）人がつくったアプリ（Vue 1.x）の改修をしたり、開発合宿でミニマムな評価アプリ（Vue 2.x）をギリギリつくった程度のレベルです。 以下、それぞれのトークの内容のメモです。 Vue.js の中身 - 算出プロパティはどうやって動いているか @kitak https://kitak.github.io/slides/170316-vue-meetup/ Vue.jsのようなライブ
JavaScript 30
So, you've done a few courses and read a few books but still don't feel great about your relationship with JavaScript. How do you get better? Build things. Lots of things. Build 1,000 things. Keep it up and don't stop. Seriously. This has always been my advice. Just put in the work and you will get better. But Wes, what should I build? I have no ideas! Please don't make me do another todo app. Ide
Vue + Vuex を使ってみた感想と、Redux との比較 - Toro_Unit
いいにくの日ですね。肉食べたいです。 React + Redux にはよくお世話になっている昨今なのですが、React 以外も扱いたいなと思ったこと、そもそも Flux に対する理解が浅いんじゃ無いか？ということで、Vue.js + Vuex をちょっと勉強してみました。 つくったもの：https://github.com/torounit/vuex-todo ここら辺をいろいろ参考にしました。 Vuex のドキュメント Vue.js用のFluxライクなライブラリVuexを試してみる – Qiita Vue.js + Vuexで開発をしてみよう！ – Tech Blog – Recruit Lifestyle Engineer Redux と Vuex の違い。Reducer と Mutation の違い。 両方とも Flux パターンであるため、基本的な考え方は変わりません。ただ、Red
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には
Getting Started with webpack – Insightful Software
Jun 2017 edit: 3 was just released! The syntax for 3.x is identical to 2.x, which means this article is still up-to-date (if I missed something, please comment!). The version bump was for more behind-the-scenes stuff, but it did add an easy-to-add “Scope Hoisting” plugin that can cut down on your bundle size that’s worth checking out! Jump to the bottom of this article for the “Upgrading to 3” sec
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
Formを作らずにJSでPOST送信
AタグやButtonのonclickなんかを引っ掛けてPOSTしたい場合、hidden要素しか持たない隠しformを作ったりしていましたが、Javascriptだけで処理できたのでメモ。 ※参考 HTMLでformを作らずにJavaScriptでPOST送信 /** * データをPOSTする * @param String アクション * @param Object POSTデータ連想配列 */ function execPost(action, data) { // フォームの生成 var form = document.createElement("form"); form.setAttribute("action", action); form.setAttribute("method", "post"); form.style.display = "none"; document.
JavaScriptでPOST送信する方法 - 【鋭利団体】PK-Brothers
なんだかんだ言って必要になる事柄。 難しいようで簡単。 そんなもんですよ。 では備忘録的に残していきます。 早速ですが、簡単なのでぱぱっと終わらしちゃいましょう。 まずはJavaScriptのfunctionを作ります。 以下のソースでちゃちゃっとできますね♪ サンプルなので適宜修正してください。 <script type=“text/javascript”> function sampleForm( value ){ var form = document.createElement( ‘form’ ); document.body.appendChild( form ); var input = document.createElement( ‘input’ ); input.setAttribute( ‘type’ , ‘hidden’ ); input.setAttribute(
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
React.jsとserver-side rendering - Qiita
server-side renderingとは文字どおりサーバーサイドでHTMLを生成してrendering出来るようにするものです。SinglePageApplicationのようなJavaScriptでDOMを組み立てるようなアプリケーションの場合、サーバーから返されるHTMLには空のdivだけがあってそこからJavaScriptを読み込んでtemplateを描画することになり、これには2点の問題点があります。 初期のロード時間 HTMLが返されてJavaScriptを評価してそこからtemplateの表示になるので、サーバーサイドからHTMLが返される場合と比べて当然時間が掛かります。なので別途ローディングを見せるなどの工夫が必要になります。 SEO 最近だとGoogleのクローラーがJavaScriptを解釈するようになったのでGoogleについては問題ないと言えるかもしれませんが
【個人メモ】React.jsを使ってserver-sideレンダリングを試す - Qiita
React.jsのserver-side レンダリングを試す React.js Tutorialではフロントエンドでの実例が用いられていた。 githubリポジトリ上には、React.jsを使ってDOM(Virtual DOM)をサーバサイド側で構築し、 フロントエンド側にはレンダリング結果を返す、というサンプルがある。 このサンプルを試用して react-bootstrapを使ったりGrunt 使ったりして 自分なりにReact.jsでのserver-sideレンダリングに対する理解を深めるため コードを書いてみよっかなと思った。 以下記録。 まずreact-server-exampleを試す をgit cloneし、動作確認をしてみた。 プロジェクトソースを手元に持ってくる
Node.js を選ぶとき 選ばないとき
4. @tricknotes I am a software developer who love JavaScript and Ruby. http://tricknotes.hateblo.jp/
Node.jsをとりあえず始めるにあたって現実的に必要だった知識 - Qiita
はじめに この夏、Node.jsを始めようと思い立ったときに調べたことをメモしました。 「お前こんなことも知らなかったの！？」ということがばれるのは恥ずかしいですが、同じところで立ち止まってる人のお役に立てば。 下準備 Node.jsのバージョン管理ツールの導入 メリット 異なるバージョンのnode.jsを手軽に共存させられる 代表的なもの nvm nodebrew nave nodebrewでnode.js(+npm)のインストール 既にnode.jsをインストールしている場合は一旦アンインストールする必要あり node.jsのアンインストール Mac OS X から Node.js をアンインストールする方法 node.jsのアンインストール nodebrew + node.jsインストールの流れ node.js 入れるなら nodebrew が超簡単 [Front end] Node
Node.jsのMVCフレームワーク「Express」の基礎知識とインストール
連載目次 前回の「いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール」において、サーバーサイドJavaScript実行環境であるNode.jsについて基本的な説明を行いました。また、その周辺ツールであるnpm、Gulpを含めた環境のセッティングも行い、Node.jsを用いてMEANスタックアプリ開発ができる状態になったと思います。 本記事では上記環境を用いて説明していくので、実際にサンプルを動かしたい場合には前回の記事を読んで環境を作成しておきましょう。 今回はサーバー側のMVCフレームワーク、「Express」について解説します。 MVCフレーワーク「Express」とは 「Express」とは、Node.js上で動作するWebアプリのフレームワークです。 Webアプリを構成する上で必要な機能がそろっており、ルーティングやビューヘルパー、セッション管理の機能もデフォ
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 (はてなBlog)
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Promiseの本
はてな教科書JavaScript編
