npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ
gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは？ 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ
Step by Stepで始めるESLint - Qiita
ESLintはJavaScriptを静的に検証するツールです。 わかりやすく言えば、チームメンバー間で統一された美しいコードを生成するためのツールです。 設定ファイルを書いておけば自動で変換することも可能です。 ESLintを始めよう！ JavaScriptのLintツールにはjslint, jshint, JSCSなどがあります。 2016/11 時点で npm trendsで比較した結果が以下の画像です。 http://www.npmtrends.com/jslint-vs-jshint-vs-jscs-vs-eslint 半年前はjshintと並んでいましたが、わずか半年の間にダブルスコアをつけています。 jshintは開発が鈍化しています。 またJSCSの開発チームはESlintに移行することを決めました。 以下に記載した有名ライブラリは開発時にESLintを使っています。 jQu
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
JavaScript Clean Coding Best Practices - RisingStack Engineering
Writing clean code is what you must know and do in order to call yourself a professional developer. There is no reasonable excuse for doing anything less than your best. “Even bad code can function. But if the code isn’t clean, it can bring a development organization to its knees.” — Robert C. Martin (Uncle Bob) In this blog post, we will cover general clean coding principles for naming and using
JavaScriptでブラウザを自動操作できるnightmarejsを使ってガストのクーポンを自動発行する - Qiita
TL;DR mpppk/skylarq こういうやつです 背景 集中するためにカフェに行く方は多いと思いますが、自分は最近ファミレスで作業しています。 その中でもガストを含むすかいらーくグループでは、清算後のレシートにドリンクバーのクーポンが付いていることがあります。 ガストだとドリンクバーは199円なので、74円になると約63%OFFです。すごい。 この画像は74円ですが、無料のクーポンも有るみたいです。 さて、このクーポンですが、使うにはアンケートに答える必要があります。 まずレシートに書かれているQRコードにアクセスします。 アクセスすると表示される画面に、クーポンに書かれている24桁の数字を入力します。 規約に同意すると、こんな感じでアンケートが表示されるので粛々と答えます。 全部で34問あるみたいです。 全ての質問に回答すると、5桁の数字が表示されます これをレシートに記入すれば
JavaScriptユーザのための関数型プログラミング(後編) | POSTD
この記事の前編はこちら： JavaScriptユーザのための関数型プログラミング(前編) 遅延評価 遅延評価 は、 サンク や ジェネレータ などのもっと具体的な概念をカバーする一般的な用語の一種です。遅延評価は、その言葉が表すとおりのことを行います。つまり、値が必要になるまで評価しません。可能な限りずるずると、先延ばしにします。例えば、洗わなければならない食器が大量に、もしかすると無限にあるとします。食器を全て流しに置いて一度に洗うのではなく、ゆっくり、一度に1つずつ取って洗うのに似ています。 遅延評価の本質を少しでも理解しやすくするために、Haskellを使って説明したいと思います。まず、 プログラムがどのように評価を行うか を理解する必要があります。皆さんが慣れているほとんど全ての言語は、 最内簡約 を用いています。最内簡約とは、次のようなものです。
JavaScriptユーザのための関数型プログラミング(前編) | POSTD
私が関数型プログラミングについて度々耳にするようになったのは、数カ月前からです。でも当時は、それが何なのか見当もつかず、単なるバズワードだと思っていました。皆さんの中にも、そのような方は多いでしょう。それ以来、私は関数型プログラミングについて深く学び、この言葉を日々聞いてはいるものの内容を理解していない初心者の方のために、分かりやすく説明しようと思い立ちました。 関数型プログラミング言語の話になると、「 Haskell と Lisp は どちらが優れているのか 」という 議論 が 白熱する 傾向にあります。HaskellとLispはどちらも関数型言語ですが、実際には大きな違いがあって、それぞれに長所と短所があります。その具体的な内容については、この記事を読み終える頃には深く理解していただけると思います。この2つの言語には、それぞれから派生した言語があります。その中で恐らく皆さんが耳にしたこ
共有設定でらくらく ESLint - Qiita
ESLint はデフォルトでは何も警告してくれず、しかも膨大な設定項目があるために使い始めが大変です。 ところで、ESLint は共有設定という仕組みを持っていて、誰でも "自分の設定" を共有することができます。 そして、使いはじめる人は共有された設定を使って簡単に ESLint を使い始めることができます。 共有設定の一部が気に入らなかった場合には、(設定ファイルを書いて) そこだけ自分好みに上書きできます。 この記事では、有名な共有設定を紹介していきます。 eslint-config-eslint 設定ファイル ES5 Only. ESLint 自身が使っている設定です。 インデント幅が 4 だったり、文字列がダブルクォーテーションだったりとオーナーの趣味が出ています。 私は好きです。
JavaScriptのトレンドを素振りして確認する方法 - Qiita
JavaScriptは流れが早いと言われますが、その流れをどう捉えるかの一つの要素として使える素振りの話です。 流行り廃れが早いのはちゃんと循環してるということなので問題ないですが、 トレンドと言われるものの半分ぐらいは誰かの主張にすぎない事があります。 そのため、主張だけを見て判断しないで中身を見て確認する必要があります。 自分はJSer.infoというJavaScriptの情報サイトを2^8週間ほど継続してやっています。(5周年記念イベントを1/16(土)にやります) JSer.infoで紹介するものは何かしらの方法でその主張がおかしくないかの確認をとります。 売り文句は素晴らしいが中身を見た時におかしな部分や問題がありそうなら、そこで引き返して追わないという判断もします。 仮にそこで引き返した事が間違えであっても、それが素晴らしいものなら別の誰かがそういう主張を書いてくれるはずなので
WindowsでJavaな人に捧げる素敵なスクリプティングツール jrunscriptの使い方
これは Java Advent Calendar 2015 の3日目です。昨日は@kawasima さんの「Webアプリ開発/テストのお供に『WAITT』」で、明日は @akihyro さんです。 もしもLLが使えたなら 業務にWindowsを使用していて、開発言語はもっぱらJava、LLを使えたらかっこいいと思うけど、Windowsだし。。。。Powershellとかよく知らないしでもっぱらサクラエディタ、、、そんな方はいらっしゃいませんか？ 僕は、そんなあなたを応援します！なぜなら僕がそうだからです！ 僕は大量のファイルを作ったり、複雑なファイル検索をしたいなどのデータ処理に、よくJDK付属のjrunscriptコマンドを使っています。例えばこの記事でも使っています。 jrunscriptとは jrunscriptはJDK6以上に付属しているコマンドで、JVM上でJavaScriptエ
.eslintrc editor
{ "env": {}, "globals": {}, "ecmaFeatures": {}, "parser": null, "rules": {} }
Electron を試す - 開発環境の構築 - アカベコマイリ
これまで NW.js を使ってきたが同じ Chromium + Node 系のフレームワークとして最近は Electron のほうが勢いあるようなので試したくなった。使用感を把握するため、まずは開発環境を構築してみる。 更新履歴 2015/11/5 npm-scripts を babelify 7.2 (Babel 6.x) を採用した内容へ更新。また最新 watchify の Windows 対応について追記した。これらの詳細については babelify v7.2 を試すを参照のこと。 2015/10/19 npm-scripts を最新へ更新、Main プロセスのビルド説明に Browserify の --node オプション解説を追加。 設計方針 package.json と npm だけを使用 AltCSS は Stylus を採用 ユニット テスト対応 コード ドキュメント対応
Want to learn JavaScript ?
This is a walk-through of the steps I personally took in a single year, to begin learning JavaScript. My goal was to be able to get a job in a position where Javascript would be at the forefront of what I do on a daily basis. I should make it clear that my journey wasn’t as smooth as what I’m about to present to you, this should give you a much smoother ride. The inspiration for writing this artic
StrongLoop - Making the most of JavaScript’s “future” today with Babel
Making the most of JavaScript’s “future” today with Babel by Marc Harter Jul 30, 2015 / Community, How-To, JavaScript Language From CoffeeScript to ClojureScript to PureScript to CobolScript to DogeScript (woof woof!), JavaScript is the write-once-run-anywhere target for many forms and styles of programming. Yet, its biggest compile-to-language today actually isn’t any of these adaptations; its Ja
gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
ESLint 1.0.0新ルールまとめ - Qiita
こんにちは、@armorik83です。ESLint 1.0.0がリリースされました（今朝Twitterで気付いた）。以前.eslintrcを晒したあとあまり面倒を見てなかったので、これを機に動向を追ってみました。 1.0.0新ルールまとめとしましたが、前回の記事以降にリリースされたv0.21.0からv0.24.0も扱います。全ての変更点やBreaking Changeは扱わず、新ルールだけ取り上げます。 v0.21.0 (May 10) https://github.com/eslint/eslint/releases/tag/v0.21.0 dot-location http://eslint.org/docs/rules/dot-location
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜 // Speaker Deck
kuromoji.js demo
GitBook – Build product documentation your users will love
ECMAScript 6 Tutorial