gitのworkspace内がcleanかどうか確認してからコマンドを使いたいことがあった。そこで変更があるかをgitでチェックする方法について調べたのでメモ。 結論としては以下のようにすると良い。 if [ -z "$(git status --porcelain)" ]; then # Working directory clean else # Uncommitted changes fi perlとかだとこんな感じ。 if (`git status --porcelain`) { warn 'dirty'; } else { warn 'clean'; } ちなみにgit diff --exit-codeという方法でも行けそうだったので試してみていたのだけど、こちらはファイルの変更は検知できたけど、ファイルの追加(Untracked files)は検知できなかったので、うまくいかな

メルカリの Microservices Platform Team のメンバによる技術イベント Mercari Meetup for Microservices Platform #2 に参加してきました。 connpass.com どの講演も非常に面白くて、参考になりました。特に @spesnova さんによるマイクロサービスとその監視の事例は、このレベルを目指して頑張りたいと思える内容でした。 今回は、個人的に興味深かった部分中心のメモです。プレゼン資料が公開されていない部分などは、多少ミスもあると思います。そこはご了承ください（訂正情報いただいたら直します）。 Introduction & Attention （スライドは未公開。タイトルは Connpass ページに掲載のもの） Microservices Platform Team の Engineering Manager @m

今回の記事は年末スペシャルです。 僕が SRE をしながらやってきた取り組みについては、今年も会社のテックブログに色々書かせてもらいました（職場の理解のおかげです。いつも感謝してます）。 ただ、それぞれのブログ記事の間を埋めるストーリーというか、その背景にあることについてはなかなか書く機会がありませんでした。なので、今回はそれらの記事を引っ張りながら、今年 SRE をしながら考えていたことをつらつらと書いていこうと思います。 この1年で考えが大きく変わったこと SRE のあるべき組織体制について、1年前はこう考えていました。 複数の開発チームをまたぐ形で SRE をマトリックス的に配置して、SRE はアプリの開発状況を細かく把握しながら監視・運用すべき ただ、この1年で考えが変わり、いまはこう考えています。 SRE をマトリックス的に配置するのは、確かに、開発速度を一時的に上げるのには効果

はてなブックマークドキュメント一覧 Web API​ はてなブックマーク REST API​ はてなブックマークを参照、投稿、編集、削除できる API です はてなブックマーク件数取得API​ GETリクエストでブックマーク数を取得できるシンプルなAPIです はてなブックマークエントリー情報取得API​ ブックマークされたエントリーのタイトル、ブックマーク数などの情報をJSONで取得することができます マイブックマーク全文検索API​ 対象ユーザーがブックマークしたエントリーに対して全文検索した結果を返すAPIです はてなブックマークoEmbed API​ 外部サイトがはてなブックマークのブックマークコメント情報を取得できるoEmbed APIです iOS 向け API​ iOS向けAPI-はてなブックマーク外部連携API（廃止）​ iOS アプリケーションから、はてなブックマークのコメン

はてなブックマーク ブックマーク API 本ドキュメントに関する注意事項​ 本ドキュメントははてなブックマーク REST API の解説の一部です。 ブックマーク API の概要​ 名前実行する操作

はてなブックマーク タグ API 本ドキュメントに関する注意事項​ 本ドキュメントははてなブックマーク REST API の解説の一部です。 ブックマーク API の概要​ 名前実行する操作

このドキュメントでは、はてなの OAuth 対応 API を使ったアプリケーションを開発するための準備の手順を説明します。本ドキュメントでは Web サーバーで動作する Web アプリケーションを例に説明しますが、ユーザーの元に配布して実行されるアプリケーションでも同様の方法で対応できます。 1. アプリケーションを登録して consumer key を取得する​ まずは開発するアプリケーションをはてなに登録し、 OAuth アクセスに利用する consumer key、 consumer secret を取得しましょう。はてなは consumer key と consumer secret によってアクセス元のアプリケーションを区別し、ユーザーごとのアクセス許可の有無を管理しています。アプリケーションは何個でも無料で登録できます。 1.1. はてなIDを取得する​ アプリケーションを登録

Enums (short of enumerators), identifiers that behave like constants, are useful parts of many languages. Unfortunately, enums in Go aren’t as useful due to Go’s implementation. The biggest drawback is that they aren’t strictly typed, thus you have to manually validate them. Having a wide range of usages, ENUMs are a powerful feature of many languages. They let you define strict values of data you

遅くなって申し訳ありませんでした。Webパフォーマンス Advent Calendar 2019 – Qiitaの記事です AdventCarendarに参加するということで、Catchpointでの計測を行って頂きました。 計測して頂くのはどのページにしようかと考えたんですが、弊社内で、アプリの紹介ページが重いという意見があり、せっかくの機会なのでそのページをということになりました。 で、竹洞さんに連絡したら、「そのページまでの動線で計測したほうが良い」と言って頂き、動線の中で一番ボリュームが多い、ログイン→マイページ→アプリ紹介ページという動線で計測して頂きました。この導線で見るというのが、当初とは別の課題の発見につながったので、なるほど、流石だと感動しました。 Catchpointのありがたいところ 定時のチェックを行うのはPSIのスコアレベルなら行えますが（弊社は、定期的にPSIの

�^���U

CTF Advent Calendar 2019 - Adventarの25日目の記事です。 1つ前は@ptr-yudai氏の2019年のpwn問を全部解くチャレンジ【後半戦】 - CTFするぞでした。 はじめに 対象イベント 問題数 読み方、使い方 Cross-Site Scripting(XSS) SVGファイルを利用したCSPバイパス GoogleドメインのJSONPを利用したCSPバイパス サブリソース完全性(SRI)機能を利用した入力チェックバイパス Chrome拡張機能のパスワードマネージャーKeePassの悪用 HTML likeコメントを使用したコメントアウト jQuery.getJSONのJSONP機能を使用したスクリプト実行 DOM Clobberingによるコードハイジャック Service Workerを利用したスクリプト実行 XSS Auditor機能のバイパス

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

REACT-VFX is a React component library which allows you to add WebGL powered effects to you React aaplication.

この記事は次のスライドの文字起こし的な内容です。 スライド: クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策 スライドの画像 + 喋った内容のNote的なものをそれぞれのページごとに書き込んでいます。 リンクとかはスライド版ならクリックできるので、そっちを見るといいのかもしれません。 画像だらけなので、画像が読み込み終わるのを待つといい気がします。 クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策 テンプレートエンジンに関するセキュリティ的な問題についてのお話です。 テンプレートだからエンドユーザー(サービスの利用者)に書かせて安全だと思っていても、選んだテンプレートエンジンの性質によっては安全ではない場合があります。 また、JavaScriptのテンプレートエンジンはクライアントサイド(Browser)とサーバ

サーキットブレイカーって何それって言うときに説明するときのメモ 要約 複数のサービスから利用されるものの場合、使われる側のサービスは一定異常な稼働をし始めたら、使われないように切り離されるためのしくみ 例を交えて サービスAにAPIリクエストを送って表示するサービスBがあるとする。 サービスAが正常稼働しているときは問題ないが、サービスBからのリクエストが増大してサービスAが応答不能になると、サービスB自体も反応が遅くなってくる。その状態になるとサービスAがそのまま応答がない状態なのに、さらにサービスBはリクエストを送り続けるので、サービスAの状況は悪化してしまう恐れがある。 そのため、サービスAとサービスBの間にサーキットブレイカーを入れる。 サーキットブレイカーを間に介在させると、サーキットブレイカーを通る過程で一定回数異常な状態が発生したときはサービスBからのリクエストをサーキットブ

SREチームの中村です。2019年は弊社のエンジニア採用はありがたいことに好調で、たくさんのエンジニアに入社していただきました。2018年比で人数としては2倍近くになっています。 2019年のエンジニア採用戦略についてはVP of Engineeringによる以下の記事に詳しく載っていますのでぜひ御覧ください。 tech.toreta.in 一緒にプロダクトを前に進める仲間が増えることは非常に嬉しいことです。しかし、新規メンバーを迎える側である我々が考えておくべき点がいくつかあります。 新しいエンジニアを迎えるときに考えておくこと 弊社が提供するプロダクト群はバーティカルSaaSです。バーティカルSaaSとしてのトレタについては、弊社代表の以下の記事に詳しく載っていますので、詳細はそちらを御覧ください。 note.com バーティカルSaaSは特定の産業の課題に深くフォーカスしなければなり

React Hooksで実現できることをカスタムフックの作り方の実例を踏まえて紹介します。Read less

こんにちは、SREの菅原です。 クックパッドの多くのシステムは AWS 上で稼動しており、そのWebサービスの多くはデータベースにAmazon RDSを使っています。 WebサービスがDBを使う場合、ボトルネックになりやすいDBのパフォーマンスを落とさないためにスロークエリの監視はとても重要です。そこで、Amazon Elasticsearch Serviceを使ったスロークエリの集計・監視システムを構築したので、それについて紹介したいと思います。 ※今のところMySQLエンジンのみを対象としています システム構成 システムの構成は以下のようになります。 また、社内のシステムと完全に同じ訳ではありませんが、同様の構成のSAMプロジェクト（Elasticsearch Serviceに保存するまでの部分）をGitHubで公開しています。 https://github.com/winebarre

