https://supporterzcolab.com/event/822/ の登壇資料です! 参考リポジトリはこちらです。https://github.com/Dragon-taro/spz-react
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート(atoms.vue) コンポーネントクラス(atoms.vue) サンプル その2: Vuexをシンプルにする Sta
各サービスから1タップで「Googleアカウント」が開けるように Googleアカウントは、2015年に「アカウント情報」として立ち上げられた、Googleアカウントで使っているサービスやハードウェアでのプライバシー設定やセキュリティを一元管理するためのアカウント情報管理ツール。 まずはGmail、Googleドライブ、連絡先、Google Payのページの右上のアカウントのプロフィール画像をクリック(タップ)すると、Googleアカウントへのリンクボタンが表示されるようになった。 5月中に、検索、Googleマップ、YouTube、Chrome、Googleアシスタント、Googleニュースでも右上にプロフィール画像が表示されるようになる見込みだ。 この新機能でGoogleアカウントへのアクセスが簡単になるだけでなく、サービスをログインした状態で使っているかどうかがすぐに分かるようになる
今日、私たちが新たな標準化の取り組みを開始したことをお伝えします。その名も WebAssembly system interface、略して WASI です。 Why: 開発者たちはブラウザという枠を超えた WebAssembly の利用を探り始めています。WebAssembly を使えば同じコードを全てのマシンで高速、スケーラブル、安全に実行できるからです。 しかし私たちにはこれを実現するための強固な地盤がありません。ブラウザの外で動くコードにはシステムと対話する仕組み、つまりシステムインターフェースが必要であり、WebAssembly プラットフォームにはこの地盤がまだないのです。 What: WebAssembly は仮想的なマシン1に対するアセンブリ言語であり、特定の物理マシンを想定しているわけではありません。これによって様々なアーキテクチャのマシンにおける実行が可能になっているわ
window.localStorage は従来、ユーザーのプライバシー設定によって使用できない場合、具体的には Cookie が無効となっている際に SecurityError 例外を投げていました。Firefox 67 以降、このプロパティはそうした場合単に null となり、JavaScript に適切な try-catch 処理が書かれていないため一部のサイトが読み込まれない問題を解消します。 // なお、window.localStorage が null となる場合、 // これは引き続き TypeError を投げます window.localStorage.setItem(key, value); // そのため以下のように書く必要があります。 const storage = window.localStorage; if (storage) { // ストレージを使用 st
ブラウザ互換性表 (a.k.a. browser matrix) とは、こういうやつです。 ブラウザ互換性表 powered by Sauce Labs TypeScriptで MessagePack encoder/decoder を実装した - Islands in the byte stream で作った msgpack/msgpack-javascript にこのバッジをつけようとして苦労しました。今回は単に一度やってみたかったというのもあって頑張りましたが、いろいろ大変だったので記録を残しておきます。 しかし、どんなプロジェクトでもやるべきかというと微妙で、ブラウザの機能に大きく依存するライブラリでもない限りはバッジは頑張らなくてもいいかなあという結論です。ブラウザに依存した機能をもっと多用するのであれば、バッジの価値があるのかもしれません。 今回はブラウザテストをはじめてから1
『諸外国の脅威ベースのペネトレーションテスト(TLPT)に関する報告書公表について』や『「脅威ベースのペネトレーションテスト」及び「サードパーティのサイバーリスクマネジメント」に関するG7の基礎的要素の公表について』が公開され、脅威ベースのペネトレーションテスト(TLPT)に関して最近、話題に上がることが増えてきたので、ご紹介したいと思います。 TLPTはThreat-Led Penetration Testの略で脅威ベースのペネトレーションテストです。まず、ペネトレーションテストという言葉ですが、多くの方からご相談をいただいており、認知度は高まっているのではないかと感じていますが、脆弱性診断(Webアプリケーション診断やNW診断など)と混同されているケースも散見されます。以下の通り、脆弱性診断とペネトレーションテストはそれぞれ目的が異なるため、目的に合わせてそれぞれのサービスを利用してい
TypeScriptはJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性(コンパイル時にバグ・間違いを発見することができる能力)を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeScriptへの移行が可能となっています。TypeScriptは@ts-check(あるいは@ts-ignore)などを通じてこのようなユースケースも手厚くサポートしています。 このことの裏返しとして、TypeScriptを利用するときは注意すべき点があります
4月に出版された「分散システムデザインパターン」を読んだ.サブタイトルに「コンテナを使ったスケーラブルなサービスの設計」とある通り,コンテナを設計/運用するときに,どのようなデザインパターンを知っておくと良いのか?という点を学べる内容になっている.関連情報と合わせて書評を書きたいと思う.なお,今回は貴重な機会を頂き,本書の出版レビューに参加することができた.オライリー本に自分の名前が載っている!という喜びもある. 分散システムデザインパターン ―コンテナを使ったスケーラブルなサービスの設計 作者: Brendan Burns,松浦隼人出版社/メーカー: オライリージャパン発売日: 2019/04/20メディア: 単行本(ソフトカバー)この商品を含むブログを見る 目次 1章 : はじめに 第 I 部 : シングルノードパターン 2章 : サイドカー 3章 : アンバサダ 4章 : アダプタ
Fastly CTOに聞く、同社がWebAssembly実行環境の「Lucet」をエッジコンピューティング環境として開発している理由とは? CDNプロバイダとして知られるFastlyは先月(4月1日)、WebAssemblyのコンパイラとランタイムで構成される「Lucet」をオープンソースで公開。同社のエッジコンピューティング環境として開発を進めていることを明らかにしました。 WebAssemblyが50マイクロ秒以下で起動する「Lucet」。コンパイラとランタイムをFastlyがオープンソースで公開 WebAssemblyは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマットです。 FastlyはこれをCDNのエッジにあるサーバ上で動作するように移植し、しかも50マイクロ秒(1マイクロ秒は100万分の1秒)以下でWebAssemblyモジュールが起動し
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない(コンポーネントでモジュールをインポートするため)。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
今日、Facebookに「プログラマだったら当然知ってるよね?という知識一覧」という記事で、「データ構造」や「計算量」から「理論計算機」など幅広くコンピュータサイエンス(CS)の基礎をプログラマ知っているべきという論が展開されています。 私は経営学部だったのでコンピュータサイエンスについて学校で習ったことはないのですが、高校の頃から趣味で色々調べていて、この中だとグラフ理論と機械学習系以外は大体理解しています。 「Web系の人って、新技術ばっかり追いかけてCSの基礎とかちゃんと学んでないよね」っていう話は他でも時々聞く気がします。 一つがWeb系のエンジニアは情報系の大学を出てない人も多いことと、実際あまり役に立つシーンがないのではないかと思います。 実際、CSの基礎ができると多くのエンジニアにとって何のメリットがあるのでしょう? 一番は「先の技術を読めるようになる」ことです。 ITの世界
エンジニアにとって、正解が分かりづらいマネジメント業務ってとっつきづらいんですが、その良き羅針盤となってくれるテキスト「re:Work」の紹介です。 「エンジニア天国な会社にしたい。したくない?」 「したい。けど、どうやって?わっしょい的な雰囲気で?」 今年の6月あたり、クラスメソッドAWS事業本部コンサル部で合宿を予定しているんですが、その合宿でやるネタを考えているときに知ったのが、この「Google re:Work」。 正解が見えづらい組織運営において、「良いチームとはなにか?」「採用で気をつけるべき点」「ビジョンがもたらす効果」など、マネジメントの頻出課題をギュッと凝縮して詰め込んだこのコンテンツがむっちゃ有用だったので、紹介します。 Webコンテンツとして完全無料なので、今マネジメントで悩んでいる人も、これからマネージャー目指そうとしている人にも参考になる点多いと思うので、一度気軽
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く