はてなブックマーク

どうもoreoです。 私は株式会社iCAREでフロントエンド開発を主に担当しており、2022年6月ごろから有志メンバーでフロントエンドのテスト拡充活動を始めました。機能開発を優先しながら、コツコツと活動を続け、4ヶ月間で共通モジュール内の純粋関数に対してユニットテストを追加することができました。この記事では、そこに至るまでの活動について記載します。 機能開発に並行してフロントエンドのテストを追加したい人の参考になれば幸いです！ 1 要約 毎週0~2h/人程の工数をかけてフロントエンドのテスト拡充活動を始めた。 テストを書く目的をすり合わせて簡単なロードマップを作成し、まずは共通モジュールの純粋関数に対してユニットテストを書くことにした。 全ての純粋関数に対してユニットテストを追加し、カバレッジを100%にすることができた。 また、純粋関数に関して、CircleCIでカバレッジの自動チェック

どうもoreoです。 今回はWEB+DB PRESS Vol.130のイミュータブルデータモデル特集を読んだメモを記載します。主に自分用の記事ですが、データモデリングとは？どうやるの？といった方の参考になればと思います。 1 良いデータモデリングとは? 良いデータモデリングとは、モデリングの過程で考慮されていなかった要求の穴やエッジケースの発見につながるもの。データモデリングの本質的価値は、作成時により深く業務要求を分析し、顧客やチームとの対話を生むこと。その為、データモデルはソフトウェアエンジニアだけでなく関係者全員の理解のために、そこに隠れた曖昧さや要求を洗い出し、議論するために使う。 2 イミュータブルデータモデルとは? モデルが複雑になる要因はデータの更新処理(CRUDのU)である。システムで扱う情報はモノ(リソース)とコト(イベント)に分類することができる。このイベントを極限まで

どうもoreoです。今回はXSSについて記載します。 1 XSS(cross site scripting)とは？ XSSとは動的にHTMLを生成するWebサイトで悪意あるスクリプトが埋め込まれたコンテンツをHTMLとしてそのまま表示した際に、スクリプトが実行される攻撃手法(または脆弱性)です。 XSSの脆弱性があると偽サイトへの誘導、フィッシング、Cookie情報漏洩などの脅威があります。 XSSには主に下記3つの攻撃手法があります。 1-1 Persistent XSS(持続型XSS) Stored XSS(格納型XSS)とも言われます。悪意あるスクリプトが格納されたWebサイトを閲覧した際に、ユーザーのブラウザ上で不正なスクリプトが実行される攻撃手法です。 例えば、掲示板のようなユーザー投稿機能があるWebサイトを考えます。攻撃者が悪意あるスクリプトを含むコメントを投稿し、そのデータ

