まだタスクランナー使っていないって本当(マジ)? 仕事に対する効率化意識向上のための gulp ハンズオン : Wordcamp tokyo 2015

The Birth & Death of JavaScript — Destroy All Software Talks あの、Watのスピーカーとして有名なGary Bernhardtが、JavaScriptの誕生と終焉についてスピーチしている。 このスピーチは、2040年に行われているという設定である。JavaScriptが10日でやっつけ設計されたというところから始まり、JavaScriptが開発された地は、すでに放射能汚染されているという、2040年からみた歴史的事実を交えつつ、話は続く。 JavaScriptはあまりにも一般化してしまったため、皆JavaScriptで書くようになった。ただし、JavaScriptは遅いので、JavaScriptをネイティブコードにコンパイルしやすいようにする制限的な記法が流行した(整数型でいいところには、0をビット列論理和することにより、整数型で
プログラマとして Symfony 歴は 2 年くらい(フルタイムではない) Symfony1 時代はほぼ知らない Java, Ruby, JavaScript, elisp, PHP github 上では JavaScript プログラマ? 代表作は power-assert Why Symfony? なぜ Symfony を選んだか 「コードがしっかりしている」 メンテ方針がしっかりしている(長期サポート, 後方互換性) DIベースの疎結合設計で自分でアーキテクチャを進化させやすい 中長期的な生産性が高まることを期待できる
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
JavaScriptでは、多くの文は、セミコロンという終端記号を明示的に記述して、文の終わりを示す。 var i = 0 ; ++i ; --i ; しかし、JavaScriptでは、一部の文脈で、セミコロンの省略が許されている。あたかも、セミコロンが自動的に挿入されたかのように振る舞う。これを、自動セミコロン挿入(Automatic Semicolon Insertion) ECMA-262 Edition 5.1 §7.9が規定する、自動セミコロン挿入の定義を、本記事では解説する。 まず、三つの基本的なルールがある。 プログラムを左から右にパースした時に、文法上許されないトークン(反則トークン, offending token)があった場合、以下の二つの条件のうちどちらかひとつ、もしくは両方を満たせば、セミコロンが自動的に挿入される。 反則トークンと前のトークンが、ひとつ以上の行終端子
前回、Rubyを楽しく学ぶコンテンツのエントリで紹介したRuby Warriorが楽しいという声を幾つか見かけました。 オンラインでコーディングできるサービスは色々ありますが、デザインや音楽、ゲーム性が優れていて熱中しやすいのでしょう。 残念ながら私は参加できませんでしたが、今月のGinza.rbもRuby Warriorをみんなでやってみるという催しで盛り上がったようです。 RubyWarriorのBGMが中毒性高い。しばらく口ずさんでしまいそう。#ginzarb— Masatoshi Iwasaki (@masa_iwasaki) April 15, 2014 RubyWarriorに集中していてだれもツイートしてない^^; #ginzarb— 高橋 明 (@Talos208) April 15, 2014 今回は同様にゲーム感覚でJavaScriptを学習でき、日本語化もされているC
来る2014年4月26日(土)・27日(日)に、「ニコニコ超会議3」が開催され、その中で「超チューニング祭 ~ニコニコを超快適にしてみた~」が開催されるそうです。 これは、現行のスマートフォンサイトのTopページのソースファイルを競技者がチューニングして、速度やデザイン・UIの改善をして、速度と使い勝手を競うのだそうです。 「これは面白そうだ! 会場は家から近いし!」と思って参加するつもりでいましたが、事前調査で計測してみた結果、フロントエンドのチューニングでは速くならないことがわかったので、その内容について説明します。 (主催者の方にも、フロントエンドのチューニングでは速くならないという情報は伝えてあります。) まずは、計測データ まずは実際のトップページ(http://sp.nicovideo.jp)の計測データを見てみましょう。 計測は、NTT DoCoMoとSoftBankの3G回
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
DevTools、使ってますか? もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
今回の記事は、JavaScriptのコメントの文法についての、とてつもなく些細な内容になる。 まず、「改行」の定義について ECMAScript規格では、俗に改行と呼ばれているものは、正式には、行終端子(Line Terminator)と名づけている。行終端子は5個あり、これは4種類の文字からなる。なぜ4種類の文字で5個あるのか。ひとつは組み合わせなのだ。 行終端子を構成する4種類の文字は、\u000A(Line Feed), \u000D(Carriage Return), \u2028(Line separator), \u2029(Paragraph separator)である。 しかし、慣習的に、CRに続くLFを、ひとつの「改行」とみなすことが横行している。JavaScriptはこの慣習を追認する形で、CRLFの2文字をひとつの行終端子として認識する。 さて、本題に入ろう。Java
超チューニング祭が告知された。 ドワンゴから@koizuka, @EzoeRyou, @masarakki, @kmizuの4名が参戦します。是非ご参加ください。 / 超チューニング祭~niconicoを超快適にしてみた in ニコニコ超会議3~ http://t.co/ixsBFDRHnO #cyoppaya — Toshihiro Shimizu (@meso) April 14, 2014 公式サイトから引用すると、 超チューニング祭開催のお知らせ ニコニコ超会議3内で開催予定のチューニングイベント! ニコニコ動画のスマートフォンサイトをHTML/CSS/JavaScriptでフロントエンドチューニングしよう! (表示速度のみの判定ではありません!ユーザー投票あり!) ニコニコ動画史上最速の座を賭けた白熱の2日間・・・ 豪華賞品と名誉は誰の手に!? 超チューニング祭 とのことだ。超会
var img,img2; chain( function( next ){ img = new Image(); img.onload = next; img.src = "http://dummyimage.com/600x400/000/fff"; }) .chain( function( next ){ img2 = new Image(); img2.onload = next; img2.src = "http://dummyimage.com/600x400/000/fff"; }) .chain( function( next ){ setTimeout( next, 1000 ); }) .chain( function( next ){ console.log( "img,img2が読み込まれて1秒たった" ); }); (function(){ // TODO 綺麗に
Slide, Math, Tin, Bomb Magicの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="yourpath/magic.css"> </head> Step 2: 要素にアニメーションを指定 アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。 まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。 $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); 特定の時間、ループでアニメーションさせる時はこんな感じ。 setInt
これまでマイクロソフトの Build カンファレンスは、開発者の中でも特にマイクロソフトのプラットフォーム用に製品を開発する保守的な開発者を対象としていた。先日同社が既存の JavaScript フレームワーク「WinJS」のオープンソース化を発表したことで、このカンファレンスはウェブやモバイルの開発者も対象としていくことになるだろう。 WinJS は、HTML/CSS/JS アプリケーションの開発を支援する JavaScriptツールキットだ。これによって開発者は、ウェブやAndroid、iOS といった Windows 以外のプラットフォーム向けにも Windows アプリを開発することができる。今回 WinJS がオープンソース・プロジェクト化されたため、開発者は WinJS を利用したコードを GitHub 上に提供することも可能になった。 Angular、Backbone、Emb
先日、都内某所で開催された#桜JSに参加したので、個人の日記レベルの感想を書いてみる。 #桜JS - Togetterまとめ 桜JSでご飯を食べながらLT大会をした | Web scratch 細かいことはazuさんのまとめを見てもらうとして、個人的におもしろかったのがHTML FormのPUT/DELETEについての議論。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin’ Codes Jxckさんの経緯まとめを踏まえて、じゃあこれからHTML FormにPUT/DELETEを追加する必要あるの?っていう点で意見が割れた。 個人的には、この話を聞いたとき、確かに仕様としては欠けてる感じがするけど、いまさら実装されても自分はForm PUT/DELETE使うことはないだろうなと思っていた。理由は、FormでPUT/DELETE
こんばんは、south37です。 最近はEffective JavaScriptを読んでるのですが、知らなかった事がポロポロ出てくるので、とても勉強になっています。これからはちょいちょい、そーやって勉強した事をまとめていけたらいいなと思います。 って事で、今日は関数定義の話をしたいと思います。 関数宣言と関数式 JavaScriptにおける関数定義には、大きく分けて3つの方法があります。 function文を使う方法(関数宣言) function演算子を使う方法(関数式) Functionコンストラクタを使う方法 1と2が一般的によく使われる方法ですね。 // 方法1 function multi(x, y) { return x * y; } // 方法2 var multi = function(x, y) { return x * y; }; // これも方法2 var multi
You know what's better than adding features to a website or app, from a code perspective? Removing stuff you don't need. Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work. Running a directory of images through ImageOptim is a euphoric experience, am I right? What if there was a tool, h
この文章について OOP(オブジェクト指向プログラミング、オブジェクト指向パラダイム)について プログラミング勉強中の大学生さんに説明する機会が何度かあったので、 自分の中で整理するために書きました。 中には適切でない説明もあります。ばっさり省いているところもあります。 詳細より イメージを掴んでもらうことを優先しているためです。 「それにしてもあんまりだなー」という表現がありましたらご連絡いただけると嬉しいです。 大学生さん 大学生さんたちはいろんな背景を持っています。 プログラミングを始めたばかりの人 独学で Objective-C や JavaScript を書いた経験がある人 Web やコンピュータの仕組みについてもこれから勉強する予定の人 使用言語 大学生さんたちはプログラミングの第一歩として JavaScript と PHP を使っています。ここでは説明に PHP のコードを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く