スクラムやアジャイルを実践し、価値のあるプロダクト開発を行うためには、それが事業の成長につながる必要がある。 価値あるプロダクトの開発と事業の戦略を一致させるためにどう意思決定をカイゼンしてきたかを発表したもの。

終了 2019/12/23（月） 13:00〜 Mackerel Day #2 Mackerel正式リリース5周年 onishi 他 東京都品川区上大崎3-1-1 目黒セントラルスクエア 21F

Rustの特徴のひとつは、所有権(ownership)・移動(move)・借用(borrow)の概念です。これらがコンパイル時に厳格にチェックされることにより、古くから未定義挙動でプログラマを悩ませてきたダングリングポインタなどの問題がなくなり、メモリ安全性がもたらされます。 しかし一方で、自分で多少複雑なデータ構造を定義しようとする場合にはコンパイルを通すだけでもかなりの知識・力量が要求されます。 この（不定期）連載では、 Rustではじめるデータ構造とアルゴリズム と題し、プログラミングコンテストなどでよく見かける基礎的なデータ構造とアルゴリズムを、できるだけシンプルにRustで実装していきます。 &, &mut, Box, Rc, Cell, RefCell などの使い分けや、なぜそれを使う必要があるかの解説を、実例を通して行います。 今回第2回では、 二分探索木 を取り扱います。値

こんにちは、サイバーエージェントの@masuP9（ますぴー）こと桝田です。CATSという組織でウェブフロントエンド開発と「でもやるんだよ勢」として社内外でウェブアクセシビリティ推進啓蒙をしています。 この記事は「2019年、freeeのアクセシビリティを振り返る」の記事にインスパイアされ、主に当社メディア事業部でのアクセシビリティ関連の出来事を振り返ります。 ※アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 こえのブログリリース 今年最初の大きな話としては、「こえのブログ」のリリースでした。こえのブログは、「喋るだけでブログになる」ということで、喋った内容が音声で聞けるだけでなく自動で書き起こしされテキストでも提供されるというサービスです。 アクセシビリティの観点から企画がスタートしたわけではありませんが、サ

Ruby 2.7のここがすごい！ パターンマッチ、コンパクションGCなどをリリースマネージャーに聞いた 2019年12月25日にリリースされたばかりのRuby 2.7では、どのような機能がどういった経緯で採用されているのでしょう。リリースマネージャーのnaruseさんと、フルタイムコミッターのmameさんに詳しくうかがいました。 まつもとさんはとにかく忙しくて 実はすごいirbの改良 パターンマッチはRubyをどう変えるか キーワード引数は、端的に壊れていたのを大整理した 高速化に向けたいくつかの観点 Ruby 2.7で導入される「コンパクションGC」とは Ruby 3のビジョンは「静的解析」「並行並列」「JIT」 プログラミング言語Rubyには、クリスマス前後に新しいバージョンをリリースする伝統があり、2013年の2.1.0以降は毎年12月25日にメジャーバージョンアップが行われています

はじめに 最近 Google Cloud Platform の Cloud Run が GA となったのが話題に上がりました。また gcloud コマンドを GitHub Actions 上で簡単に扱うための GoogleCloudPlatform/github-actions もリリースされました。これまで使われることの多かった actions/gcloud は deprecated となりアーカイブされています。 これらのサービス、ツールを使うことでかなり簡単に Docker コンテナを動かす環境を構築できます。そのユースケースの一つとして、実際に僕が携わっているプロジェクトでレビューコスト低減のために行っている、Pull Request (以下 PR) 単位で独立したプレビュー環境を起動する方法についてメモがてらブログにまとめようと思います。 前提 以下のようなアプリケーション、プロ

目次 Crash/Deprecation/Intervention Reporting Crash Reporting Deprecation Reporting Intervention Reporting ブラウザがWebページを表示する際に発生したエラーを、任意のエンドポイントにレポートさせる「Reporting API」という仕様があります。今回紹介する機能もchromeでいくつか実際に使用できます。 例えば、以前紹介した Deprecation Reporting もこの仕様によって定義されていました。 asnokaze.hatenablog.com 他にもTLS証明書エラーや名前解決エラーといった、ネットワークエラーを通知するNetwork Error Loggingといった仕様もReporting APIを利用しています。 asnokaze.hatenablog.com Cr

この記事はElm Advent Calendar 2019最終日の記事です。 去年末あたりから現職のチームでElmを書き始めたので、大体1年程度はプロダクションでElmのコードを書き続けたことになる。学生時代はRubyとJavaScriptばっかりだったので、関数型プログラミングとかそういうバックグラウンドは一切なかった。その観点から、改めて率直な感想を申し上げておく。 なお、弊社フロントエンドチームとElmに関するはなしは、私の書いたFringe81アドベントカレンダーの記事を参照のこと。 fringeneer.hatenablog.com Elmには中毒性がある Elmを触ったことのない方からすると「？」になるかもしれない（というか、昔の自分がそうだった）が、率直に言ってElmには中毒性がある。一度Elmを知ると、Elm以外の言語を触るたびに「これ、Elmだったら〇〇なのにな〜」と思う

プラットフォームの上でものを作るということ Amazon EKS Advent Calendar 2019 の最終日です. みなさまご存知の通り、AWS には Amazon ECS と Amazon EKS という2つのコンテナオーケストレーションに関するサービスがあります. ECS は2014年に発表された AWS ネイティブなコンテナオーケストレータ、EKS は OSS のコンテナオーケストレータである Kubernetes をマネージドな形で提供するサービスで、2017年に発表されました. 今日はこの Amazon ECS と Amazon EKS という2つのサービスについての話を書こうと思います. // 読んでくださっているみなさまをミスリードしないための DISCLAIMER 本記事の著者は AWS に勤めています. また、この記事には僕個人の意見や想いも強くこもっています.

ABEJA Advent Calendarの10日目です。 はじめにのはじめに 以下は、あくまでテストデータで上手く行ってるよという話で、本当にこれをやったら儲かるかというと、まだまだわかりませんのであしからず！あとネタがネタだけに、今回のはあくまで個人のやってみた記録であり、組織の取り組みとは関係ありません。 はじめに お金が欲しい！無限に寿司が食いたい！株で儲けたい！ 研究やエンジニアリングをしながら生きてく上で、将来のキャリアや技術スタックについて日々考えてるんですが、よくよく原点に立ち返るとそもそも技術スタックとかどうでもよくて、好きなものを作って漫画読んで生きていきたいんです。つまり結局、世の中は金なんですよね金。なので、何とかして寝てても圧倒的に儲かる仕組みを作りたい！そんな気持ちで私利私欲のために機械学習を使ったという記録です。 以下は、今回紹介する方法で実験したテストデータ

この記事は Nuxt.js Advent Calendar 2019 - Qiita の最終日（25日）の記事です。 Vue Fes Japan 2019 の Web サイトのソースコードを公開したので、お知らせします。 https://github.com/vuejs-jp/vuefes-2019 概要 Vue Fes Japan 2019 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している。 生成した静的ファイルを Netlify でホスティングしている。 スポンサー情報などのコンテンツをヘッドレス CMS である Contentful で管理している。いわゆる JAMstack 構成。 ポイントをピックアップ Vue Fes Japan 2018 サイトのソースコードについては下記で解説しており、2019 のものと共通している点も多いの

検索体験を向上する Query Understanding とは 本記事は Recruit Engineers Advent Calendar 2019 – Adventar 25日目（最終日！）の記事です． はじめまして．リクルートテクノロジーズの河野 晋策です． 私は，Qassチームというリクルート横断の検索改善を行うチームにて検索改善を行っています． Qassチームは，検索基盤の運用や検索改善を行っているチームです． 詳しくは以下の記事をご覧ください． 「いい検索」を考える 検索組織の機械学習実行基盤 リクルート全社検索基盤のアーキテクチャ、採用技術、開発体制はどうなっているのか Elasticsearch＋Hadoopベースの大規模検索基盤大解剖 Argoによる機械学習実行基盤の構築・運用からみえてきたこと (CNDT2019, OSDT2019) 本記事の想定読者：検索初学者の方

DMMグループ Advent Calendar 2019 - Qiita の25日目です TL;DR AWSで3層アーキテクチャのサービスを構築するテンプレート（ここではスターターキットと呼びます）を公開しました。 利用するコンポーネントとしては主にAWSのALB・ECS/Fargate・Aurora、Dockerとローカル環境用にdocker-compose、IaCにTerraformを利用しています。 導入や既存メンバーのためのスターターキットで使用するコンポーネントの入門用ドキュメントを備えています。 概要 y-ohgi.github.io/starterkit にgitbookとしてドキュメントを公開しているのでそちらを閲覧してください。 サンプルとしてGolang・ECS/Fargate・Aurora（MySQL）で構築をしています。 また、RailsやNextなど、コンテナベー