どうもoreoです。 今回はJSONからの値取得、集計、整形などができるjqコマンドについて記載します！JSONを分析する際に大活躍です。 1 下準備 1-1 使用するJSONデータ Star WarsAPIから取得したこちらのデータをjqコマンドでいじってみたいと思います。 people.json { "count": 82, "next": "https://swapi.dev/api/people/?page=2", "previous": null, "results": [ { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color": "blond", "skin_color": "fair", "eye_color": "blue", "birth_year": "19BBY", "gender

どうもoreoです。 今回は、Ruby on RailsのMPAアプリケーションにおけるWebpackからViteへの移行を通じて得た知見を記載します。同じような技術スペックでVite移行を考えられている方の参考になれば幸いです！ 1 結論 まだリリースできていない(2022/10/16時点。リリース時期調整中。) 歴史あるアプリでの移行は非常に大変 しかし、開発体験向上やアプリケーションの課題発見など得られる恩恵は大きい 2 Vite移行を検討するに至った背景 弊社アプリは、Vue2.7+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。 エントリーポイントが多いことによる弊害で、サービス拡大に伴い

どうもoreoです。 今回はモダンなJavaScript開発環境で役立つデザインパターンを紹介します。 この記事は、JavaScript Patterns WorkshopとPatterns.devを参考にしています。 有名な「Java言語で学ぶデザインパターン入門」などでは、古典的な23個のデザインパターンが紹介されていますが、JavaScript Patterns WorkshopではPatterns.devをベースとして、モダンなJavaScriptにおける6つのデザインパターンについて言及されています。この記事ではそれらについてまとめてみたいと思います！ ※本記事中のコードは、JavaScript Patterns WorkshopとPatterns.devから引用させていただいております。 1 Design Patternsとは？ デザインパターンとは、ソフトウェア開発で繰り返し

どうも、株式会社iCAREフロントエンドエンジニアのoreoです。 弊社フロントエンドは、Vue.js, TypeScriptで開発をしています。あるPRで、弊社技術顧問の方から、下記レビューを頂きました。 リファクタするときに気になったんですが、不要なところに?がついているのを散見しましたキャスト! | ? | asはどれも危険なコードでレビュワーの負担も大きくなるので、きちんと必要なところだけに入れるように気をつけてみてください 今まで？や！を安易に使っていたので、彼らの挙動について整理してみたいと思います！ ?について オプションパラメーター(?) 概要 引数にオプションパラメーターをつけると、その引数が省略可能になります。例1.1で、test()を実行した場合、Expected 1 arguments, but got 0.　と怒られますが、オプションパラメーターをつけると(例1.

参考 https://developer.mozilla.org/ja/docs/Web/JavaScript/About_JavaScript https://gihyo.jp/book/2017/978-4-7741-8967-3 2 JavaScriptエンジンでの処理の流れ JavaScriptが実行されるまでの過程は、JavaScriptエンジンによって異なりますが、一般的には下記のようになります。 大きな流れとしてJavaScriptコードから、Token、AST(Abstract Syntax Tree、抽象構文木)を経て、CPUが実行可能なByte Codeにコンパイルされ、JavaScriptは実行されます。 例えは、console.log("Hello World !");というコードがByte Codeに変換されるまでのイメージ図は下記のようになります。 それでは、こ

どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht

どうもフロントエンドエンジニアのoreoです。 この記事では代表的な型ガードの方法について整理したいと思います。 型ガードとは、ある値に対して特定の型かどうかチェックし、その結果に応じて処理を分けることを指します。ユーザー定義型ガードや型ガードの変数代入は、知っておくと差がつきますね。 1 typeof演算子 typeof演算子は、typeof 式 のような形で式を評価し、その評価結果に応じて以下表「結果」のような文字列を返します。式がnullの場合に、”object"を返すというイレギュラーな動きをするので、その点注意です。 参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof typeof演算子を使うと、ユニオン型に対して、型のチェックを行い、処理の分岐が可能です。例えば、下

どうも、株式会社iCAREのフロントエンドエンジニアoreoです。 先日、弊社フロントエンドエンジニアで、ミッションステートメントを作成しました。今回の記事では、具体的な作成手順を交えながら、チームと私が得た学びをご紹介させていただきます！ 1 はじめに iCAREでは、事業拡大に伴い開発部が急拡大しています。フロントエンドエンジニアでいうと、2021年4月からの1年間で、4人 → 10人と2.5倍になりました(※パートナさんを除いています)。 組織拡大に伴って、フロントエンドにおけるテスト体制構築など様々な仕組み作りが進められています。このように、長期的な目線で仕組みを考えなければならない状況下で、フロントエンドエンジニアとして何を大事にすべきか？という議論が始まり、最終的にミッションステートメントという形でまとめることとなりました。価値観を言語化することで、メンバーの方向性を合わせ、仕

どうもフロントエンドエンジニアのoreoです。前回の「Promiseに関して」の続きとして、async、awaitと例外処理に関して記載します！ 1 async と awaitとは？ async、awaitを利用すると、Promiseをさらに直感的に記述することができます。 async asyncを使うと、Promiseオブジェクトを返却する関数を宣言できます。 await Promiseオブジェクトをreturnする関数の前にawaitをつけると、Promiseがresolveまたはrejectされるまで待機することができます。待機中は、await以降の処理は中断され、待機が終わると以降の処理が再開されます。 awaitは、async内で使用します。 2 基本的な使い方 2-1 Promise構文の復習 「Promiseに関して」で、記載したPromiseチェーンは以下ex1~ex2のよ