2017年11月12日TypeScript,Vue静的型が好きな人と話していると大体テンプレートの型をチェックしたいという話を聞くのですが、Vue には今のところそれをうまく行う方法はありません。 すこし前に Vue のテンプレートの型チェックについて LT したのですが、これは vue-class-component などの Vue 標準の API から離れた書き方を強制するのでちょっと微妙な感じでした。これは、以前は Vue のコンポーネントの this の型を得るためには、クラス構文を使う必要があったためです。 しかし、TypeScript v2.3 に導入された ThisType によって、オブジェクトリテラル内部のメソッドの this の型推論が行えるようになったのと、 Vue v2.5 から、TypeScript の型定義が大きく改善されたことで、Vue 標準の API を使っ

そういうときがよくあります。 コードレビューがある会社は今が初めてだけど、きっとこれから先もコードレビューがある限りは、なくならない気持ちなんだと思います。 だから、そんなときに振り返れるようなものを残しておきます。 「コードレビュー つらい」でググってみると、はてな匿名ダイアリーのこんな記事が見つかりました。 anond.hatelabo.jp さすがに、ここまでヒドいケースを経験したことはないし異常だと思ったけれど、以下のくだりは自分の胸にすごく刺さりました。 私はプログラマに向いていないんじゃないかと思う。よいプロダクトを作る上で強い言葉を交えた議論が必要不可欠ならば、それに強いストレスを感じてしまう私はプログラマとして適正がないのでは？ 刺さったのですが、それでも自分はここでやっていかなくちゃならないと思っているので、つらくなったときにいつでも読み返せるよう、見つけた記事・資料をま

こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我

Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで

最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません

How to run async loops in sequence or in parallel? Before doing asynchronous magic with loops I want to remind you how we write classical synchronous loops. 😐 Synchronous loop Long time ago I was writing loops like this (probably you too): for (var i=0; i < array.length; i++) { var item = array[i]; // do something with item } It is good, it is fast, but it has many readability and maintenance iss

Paypal決済など、外部サービスから開発中のアプリケーションに対するHTTP(s)の連携が必要な時に、どうやってテストしているでしょうか? 多くの場合、開発環境は手元のマシンだったり、仮想マシンの中で動いていて、インターネットから到達できない場合が多いと思います。そのような状況でも、外部サービスとの連携テストが簡単に行うための方法を紹介します。

分散システムのFault Injectionの話 NTTデータテクノロジーカンファレンス2017で発表する際に用いたプレゼン資料 https://oss.nttdata.com/hadoop/event/201710/index.html Read less

ソフトウェアエンジニアの間でも一般的な言葉になった「機械学習」。本書では、その機械学習やデータ分析の道具をどのようにビジネスに生かしていけば良いのか、また不確実性の高い機械学習プロジェクトの進め方などを「仕事で使う」という観点から整理し… オライリージャパンさんからは、売れ行きがとてもいいという話を伺っており、これで新しいノートPCを買う足しになるかなぁと思っています。 物理本については少数ですが、Cloudera World Tokyo2017で限定販売されるそうです。CWT2017申し込みが始まったので、物理版がほしい方は申し込むとよいんじゃないでしょうか。 書評もいくつか届いており、勝手ながら紹介させていただきます。

街には数多くの広告があり そこには多くの言葉やイメージが あふれています。 私たちは考えました。 その情報量を極限まで減らして、 “ある図形”をみただけで、 クロレッツを連想する、 そんな究極にシンプルな広告は つくれないだろうか。 それが実験広告 「クロレッツのかたち」です。

われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 １．整然としたビジュアルサイズ どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド

Rico's cheatsheets Hey! I'm @rstacruz and this is a modest collection of cheatsheets I've written. bash Bash scripting enzyme Enzyme es6 ES2015+ go Go react React.js sass Sass vim Vim xpath Xpath Recently updated tmux tmux docker-compose docker-compose cron Cron yum YUM screen Screen clip Command Line Interface Pages tig Tig tar tar atom Atom grep GNU grep stimulus-reflex StimulusReflex factory_bo

ここでは、フロントエンド開発の概要について説明していきます。 ＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScriptLinting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。

We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That's a daunting task indeed. Thankfully, design systems are here to help. Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster

design-system assets cypress e2eAuthentication.cy.ts src componentsButton.cy.tsxButton.tsx describe('Auth', () => { it('user should be able to log in', () => { cy.visit('/') // open the login modal cy.get('button').contains('Login').click() // fill in the form cy.get('input[type="email"]').type('[email protected]') cy.get('input[type="password"]').type('test123') // submit the form

こんにちは、R&D 部の青野です。 「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。 ということで、読みにくいページを作りました。 と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。 仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。 また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。 （さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。） ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の

lena_std.tif のRGB別ヒストグラム（対数表示）。ダイナミックレンジが、赤は低い方に広がっておらず、緑は高い方に広がっていない。青に至ってはその両方となっている レナ（LennaまたはLena）は、1973年から2010年代後半までにわたり、画像処理の分野で広く使用されていた標準的なテスト画像である[1]。 この画像は、『プレイボーイ』1972年11月号のセンターフォールドから切り取られたもので、写真家ドワイト・フッカーが撮影したスウェーデン人モデル、レナ・ソーダバーグの写真である。本名の綴りは"Lena"であるが、この綴りでは「リーナ」と読まれる恐れがあるとして、「レナ」と発音してもらうためにモデル本人の希望で『プレイボーイ』誌では"Lenna"と綴られていた[2]。 歴史[編集] 「レナ」以前にも、画像処理アルゴリズムの説明に『プレイボーイ』誌の画像が使われたことがある。1

機械学習とif文が地続きであることを解説しました。 ver.2 質問への回答を追加し、顧客価値の小問に図を追加してわかりやすくかみ砕きました。Read less

phina.js Advent Calendar 2015 - Qiita 8日目のエントリーです. 1日目 本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary 2日目 ManagerSceneでゲームの流れを管理しよう | daishi blog 3日目 ゲーム開発 - 気鋭の新JSゲームライブラリ「phina.js」の概要を自分なりにまとめてみた - Qiita 4日目 【phina.js】Gridクラスを使いこなそう - Qiita 5日目 phina.js で Webフォント を使ってみるよ！ - Qiita 6日目 [phina.js] Tweenerを使いこなそう! [Tweener 基本編] - Qiita 7日目 [phina.js] サンプルから覚えるphina.js - Qiita このブログでお馴染みの とりあえず試