はてなブックマーク

初めに 最近の学習はfreeCodeCampで基礎を見直しています。そこで普段何気なく使用している関数（function, アロー関数）について1つの関数に複数の役割を持たせていることに気付いたので、関数の役割を1つの定めるようにしました。 今回のプログラムを説明すると、 「昨日お酒を何杯呑みましたか？」の質問に対して入力したお酒の杯数分「🍺」が描画されるプログラムです。 ソースコード 修正前 // ビールの個数を受け取って、ビールの配列を返す function getBeers(numOfCups) { const beers = []; for (let cups = 1; cups <= numOfCups; cups +=1) { beers.push(prepareBeer()); } //HTMLに描画 beers.map((beer) => { let div = docu

はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最

はじめに 周りを見渡せば自分より優れたエンジニアは無限に存在します。 「自分よりも知識がある。」「自分よりも経験を積んでる。」「自分よりも・・・」 他人と比較をしている以上、自己肯定感の低下は否めないでしょう。 しかし、それは正しく自分を評価できているでしょうか？ この記事の目的は、目先の技術力ではなく自らの成長角度を基準に客観的な評価をすることで、本質的ではない比較から身を守る考え方を提案したいと思っています。 対象読者 若手エンジニア 未経験からスタートしたエンジニア 学生エンジニア 同期といえども経験年数は異なる 新卒で会社に入社して、まず意識する対象は「同期」でしょう。全体研修を終えてそれぞれ部署に配属をされ、すぐに圧倒的な結果を出す人が現れます。 すると大抵の人は焦りや遅れなどネガティブな感情を抱いてしまいます。 しかしそんな時は一度、GitHubの履歴を覗いてみてください。 も

はじめに この記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。 目次 React Queryはデータフェッチライブラリではない ではReact Queryとは何か？ Client StateとServer Stateの違い React Queryは非同期の状態（Server State）管理ライブラリである キャッシュを有効活用する React Queryのキャッシュについて staleTimeでキャッシュをコントロールする queryKeyを適切に設定する まとめ 🎆 React Queryはデータフ

はじめに 今回は私が勉強会を主催する中で得た学びとそのコツを紹介します。普段は毎週2回社内での勉強会（1時間） と プライベートでの勉強会（2時間） を主催して取り組んでいます。それぞれで取り組み方や扱う内容も意識して変えており、勉強会自体の目的が異なります。では以下の流れで整理をします。 勉強会の目的 社内での勉強会 プライベートでの勉強会 勉強会のトピック選定 社内での選定 プライベートでの選定 社内勉強会による副作用 ☘️ 勉強会の目的 冒頭で述べた通り、勉強会の目的は社内とプライベートで全く異なります。 社内での勉強会 コミュニケーションの活性化 社内勉強会における最たる目的は、同僚とのコミュニケーションにあると考えています。特に最近はリモートワークが増え、コミュニケーションの機会が減ってしまったのではないでしょうか？当然出社するよりも密な関係を築くことは難しく、距離を感じてしまう

はじめに 今回はECサイトを構築する開発において、Hydrogenというフレームワークが非常に強力だったため紹介します。HydrogenはRemixをベースとしたヘッドレスコマースのためのスタックです。「なぜRemix？」と思う方もいるかもしれませんが、2022年にShopifyがRemixを買収し、その連携を強固にしている背景からも今後Shopifyを用いたECサイトの開発ではRemixを使用する機会が多くなるのではないかと推測しています。 前提 今回はHydrogenで公式に提供されているdemo-storeというテンプレートを前提に解説します。というのも、このdemo-storeが非常に強力で、ECサイトの基盤をすでに構築してくれています。私もこのdemo-storeを拡張することで一つのECサイトを完成させることができました。その強みや、ディレクトリ構成については後に紹介します。

はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言

まえがき 梅雨のせいでコインランドリーで乾燥機を回している時ふと、 「どれくらいのデータ量だとRedis(キャッシュ)導入に価値がある？ だって、一般的な処理だと早くなっても数ミリ秒の世界だし」と考え始めました。(唐突) とりあえず100万件のデータでRedis導入にどれ程の価値があるのか、いざ検証してみます。 検証環境 ローカルPC (RAM 8GB) Redis 6.0.5 (maxmemory 0=無制限) Rails 6.0.3 (API mode) MySQL ※ 今回はDBに存在する100万件のレコードをそのままRedisに突っ込みます。 100万件の投稿データ作成 今回検証のアプリケーションとしてRailsを使うのでseed ※でデータ投入しても良かったんですけど、何分遅いのでストアドプロシージャでinsertしていきます。 delimiter // create proce

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 本記事は、reactjs-interview-questionsを日本語に翻訳することを目的とします。そのため、筆者自身の意見や知見は扱いません。 reactjs-interview-questionsとは 技術面接などでReactに関して聞かれるであろう質問とその回答がまとめられています。「Reactとは？」というざっくりした質問だけでなく「Reactのデータフローについて」などコアな質問が用意されているため、転職活動をしていない方でも学びになる点が多くあります。 全部で333問の質問とその回答が用意されています。この記事では1〜111の問題を翻訳します。翻訳が不慣れな点がありましても暖かい目で見ていただけると幸いです<_> 1. What is React? React is an open-source front-end JavaScript library that i