※ 12/26追記: 東京のって書いているのに千葉のお店紹介してた＆おまけ2つしか紹介してなかったので、2件追記しました。すみません。。 本当に100件行くのと聞かれますが、約100件くらいです。夜に3件はしごしたり、8日間で7日間は肉を焼いていたり、東京以外にも遠征をしていたりします。（数えたら今年は94件でしたが、なんとなくタイトルは100件にさせてくださいｗ） 焼肉以外もいろいろお店は行くんですが、やはりお肉って最高ですよね！！食べ歩いていると店の特徴とかが分かってきたりしていて、ハラミが食べたい人ならココとか薄切りのジャンクめな味付けのタンならココとかいろいろあるんですよね。何を食べたいかと好みや予算のマッチングで変わるので、ランキングこの記事では書きません。ランキングとか好きじゃないです。。すみません。。 この記事では東京の焼肉屋さん（肉割烹も入るかも）をいくつか紹介したいと思い

こちらの記事はNIJIBOX Advent Calendar 2019の23日目の記事です。（遅刻してごめんなさい・・・） 前置き こんにちは、ニジボックスのフロントエンドチームのこじこじです。 あっという間にクリスマスですね。街はキラキラ、大人も子どもも恋人たちも浮かれてしまう楽しい季節です。 突然ですが、失恋しました そんな楽しい季節がやってきたにも関わらず、少し前に失恋しました。 クリスマスまでもう時間がない・・・！ ということで、クリスマスに自尊心を高めて過ごせるTinder風モックをサクッと作ってみることにしました。 落ち込んでいる暇はないのです。いのち短し、作れよ乙女。 作りたいもの なんか私めっちゃいいねきてる・・・モテ期なのでは・・・？！と思うためだけのTinder風webアプリ クリスマスに暇を潰せるレベルでいいので今回はモックアップの作成 書くこと Reactで簡単にT

これは TypeScript Advent Calendar 2019 22日目の代打記事です。 前回の投稿が好評だったため、ブラッシュアップ・CLIツール化し、any警察👮‍♂️を npm publish しました。READMEに記載したとおり、devDependencies に追加し、npx anycopを実行するとプロジェクトのany診断ができます。 anycop: https://www.npmjs.com/package/anycop おことわり これはanyを駆逐せよ、という目的で作ったものではありません。anyの使用状況が可視化されれば、課題点を把握し、チームで共有する事が出来るでしょう。時間のある時、型安全のカバレッジを向上する様な取り組みが出来れば、それはとても素晴らしい事です。any は悪者ではありません。TypeScript にこの仕様がなければ、今の JavaSc

これってなんなの？ 【ど素人状態＝社会人になって初めてプログラミングを勉強したぜ！（特に新卒）】〜【Webエンジニアの３年生ぐらい】になるまでに読むと良い本まとめです。「どんな目的で学ぶか？」*「いつぐらいまでに読むといいか？」を段階的にまとめました。「これだけ読めばいい！」と、そんな簡単な話ではありませんが、「今いるレベルより少し上の人がどんなジャンルのことを学んでんだろ？」という方の参考になれば嬉しいです。過去の自分に向けてでもあります、自戒。これからWebエンジニアになる人、なって間もない人の参考になれば幸いですm(__)m ※続編 【Webエンジニアど素人】が【3〜4年生】くらいになったら読むといい本を目的別にまとめた ”Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本”の段階的まとめ（一部外部記事あり） ど素人の方々が手を動かしながら１〜６ヶ月以内に学ぼう！ ◆どの

JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか？ なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30

この記事は Gunosy Advent Calendar 2019 の24日目の記事です。 昨日の記事は@hongmhoonさんの iOSデバッグ中LLDBコマンドでUIView(Controller)を作って表示してみる でした。 はじめに 広告技術部のGunosyAdsチームの会田(@ryoaita)です。主にGoの広告の配信サーバーの開発を担当しています。 みなさんがお使いのGoのUUIDのライブラリはなんですか？ 私は最近使っているのは github.com/gofrs/uuid です。 ネタに詰まったので、JavaScript向けのSDKで実装したことのあるUUID4の生成処理をGoで実装してみました。 UUID4ってなんだっけ？ UUIDはコンピューターシステム上で一意に識別するためのIDです。UUIDの実体は128ビットの数値です。 我々がよく目にする xxxxxxxx-xx

Rust Advent Calendar 2019 25日目の記事です。 tide は現在開発途中の、 Rust の async/await に対応した HTTP サーバーを構築するフレームワークです。not ready for production yet なので本番にこれを使用するのは難しいかもしれませんが、いろいろな例を見てみた感じとても使いやすそうで、注目に値するフレームワークの一つです。 記事を少し読んでみたのですが、どうやら 2018 年に Rust の Network Service Working Group が開発に着手したフレームワークのようですね。現在のステータスを追いかけていないので詳しくはわかりませんが、Rust チームの方々が何かしら関わっているフレームワークということで、少し安心感がもてるかなと私は思っています。async/await が今年無事安定化されたの

初心者が入門書を読んでさぁ書くぞとなったときにつまずくところのうちの一つが，同じようなライブラリが多すぎ問題である． ということでそういうライブラリの話をしよう． 例によって例のごとく間違っていること書いてあるかもなので報告よろしく． モナド変換子 Haskellで実用的なプログラムを書く上で避けて通れないものの一つにモナド変換子がある．こいつはなにかというと，簡単に言えば，モナドを合成してでかいモナドを作るやつである．人間がおおよそ使うであろうモナド変換子はライブラリで提供しているので，それらを組み合わせてお望みのモナドを作ろうとするわけだが，そこに立ちはだかるのがtransformersとmtlである． transformersとmtl transformersはlift という下位のモナドのアクションをでかいモナドのアクションに持ち上げてくれるメソッドが定義されたMonadTrans

はじめに 普段、Railsを使って開発されている方であれば、関連するテーブルのデータを扱うときなど、N+1クエリを発行していないか、気をつけているかと思います。 また、うっかりN+1クエリを発行してしまうことを防ぐため、N+1クエリを自動で検出するBulletというgemを導入しているかたも多いかと思います。ただ、Bulletで検出されないクエリでもN+1になっているケースがあります。 この記事ではBulletでは検出されないが、N+1になっているクエリを改善する方法を紹介します。 N+1問題とは N+1問題とは、1回のクエリで済むところをデータ量(N)の回数、クエリを発行してしまう問題のことです。 例えば以下のようなクエリはN+1クエリです。 Post Load (0.3ms) SELECT "posts".* FROM "posts" ↳ app/views/posts/index.h

※最新版（2021年バージョン）がこちらにありますので合わせてご覧ください！ 毎年恒例, Python本と学び方の総まとめです！*1 プログラミング, エンジニアリングに機械学習と今年（2019年）もPythonにとって賑やかな一年となりました. 今年もたくさん出てきたPythonの書籍や事例などを元に, 初心者向けの書籍・学び方 仕事にする方（中級者）へのオススメ書籍 プロを目指す・もうプロな人でキャリアチェンジを考えている方へのオススメ を余す所無くご紹介します. 来年（2020年）に向けての準備の参考になれば幸いです. ※ちなみに過去に2019, 2018, 2017と3回ほどやってます*2. このエントリーの著者&免責事項 Shinichi Nakagawa（@shinyorke） 株式会社JX通信社 シニア・エンジニア, 主にデータ基盤・分析を担当. Python歴はおおよそ9年

InfoQ Software Architects' Newsletter A monthly overview of things you need to know as an architect or aspiring architect. View an example

こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ

こんにちは、delyコマース事業部エンジニアの小川です。 先月11月に入社し、エキサイティングな毎日を過ごしています。 この記事はdely Advent Calendar 2019 - Qiitaの24日目の記事です。 昨日はSREの松嶋さんが「AWS RunCommandを使ってEC2上に監視ダッシュボードをサクッと作る（Ansible+Terraform+Grafana編）」という記事を書いてくれましたので是非そちらも読んでみてください！ tech.dely.jp コマース事業部では、現在「事業開発」と「ソフトウェア開発」がほぼ同時に進行しており、プロジェクトにおける確定要素と不確定要素が複雑に絡み合っています。 スピード重視でゴリゴリ実装していくのも興奮しますが、変化に耐えづらい実装をしてしまうと、その後の開発スピードに影響していまい、事業のスピードが落ちるなんて事にもなりかねません

デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

これは、以前個人のNotionで公開していた内容を加筆修正したもので、 グラフィックレコーディング Advent Calendar 2019 22日目の記事です。スケッチノーティングにはまって数ヶ月たった。 技術セッションや技術本を読んでわかったことをイラストと一緒にまとめている。 スケッチノーティングとは？スケッチノーティングとはイラストを用いながらノートをとる手法のこと。同じような言葉として、グラフィックレコーディング、グラフィックファシリテーションなどがあるけど、成果物をどのような目的で使うか、リアルタイム性があるかないか、製作者の意図などによって呼び方がかえられている。こちらの記事がとてもわかりやすい！（まさにVisualization） ビジュアライジングのプロとして、会社の経営会議などに赴きグラフィックファシリテーションをして大きな意思決定に貢献するようなかたもいるらしい。 私

Mercari Advent Calendar 2019も、この記事を入れてあと３個となりました。最後まで読んでくださいね。 23日目はAutomation&QAグループで、Webのテスト自動化を行っている@AHA_oretamaがお送りします。 今回はWebの自動テストについて、この１年やってきたことを振り返ってみようかと思います。 Webのリアーキテクチャ 現在、Webではリアーキテクチャを進めています。 進め方としては既存のモノリシックなWebアプリケーションを残したまま、パス（例えばトップ /jp/ や検索ページ /jp/search/ ）ごとに新しいWebアプリケーションにマイグレーションする方法をとっています。 影響範囲を小さくしつつその範囲の中でチャレンジが行えることがこの方法の利点です。 詳しくは去年のMercari Tech Confの資料をご覧ください。 speaker

CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder

この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr

Rustの特徴のひとつは、所有権(ownership)・移動(move)・借用(borrow)の概念です。これらがコンパイル時に厳格にチェックされることにより、古くから未定義挙動でプログラマを悩ませてきたダングリングポインタなどの問題がなくなり、メモリ安全性がもたらされます。 しかし一方で、自分で多少複雑なデータ構造を定義しようとする場合にはコンパイルを通すだけでもかなりの知識・力量が要求されます。 この（不定期）連載では、 Rustではじめるデータ構造とアルゴリズム と題し、プログラミングコンテストなどでよく見かける基礎的なデータ構造とアルゴリズムを、できるだけシンプルにRustで実装していきます。 &, &mut, Box, Rc, Cell, RefCell などの使い分けや、なぜそれを使う必要があるかの解説を、実例を通して行います。 第1回は、最もシンプルな木構造である 二分木 を

2019 アドベントカレンダー23日目 この記事はBASE Advent Calendar 2019の23日目の記事です。 devblog.thebase.in こんにちは、11月よりBASE BANK株式会社に入社し、Dev Divisionに所属している清水（@budougumi0617）です。 23日目の本記事では、レイヤードアーキテクチャを採用している上で頻出するであろうボイラープレートの悩みを共有します。 そして、Go言語（以下Go）でコードを自動生成するためのツールを作った話と、利用したtext/templateパッケージなどの公式パッケージの概要に触れます。 自動生成時に利用するテンプレートはGoのtext/templateパッケージを利用しますが、テンプレートファイルは自由に変更できるので、将来的にはGo以外のコードも生成する予定です。 BASE BANKにおけるアーキテク

TypeScript Advent Calendar 2019 - Qiita 14日目の記事です。 type-festというTypeScriptの便利な型を集めたnpmパッケージがあります。 今回はtype-festの中から特に複雑なUtilitiesの型の紹介とそれらの型パズルのような型定義について解説したいと思います。 この記事がMapped TypesやConditional Typesを使った複雑な型パズルの理解への一助になれば幸いです。 github.com 長いので前後半に分けました。後半はまた後日公開します。 前提知識 Utility Types Mapped Typesを利用したUtility Types Conditional Typesを利用したUtility Types type-fest Except Mutable Merge MergeExclusive Re

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F

Microservices Platform TeamでTech leadをしている@deeeeeeetです． 昨年のMTC2018ではMicroservices Platformチームの立ち上げから1年で僕らが取り組んできたことを紹介しました． speakerdeck.com 具体的にはStranglerパターンによるMonolithからMicroservicesへの段階的なリクエスト移行を行うためのAPI gatewayの開発や，Microservicesのインフラのセットアップを簡単にしサービス開発チームのSelf-service化を進めるためのStarter-kitの開発，GoでのMicroservicesの開発を高速で始めるためのTemplateプロジェクトの開発，Spinnakerの導入などについて紹介しました． これらはPlatformとして最低限の機能を整備したにすぎず，さ

フロントエンドエキスパートチームの小林(@koba04)です。 先日、npmから脆弱性についての発表がありました。 調べていく中でいくつか思うところがあったので解説も兼ねて書いていきたいと思います。 The npm Blog — Binary Planting with the npm CLI npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる です。 npmのバージョンが6.13.4になったNodeもv8, v10, v12, v13系でそれぞれリリースされたので、そちらを利用することも可能です （yarnのバージョンは別途あげる必要があります）。 nodejs.org npmによる発表では、今回発表された脆弱性は2件あるため、それぞれ個別に考えます。 binに任意のパスを指定出来る件 npmパッケージはpa

こちらに移転しました 本稿は量子コンピューター Advent Calendar 2019の記事です． みなさん，資産運用してますか？ 現金と違って，株などを持っていると常に価格変動のリスクに晒されます． 出来るだけリスクを抑えたい，でも収益も欲しい！このバランスは様々です． どうやってそのリスクとリターンをコントロールするのか． 金融資産以外で考えてみるともっと身近なものに保険という商品があります．例えば生命保険は保険料を払うことで将来の死亡や病気の(金銭的な)リスクをコントロールする商品と見ることもできます． 同じように，デリバティブと呼ばれる価格変動リスクをコントロールするための金融商品が存在します．このような金融商品の価格はいくらが適正か？というのがデリバティブ価格決定問題です． デリバティブについての標準的な教科書としてはHull本が挙げられます． デリバティブの価格決定は，問題に

これは TypeScript Advent Calendar 2019 23日目の記事です。 みなさん「any」使ってますか？え？お前はどうかって？それはもうね…つ、使ってませんよ（ドキドキ）👮‍♂️「あなたanyですね？署までご同行願います」🙋‍♂️「ぐぬぬ…マウスオーバーされてないのに何故バレた！」‬ 隠れた any を探せ👮‍♀️！ TypeScript を使っていると、意図せず any が紛れこんでくることがあります。例えば、ライブラリが提供する関数が any をデリバリーしてきて、それがそのまま伝搬してしまう様なケースです。このように any が紛れてしまうと、grep ではもちろん、コードレビューの目もすり抜けてしまいます。 import { greet } from './utils' const message = greet() // 隠れany function

この記事はBASE Advent Calendar 2019 22日目の記事です。 devblog.thebase.in こんにちは。最近はCorporate Engineeringをやっている山根 (@fumikony)です。すこし前まで、即時に資金調達ができる金融サービス「YELL BANK（エールバンク）」のインフラまわりに関わっていました。 今回は「YELL BANK」のインフラにおけるTerraform運用について紹介します。 目次 目次 概要 実行する場所について レビューのやり方について プルリクエスト作成からterraform applyまでのワークフロー 詳細 tfnotifyについて AWSアカウントとTerraformディレクトリ構成について CodeBuildについて 実行例 今後の発展など おわりに 参考リンク 概要 「YELL BANK」のインフラはAWS上に構

