マークダウンベースのタスクランナー saku を作った話 - Qiita
tl;dr make をタスクランナーとして使うことに疲れた (.PHONY ってもう書きたくない) yaml ベースのタスクランナーは幾つかあったがしっくり来ない (go-task / robo) そもそもタスクの記述言語をマークダウンにした方が良いのでは? マークダウンベースのタスクランナーを作った! saku! (update: Go言語バージョンも作った!) モチベーション 自分は普段、趣味も仕事もほとんど JavaScript ばかり書いているため、タスクランナーとしては npm run-script を使っています。 run-script はタスクのドキュメントが書けないとか、タスクにコメントをつけれないとか(JSON の文法の制約上)、不満点は色々ありますが、npm-run-all などの支援ツールを利用することで、必要最低限のタスク定義は十分にできるツールと個人的には思って
npm の prepublish と prepare の変遷 - Qiita
発端 npm@5 になるときに、 prepublish の挙動が大きく変更されました。 Node.js の 8.x が LTS になった当時、Node.js@6 は npm@3 でしたが、Node.js@8 では npm@5 になるため、 その内容をちゃんと把握できていなかったので、調べました。 作業して結果をまとめたリポジトリがあるので、それの日本語訳+アルファ を書きます。 "ステップ4" と "ステップ 5" とはなにか まとめを読むのに必要な用語（？）なので、先に説明しておきます。 https://github.com/npm/npm/issues/10074 で言ってるやつです。 ステップ 4 は、 In a year or so, make a semver-major bump to npm and make prepublish's behavior match prepu
MDNのCSSリファレンスをAからZまで読んで得た知見まとめ - Qiita
CSSのこと、もっと知りたい！ MDNのCSSリファレンスをAからZまで読んでいって「へー！めちゃおもしろい」って思った私的知見を共有します。 おいしいところだけ召し上がってください 既に知っていたもの、私にとってあまり面白くないもの、あとで読もうと思って忘却してしまったものは書いてません。 （それと...翻訳されてないページは一旦飛ばしました。私の英語力が🐜レベルのため） それでは、以下が私の知見です CSSの単位に大文字と小文字の区別はない 16PXも1.5eMも動きます。 周波数の単位<frequency>であるkhzは国際単位系に合わせてkHzと書くといいみたいです。 リンクの疑似クラスはLVHAの順で書く :link - :visited - :hover - :active リンク関連の擬似クラスは上書きされてしまう可能性があるため。 MDN :active @charset
async/awaitでiterateがんばる - Qiita
async/awaitが使える環境がまぁまぁ増えてきてNodeとかでは普通に使うようになりました。 多分みんな一回は頭を悩ませるのはiterate周りだと思います。 例えばforEachとか雰囲気でかくと下みたいな感じになるけど、あくまでasyncキーワードはpromiseを返してくれるようにしてくれて、awaitはpromiseを待つっていう単純な機能を提供するものなのでforEach自身がpromiseを返さない限りはこのコードはうまく動かない。 function timer() { return new Promise(resolve => setTimeout(_ => resolve(), 100)) } (async () => { let list = []; await [1,2,3,4,5].forEach(async v => { await timer(); list
プログラムのネーミングに迷ったら GitHub でコード検索すると参考になる説 - Qiita
TL;DR プログラムのネーミングで迷ったら GitHub でキーワードを検索して、ヒットした件数が参考になるのでは？ 複数キーワードを検索して結果の一覧を表示する CLI 作りました https://github.com/kyoshidajp/ghkw ネーミング迷いますよね？ みなさん、コードを書いていて変数やメソッド名のネーミングって迷いますね。 こんな時に自分たちはチームを横断して「こういう名前考えたんだけど、これってどうかな？」という確認を Slack 上で行っています。先日、この Slack チャンネルを見ていて考えました。 「GitHub で検索すれば世の中のコードでどのぐらい使われているかざっくり分かるので参考になるのでは？説」 GitHub で検索できるという条件付きではありますが、コードの規模からするとある程度期待できそうです。 GitHub で検索 例えば「除外条件」
あなたの知っている正規表現はもう古い！ 正規表現の新常識（ES2018編） - Qiita
2018年1月23日から25日にかけて、TC39の第62回ミーティングが行われました。TC39のミーティングでは、提案されているECMAScriptの新機能 (proposal) について審議し、各proposalのステージの移動を決定します。 今回のミーティングでは正規表現に関する幾つかのproposalがStage 4になりました。Stage 4になったproposalはES2018に組み込まれ、JavaScript (ECMAScript) に正式採用ということになります。 この記事では、JavaScriptに追加された正規表現の4つの新機能を紹介します。 s (dotAll) flag for regular expressions Proposal: https://github.com/tc39/proposal-regexp-dotall-flag 正規表現の新たなフラグとし
Mac OS XのアプリのURLスキームを調べる - Qiita
などのMacに入れてあるアプリのURLスキームを調べる。 スキーマの定義は、各アプリのContents以下にある Info.plist に定義されている。CFBundleURLTypesのところ。 ・・・ <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Viewer</string> <key>CFBundleURLSchemes</key> <array> <string>x-dictionary</string> </array> <key>LSIsAppleDefaultForScheme</key> <true/> </dict> <dict> <key>CFBundleTypeRole</key> <string>Viewer</string> <key>CFBundle
極めろ！！Google Chrome Devtools 52の関節技 - Qiita
転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方
commitlint の紹介 - Qiita
commitlint というツールをご紹介します。 commitlint とは、Git のコミット規約（commit convention）に従わせるための npm ツールです。ESLint のように、ルールを JavaScript で設定・開発できます。 commitlint helps your team adhering to a commit convention. By supporting npm-installed configurations it makes sharing of commit conventions easy. commitlint はチームがコミット規約に従うのを助けます。npm インストールされた設定をサポートすることにより、簡単にコミット規約を共有することができます。 「コミット規約」といえば、Angular チームの規約 が有名です。そのコミット
わかりやすい画像のdiffを求めて - Qiita
どうも。フロントエンドエンジニアの @Quramy です。 さて、前回、1日10万枚の画像を検証するためにやったことで書いているとおり、reg-suitという画像に特化した回帰テストツールをメンテしています。 画像回帰テストという文脈において、差分の可視化方法はとても重要なファクターです。なぜなら、画像(=スナップショット)に差分が発生したからといって、それすなわち棄却、というわけではなく、その差分の内容を判断して、意図せぬ変更であれば棄却、意図した変更であればexpectedを更新する必要があります。すなわち、ワークフローに目視による差分のレビューが発生するのです。 そこで、少しだけ異なる2枚の画像について差分を効果的に可視化する、というテーマに向き合ってみました。 主にC++とOpenCVでの実装ですが、これらの知識が無くとも読めるよう、コードやAPIへの言及を少なくして、中間画像で説
JavaScriptのexport defaultアンチパターンについて、検証してみた - Qiita
この記事はFringe81 アドベントカレンダー2017の16日目です。 始めに ES6のimport/exportについては ・基本的にexport defaultを使う ・exportする対象が複数あれば、exportを使う ・exportされたモジュールはimportで受け取る ぐらいの雑な理解をしてました。 「基本的にexport defaultを使う」については、Design goals for ES6 modulesにて、以下のように言及されてます。 16.8 Design goals for ES6 modules If you want to make sense of ECMAScript 6 modules, it helps to understand what goals influenced their design. The major ones are: ・D
Parcel 入門 ～Parcelはwebpackの代わりになるのか～ - Qiita
2018/05/08追記 記事内容をv1.1.0からv1.8.1に対応したものに更新しました。 はじめに Parcelというモジュールバンドラを触ってみたので、その備忘録になります。 webpack時代の終わりとparcel時代のはじまり 結論から言いますと、機能がシンプルすぎて自分の実務での利用は難しいと感じました。~~~~そのため、2017/12/10時点（v1.1.0）ではwebpackの代わりにはならないです。 2018/05/08時点でv1.8.1になり、様々な機能が追加されました。しかし現在もwebpackで利用している機能がParcelにはないため、実務での利用は難しいです。 とは言えども設定ファイルなしでReact、Vue、ES2015などをビルドできるようになっているため、個人でちょっとしたコードを書いてビルドしたい時はこちらを使っていくと便利だと思いました。 そのため
webpack時代の終わりとparcel時代のはじまり - Qiita
設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを
ESLint をブラウザー内で利用する - Qiita
まえがき 追記 (2018/05/24): ブラウザで動作するよう修正済みの Linter クラスを公開しています。 eslint4b このパッケージを利用する事で、追加の修正無しに Webpack 等で Linter クラスを読み込むことができます。また、このパッケージは Travis CI の Cron 機能により最新の ESLint を元にしたビルドを継続的に作成・公開しています。 ご活用下さい。 ESLint は対外的にはブラウザー内での実行をサポートしていません (eslint/eslint#2585, eslint/eslint#8348)。しかしながら、公式サイトに設置されている オンライン デモ のために、少し細工すればブラウザー内で実行することができます。 この記事では、ESLint をブラウザー内で利用するための webpack の設定について紹介します。 ESLint
WebGL入門記事：WegGLを使った音響シミュレーション開発経過 - Qiita
この記事はWebGL Advent Calendar 2017 7日目の記事です． はじめに この記事では，WebGLを利用して音響現象をシミュレートする記事です． 昨今，計算力が必要な分野というとディープラーニング，ブロックチェーンのマイニング，CGあたりが頭に浮かびますが，音響解析にも計算力が必要な分野があります．そこで，WebGLを使って音響シミュレータのひな形を作ってみようと思います． TL;DR 3Dは扱いません GPGPU的な話です CPU版プログラムとGPU版プログラムで同じ演算をさせて，作り方を比較します 対象読者 シミュレータを作ってみたい人 HTML / JavaScriptの知識は持っている人 WebGLに興味はあるけど躊躇している人 取り扱う音響現象 音響現象と言っても，信号処理，建築音響，音声，超音波，聴覚，音響教育など幅広い分野に分かれています．ここでは，シミュ
一つ上のチームメンバーのそだてかた - Qiita
自分が先輩社員となり、チームを持ち、すぐに直面する問題といえば「エンジニアの育成」問題です。 私は7年間システムエンジニアとして働いてきた中で早い段階で多くのメンバーを育てる機会に恵まれました。メンバーの中には文系出身の新人や技術に尖った新人、数年間くすぶっていた中堅若手と様々な境遇の人がいました。 性質がそれぞれ違うなかでどのように"プロ"として育て上げたかを紹介したいと思います。 育成のきほん まずは下記の図を見てください。これは「1分間リーダーシップ」(Paul Hersey, Kenneth H Blanchard/1985年) で取り上げられているSL理論 (Situational Leadership)というメンバーの能力とモチベーションに応じて発揮すべきリーダーシップを表した図です。 S1の状態から順に2,3,4とリーダーシップを変更させていくことが望ましいとされています。
eslint-plugin-vue を作っている話 - Qiita
4日朝に Vue.js #1 アドベント カレンダーを見たら3日のぶんが空いていたので急遽書きました。 私は .vue ファイルを静的検証するための ESLint Plugin を開発しています。 eslint-plugin-vue ( ESLint についてはこちら: ESLint 最初の一歩 ) このプラグインを使うと、.vueファイルのテンプレート部分について、リアルタイムで構文エラーを検出したり、v-bind 等のディレクティブの使い方が間違っていたときに指摘してくれたりします。また、公式の Vue.js スタイルガイド に沿うように自動成形することもできます。 🏃 試してみる eslint-plugin-vue を簡単に試してみるために、オンライン デモがあります (1度アクセスすれば、以後はオフラインでも使えます)。ここでコードを入力して、どのようなエラーが出るのか、どのよう
Electronの簡易アップデート機能を実装した話 - Qiita
こんにちは、Ducklingsの@syumaiです。会社では、360°映像 x ウェディングのサービス、HUG WEDDINGの開発をやっています。 エンジニアは二人で、RailsやVue.jsを使った開発を基本的に行っています。(直近はC#をひたすら書いてました) Electron使ってます 弊社で作っている社内ツールに、Electronを使用しているものがいくつかあります。 Electronを採用した目的としては、 アルバイトの方などのコマンドラインツールに親しみが無いメンバーにも簡単に使ってもらえるように、 Node.jsツールのフロントエンドを提供する事が主となります。 Web用のUIライブラリも簡単に使えるし、 過去に別の目的で作った社内JSライブラリ等を持って来て使い回せているので、開発がめちゃめちゃ楽です。 Electron最高…。 今回やりたかったこと 社内ツールのアップデ
シェルスクリプトを何万倍も遅くしないためには —— ループせずフィルタしよう - Qiita
🐚 🐚 🐚 🐚 シェルスクリプトは遅すぎて使えない 普通の「速い言語」より何百、いや、何千倍も遅い 他のプログラミング言語を経験してからシェルスクリプトに入門し、このような感想を持つ方も多いのではないでしょうか。 実際、こういったことは往々にして起こり得ますので、「速い言語」を使うべきか否か見極めることは大事だと思います。 しかし、本当にシェルスクリプトというのは、そこまで遅いのでしょうか？ データ量が多い場合は常に最初から「速い言語」で書いた方がよいのでしょうか？ 実は、そうとも限りません。 シェルスクリプトにはシェルスクリプトなりの「速い書き方」があります。 この「速い書き方」で処理できる問題に関しては、シェルスクリプトは「速い言語」なのです。 では、「速い書き方」とは何かというと、端的には「たくさん繰り返されるループはシェルスクリプトで記述しない」ことです。 以下でこれを説明
Varnish入門と仕組み - Qiita
Varnish入門と仕組み Agenda Varnishとは 仕組み 入門 ベンチマーク Reference Varnishとは 2005年に作成 ライセンス BSD cache機能を持つリバースプロキシとして知られるOSSのHTTPアクセラレータの一つ(Squid cache等) プロキシについて フォワードプロキシ Clientの前段に配置して不特定多数のサイトに代理でアクセスしにいくこと リバースプロキシ Serverの前段に配置して不特定多数のクライアントからアクセスしてきたのを代理レスポンス返す WHY プロキシ? 負荷分散 セキュリティ向上 コンテンツキャッシュによる応答の高速化 どこで使われてる? Fastly Cookpad Hatena 大規模サービス技術入門より 某アイドルの投票 過負荷に耐えるWebの作り方より Varnishのキャッシュについて Varnishはキャ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
