面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版）
面倒なWeb制作の作業を効率化できるタスクランナー。もう使っていますか？ 現在もっともポピュラーなタスクランナーであるgulp.jsの使い方を解説します。 開発者は、限りある大事な時間をコーディングに費やします。たとえ面倒な会議をさぼっても、仕事時間の大半は地味な作業に奪われています。 テンプレートとコンテンツファイルからHTMLを生成する 新しい画像と変更された画像を圧縮する SassをCSSコードにコンパイルする スクリプトからconsoleとdebuggerのステートメントを削除する ES6をブラウザーとの互換性が高いES5に変換する コードの埋め込みと検証 CSSとJavaScriptファイルの連結と縮小 開発サーバー、ステージングサーバー、運用サーバーにファイルを展開する なにか変更があるたびに、作業は繰り返されます。作業を繰り返すうちに、一番優秀なエンジニアでさえ画像のひとつや
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
Java やってる人が C# を使うとはまること - ぐるぐる～
ここでは、Java SE 5.0 以降を知っている人が C# 2.0 を使うことになった場合を考える*1 *2。 あと、ライブラリについては触れないことにする*3。 命名規約 まず、命名規約が全然違う。Java ではメソッド名にキャメル形式*4を使うけど、C# では Pascal 形式*5を使い、Java では定数名に大文字アンダーバー区切り*6を使うけど、C# では Pascal 形式を使う。 C# に関する命名規約としては、ここだとかここだとかにあるので、参考にするといい。 間違っても、オブジェクト倶楽部のは参考にしないこと*7。 struct の扱い Java ではユーザ定義型は全て参照型だけど、C# では値型も作成できる。また、標準ライブラリの中に struct で定義されたものもある。 で、何にはまるかというと、struct は class と違い、「値渡し」される*8、つまりコ
第0回 東京 Web PerformanceでSIMD.jsを味見しました - pixiv inside [archive]
こんにちは、最近隔週でやっている社内週末ハッカソンでElixirとGroovyを触ってニヤニヤしているプログラミング言語好きのedvakfです。次はClojureをやってみたいです。 弊社で開かれた第0回 東京 Web Performance - SIMD.jsを味見するというイベントで、SIMD.jsに触ってきました。 SIMD.jsはJavaScriptで高速なベクトル演算ができるAPIです。Firefox NightlyやMicrosoft Edgeで試せるそうです。ほとんど情報が無いので、集まった各自がググりながら使い方を調べてね♪というかなりストイックな集まりでした。 MDNに記事があるのですが、引数が書いてなかったり、現在のFirefoxのNightlyとAPIの乖離があったりして、かなりアルファな匂いがします。 https://developer.mozilla.org/ja
![第0回 東京 Web PerformanceでSIMD.jsを味見しました - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e06358fc6e2272b0a1032eaf66324bd3d597f17/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20140325%2F20140325045217.png)
Chrome’s Console API: Greatest Hits
The Chrome debugger is the best tool for locating problematic code in a JavaScript application, but there are times that diving into your code line-by-line isn’t the fastest or most convenient means to that end. We all know about console.log(), but I thought I’d write about a few of its lesser-known cousins that are more refined, and can be a lot more expressive. As a bonus, check out the last sec
Fetch is the new XHR
Fetch is the new XHRfetch(), defined in the Fetch API, is a new API which allows you to make requests similar to XHR’s, but has a simpler / friendly API. The Fetch API is available in service workers today and in the global space (a.k.a in the normal Chrome window) if you enable the Experimental Web Platform Features in chrome://flags. After getting asked about how to make an XHR for push notifica
Stream API がブラウザにやってくる - Block Rockin’ Codes
Intro 今日は、フロントのプログラミングスタイルに、にまた一つ大きな変化をもたらすであろう Stream という API についてです。 この仕様は現時点でまだ策定中であるため、 API は変更される恐れがある点にご注意ください。 Stream API 以前 「Node.js の Stream API で「データの流れ」を扱う方法」 という記事を書きましたが、簡単に言うとあれがブラウザにもやってくるという話です。 非同期処理おさらい もう何度も書いた話なので駆け足で。 JS はシングルスレッドでイベント駆動な世界なので、何をするにも非同期であり、コールバックを登録することで完了した結果を受け取る API が基本です。 これは、ブラウザの DOM の API でも、 Node.js でも共通しています。 概念を疑似コードで書くと以下のような感じです。 console.log('1');
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
テンプレートリテラルが実装された - JS.next
概要 テンプレート文字列を記述できる構文が実装された。 テンプレートリテラル 基本の使い方 バッククオート『 ` 』で囲んだ文字が、文字列リテラル同様に文字列として評価される。 var t = `テンプレート` var s = "テンプレート" console.log(t) // "テンプレート" console.log(t == s) // true 改行がそのまま認識される。 var t = `テンプ レート` var s = "テンプ\n"+ "レート" console.log(t) // "テンプ⏎レート\t" console.log(t == s) // true 文字列中に変数などを埋め込む リテラル中の『${』と『}』で囲まれた部分は式として評価される。 var n = 123, f = () => 339 var t = `0${ n }45${ f() * 2 }9` v
何かのときにすっと出したい、プログラミングに関する法則・原則一覧 - Qiita
エンジニア組織を強くするための本を出版しました Qiitaでエンジニアリングをめぐる様々なコミュニケーションの問題とその解決策や考え方を書いてきた。それらの背後にあるエッセンスをこの度書籍として出版するに至りました。 エンジニアリング組織論への招待 ～不確実性に向き合う思考と組織のリファクタリング この書籍は、エンジニアリングを「不確実性を削減する」という第一原理で捉え直し、様々なエンジニアリングとその間のコミュニケーションをめぐる現象を説明していくものです。 デメテルの法則 別名最小知識の法則。デメテルは、豊穣の女神。アスペクト指向などの研究であった「デメテルプロジェクト」に由来。 基本的な考え方は、任意のオブジェクトが自分以外（サブコンポーネント含む）の構造やプロパティに対して持っている仮定を最小限にすべきであるという点にある。 単純化して説明すると、オブジェクトの"メンバーのプロパテ
Androidの実機でウェブサイトのJavascriptをデバッグする方法
スマートフォン向けのWebサイトを作ると、おおむね使われるJavascript。 Androidの実機でデバッグしたい時に、実機にコンソールを表示する方法と、PCに表示させる方法。 その① 実機のAndroid標準ブラウザでコンソールを表示する (1)Android標準ブラウザを起動する (2)アドレスバーに“about:debug”を入力してEnter (3)ブラウザの「サブメニュー」→「設定」に、”デバッグ”をタップ (4)“Show Javascript Console”にチェックが入っていることを確認 ※“UAString”でユーザーエージェントも変えられたりします (5)ブラウザに戻って“SHOW JAVASCRIPT CONSOLE”をタップすると、コンソールログが表示される※以下のメソッドが使えるらしい console.log(); console.info(); conso
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
JavaScriptの+演算子の謎挙動に迫る » nmi.jp
console.log(+[]); // 0 console.log(+[3]); // 3 console.log(+[null]); // 0 console.log(+[undefined]); // 0 console.log(+["3"]); // 3 console.log(+[1,2]); // NaN console.log(+[true]); // NaN console.log(+[false]); // NaN なぜこのような処理になるのか、JavaScriptの仕様書（ECMA Script Specification 5th）から説明してみましょう。 まず最初、単項+演算子（Unary + Operator）を評価する際に、ToNumberを呼び出すのは前述したとおりです。仕様書の（11.4.6）に書かれています。ではToNumberとはどのような処理でしょうか。
log · console.log with style · Adam Schwartz
log console.log with style Github Console Sources topDefault levels log.js:19 Bold & italics log.js:19 this is italic and this is bold. log.js:19 Inline code log.js:19 this is code: a == b == c log.js:19 Color log.js:19 this is red. this is green. log.js:19 Learn more log.js:19 https://github.com/adamschwartz/log
Node.js の Stream API で「データの流れ」を扱う方法 - Block Rockin’ Codes
追記 11/12/6 少し誤字脱字を修正、加筆 11/12/7 koichik さんにコメントで頂いたリンクと、その内容について追記 11/12/7 edvakf さんに頂いた指摘を修正 本文 この記事は、JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース) の 4 日目の記事です。 Node.js には Stream という API があります。 Stream はとても重要な技術で、 「Stream を制するものは、 Node.js を制す」と言っても過言ではありません。 実際、 Stream は Node.js が得意とする I/O の部分を使いこなすために、 押さえておくべき技術なので、今回はこの Stream について紹介したいと思います。 参考 Jxck's OutPut - Node.js の Stream I/O のお
CoffeeConsole: A Chrome Extension
Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing. The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new pane
イマドキのIDE事情(146) JavaScriptの問題点を解決できるか? Chromeで試すCoffeeScript
CoffeeScriptとは? Ajaxの普及に伴って広く利用されるようになったJavaScriptだが、大規模なアプリケーションの開発に向いていないことや、ブラウザごとの機能や挙動の違いなど、様々な問題を抱えているのは周知の事実だ。 これらの問題を解決するために様々な技術が登場してきているが、なかでも目を引くのが本連載でも紹介したTypeScriptなど、JavaScriptの代替となる新たなプログラミング言語たちだ。これらの言語はコンパイラによってJavaScriptコードに変換されて実行されるため、実行時に特別なソフトウェアを必要としないという特徴がある。 CoffeeScriptもこれらのJavaScript代替言語のひとつで、シンタックスシュガーやパターンマッチによってJavaScriptと比べて簡潔にコードを記述することができる。CoffeeScriptは、JavaScript
JavaScript のスコープチェーンとクロージャを理解する - tacamy--blog
前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブジェクトを読み書きするということです。 変数オブジェクトというのは、key と value による変数管理専用のハッシュテーブルのこと key が変数名、value が値のセットになっているテーブルで、変数の数だけレコードができるイメージ 変数オブジェクトはプログラマが意識することのない、便宜的なオブジェクト グローバルオブジェクト JavaScript は、ブラウザが新しいページを読み込んだとき、内部的に新しいグローバルオブジェクトを生成して初期化します。 グローバルオブジェクトとは、グローバル変数やグローバル関数を管理す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Autify CEO 近澤 良のブログ
http://team-pag.interprism.co.jp/member/noguchi/data/