GraphQLを導入する時に考えておいたほうが良いこと | メルカリエンジニアリング
はじめに こんにちは、ソウゾウSoftware Engineerの@sue71です。連載：メルカリShops 開発の裏側 Vol.2の13日目を担当させていただきます。 以前メルカリメルカリShopsの技術スタックと、その選定理由でBFFの実装にGraphQLを採用していることをお伝えしました。メルカリShopsをリリースしてから約半年たった今、これまでを振り返ってGraphQLサーバーを実装する上での課題やあらかじめ考えておくと良い項目をまとめてみました。また、本記事ではメルカリShopsでGraphQLの実装としてApolloを採用しているため、Apolloの利用が前提の話もいくつか混在しています。予めご容赦ください。 GraphQLの説明や、メルカリShopsの実装方法に関しては以前こちらの記事で紹介しています。こちらも是非ご覧ください。 パフォーマンス課題 GraphQLは、アプリ
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
ライブラリの紹介文でよく見かけるけどいまいち意味が分からない英単語 - Qiita
ライブラリの紹介ページや GitHub のリポジトリで登場する「割と見るけど意味はよくわからない単語」をまとめてみました 誤りがあればガンガン指摘してもらえると助かります opinionated 意味をググると「[形容詞] 自説を固執する」という謎の和訳が出てきて理解を諦める方もいるんじゃないでしょうか opinionated については色々な記事で紹介されています https://qiita.com/baby-degu/items/7dc4548bf7befc2671f4#opinionated%E3%81%A8un-opinionated https://stackoverflow.com/questions/802050/what-is-opinionated-software プログラミングの文脈に落とし込むと「ライブラリやフレームワークが定義したやり方に利用者（プログラマ）を従わ
それだ！感のあるネーミングのつくりかた（ver 2.0） - Speaker Deck
技術革新に伴うコモディティ化や価値観の多様化が進む中でますます重要度の高まるネーミング。年間100件以上のネーミングを共創し続けている僕なりに感じている「それだ！感のあるネーミング」をつくるために大切なことや発想のヒントをなるべくシンプルにまとめてみました。
なぜ我々はいまだに文字列でコメントを書いているのか - Qiita
あるいは、画像コメントのすすめ。 TL;DR 画像コメントのほうが意図が伝わりやすい 画像URLからツールチップで画像表示してくれるVSCode拡張機能があるよ その場で画像を作るSVGエディタもあったよ 問題提起 みなさんは、少し複雑なアルゴリズムを書くことになったときどうしていますか。 たいていの場合、いきなりコーティングに取り掛かるのでなく、 雰囲気をつかむためメモやホワイトボードに落書きすると思います。 特に幾何計算では簡単なものでも図を描いた方がいいです。こんな感じ。 図を書いたら後はコードに落とすだけです。 ね、簡単でしょう？ // 指定した直線を対称軸としたときの指定した点の鏡映位置を返す function flipVectorByLine(p: Vector, line: Line): Vector { // TODO: よくわかるコメントを書く const ln = ne
AWSに関するありがちミスとその対策〜EC2、S3、RDS、Lambda、CloudFrontの場合 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
エンジニアHub > 記事一覧 > AWSに関するありがちミスとその対策～EC2、S3、RDS、Lambda、CloudFrontの場合 AWSに関するありがちミスとその対策～EC2、S3、RDS、Lambda、CloudFrontの場合 AWS入門者が基本として知っておくべき知識を、AWS導入＆運用サポートのプロである、アイレットのエンジニア3名に聞きました。多くのAWSユーザーに支持されるAmazon EC2、Amazon S3、Amazon RDS、AWS Lambda、Amazon CloudFrontそれぞれの勘所やオススメの設定を、余すところなく紹介してもらいます！ なぜ、AWSを選ぶのか？ Amazon EC2～インスタンス起動後はプライベートIPを設定できないので注意 Amazon S3～S3はディスクではない。マウント非推奨の理由 RDS～自動スナップショットの保持期間を
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
CSS3 Flexbox 位置の揃え方まとめ
前回:CSS3 Flexbox 並べ方まとめ 今回は揃え方です。 justify-contentとalign-items、align-self、align-contentをまとめます。 準備 <div id="flex"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> <div class="flex-item">D</div> <div class="flex-item">E</div> <div class="flex-item">F</div> <div class="flex-item">G</div> </div> #flex{ background: #55BE2E; display: flex; height: 300px; width:
エンジニアが手早く英作文をする時はかどる Tips - tomoima525's blog
GithubのPRや海外Slackチャンネルでチャット、はたまた英語圏のエンジニアとやりとりする等、英語で文章を書くことはしばしばあります。そんな時、自分がよく使っている方法について書きます。 先に一番大事なこと 大事なことは、英語はあくまでもツールだということです。伝えたい内容が重要であり、英文を書くことに時間かけることはエンジニアにとって不毛です。 よっぽど英語が得意な人でないかぎり、一から英作文すると時間がかかって本質的でないところで時間を消費するということです。 なので一から文章を考えるのでなく、なるべく"型"を知ることがポイントだと考えています。それを踏まえた上で御覧ください。 文章を書く アルクの英辞郎とGoogle, Githubを組み合わせる 恐らく多くの人がGoogle翻訳などを使って英文を作っているかと思うのですが、アルクの英辞郎と組み合わせるともっとはかどります。理由
よく使うdockerコマンド - Qiita
$ sudo docker pull ubuntu $ sudo docker images REPOSITORY TAG IMAGE ID CREATED SIZE ubuntu latest 16508e5c265d 10 days ago 84.1MB $ sudo docker build -t example ./ $ sudo docker images REPOSITORY TAG IMAGE ID CREATED SIZE example latest 62f7ae565c29 About a minute ago 221MB ubuntu latest 16508e5c265d 10 days ago 84.1MB
ドットインストールで「textlint 入門」を受講した - kakakakakku blog
textlint はドキュメント用の Lint ツールで，日本語にも対応しているので，簡単に文法や typo などを検出できる． textlint.github.io ドットインストールのレッスン一覧を眺めていたら textlint のレッスンがあり，気になったので，受講してみた． https://dotinstall.com/lessons/basic_textlint Lesson 1 Node.js をインストールした（というか既に入っていた）．今回試した Mac の環境は以下の通り． $ node -v v10.8.0 $ npm -v 6.2.0 Lesson 2 npm で新規プロジェクトを作成し，textlint を実行できるようにした．今回は v11.0.0 になった． $ npm init -y $ npm install --save-dev textlint $ ./
bashスクリプティング研修の資料を公開します - エムスリーテックブログ
こんにちは、エンジニアリングGの中村です。 以前にこのブログにてエムスリーでの社内研修について紹介しました。今回は、この中でのbashスクリプティング講座の資料を公開します。 www.m3tech.blog 弊社の中でもいろいろな用途でbashが使われていますが、bashは簡単に利用できるもののプログラミング言語としてはバグを生みやすい、辛い言語だと思います。 ここで紹介しているのはいわゆるコーディング規則というよりも、バグ防止と可読性向上のためのルールをTips集的にまとめたものです。 bashにおいてまだまだ注意するところはありそうですが、多少なりともわかりにくいスクリプトの削減になればと期待しています。 [追記: 2018-08-22] はてブにて以下のコメントをいただきました。 bashスクリプティング研修の資料を公開します - エムスリーテックブログ bashで50行以上になった
オブジェクトの比較に JSON.stringify() を使ってはいけない —— プロパティには順序が無い - Qiita
たまたま動いているコード オブジェクト同士の比較に JSON.stringify() を使う例がそこかしこで見られます。 典型的には、 のようなコードです。 オブジェクトの中身を再帰的にたどって比較する、いわゆる「深い比較」で「deep equality」を判定したい場合に使われる事が多いようですが、これはとても危うく、いつ壊れてもおかしくないコードです。 理由 まず、JSON化する際にそのまま含まれないプロパティ（enumerableでなかったり、値が関数であったりするものなど）がありますが、これは考慮の上でのことが多いでしょう 問題は、配列でないJavaScriptのオブジェクトには順序が無く、JSONにされる際にもプロパティの順序がどうなるか決まっていないことです。 MDNには、 配列でないオブジェクトのプロパティは、特定の順序で文字列化されることを保証されてはいません。文字列化にお
【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する｜ おこづかいサイト攻略ブログ - おこづかいBeeDASH！
ポイ活・ポイントサイトを中心にインターネットで稼げるお小遣いの情報を紹介しています。 当ブログにはプロモーションが含まれます。
【SIer新人向け】研修では教えてくれないノウハウ集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「ようこそ 魔境 SIerへ！」 はじめに この記事は、SIer（Systems Integrator）に入ったシステム開発未経験者の新人さんたちへ送る、研修では教えてくれないノウハウ集です。 実際、弊社の長い研修では実務に使えそうなことをあまり教えてくれませんし、ノウハウは現場の人の頭にしかない状態なので、新人さんは暗中模索で仕事を覚えていくことになります。 それも非効率なので、実際に私が２年半1で失敗したこと、やってきてよかったこと（ノウハウ）を体系化したので共有します。 新人さんは、これを参考として、使えるところだけ今後の業務に持
初心者プログラマが犯しがちな過ち25選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以下はThe Mistakes I Made As a Beginner Programmerの日本語訳です。 The Mistakes I Made As a Beginner Programmer 初心者プログラマが犯しがちな間違いと、それらを特定し、避けるための習慣を学ぶ方法。 まず最初に言っておくことがあります。 この記事は、誤りを犯すことを悪いと糾弾するために作成されたものではありません。 むしろ貴方が誤りに自ら気付き、あるいはその兆候を見いだし、それらを避けられるようにするために書かれたものです。 私は過去これらの誤りを犯し
初心者向け・Pythonの仮想環境venvとPipenvによるパッケージ管理についての解説 - paiza times
秋山です。 Pythonに限った話ではないですが、プログラミングをしていると、使っているライブラリのバージョンを変えたいけど別のライブラリとの依存関係があって難しい…みたいなことってありますよね。 こういったバージョン由来のトラブルやつらみをある程度カバーして助けてくれるのが、仮想環境とパッケージ管理です。 仮想環境とパッケージ管理を使いこなせるようになれば、少なくとも「バージョンの依存関係であっちを入れたらこっちが動かなくなった！」とか「Pythonのバージョンを上げたらこっちのパッケージが動かなくなった！」みたいなトラブルからは解放されます。 今回はPython初心者向けに、仮想環境とは何ぞという話と、venvとpipを使った標準的なPythonにおけるパッケージ管理方法、さらにPipenvを使ってもう少し楽に管理する方法などについて書いていきます。 ■venvとpipを使ってみる P
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのCollection操作をする時はお願いがある、一呼吸置いてから操作をしてくれ
あるgit commitがどのpull requestでmergeされているかをAPIでシュッと取ってくる方法 - その手の平は尻もつかめるさ
