なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか
最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として
(Babel 5における)ES6のモジュールを解説してみた - uehaj's blog
警告 以下でのモジュールの説明はトランスパイラであるBabel 5,6で動作を確認した振舞いについての記述です。2015年11月現時点で、ECMAScriptのモジュール仕様策定範囲は、本来の全体範囲のまだ一部であるとのことです。その状況でのBabelの実装は、良く言えば先行的、悪く言えば将来そのままである保証はなく、現時点でも他のES2015をサポートする処理系との間での相互運用の保証はありません。また、現時点でBabelのモジュール機能を使うこと自体にリスクがあるという意見もあります。CommonJS側からBabelが生成したモジュールをCommon JSモジュールとして読み込もうとしたときの互換の問題として、Babel5で可能だったことがBabel6では利用不可になる、といったことも起きているようです。 そこらへんを含めて解説されているこちらの資料が参考になります。 (2015/11
gulp と browserify と vinyl の話 - <body>
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
ES Modules と Node.js について - from scratch
書こう書こうと思いながらこのタイミングまでのがしてしまいました。 今一番 Node.js の中で hot な discussion の一つと言えるでしょう、『ES Modules が Node.js の中でどうなるか』です。 ES Modules 現況 ES2015 が発刊されてそろそろ一年です。 ES2015 にある機能は Node.js v6でも 93% 程度カバーされています。モダンブラウザでも大体が90%を超えています。しかし、 ES Modules だけはまだどのブラウザも実装しきれていません(kangax compat table は ES Modules は省かれてます)。 そもそも ECMAScript 2015 自身で定義されたのは構文だけなので、構文はともかく、どうやってモジュールを取ってくるかという Loader の部分がまだ決まりきっていません。 https://w
Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"
最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 (はてなBlog)
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
Visual Studio Code の中身は Electron + Monaco だった - しばやん雑記
Build 2015 のキーノートで公開された Visual Studio Code ですが、見た目がどう考えても Visual Studio Online "Monaco" だろと思ってたら、思った通り Monaco だったようです。 Visual Studio Code - Code Editing. Redefined 実行環境としては Atom Shell と言うか Electron を使っているみたいです。当然ながら中身は Monaco なので Node.js で書かれています。 インストールされたディレクトリを見ると、Chromium な DLL とか出てきます。 最近はアプリケーションも nupkg 形式で配布するようになったんですね。 基本的には Chrome のように起動時にアップデートしていくスタイルのようです。 Windows だけだと思いますが、インストールするとコ
WordPress 4.3 will be rewritten in Node.js
WordPress 4.3 will be rewritten in Node.js by · April 1, 2015 Warning: This Article was posted on April 1, 2015, So its a April fool prank. One of the leading developers of the core WordPress team Ryan Boren told “A significant part of WordPress version 4.3 the popular CMS functionality will be rewritten in Node.js, while maintaining backward compatibility with previous versions.” WordPress and No
Bower入門(基礎編) - from scratch
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
Node.js/ExpressでPostgreSQLを使おう(1/6):初心者のための Node.jsプログラミング入門 - libro
データベースは、Webアプリケーションの作成で非常に重要です。Node.jsでも、データベースを利用するための機能はあります。ただし、標準で用意されているのではなく、アドオンプログラムを追加して利用することになります。 この種の開発でデータベースを利用するとき、考えなければならないのは「本番環境はどうなっているか」でしょう。ローカルで動いているだけではつまらないですから。 ここでは、「HerokuでWebアプリをデプロイする」ということを目標に説明することにしましょう。そのためには、まず「Herokuのデータベース環境はどうなっているか」を知らなければいけませんね。 Herokuの場合、標準でPosgreSQLが対応しています。他のものも使えないことはないのですが、基本はPostgreSQLと考えてください。 では、HerokuでNode.jsアプリからPostgreSQLを利用するための
新しいWebフレームワーク Koa について
新しいWebフレームワーク Koa についてこの記事はNode.js Adevent Calendar 2013 - Adventarの25日目の記事です！ メリークリスマス！！ 大とりの記事に相応しいかどうか分かりませんが、Expressの作者であるTJ Holowaychuk(@visionmedia)氏がここ最近開発しているKoaというWebフレームワークについて紹介し、最後にちょこっとコメントして、Node.jsのAdevent Calendarをしめくくりたいと思います。 Koaとは？Koa とは、WebアプリケーションやRESTなAPIアプリケーションを作るための新しいWebフレームワークです。 同氏が手がけたフレームワークとしてConnectとExpressがありますが、知っている人、使っている人からすると何が違うの？疑問に思うかと思います。これについては、READMEやFA
Koa - next generation web framework for node.js
IntroductionKoa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. By leveraging async functions, Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods that make writing serve
第1回 Node.jsとは | gihyo.jp
はじめに 本連載では、注目を集めるNode.jsを使って、Webアプリケーションを様々なクラウド環境で動かすことを最終目的にしています。Node.jsに触れたことがないJavaやPHPなど普段サーバサイドで開発されている方を主な対象として、まずNode.jsの概要から紹介していきます。 Node.jsとは Node.jsとは、ブラウザGoogle Chrome用に開発されたJavaScriptエンジンV8がサーバ上でプログラムを実行できるように、ファイルやネットワークI/Oなど多くの機能を追加したものです。軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築ができるプラットフォームになっています。いわゆるサーバサイドJavaScriptの代名詞として注目を集めています。 Node.jsでは“軽量で効率良く”というのを実現するために次の2つのモデルを採用しています。
WebStorm 7を使いJavaScript テストをKarmaで動かす | Post Blog
WebStormは常に開発をより楽しくする最新のテクノロジやツールをサポートしています。WebStorm 7において中でも大きなのはKarmaのサポートです。KarmaはAngularJSチームが開発しているJavaScriptをテストするためのシンプルでフレキシブルなツールです。 これまで通りJSTestDriver(詳しい解説はこちら(英語) )も利用できます。 WebStormのKarma連携の主要機能は以下の通りです: ローカルWebサーバを使い、コンピュータにインストールされている任意のブラウザでテストを走らせる Jasmine、QUnit、Mochaなど、好きなフレームワークと組み合わせてテストできる istanbulコードカバレッジエンジンと一緒に動かせる 全体を説明するビデオ(英語)を用意しましたので是非ご覧ください。また、チュートリアル – Running JavaScr
mochaでフロントエンドのテスト - hokaccha memo
JavaScript Advent Calendar 2011 (フレームワークコース)6日目です。この前のエントリーで予告したとおりmochaを使ったフロントエンドでのテストについて書きます。ちなみにこの前エントリー書いたときは0.2.0だったんですけどすでに0.3.2です。 必要なファイルを読み込んでこんな感じで書きます。jQueryに依存してるみたいなのでjQueryも読み込みます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>mocha sample</title> <link rel="stylesheet" href="mocha.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.m
mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker
東京Node学園祭2012 アドベントカレンダーの9日目です。Node.jsとほとんど関係ないうえに内容がけっこう薄い感じなった気がするんですけど気にせずいこうと思います。 フロントエンドのJavaScriptをテストするとき最近はいつもmochaを使ってるんですが、やはりJenkinsとかtravis-ciを使って自動テストもしたいと思って試してみました。 hokaccha/mocha-phantom-travis-test ここではよくあるjQueryで画像のロールオーバーをするというプラグインを作ってそのライブラリに対してテストを書いています。ソースコードはこんな感じです。 $.fn.rollover = function() { return this.each(function() { var $img = $(this); var src = $img.attr('src');
テストフレームワーク mocha - hokaccha memo
JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース)3日目のhokacchaです。Node.jsのテストフレームワーク、mochaについて書きます。 mochaはTJが新しく作り始めているテストフレームワークです。ドキュメントを見ればできることは大体書いてありますので、ドキュメントを元にどういうことができるのかを解説していきます。現時点でのバージョンは0.2.0です。 http://visionmedia.github.com/mocha/ shouldについて まずmochaでどういうことができるかの前にshouldについて解説しておきます。mochaのドキュメントには特に説明もなくshouldが使われていて、shouldでどういうことができるかわかってないと、ドキュメントを読んだときにmochaの機能なのかshouldの機能なの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PostCSS とは何か
IBM Developer
Japan Node.js Association