はじめに こんにちは。株式会社HRBrainでインターンをしている安井です。 この記事では今業務で採用しているReact Queryの特性を生かした設計を考察してまとめていきます。 本記事はHRBrain Advent Calendar 2022の24日目の記事です。 前提 本記事で使用するライブラリ等のversion React: v18.2.0 TypeScript: v4.9.3 React Query（TanStack Query）: v4.19.1 axios: v1.2.1 vite: v4.0.0 React Queryはv4から名前が変更されTanStack Queryとなりましたが、記事の中ではReact Queryと呼ぶこととします。 使用するOpenAPIの定義 https://jsonplaceholder.typicode.com/posts また、本記事で使用す

PHP8で追加されたJITと、PHP OPcacheについて徹底解説！「悪りぃが、こっから先は一方通行だ」PHPjitopcachePHP8 はじめに PHPerの皆さんこんにちは。一方通行と申します。 皆さんは去年(2020年)の11月にPHP 8がリリースされたのは既知のことかとは思いますが、 PHP 8の最も目玉である機能に「JIT (ジャストインタイム) コンパイル」というものがあります。 JITをPHPアプリケーションに導入しようか検討する際にJITが内部的に何を行っているのかきちんと理解していなければ導入出来ないと思い、 別の高速化アプローチであるOPcacheと合わせて、解説します。 雰囲気は知っているよという方や、OPcache is 何?という方々はぜひご参考にしてください。 前提知識 まずですが、インタプリタ言語がマシン上でどのように実行されているかおさらいしましょう。

はじめに 個人開発でアプリ作成中なんですが、バックエンドをrailsで作っていました。 そんなある日。。。　こんな記事を見ました。 Firebaseでバックエンドエンジニア不在のアプリ開発　クックパッドが体感した、メリットと課題 Firebaseならバックエンドエンジニアを必要としない開発ができる ( ﾟдﾟ) ... マジカ これに感化されてCloud Functionでバックエンドを作ってました。 が ある理由でそれは辞めました。 なぜ、Cloud Functionを採用しなかったか 今回マイクロサービスをアーキテクチャとして採用し、さらに各機能を自分が作るのは嫌なので、BaaSをサービスと定義して自分はBFFだけ作ってやろうという腹でした。 それだったら、BaaS単位で共通のライブラリファイル作ったほうが、他のプロジェクトを立ち上げる時に楽だよね？となり、クラウドファンクションにそう

はじめに 世の中には数多のプログラミング言語がありますが、テキストではなくブロックなどのオブジェクトを組みたててプログラミングをする、ビジュアルプログラミング言語というジャンルがあります。 ビジュアルプログラミング言語には、データフローやビジネスプロセスモデリング1に特化したものもありますが、教育目的で利用されるScratchという言語の名前を聞いたことがある人もいらっしゃると思います。または、Hour of Code2という、コンピューターサイエンスが身近で楽しいことを伝える世界的な活動をご存知かもしれません。 Scratchライクなビジュアルプログラミング・エディタが簡単に作れるBlocklyを使うと、ビジュアルプログラミング環境をかんたんに作ったりカスタマイズすることができます。Hour of Codeの教材のcode.orgも、Blocklyを利用しています。 Blocklyの日本

はじめに AWS Redshiftは、PostgreSQL 8.0.2をベースに作られた列思考DBです。 DWHとして使われることが多く、GCP BigQueryがクエリ課金であるのに対し、AWS Redshiftは時間課金です。そのためRedshiftは、大規模なデータソースに対して高頻度にSQLを実行する場合に、非常にコストを抑えることができる製品です。 一方で、非常に高負荷なSQLが実行されたときに、他のクエリの実行に影響が出たり、はたまたテーブルを定期的にVACUUMしたりと、ある程度のモニタリングや管理が必要になります。 それらのモニタリングを楽にするRedshiftコンソール(Spectrometer)を作ったので、紹介させていただきます。Redshift(赤方偏移)にちなんで、Spectrometer(分光器)という名前です。 機能 Digest認証 Redshiftの接続ユ

はじめに 本文書はSQLのスタイルガイドです。 PythonやRubyのようなプログラミング言語には有名なスタイルガイドがあり、共通のレイアウトルールに沿ったインデントや命名規則に則ったコードが生み出されています。 一方、SQLには知名度のある統一されたスタイルガイドがありません。 そのため、思いのままに書かれたSQLが散見されます。 もちろん、SQLを使ってアドホックな分析を行う場合は、必ずしもルールに沿う必要はなく、効率よく書いても良いと思います。 しかし、Webサービスやバッチの中に組み込むようなもの、つまり自分以外の誰かに読まれるSQLは、多くのプログラミング言語同様に何らかのスタイルガイドに沿うことで多くのメリットを享受できると思います。 クエリが構造化され、可読性が高まる バグの発見や修正が容易になる 改行位置やインデントなどのフォーマットの悩みが解消される スタイルガイドを共

Livesense Advent Calendar 22日目を担当しますtaiseです。 21日目はeriさんの「ChucKで発見！自分の好きな音。」でした。 そろそろAdvent Calendarも終盤戦です。 絶え間なきUser Agentとの戦い HTTPリクエストを送る際に、利用しているエージェント(ブラウザ等)の情報が書かれている、あのUser Agentについてです。 例えば、提供しているWebサービスの画面描画が崩れたという問い合わせとか、サービスの利用者の使っている端末やブラウザの割合を調べる場合にUser Agentが利用されると思います。 しかし、User Agentをよくよく調べてみると、PCやスマフォにかぎらずゲーム機やら、電子ブックリーダを始め、様々なデバイスやらブラウザからアクセスされていることがわかります。また、デバイスだけでなく、Webブラウザも日々増え続け

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?