2020/07/17: いくつか追記しました はじめに 私は、TechTrainでフロントエンドのメンターとして面談する中で「最近フロントエンドの勉強を始めました！」という方や、フロントエンドエンジニアを目指す学生と話す機会が何度もあります。 その中でよくある質問が 「フロントエンドの情報収集ってどうしてますか？」 です。 何度も質問を貰うので、気になる人は多いのかなと思います。 この記事では「私がどんな風に情報収集しているか」を紹介しようと思います。主に情報収集の流れと、どこからフロントエンドの情報を集めているかについてです。 情報収集の流れ まずは情報収集の流れとして主にプロセス的な観点で整理してみます。 私の情報収集を抽象化すると以下の3つのプロセスがあると思います。 情報源から情報を集める(ex: Twitter, Blog, Qiita) 特定の場所に情報を溜める(ex: はてな

This pen is a real example of how to build an Infinite Scroll in Vanilla JavaScript. I've used Fetch API, Intersection Observer API, and WordPress REST API to fetch posts. Feel free to fork, use, and modify this code.

この記事は GraphQL Advent Calendar 2019 の22日目の記事です。 qiita.com こんにちは。 vivit株式会社というアウトドア関係のサービスを提供している会社で主にフロントエンドを担当している中村です。 本記事では、fly.ioでGraphQLのキャッシュサーバを立てて高速化した話をします。 はじめに 弊社では、Go + React(TypeScript)で開発しておりAPIにはGraphQLを採用しています。 今回は下記の理由でGraphQLのQuery結果をキャッシュするサーバを実装してみました。 社内向け管理画面で呼び出しているQueryの応答時間が5秒ほどかかっているものがあり、開発時、オペレーション時にストレスが発生している。 技術的な興味 本記事では、 GraphQLをどのようにキャッシュするのか fly.ioでGraphQLのキャッシュサー

この記事は「セイチョウ・ジャーニー」「挫折論への招待」アドベントカレンダー Advent Calendar 2019の22日目の記事です。 2019年のアウトプット 今年1年を振り返ってみる。 今年はあまりアウトプットしなかったかもなーと思っていたが、集めてみると結構色々やっていた。 ブログ記事: 7本 登壇: 10回 RSGT2019 運用中のモバイルゲーム開発チームに、並行バージョン開発を導入してみた EMFM Meetup 2人のVPoE 2人のVPoEによる中埜博さん（「イラスト解説：ティール組織」翻訳者）への W インタビュー企画 DevLOVE X キャリア形成に必要なのは、ただ飛び込むという勇気だけだった Developers Summit 2019 Summer Engineering Managerは何をする人なのか EOF2019 Opening Session 私たち

Functional-Static-Strong-Managed −0.25 (0.04) ∗∗∗ Functional-Dynamic-Strong-Managed −0.17 (0.04) ∗∗∗ Proc-Static-Strong-Managed − 0.06 (0.03) ∗ Script-Dynamic-Strong-Managed 0.001 (0.03) Script-Dynamic-Weak-Managed 0.04 (0.02) ∗ Proc-Static-Weak-Unmanaged 0.14 (0.02) ∗∗∗ 各カテゴリに属する言語は以下のとおりです。 Functional-Static-Strong-Managed： Haskell、Scala Functional-Dynamic-Strong-Managed： Clojure、Erlang Proc-Sta

これまで私はプロダクトマネジメントやデザインディレクションを行う立場として、BtoBにBtoC、iOSにAndroidにWebにWatchOSにIoT、ゼロイチにグロース。様々な分野、プラットフォーム、フェーズでサービスを開発する機会に恵まれてきました。 その中で一緒にチームを組んだフロントエンド、サーバーサイド、iOS、Android、インフラ、データ、様々なエンジニアの方を思い出しながら「ああ、心強いな」と感じた色々なタイプの特徴を、リスペクトの想いを持って、プロダクトマネージャーやデザイナーの視点でまとめてみました。 それではいってみましょう。 目的にフォーカスしている 要件をただ実装するのではなく、ビジネスの目的はなにか、ユーザーが真に求めているものはなにか、なにがサービスの生死を分けるのか、技術は目的を達成するための手段だと客観的に捉え、真の目的に対して解決策を提案し続けてくれる

はじめに RustでWebAssemblyインタプリタを作ったのでその実装の話や、wasmの仕様についての記事です。 HListを使ったジェネリックプログラミングの話や、最後の方には「自作言語 on 自作wasmインタプリタ on 自作wasmインタプリタ」みたいな話も出てきます。 分かりにくい所や間違っている所は指摘してくださると助かります。 リポジトリ 作った成果物のリポジトリです。まだpublishはしていませんがクレートになっています。 cargoのexample実行に対応しているのでそれを見ればだいたい分かると思います。 今回はadc-2019-12-22というタグがついたコミットのソースを元に解説していきます。 https://github.com/kgtkr/wasm-rs/tree/adc-2019-12-22 仕様書 この記事では仕様書を読みながら順番に実装を解説していき

学部生が研究成果を出すためにはどうしたら良いのかについて説明します（主観）． その１．早期配属を希望する 私が所属する学科は4年次からの配属でしたが，特例として学部3年次の8月から配属しました．学科によっては，絶対に早期配属はダメ！と言われるかもしれません． しかし，一つだけ抜け道があります．志望する研究室に，アルバイトとして雇ってもらうことです．アルバイトとして雇う権限は事務ではなくて教員にあります．したがって，教授がOKといえばアルバイトとして研究室で働くことができます． 私はこのようにして半年間雇ってもらいながら研究を遂行しました． その２．時間を研究に捧げる 3年生というのは，学生実験や研修などで忙しい時期です．自分の研究なんてやる時間ないと思いますが，やるしかありませんでした（悲しい）． 私はいつも15時ごろまでは授業や研究・学生実験・研修を行い，15時から夜中の3時ごろまで毎日

Express.js to Next.js API Routes Migration July 10, 2019 This if a follow up on my previous post Explore Next.js 9 API Routes. After much consideration, I decided to ditch Express.js and moved into API Routes. Migrating to Next.js API Routes In order to use the new API Routes, I need to update my Next.js module to v9 by running: This updates Next.js along with React.js to the latest versions. Alth

本記事執筆時点のバージョンRails 5.2.2 Node.js 10.12.0 npm 6.5.0 yarn 1.12.3 TypeScript 3.2.2 webpack 4.28.2 vscode 1.30.2 ディレクトリ構成TypeScriptのソースコード置き場は app/frontend/ビルドファイル生成先は public/javascripts/dist/インストール$ yarn add -D typescript webpack webpack-cli ts-loader source-map-loader webpack-manifest-plugin clean-webpack-plugin webpack-livereload-plugin設定ファイル作成tsconfig.jsontscコマンドを使ってtsconfig.jsonファイルを作成します。 $ npx

この記事は SmartHR Advent Calendar 2019 21日目の記事です。こんにちは。デザイナーの@tyoys00です。 初めてAdvent Calendarに参加します。これで私も立派なIT人材です。 UIデザインってなんだろう？突然ですが、デザイナーのみなさんUIデザインしてますか？ してます？ では、UIデザインってなにをデザインすることなのでしょうか？ UIデザインってなんなのでしょう？ 私は何もわかりません。デザイン、何もわからない… 私はこの1年上記のような「UIデザインとはなにを作っていることなのか？」ということばかり考えていた気がします。（そして、気づいたら年末になっていました…）。 結論から言うと、UIデザインとはデータベースやサーバーサイドで実装された構造とフロント側での視覚的な情報構造との対称性を設計することであるという考えに至っています。 この実装の

引越しってとても億劫ですよね。 引越したい気持ちはあっても、諸々の手続きなどを考えるとどうしても腰が重くなってしまいます。 ぼくはわりと引越し厨なので、いままで1年ごとに引越しをやってきました。 でも、その度に時間も体力も精神力も持っていかれて、本当にしんどい・・笑（じゃあそんな引っ越しするなよ、っていう意見はなしです。趣味なので）。 ぼくみたいに引越しが趣味な人でもしんどいのに、普通の人はもっとしんどくて辛いイベントなのではないでしょうか。 なので考えました。 ここ数年、特に2018年あたりから、思考停止系のサービス（簡単にいうと代行サービスです）がトレンドで、さまざまなジャンルで数多くのサービスが乱立しているんですよね。 そして気付いたんです。 「これってめっちゃ引越しラクにできるんじゃね？」 と。 そこで、そんなイケてる代行サービスを駆使して、極力ラクに引越しをする「ズボラ引っ越し術

アメリカの大学院への進学は魅力的な選択肢だと思います．十分な給料をもらいながら学位が取得でき，さらに世界最先端の研究に触れる機会が得られる可能性が高いからです． 私は地方の国立大学出身であったため，周囲に米国大学院を受験する人は全くおらず，情報収集など非常に苦労しました． 私が米国大学院受験の前に知っておきたかったことなどをこのサイトにまとめますので，今後目指す方がいましたら是非参考にしてもらえればと思います． ＜目次＞ 序章　私のスペックと米国大学院受験の結果 1章　出願時期と出願書類 2章　米国大学院受験における最重要事項 3章　奨学金取得のコツ 4章　学部生が受験までに研究成果を出すためにはどうしたら良いのか 5章　教授とのコネの作り方 6章　地方国立大の強み 7章　私流SoPの書き方 番外編　米国大学院受験の失敗談(MITに不合格だったワケ) 番外編　アメリカの大学院受験費用まとめ

オブジェクトリテラル内のスプレッド構文は、ES2018で追加されたたいへん便利な構文です。特に、{ ...obj }という形のコードでオブジェクトをコピーするのはJavaScriptプログラミングでは極めて頻出です。 スプレッド構文が無かった時代はObject.assign({}, obj)として同様のことを達成していた方も多いと思われます。Object.assignはES2015から使用可能でした。 では、この2種類の方法は同じでしょうか。タイトルにもある通り、もちろん違います。今回は、この違いに触れている日本語資料がMDN日本語版で一瞬触れているくらいしか無かったので記事にまとめました。 結論 最初に結論を述べると、Object.prototypeが汚染されていた場合にのみ違いが発生します。特に、Object.prototypeにsetterを持つプロパティ名が存在し、そのプロパティ名

Node.js Advent Calendar 2019の21日目の記事です。 2019/12/25追記 もともと「Top-level awaitによるESモジュールの非同期化とDual Package Hazard」というタイトルにしていましたが、表現に勇み足な部分があり、ご指摘をいただいたので、少し修正しました。 「TLAによってNode.jsのESMが非同期になった」という表現はおそらく正確ではありません。ESMに関する2017年のNode.jsのドキュメントでは、特に理由は触れずに「ESMのロードは非同期で、それはブラウザの挙動と合致する」と記述されています。ここでいう「ブラウザの挙動」とは、WHATWG Loaderで定められた仕様を指すと考えられます。ECMAScriptの仕様としては、少なくとも2019まではESMが非同期であるとの記述はなさそうなので、ブラウザの仕様に合わせ

以前、React初学者向けの勉強会を開催したときに作った資料を、Qiita向けに調整したものです。 Reactの初歩的な記法 Next.jsでのサーバーサイドレンダリングの概要 CSSinJSの使い方 を学ぶことができます。 事前にNode.jsをインストールしている必要があります。 Reactとは？ Reactとは、Facebookが作ったJavaScriptライブラリです。ユーザーインターフェイスをコンポーネントベースで作ることができます。 公式サイト：https://ja.reactjs.org/ シンプルなReactのサンプル <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@16/umd/rea

ひとり開発 Advent Calendar 2019の21日目の記事になります。 皆さんは個人開発を行う時に開発のタスクや仕様に関する情報を何で管理しているでしょうか？ 例えばタスク管理ならよく挙げられるのがTrello、仕様や技術環境に関する開発情報ならGoogleスプレッドシートや単純にメモ帳を使う人もいるかもしれません。 自分が個人開発を始めた時は色々なツールを試していて、しかも情報の種類ごとにツールを使い分けていました。 タスク管理で言えばTrelloの他にもガントチャートを作れるBrabio、あとTODO管理で有名なTodoistを使ったこともありました。 機能一覧や仕様詳細、技術スタック、調査事項に関してはGoogleスプレッドシートを使っていましたね。 ただある時「自分がやりたいのは本当にこんなことなんだっけ」という疑問を抱きました。 開発の管理ツール選定やツールを使いこなす

React みたいなコンポーネント作る系フレームワークだと思って Custom Elements を使おうとすると、たちまち死んでしまう。まだ色々試している最中なのでアウトプットはないんだけど、とりあえず今考えてることを書いておく。役立たないし刺されたら困るからポエム宣言しとこうか。ポエムです。 Custom Elements やっていきたい Custom Elements の良さは特定のフレームワークに依存しないところだと思う。例えば React とか Vue とかだとそれぞれのフレームワークの世界にどっぷり浸かってしまい互換性がないが、 Custom Elements ならば普通の要素の延長線上でどこに持って行っても使える。 npm とか使わなくても script タグで CDN とかから持ってくればすぐに動く。夢のよう。もちろん、データフローはアプリケーション固有のものになるだろうか

WINTICKETでは誰もが公営競技を楽しむことができるよう「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第3部：ウェブコンテンツ」に対応することを目標とし、アクセシビリティの向上に取り組んでいます。 対象範囲WINTICKETサービス https://www.winticket.jp 以下 目標とするレベルJIS X 8341-3:2016のレベルAに準拠 本方針、また試験結果における「準拠」という表記は、情報通信アクセス協議会のウェブアクセシビリティ基盤委員会による 「ウェブコンテンツのJIS X 8341-3:2016対応度表記ガイドライン2016年3月版」で定められた表記によるものです。 追加する達成基準1.4.3 コントラスト（最低限レベル）の達成基準（AA）2.4.7 フォーカスの可視化の達成基準（AA）例外

この記事は Next.js Advent Calendar 2019 の21日目の記事です。 Next.js はフレームワークとして必要最低限の機構のみ提供しているため、運用上必要になる機構は自作する必要があります。例えば全ページで「メタデータの注入」が必要になったとき、それを制約する機構は備わっていません。本稿では、middleware とも呼べる AppComponent でこの受領するメタデータを型で守り、処理を安全に実行するTIPSを紹介します。 Next.js のバージョンは次のものです。

パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解することが大切であり、それがなければ、どのように対処していけばいいのか見当をつけることすら出来ず、的外れな対応をすることにもなりかねない。 React.memoを使った処理の最適化は、React アプリのパフォーマンス改善のための、基本となるテクニックのひとつである。 この記事のコードは React のv16.10.2で動作確認している。 メモ化という概念 React アプリのパフォーマンス最適化を理解するためにはまず、メモ化（Memoization）という概念を把握しておく必要がある。 大雑把に言ってしまうとメモ化とは、何らかの計算によって得られた値を記録しておき、その値が再度必要になったときに、再計算することなく

こんにちは、メルカリでフロントエンドエンジニアをしている @karszawa です。 本日はメルカリアドベントカレンダー2019の21日目の記事として「メルカリアプリのWebView向けWebアプリケーションの開発を支えるモック技術」というニッチ（？）な題目の話をさせていただきます。 メルカリアプリでは「取引画面」を代表として、意外と多くの場所で WebView が使われています。 WebView 向けの Web アプリケーション開発は動作環境が特殊で外部依存の多いという点で普通の Web アプリケーション開発よりややこしいです。たとえば、普通の Web アプリケーションはあるアプリが独自に定義した API（ネイティブ API）を呼ぶことはありません。この記事ではそういった難しさを持ったアプリケーションを開発する上で重要な モックの話 をします。 本番環境と開発環境のアプリケーションが参照

はじめに 本記事は Recruit Engineers Advent Calendar 2019 – Adventar 21日目の記事です。 リクルートテクノロジーズの 辻 健人です．GitHubではmaxmellonで活動しています． 本記事では，Airシフトをより良くするために実施していることを紹介します．技術的な改善につきましては，web.dev – five-ways-airshift-improved-their-react-app で紹介されたりもしました． この記事では，チームをどのようにしてより良い方向性にもっているかを紹介していきます． Airシフトとは Airシフトは，シフト表の作成はもちろん，スタッフとのやりとりや細かな調整業務もラクになるシフト管理サービスです． 直感的に操作できるシンプルな画面で，簡単にシフト作成が行えます．シフト表と一体となったチャットを使ってス

こんにちは！ Hanakla(Twitter: @hanak1a_)です！ TypeScriptアドベントカレンダー 15日目となるこの記事では、 react-reduxのconnect関数を自前実装して型定義テクニックを学んでいきたいと思います。 みんなもつよつよ型定義を書いてつよつよなライブラリを作っていこう！ みなさん、""react-redux""してますか〜!？ してますよね！ じゃあreact-reduxのAPIも知ってますか〜！？ お世話になってる、なるほど！！ じゃあじゃあ、その型定義を読んだことがある人は〜！？ ある！！？じゃあこの記事読まなくていいな！ 家に帰ってサンタさんからの請求を部屋の隅でガタガタ震えながら待っていてくれ！ﾎｰﾎｰﾎｰ connect(mapStateToProps, mapDispatchToProps)(Component) みんな大好きですね

例外はたくさんあるのでこちらの表はあくまでも参考です。 バッチ更新の場合はcrontabやAirflow、Rundeckなどのワークフローエンジンが使えます。 一方、リアルタイム更新ではAWS KinesisやGCP pub/sub等を活用したり、Apache Beamなどを用いたりしてデータパイプラインを構築することがあります。 アイテムの特性と検索時のクエリ 検索対象となるアイテムの特性と検索する際にどのようなクエリが想定されるかを考えます。 全文検索エンジンを使っているので、基本的にはテキストにより表現されているとは思いますが、どのようなフィールドが存在するか、テキスト以外の検索項目などを洗い出します。 クエリに関しても基本は「キーワード」ですが、整理したアイテム情報に対してどのようなクエリで問い合わせが可能かを考えます。 システムとして「誰」が検索結果を取得するか、検索結果をどの程

TypeScript は開発に安定をもたらしてくれますが、たまにやりたいことがちょちょっとできずにハマることがあります。今日はそのひとつ、 window オブジェクトにいろいろ生やしたいんだけどうまく生やせないあなたのための記事です。 ポイントは次のふたつです。 tsconfig.json の lib に "DOM" が指定されているかどうか window の定義において import / export を使っているかどうか tsconfig.json の lib に "DOM" が指定されているかどうか tsconfig.json の lib プロパティに "DOM" が指定されているかどうかで書くべき内容が変わります。ご自身の tsconfig.json の中身を確認してみてください。 lib プロパティがない場合は "DOM" が指定されているものとして扱ってください。 DOM あり

リクルートテクノロジーズ でフロントエンドエンジニアをしている@SW20_Toshiです。 本記事はRecruit Engineers Advent Calendar 2019 - Adventar 20日目の記事です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ 今回は、レガシーサービスにおけるパフォーマンス改善として、Puppeteerを使って不要なCSSを削除する取り組みを行いました。 ツールはOSSとして公開しているので使ってみてください！ サイボウズ株式会社のこちらの記事には大変お世話になりました！ ありがとうございました！ きっかけ 10年近くABテストや機能追加を繰り返してきたWebサービス.... 1画面に大量のCSSファイルが読み込まれていて、カバレッジ関しては目も当て

rack の脆弱性対応があり1、それに対応した Rails を使おうとすると 5.2.4.1 を使う必要がある。のでアプデを試みた。5.2.3 -> 5.2.4.1 マイナーバージョンだし、大丈夫やろw と思いながらとりあえずCIを回してみたところテストが落ちた。はい。 原因を気合で確認したところ、この変更によるものであることがわかった。 github.com この変更自体について説明するとこんな感じ。例えば、既存レコードについて何らかの理由で Foo.find(1).valid? すると false を返すようなレコードがあるとする。後からバリデーションが追加されたんでも update 文を手でかいたらぶっ壊れたんでもよいけど、とりあえずそういう invalid なレコードがあるとする2。そのときに、それへの autosave: true な関連をもつモデルについてバリデーションの結果が

2020年1月の Rails / OSS パッチ会を 1月23日(木)に開催します。 この会をひとことでいうと、日頃のお仕事で使っている Rails をはじめとする OSS への upstream にパッチを送る会です。 会には Ruby と Rails のコミッターである顧問の a_matsuda もいますので、例えば Rails に送るパッチのネタがあるけれど、パッチを送るに適しているかの判断やパッチを送る流れが悩ましいときなど a_matsuda に相談して足がかりにするなどできます。 以下、前回の活動が関わる成果です。 koic: Active Record Oracle enhanced adapter github.com unasuke: excon github.com y-yagi: Rails github.com yahonda: Rails github.com 開

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

H2O が処理する HTTP リクエストを BPF や DTrace でトレース可能になりました。 今回は Fastly での仕事の一貫として貢献させてもらいました (#2194 や #2182)。 Fastly は H2O を最前線で採用しているので、スタッフがトラブルシュートしやすくすることが目的です。 つい先日、ニューヨークで Kazuho さんと論議する機会があったおかげで、Logging に適した高レイヤの USDT Probe をスムーズに組み込めました。 背景技術や使い方はいずれ、公式チュートリアルなどで紹介します。 今すぐ試したい場合は下記の資料を参考にしてもらえればと思います。 https://torumk.com/h2o/tracing (概要) https://github.com/toru/h2olog (BPF Client 実装) あわせて読みたい

Austin Z. Henleyのブログより。 更新12/14: この投稿は、Hacker NewsとRedditに関する多くの議論に拍車をかけました。 提案されたプロジェクトのいくつかを収集し、この投稿の最後にリストに入れました。 私はよくサイドプロジェクトを始めたいが、何を作るべきか分からない多くの学生やプロの開発者と話します。以下は、私に多くを教えてくれたいくつかのソフトウェアプロジェクトです。実際、それらは何度も作ることができ、毎回新しいことを学ぶことができるので素晴らしいです。従って、何を作るのか分からない場合、または新しいプログラミング言語またはフレームワークを学びたい場合は、私は次のいずれかから始めます。 テキストエディタ 2Dゲーム - スペースインベーダー コンパイラ - Tiny BASIC ミニ・オペレーティング・システム スプレッドシート (難しい!) ビデオゲーム

Storybook is the most popular UI component workshop on the planet. It powers front-end development for teams at Airbnb, Lyft, Slack, Twitter, and thousands more companies. It’s used to build top design systems like Shopify Polaris, IBM Carbon, and Salesforce Lightning. Thanks to our vibrant community, the project is growing like gangbusters by every measure. Our product is improving rapidly and on

社内向け勉強会 コンテナ入門とその先 https://gist.github.com/nwiizo/4926c004c7dafa28bcb9b7eb645be67e

こんにちは、こんばんは。CTO の kaneshin です。エンジニア組織のマネジメントに多く時間を割いていますが、技術的な方面では Go と GCP を掛け合わせて Nature Remo + Go + Cloud Functions + BQ を駆使して、部屋の温度・湿度・照度や人体センターの検知を趣味で少しずつ開発しています。 クラウドサービスをはじめとしたマネージドサービスが主流な界隈にとって、今までアプリケーションの責務として実装していたところをマネージドサービスに責務を委譲することができたりするので、アプリケーションを複雑に実装しなくて済むようになっていますし、保守・運用の観点からもそのような設計方針をよく目につくようになりました。 例えばバッチ処理でデータを ETL 処理の設計を責務分割するのは良い例でしょう。 Data Transformation with Cloud D

Merpay Advent Calendar 2019 の19日目は、Backendエンジニアチームの @toshinao がお送りします。 新しくマイクロサービスを立ち上げる機会があり、クリーンアーキテクチャをベースにしました。クリーンアーキテクチャはバックエンド・フロントエンド・アプリなど様々な場所で採用されています。ただ、確固たる方法というのは無く、みな試行錯誤しているのでは無いでしょうか。この記事では、クリーンアーキテクチャを取り入れる上で考えたことを紹介したいと思います。 マイクロサービスを作ったことがない人や、今までいくつか作ってきたけどより良い設計について考えている人の助けになれば幸いです。 はじめに メルペイのバックエンドは主にGoとGoogle Cloud Platform（GCP）で開発を行っていますが、各マイクロサービスをどう実装していくかは概ね各チームに委ねられてい

あまり知られていないがCookieにはPriority属性がある。 Chromeでは2013年に実装が入っている(該当コミット)、また提案仕様「A Retention Priority Attribute for HTTP Cookies」も2016年に提出されているが標準化には至ってない。 ここらへんの議論は当時の"メーリングリスト"を参照してください。 そんなPriority属性は、長年動きが無かったが、最近ChromeがデベロッパーツールでPriority属性を表示するようになった( Chrome Canary 81)。 (JavaScriptからPriority属性を指定して、Cookieを設定した例) 超簡単にだが仕様を紹介する。 Priority Attribute CookieのPriorityは保持優先度です。ブラウザが保存容量(ドメイン毎)の都合でCookieを消す場合は

こんにちは、クソアプリ Advent Calendar 2019の 19 日目は、@sandessOjisanがやっていきます。この記事では 俳句力を鍛えるための babel-plugin 開発 について記事を書きます。早速使いたい方はこちらからどうぞ。なお、季語はありませんが、無季俳句として俳句としてカウントされるようです。 背景 なんでこんなものを作ったかというと、それは自身の俳句を読む力を鍛えたかったからです。 俳句とプログラミング みなさんの周りにも、ダジャレ・韻、そして 俳句 を言うのがやたら上手い人っていませんか。私の周りにはそういう人がたくさんいます。そして、そういう人に限ってプログラミング能力も非常に高いと感じています。もちろん、「俳句ができるからプログラミングもできる」なのか「プログラミングができるから俳句ができる」のどちらなのかはわかりませんし、そもそも因果関係があるこ

Wednesday 18 December 2019 Lukas Rytz, Adriaan Moors, Martin Odersky Together with the Scala 3 team at EPFL (aka the Dotty team), led by Martin Odersky, we have decided that, rather than developing Scala 2.14, our efforts should go to Scala 3 instead. While we’re very excited to shift our focus to Scala 3, we will continue to maintain Scala 2.13 to ensure the community has ample time to carefully

A comprehensive, open-source CSS icons library. Featuring Vanilla CSS, SVG and Figma UI icons

Google、クラウドネイティブ向けセキュリティの枠組みを示す「BeyondProd」発表。ホワイトペーパーを公開 企業向けネットワークにおける先進的なセキュリティの考え方の1つに「ゼロトラスト」があります。 従来の典型的なネットワークセキュリティの考え方は、企業の外側と内側をファイアウォールで区切り、インターネットなどの外側からのアクセスは信頼できないものとして認証などを行って信頼できる通信のみを通過させ、ファイアウォールの内側の通信は信頼できるものとして扱う、というものでした。 しかしファイアウォールの内側であっても悪意あるアクセスが行われる可能性があります。それはパスワードなどを盗むことで侵入に成功した攻撃者やマルウェアであったり、悪意のある従業員そのものであったりと、さまざまな要因が考えられます。 つまりファイアウォールを用いたセキュリティの考え方では、ファイアウォールを突破されて

Learn how to create rich and scalable React layouts without compromise using react-teleporter. Nowadays, more and more applications are developed using HTML5, and very often with the help of React. An application and a website are different on many points, one of these is the layout. The layout of an application is composed of fixed areas, whereas a website is generally a series of blocks which su

Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk

Differential Serving と言う技術は実はもう２年ほど前からPhilip Walton さんの記事をきっかけに知る人ぞ知る JS のバンドルサイズを減らせるための技術なんですけど、検索しても、日本語でこのテーマについて話す記事はないので、とりあえずまとめ記事のつもりでこれを書きました、よろしくお願いします！ 何のための技術ですか？ 今でも IE 11 のサポートを切れないアプリは多いと思います、そう言うアプリを作っている人はほとんど IE 11 を含めた全てのブラウザーにアプリがちゃんと起動できるように ES5 までにコードをコンパイルしていると思います。 しかし、IE 11 のために追加する polyfills や ES5 でコードを書くとどうしても必要になって来る追加コードはビルドされたバンドルを重くします。 どれぐらい重くなるかと言うのはコード次第ですが大体 20%か

Chen Hui Jing Posted on Dec 18, 2019 • Originally published at chenhuijing.com on Dec 18, 2019 CSS layout is not just one individual CSS property or even module. Everything on the web is a box. And the layout of these boxes are determined the following: box dimensions and type positioning scheme (normal flow, float, and absolute positioning) relationships between elements in the document tree exte

※1 当社調べ ※2 HTB Business CTF 2024:国内1位 ※3 2023年 DEF CON 31 Cloud Village CTF:世界1位、2024年 DEF CON 32 Cloud Village CTF :世界1位

先日、パブリックの方も対応したようです リリースノート - Qiita これをやった経緯 これまで経験してきたプロジェクトでも多くのシステム構成図を作成してきましたが、ER図とか仕様書とか構成図も含め、 ドキュメントってやっぱり最新の状態で管理されないなー というのを結構、課題に感じていまして、しばらくどうしたらいいんだろう と考えを巡らせていたのですが、システム構成図に関してはこうするのはどうだろう という僕以外の優秀なエンジニアの皆様への問題提起となります。 これまでは何が問題だったのか？ 図を描きやすいツール(Cacooとかね)を使って構成図を作成していて、開発するソースや使ってるツールとは離れた場所で管理される状態だった 開発プロジェクトへ参加した際に最低限必要なもの(ソースとか、ミドルウェアとか、タスク管理ツールとか)の中にいないため、途中から入った人には共有されないこともあった

Pulling xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/xxxxx:latest (attempt 3 of 3)... Error response from daemon: Get https://xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/v2/: dial tcp: lookup xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com on 172.18.0.3:53: read udp 10.254.0.122:48372-&gt;172.18.0.3:53: i/o timeout デプロイまでのフローは ボタンクリックすると、 git clone -> docker build -> docker push -> k8

「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。 わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。 このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。 では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？ この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

Tip: Building a fast, core foundation for your site gives everyone a good experience; whether they're on a low-cost feature phone or the latest high-end smart phone. Introduction Feature phones are affordable (under $20-25), low-end devices enabling 100s of millions of users in developing countries to leverage the web. Think of them as a light version of a smart phone. Being low-cost, feature phon

はじめに データサイエンティストでなかったとしても、数値データを使って様々な解析をする際には CSV ファイル等ファイルを読み込み、数値の配列としてメモリに保持して、それらをループ等で利用して解析を行っておられると思います。 その際、配列は1次元目に行、2次元目に列、を格納するのが一般的です。多くのケースではこの方法で事足りるのですが、解析を行ううちに「列としてデータの固まりを扱いたい」「ラベル付けされた列を扱いたい」と感じる事が出てくると思います。 これを簡単にしてくれるのが「データフレーム」です。 データフレーム4種 本記事では Go 言語から扱えるデータフレームを4つご紹介します。 QFrame https://github.com/tobgu/qframe QFrame は、フィルタリング、集計、およびデータ操作をサポートするイミュータブルなデータフレームです。 QFrame での

前提知識 GitHub Actionsは「ソフトウェアワークフローを簡単に自動化するサービス」。 有名どころだとCircleCI的なやつ。CI/CDとかの開発時に必要となる作業を自動化できるサービス。 基本的には.ymlファイルに色々設定とコマンド書けば使えるすごいやつだよ。 長すぎて読めない人 GitHub Actionsを使って独自のアクションをつくった PRとかIssueでコメントにLGTMってあったら現場猫が「ヨシ!」ってしてくれる 初めて作ったので、Tipsもまとめておく つくったアクションの概要 リポジトリは以下(スターおねがいします) 設定するとGitHub上でPRやIssue上でLGTMとコメントすると「ヨシ!」って画像が貼られる 😺.｡oO(この人がLGTMって言ってたらたぶん大丈夫や...! ヨシ!w) 使い方 任意のリポジトリに以下のファイルを.github/wor

Karan Shah for SoluteLabs Posted on Dec 17, 2019 • Updated on Sep 7, 2020 • Originally published at solutelabs.com The web page rendering dilemma The discussion about a web page rendering has come to light only in recent years. Earlier, the websites and web applications had a common strategy to follow. They prepared the HTML content to be sent to the browsers at the server-side; this content was t

なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さく分割すべき、という考え方がまずある。 これは React に特有のものではなく、プログラミングの一般論として、ひとつひとつの関数は小さくするのがベストプラクティスだとされる。それには様々な理由があるが、単一責任の原則、疎結合、テスタブル、などがよく理由として挙げられる。 React のコンポーネントも同じで、肥大化しないように管理することが、保守しやすいアプリへの道だ。いかに適切な粒度でコンポーネントを分割できるかが、React を使いこなす上で重要となる。 だがコンポーネントを分割していくと、複数のコンポーネントで共通の値を扱う、という状況が発生しうる。 それにどのように対処するか、というのが、

こんにちは。Mercari Advent Calendar 2019 の 17 日目は Web UX Team 所属の @lightnet328 がお送りします。 どのようにリモートのデータを取得して管理するかは SPA 構成の Web フロントエンドにおいて大きなテーマの 1 つだと思います。最近では Apollo Client のようにデータ取得のためのクライアントとデータ管理のためのキャッシュ機構が一体化したライブラリが出てきています。 本稿で紹介する zeit/swr (以下、SWR) もそのような特徴を持っています。SWR はその名が示すとおり HTTP の stale-while-revalidate (略すと swr) というキャッシュ戦略に影響を受けているため、先に HTTP の state-while-ravalidate について紹介します。 HTTP の Cache-

Introduction When we develop React apps, it is one of the best choices to separate a server and a client. But in those cases, we must implement so many APIs for the client in the server side. On the other hand, a good old way to server render views like handlebars or ejs is not suitable for React single page apps or server side rendering apps. Though it is not possible to use NEXT.js as a view tem

はじめに この記事はRust Advent Calendar 2019の17日目として書きました。 組込みRust界の神japaricさんがno-std環境でasyncを使うPoCレポジトリを公開しています。 github.com 理解できるかどうか非常に自信がありませんが、これは見てみるしかありません！ 後日正式な記事が書かれるそうなので、それを待ったほうが得策かもしれません！ 引用の領域超えている気がしますので、一応ライセンス表記します。 今回解説するレポジトリは、MIT license、もしくは、Apache License, Version 2.0、でライセンスされています。 目次 自分なりのまとめ README 実装を覗いてみよう 自分なりのまとめ 組込みのno-std環境で使えるasync-awaitのproof of conceptを紹介するよ (nightlyは必要だけどね

Obinna Ekwuno Writer of all things technical and inspirational. Developer and Community Advocate. In a love-love relationship with JavaScript🔥 One of the most important yardsticks for measuring user experience on the web is speed — the time it takes to get meaningful content on the screen and provide an interactive experience. Since a large portion of internet users are running on slow networks,

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth is that we can do better. Let’s take a look at one pattern you might consider using to architect your site. At first, you might split

Ruby用の高速フォーマッタ。純粋にフォーマッタだけなのがよい。 1. gem install rufo code:shell $ gem install rufo 2. jnbt.vscode-rufo のインストール VSCodeで"rufo"で検索してインストール。 3. VSCodeの設定 Windowsの場合、rufo.batにする必要があるので注意。rufoだとnot foundする。 code:setting.json "rufo.exe": "rufo.bat" 4. Ctrl+Shift+F でフォーマット #ruby

この記事はCAMPHOR- Advent Calendar 2017 11日目の記事です． アブストラクト 漸進的型付けは，ひとつの言語の中で静的型付けと動的型付けをスムーズに組み合わせるための技術です． よく知られた特徴は any 型を使った静的型付けで， TypeScript や Python といったプログラミング言語には既に実装されています． しかし，理論と実際のプログラミング言語の間には大きなギャップが存在します． 特に，漸進的型付けの理論で提案されているキャストを用いた動的型検査が実装されていないために， 静的型付けの恩恵を十分に得られていないという問題があります． この記事では，まず漸進的型付けの理論をコード例を用いて紹介し， 現状の漸進的型付き言語が抱える問題を解説します． そのあとで，漸進的型付き言語が目指すべき目標を理論的視点から論じます． それらの目標は，静的型付けを

こんにちは。宿泊事業本部の宇都宮です。この記事では、GraphQLをベースに、GoとTypeScriptでスキーマを共有しながら開発を進める方法について紹介します。 この記事は 一休.com Advent Calendar 2019 の16日目の記事です。 GraphQLとは ライブラリの選定 コードファースト vs スキーマファースト Goによるサーバ実装 TypeScriptによるクライアント実装 おわりに 参考文献 GraphQLとは GraphQLは、Facebookによって開発された、Web APIのための クエリ言語 です。その特徴もSQLに似ていて、データの取得や更新を宣言的な記述によって行うことが出来ます。 仕様は公開されており、リファレンス実装として graphql-js がありますが、それ以外にも様々な言語でGraphQLサーバを実装できます。 GraphQLでは以下の

この記事はTypeScript Advent Calendar 2019 の 16日目の記事です。 「Mapped types」,「Conditional Types」などTypeScriptの型システムは高機能です。 しかし、高機能がゆえに複雑で直感的には分かりくい型を生み出していることも事実です。 TypeScriptの型定義は型を返す関数として扱うことができ、型がバグを生み出す原因にもなります。 そんな型でのバグをなくすために型のユニットテストを紹介します。

この記事はNext.js Advent Calendar 2019 16日目の記事です。 Qiitaに書くのは久々の @_Ria0130です。 SPAを作っていても Transition を実装したことない方結構いらっしゃるんじゃないでしょうか？ ページ遷移と Transition の組み合わせって結構難しくって、クロスフェードとかをしようとすると遷移前と遷移後の要素をどちらも描画したままスタイルを適応する必要があります。 React など VirtualDOM を扱うライブラリを採用しているとDOMの反映を自動でしてくれて楽な反面、要素のコントロールが自分でできないので少し複雑です。 React で有名な Transition ライブラリだと React Transition Group があるのですが、今回は UIT INSID Eep.29 で紹介されていて気になっていた react

はじめに Merpay のフロントエンドエンジニアの @tokuda109 です。 11月26日に Frontend Tech Talk vol.3 が開催されましたので、当日の発表の様子を簡単に紹介します。 create own CMS from scratch まず最初の発表は Merpay の @sottar_ による「create own CMS from scratch」です。 従来はキャンペーン用のページを作成する際にコーディングを行う必要があり、1ページ作成するためにも多くのリソースを必要としていました。 そこで社内でCMSの開発を行いGUI上でページの作成からリリースまで完結するようなフローを設計し、業務の効率化を行ったという発表でした。 speakerdeck.com ※ 資料は別の発表で使ったものですが内容は同じです CSS Architecture on Vue.js

With TypeScript 3.4, const assertions were added to the language. A const assertion is a special kind of type assertion in which the const keyword is used instead of a type name. In this post, I'll explain how const assertions work and why we might want to use them. #Motivation for const Assertions Let's say we've written the following fetchJSON function. It accepts a URL and an HTTP request metho

I run below command to create stats.json: ng build -prod -stats-json After this I am executing below code: webpack-bundle-analyzer dist/stats.json once I execute it I am receiving below e. The table shows where to optimise. Another useful tool is the npm package – webpack-bundle-size-analyzer. It provides the packages in their decreasing order of size. Npm install -g webpack-bundle-size-analyzer w