WebGLを使ったマンガビューワを作っている - daiizhttps://gyakky.herokuapp.com/capture/twitter/1030059159431999488#.png
素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受する - Qiita
VSCodeの便利さを使いたいがTypeScript化するほど手間かけれない、みたいなときにtsconfig.jsonだけ作っておくとちょっと便利になりそうだったのでメモる。 追記： TypeScriptへ移植する予定が無い場合であれば、jsconfig.jsonを配置するでも十分そうです（違いはallowJSがdefaultでtrueなこととぐらい。あとはtsconfig.jsonは後述のコマンドでボイラープレートを生成できるという点ぐらいと思われます） 具体的にはこのへんとか使える 未使用のimport検出 ライブラリの型情報を利用した検出 JSDocがあればそれを利用した型検証 やり方 まずtsconfig.jsonを生成する。npx使う
ESLintのルールを全部手動で設定するのは大変だからやめておけ - Qiita
よく来たな。 お前がこの記事を見ているとゆうことは、やめておけとゆわれたことをあえてやろうとする真の男たらんとするものだろう。 軟弱な男たちがスマッホの予測変換に骨抜きにされている間にお前は反骨もあらわにここに来た。 おまえのそうゆう負けん気は実際大事だ。強くなければお前はメキシコで野垂れ死ぬだろう。 だが真の男と無謀は違う。 ときにお前は知の高速道路をもうダッシュするひつようがある。 つまり今がそのときとゆうことだ。 ESLintを入れろ お前のJavaScriptがぐちゃぐちゃなことをおれはしっている。 なぜならおまえはESLintを使っていないからだ。 お前はコードの荒野を踏破できるタフな男を気取っているが、それにも限界が来るだろう。 今のままではお前が倒れ目を伏せるのはベイブの隣ではなく混沌としたコードの掃き溜めだ。 まずはESLintを入れろ。 簡単だ。 お前のその目の前の板の黒
俺が考えた最強の Reactのステートレスコンポーネントの書き方 - Qiita
最近自分はこう書いてるという例。意見が欲しい。 この記事に redux は出てこない。 参考: https://qiita.com/mizchi/items/bcb1aef8d1f14f8d0b4a 構成要素 React flow styled-components recompose 以下 SFC = Stateless Functional Component /* @flow */ import React from "react" import styled from "styled-components" import pure from "recompose/pure" type Props = {| value: string |} export default pure(function Example(props: Props) { const { value } = p
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
PWAが来るって言っているエンジニアは今すぐ辞めろ
PWAとかいうhtml5のリブランドが技術者界隈で騒いでるが、こんなの受け入れられないだろ。 PWAの実物見た？触った？？ instagramのPWAが最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、 オワコンであった。 ネイティブと見分けつかないんだったら本当にエンジニア辞めたほうがいいよ。 まず、タイムライン上で複数投稿があった時にスワイプで切り替えられない。 なんと左右をタップするのである。 HTMLを操作してる感満載のガクガクの感じ。 ユーザーってこういう些細なガクガクに敏感だよね。マーケット感ある人ならわかるよね。 そんでもってストーリーズ。 もう最低。 動画が自動再生しないの。止まるは止まるは。もう何なの？？？って感じ。 こんなの受け入れられないでしょ。 カメラは直接起動できないし、フィルターも少な
Storybookをまず動かす！ReactとVueの最小環境を作った - zuckey blog
最近Storybookを会社で導入していて、環境設定についてまとめました。 基本的には、公式サイトのとおりですが、コンポーネントの例の記載がなかったり、ReactとVueでできるものが異なったりして、困った部分が合ったので、すぐに動く環境を作りました。 github.com 本エントリのコードはNode v8.9.4の環境で動作を確認しています。 Storybook？ https://storybook.js.org/ The UI Development Environment ReactやVueなどのUIライブラリで作成したコンポーネントの動作やデザインをエンジニア、デザイナ間で共有、閲覧できるツールです。 Storybookという名前の通り、あるコンポーネントやコンポーネントの集合に対して、storyを複数用意し、storyごとの振る舞いを閲覧することができます。 環境構築 Stor
Blotter.js
Production Version Minified, 402kb Development Version Uncompressed, 752kb Overview When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke so
“Web Componentsだけ” で新サービスを実装して見えたこと - Qiita
Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理することで環境構築も不要な Lambda ができて楽でした。 TL;DR サーバーレスについてはごく普通のことしかしていないので、詳しくは触れないでおきます。 ピュアな Web Components だけでサービスを成立させることができた。 HTMLElement クラスを継承するだけなのでメジャーライブラリは不要になった。 Web Components の Custom Elements は標準仕様
なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ
2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><
NaN === NaN が false な理由とutil.isDeepStrictEqual - from scratch
NaN === NaN は false NaN、つまりは Not a Number 同士の同値比較が false になるのは、よく JavaScript とかで罠だと言われていますが、罠でもなんでもないです。 false が返るという仕様です。仕様の経緯を追うとすぐに『 IEEE754 という浮動小数点の標準規格で決められているから』、という理由がヒットします。 では IEEE754 ではなんで NaN == NaN を false にしようという話になったのか、というのを調べてみました。 今回はそういう歴史の話です。 IEEE754 現在のプログラミング言語の処理系の多くが採用している浮動小数点の標準規格です。 この標準規格は以下のことを定義している。 - 基本形式: 二進および十進の浮動小数点数データの集合。有限な数（符号付ゼロと非正規化数を含む）、無限、特殊な「数ではない」値（NaN
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
よく使う正規表現はもうググりたくない！ - Qiita
タイトル通りによく使う正規表現を毎回ググるのが効率悪いのでまとめてみました。各言語で正規表現のサンプルを書いてみました。 正規表現式 Emailアドレス ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ ドメイン名 ^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$ インタネットURL ^(http|https)://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ユーザー名 (Twitter username) ^[a-zA-Z0-9_\-.]{3,15}$ 固定電話 ^0\d-\d{4}-\d{4}$ 携帯電話 ^(070|080|090)-\d{4}-\d{4}$ IP電話 ^050-\d{4}-\d{4}$ フリーダイヤル ^0120-\d{3}-\d{3}
モバイル開発に役立つJSデバッグ術
Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。 はじめに メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。 しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。 そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。 Dev
絵文字がある種のUnicodeバグを世界から一掃しつつある件について｜Rui Ueyama
UnicodeのUTF-16エンコーディングではほとんどの文字（コードポイント）は2バイトで表現されるが、Unicodeに後から追加収録された文字の多くは4バイトで表現される。4バイト文字がうまく扱えないプログラムというのはわりとよくある。しかし世界中で広く使われるようになった絵文字がよりによって4バイト文字であるせいで、そのような文字が扱えない問題がよいペースで解決に向かいつつある。それについて少し説明してみようと思う。 Unicodeが80年代から90年代初頭にかけてデザインされたときの目標の一つは、Unicodeに含まれる文字数を65536個以内に収めることだった。現代の文章を実用的なレベルで表すためには、漢字などを含めてもそれだけの種類の文字があれば十分だと考えられたのだ。当然これは1文字を2バイトで表すことを念頭に置いていた。つまりコンピュータの揺籃期から当時に至るまで単純に英語
Rubyの型定義ファイルを中央repoにしないほうがいい理由 - Islands in the byte stream
あるいは私がDefinitelyTyped (DT) が失敗だと思っている理由、です。 DefinitelyTypedは明確に失敗だと思っているので、あれを避けるのはそんなに難しくないかなと。まず (1) anyを認めて「型がなくてもいいや」という気持ちでいく (2) 中央repoは作らずそれぞれのgemに対して型定義パッチをおくりつける でなんとかなるっしょ。— FUJI Goro (@__gfx__) September 19, 2017 あたりが話の発端です。 DTについては以前いまいちイケてない理由を書いたことがあります。 TypeScriptのDefinitelyTypedは「ダメでもともと、うまく使えればラッキー」くらいの距離感がよい - Islands in the byte stream この時の話を一言でまとめると「ライブラリの作者ではない第三者がメンテしていることが多く
自社の今期振り返りと来期に向けて
自社の決算が 9 末、あと 2 週間ということで振り返ってみたい。 前期が投資期で、 今期は種蒔き期なんて考えていたが、運良く回収期にもなった。正直色々と想定外の期だったように思える。 自社製品を中心に振り返って、ダラダラ書いていく。 運良く自社製品が売れ始める営業がいないので、完全に問い合わせを口を開けて待つスタイルなので、いつ売れるかも運頼み。 それが 2017 年に入ってからはほぼ毎月売れて、社外のお手伝いの売上よりも多いこともあったりした。 自社製品の売上はキャッシュフロー的にとても安定するという事を、実感した 1 年だった。 大手に採用され始める公開できる範囲だとリコー、スクエニ、ソフトバンク（敬称略）という大手に採用されたのは社会的信用という面で大きかった。打ち合わせでもうちが小さい会社だから心配という話がなくなった。 製品の性能や機能、品質などだけで勝負ができるようになった。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita
今さら聞けないSPAのCORS対策の話
