はてなブックマーク

どうもoreoです。 前回までの記事で、プライベートサブネット内にDB用サーバーを用意しました。今回の記事ではNATを導入して、プライベートサブネットからインターネットへの接続のみを許可できるようにします！ 【AWS①】ネットワークを構築してみる 【AWS②】サーバーを構築してみる 【AWS③】EC2インスタンスにWebサーバーをインストールしてアクセスできるようにする 【AWS④】 HTTPの動きについて理解を深める 【AWS⑤】 プライベートサブネットにDB用サーバーを構築する 自分へのメモ的な記事になりますが、普段インフラを触らない人の参考になれば幸いです！ 1 NAT(Network Address Translation)とは NATはIPアドレスを変換する装置で、2つのインターフェースを持ちます。 一般的には、片側のインターフェースには「パブリックIPアドレス」を設定し、インタ

どうもoreoです。 今回はTypeScriptでBinary Searchを実装してみます。 Binary Searchとは？ データが予めソートされている場合に、探索範囲を半分に絞ることを繰り返して、データ探索する手法です。 電話帳で連絡先を探すときに真ん中のページを開くことを繰り返して連絡先を探す、みたいな例でよく聞くアルゴリズムです。 計算量は、O(log n)でデータ量が増えても計算時間はあまり増えません。 TypeScriptでの実装 事前に昇順にソートされた配列arrと、探索したい値targetを渡すと、Binary Searchしてくれる関数binarySearchを作成します。 targetがarrに存在する場合、arrで最初にtargetが出現するindexを返し、存在しない場合は-1を返します。 /** * @param {Array<number>} arr 事前に

どうもフロントエンドエンジニアのoreoです。 普段の業務でVue.jsのComposition APIを使用しており、リアクティブな変数を定義する際に、reactiveやrefなどを多用しています。この記事では、reactiveの仕組みについて、実装しながら理解したいと思います。今回はreactiveのみを扱いますが、今後の記事ではrefやcomputedの仕組みについて解説する予定です！ 1 Composition APIのreactiveとは? 1-1そもそもリアクティブとは？ ある変数が変更された際に、依存関係にある他の変数も更新されることをリアクティブといいます。 1-2 reactiveについて Vue.jsのReactivity APIで提供されており、reactiveを使うことでオブジェクトをリアクティブ化することができます。下記のように定義されており、objetを引数にと

どうも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のよ

どうもフロントエンドエンジニアのoreoです。今回は、Promiseについて再整理します。 １ 同期処理と非同期処理 ブラウザにおいて、JavaScriptは主にメインスレッド上で実行されます。処理はコールスタックに積まれ、後入れ先だし(LIFO)で、実行されています。同期処理では、一つの処理が完了するまでは、次の処理に移行しません。 一方、非同期処理は、処理がコールスタックから一時的に切り離され、コールバックキュー(※)に処理が格納されます。コールスタックに処理が積まれている状態では、コールバックキューに格納された処理は待ちの状態になります。コールスタックの処理が空になれば、コールバックキューに格納されている処理が、イベントループによって、先入れ先出し(FIFO)でコールスタックに積まれ処理されます。 ※コールバックキューについて コールバックキューにはマクロタスク、マイクロタスクの2種