javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A
Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~
最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記載あったらFB頂けたら幸いです） React 誕生までの Web iPhone と Ajax がリードした Web 2.0 時代 Webにおいて Ajax という技術が注目され始める 2005~ Google mapsやGmailといったサービスがリード jQueryの誕生が 2006~ iPhone登場 2007~ スマホアプリの登場によりソフトウェアのUXに求められる質的変化 mobile safariが時代のリードをした Flash
【2024年】ITエンジニア本大賞まとめ
アジャイルプラクティスガイドブック チームで成果を出すための開発技術の実践知 チーム・組織にプラクティスを導入し、根付かせるために！ 116の手法を一冊にまとめた“実践”の手引き チームでのアジャイル開発には、開発技術やツールなどの「技術プラクティス」の活用が重要です。 プラクティスはそれぞれの目的や役割を意識することで効果を発揮します。しかし、目まぐるしく状況が変化する開発では、当初の目的を忘れて、プラクティスに取り組むこと自体が目的化してしまうチームも少なくありません。 本書は、チーム・組織でアジャイル開発に取り組んできた著者が、プラクティスの効果的な選択・活用のしかたについて、自らの実践経験に基づいてまとめたガイドブックです。 架空の開発現場を舞台にしたマンガとともに、チーム開発の様々なシーンで役立てられるプラクティスを、幅広くかつわかりやすく解説しています。開発現場に備えておけば、
Fintechサービスをスピーディーに立ち上げる技術スタック LINEエンジニアに和田卓人さんが聞く TypeScriptとマイクロサービス基盤 - はてなニュース
多くのユーザーに常用されるコミュニケーションアプリ「LINE」には、エンターテイメントやライフスタイル、ショッピングなど多種多様な関連サービスがあります。 その中でスマホ投資サービス「LINE証券」や、外国為替証拠金（FX）取引の「LINE FX」、個人向けローンサービス「LINEポケットマネー」、「LINE」アプリ上で損害保険に加入できる「LINEほけん」などファイナンシャル（金融）系サービスの展開も拡大しています。 こういったFintech事業に、LINEエンジニアはどう取り組んでいるのか？ 「LINE証券」を開発する3名に、事業を支える技術の詳細を伺いました。聞き手は、テスト駆動開発の第一人者でありITコンサルタント・ソフトウェアエンジニアの和田卓人（@t_wada）さん。 信頼性と高速性の両立が求められるFintech領域において、LINEはどのような工夫を行っているのでしょうか。
GPT-4で新しいプログラミング言語「TenetLang」を生み出す、チャットAIは既にプログラミングの何たるかをかなり理解している模様
OpenAIが作成したチャットAIの「GPT-4」を利用して、新しいプログラミング言語の「TenetLang」をコーダーのルークさんが作成しています。 GPT-4 Designed a Programming Language https://lukebechtel.com/blog/gpt4-generating-code GPT-4のような大規模言語モデル(LLM)は、世界中に存在するあらゆるプログラミング言語を何十億回も読み込んでいます。LLMはプログラミングも可能であることは知られていますが、ルークさんは「私の知る限り、GPT-4で独自のプログラミング言語を作成するといった事例はこれまでありません」と記しています。そこで、ルークさんはGPT-4を使って新しいプログラミング言語を創造することに決めた模様。 ルークさんは最初にGPT-4に対して「ソフトウェア開発における大まかな統一理論
CTOになったToriです。せっかくの機会なのでエンジニアとしてのキャリアを振り返ってみました - Findy Engineer Lab
前職のAmazon Web Services（以下、AWS）でコンテナスペシャリストソリューションアーキテクトやデベロッパーアドボケイトを務め、2022年4月より株式会社カミナシに転職したHara Tori(@toricls)さん。 2022年7月1日に、彼がCTOに就任したことが発表されました。 Findy Engineer Lab編集部は、就任間もないToriさんにインタビュー。著名エンジニアである彼が、どのような経験を積んでスキルを研鑽してきたのか、そしてカミナシで何を目指すのかを伺いました。彼の歩みから見えた「エンジニアがより良いキャリアを実現するための方法」とは。 「あなたは大手企業には向かないと思う」 ――改めまして、CTO就任おめでとうございます。せっかくの機会ですので、Toriさんのキャリアを総括したインタビューをさせてください。コンピューターに興味を持ったのは、いつ頃から
はじめに サーバーレスアプリケーションにおけるフロントエンド SPAの課題 サーバーサイドレンダリング Jamstack サーバーフル? サーバーレス? サーバーレスでサーバーサイドレンダリング Nuxt.jsでの例 次回 はじめに サーバーレスでサーバーサイドレンダリングの話です。ReactとかVueを使ったシングルページアプリケーション（SPA）を開発している人がサーバーサイドレンダリングやりたいんだけどサーバーレスでどうやるのって話です。 今回も『サーバーレスアンチパターン今昔物語』というイベントのための記事となっています。 serverless-newworld.connpass.com なお、今回は前編と称してそもそものところを簡単に説明しつつ、サーバーレスでやる場合の基本的な話を説明していきたいと思います。次回、後編で実際にサンプルアプリを用意して動くもので説明をしていきます。
マイクロサービスの再考: タダ飯なんてものはない
どうも、株式会社プラハCEO兼エンジニアの松原です。 先日かとじゅんさんがツイートで紹介していたマイクロサービスに関する論文を読むついでに、適度に意訳した内容を音声入力してみました。ついでに意訳レベルなので翻訳の質は保証できないのですが、もし内容を読んでみて少しでも興味を持てた場合は実際の論文にも目を通してみると良いかもしれません。 論文のリンク: 「これ日本語でなんて言うの？」って分からなかった部分も多々あったのでより適切な単語があったら教えてほしい...! 導入 マイクロサービスには様々なプラクティスや技術を用いて以下のメリットを目指す 素早いデリバリー 高いスケーラビリティ 自律性 しかし実際にこの業界で実装されるマイクロサービスは採用するプラクティスや効果に大きな差があるため、オンラインサーベイ(51回答)と経験豊富なマイクロサービス実践者14名にインタビューを行った。 わかったこ
ただし、種別は以下の通りです。 prefix (前置演算子) …… もとの式の手前に何個でもつけられる演算子。 例: -~-~x postfix (後置演算子) …… もとの式の直後に何個でもつけられる演算子。 例: x.foo()`bar`[0] postfix once …… もとの式の直後に1個だけつけられる演算子。 例: x++ は可能だが x++-- はパースされない。 逆に ++--x はパースされるが、構文とは別のルールで禁止される。 (後述) infixL …… 中置演算子で左結合 (演算子の優先度が同じ場合は左側にあるほうが優先される) 例: 0.1 + 1.0 - 1.0 は (0.1 + 1.0) - 1.0 になる infixR …… 中置演算子で左結合 (演算子の優先度が同じ場合は右側にあるほうが優先される) 例: 2 ** 2 ** 3 は 2 ** (2 **
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
AWS×コンテナで基本的なDevSecOpsアーキテクチャをデザインしたお話 - How elegant the tech world is...!
はじめに 先日、僕が担当する業務でECS/Fargate利用を前提にDevSecOpsアーキテクチャをデザインし、社内のAWS勉強会にて登壇する機会をいただきました。 本ブログでも内容をかいつまんでご紹介できればと思います。 AWSによらず、コンテナを利用されている方にとって、一つのプラクティス例としてご参考になれば幸いです。 ※コンテナ自体の説明や必要性に関する内容は省略していますm(_ _)m そもそもDevOpsとは？ DevSecOpsの導入意義をお伝えするた前に、まず軽くDevOpsの意義をお伝えします。 ※とは言え、この記事をご訪問されている方にとっては「何をいまさら...」な内容かもしれませんし、ググればDevOps自体の情報はたくさん見つかりますので、重要なポイントのみ述べることにします。 DevOpsとは、一言で述べれば、開発チームと運用チームが協力してビジネス価値を高め
TypeScriptでどこまで「関数型プログラミング」するか ─ 「手続き Haskell」から考察する - 一休.com Developers Blog
この記事は 一休.comのカレンダー | Advent Calendar 2023 - Qiita 10日目の記事です。 昨今は Web アプリケーション開発の世界でも、関数型プログラミングのエッセンスを取り入れるような機会が増えてきました。 とはいえ、一つのアプリケーションを 1 から 10 までがっちり関数型プログラミングで構成するというわけではなく、そのように書くこともあればそうでない従来からの手続き的スタイルで書くところもあるというのが現状で、どこまで関数型プログラミング的な手法を取り入れるかその塩梅もまちまちだと思います。まだ今はその過渡期という印象も受けます。 本稿ではこの辺りを少々考察してみたいと思います。 先日、Qiita Conference 2023 Autumn で以下のテーマで発表を行いました。 この発表では「関数型プログラミング最強!」という話をしたわけではなく、
こんにちは。id:shallow1729です。先日はredo logを中心にストレージエンジンについて解説を行いましたが、今回は同時実行制御、特にMySQLなど多くのデータベースで採用されているMultiversion Concurrency Control(MVCC)という技術にフォーカスしようと思います。 今回の記事ではまず前半でMVCCというものがどういうものかについて解説をして、次にMVCCの実装方法についてInnoDBの実装を参考にしながら見ていこうと思います。前提知識はあまりいらないと思いますが、リレーショナルデータベースの操作経験はあったほうがいいかなと思います。また、前回のストレージエンジンの解説で述べた内容はあまり説明しないので、軽く目を通してもらえると頭に入りやすいかなと思います。 shallow1729.hatenablog.com トランザクションの原子性 まずトラ
個人的Rails開発環境構築2024
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加 JavaScriptのPromiseについて学ぶ書籍であるJavaScript Promiseの本 v2をリリースしました。 Promise本 1.0.0をリリースしたのは2014年6月ですが、そこから少しづつアップデートしていました。 JavaScript Promiseの本を書きました | Web Scratch ES6がリリースされたのでPromiseについて学びましょう | Web Scratch 今回のメジャーアップデートとなる2.0.0では、サンプルコードのコードベースをES2015前提のものへと変更しています。 1.x系からの主な変更点としては次のものがあります。 ES6をES2015に表記を変更 コードベースをES5からES2015+(ES2015以降ベース
readable-code-chap5-6.md 5章 コメントすべきことを知る コメントの目的は書き手の意図を読み手に知らせることである コメントすべきでないことを知る コードを書いているときの自分の考えを記録する 読み手の立場になって何が必要かを考える コメントすべきではないこと パっとみて当たり前にわかることをコメントに書かない // 休日を計算する function caliculateHoliday() { ... } // 関数実行時の年の1/1から12/31まで、祝日を除く休日を計算する function caliculateHoliday() {....} コメントにパッと見でわからないことを書くようにしよう 関数名がひどい場合はコメントではなく関数名を書く // Kintoneのカスタマイズでコメントを128kbに制限する // コメントにはコメント内容、コメント時刻、コ
GoとRust - 並行プログラミング編
はじめに こんにちはnasaちゃんです。 goroutine何も分からん!async/await何も分からん!となったのでそれぞれを比較しつつ理解を深めてみよう。という考えのもとGo, Rustの並行プログラミングの解説記事を書いてみました。 ところどころふわっとしているため、補足や指摘を貰えると大変助かります。 今回話すこと goroutineとは結局何なの Goの並行処理の仕組み goroutine(Go)とasync/await(Rust)の比較 Goのランタイム、Rustのランタイムの話 話さないこと 構文の違いについては特に触れない どちらが優れているとい言う話はしない ベースになっている思想については特に触れない TL;DR Goには標準のランタイムがあるよ、Rustではランタイムライブラリを使う必要があるよ Goはランタイムが中断再開を管理するよ、Rustではプログラマーが管
Google Workspaceのプライマリドメイン変更を実施しました - Pepabo Tech Portal
こんにちは、ペパボのCorporate Engineering Group（以下CEG）でソフトウェアエンジニアをしている加治です。 CEGでは、主にペパボ社内で利用されている社内向けサービスの開発・運用・保守を行っています。運用・保守を行っているサービスの中にはSaaSも含まれています。そのSaaSの一つであり、ペパボでメインで使用されているオフィススイートであるGoogle Workspaceのプライマリドメインを変更したお話をします。 最初に、このお話のターゲットを明確にしておこうと思います。 これからプライマリドメインを変更したい情シス、コーポレートエンジニアなどの担当者 プライマリドメインを変更したことがあり、ペパボではどうだったのかな〜と気になった人 Google Workspaceの運用をしていて、プライマリドメインが事実上のメインのドメインと異なるときの影響を知っておきたい
長くなりがちだったコードレビューを改善した話 - 弁護士ドットコム株式会社 Creators’ blog
弁護士ドットコム クラウドサイン事業本部でエンジニアをしている山田です。 主にフロントエンドを担当しています。 普段の業務でフロントエンド開発のコードレビューをすることが多く、今回は長い時間がかかりがちだったコードレビューを以下の施策で改善した話をします。 タスクへの認識合わせを拡充 タスクを小さく分割 類似するタスクのレビュー内容は共有 必要に応じて同期的にレビュー 達成されないスプリントゴール スプリントゴールが達成できない原因 コードレビューが長くなる要因 レビュアーのレビュー期間が長い タスク担当による対応期間が長い 対応策 タスクについての認識合わせの時間を設ける タスクをなるべく小さくする 類似する複数のタスクはレビュー内容を共有 必要に応じてオンラインミーティングなどで画面共有し会話しながら同期的にレビューする スプリントゴールも達成できるように まとめ 達成されないスプリン
概要 よくある年末っぽい日記の記事です。 だいだいこれどうりのバランスでソースコードも書いてる 言語はなんでもいい時はNode.jsで書く。移植性が高いので。複数人でメンテしそうな時はTypeScriptを採用し、プライベートの時は型を完全に無視する PHPはほぼLaravel。ビジネスのみの関係 Swiftはそんなに書いた記憶がないけどアプリのメンテをしてたと思う Vueも仕事で使っていたけど最近はReactに傾いてる Objective-Cは書いてない グラフに含まれてない部分だとAndroidアプリでKotlinを使って、データ分析でPythonを書いた このグラフは GitHub Profile Summary Cards っていう便利ツールを使わせてもらって自動生成している。 記録方法 コードを書く時はおもむろに ~/tmp 以下にディレクトリ掘ってIDEを開きはじめるので実質そ
最速攻略！ Reactの `use` RFC
皆さんこんにちは。最近のReact界隈で話題になっているのは次のRFCです。 そこで、この記事ではさっそくRFCを理解することを目指します。 ただし、このRFCはSuspenseに深く関わるものです。SuspenseはReact 18でもう正式リリースされていますから、この記事ではSuspenseは前提知識とします。もしまだSuspenseをよく知らないのであれば、ぜひ次の記事で学習してください。 また、RFCはあくまでReactの新機能のアイデアを公開するものであり、これが必ず実装されるとは限らない点にご注意ください。例えば、過去にはuseEventというRFCが注目を集めていましたが、意見が集まった結果としてそのRFCは実装されずにクローズされました（RFCが無駄だったというわけではなく、再度検討してよりアイデアがブラッシュアップされることになります）。 新しい use API このR
しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます（以下は公式サイトから引用）。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.
久しぶりに物理本を読んだけど、やっぱ物理はええな・・かさばるとこ以外。 せっかくなので読書感想文と、特に印象に残った部分を、章ごとに書いておく。 第1章: 達人の哲学 この本を読んでいくにあたって、そもそも達人とはなんぞやという話がメイン。 プログラマーというより、いわゆる社会人としてこうあれみたいなテーマで書かれてて、なんかみんな読んだらいいのではと思いました。 物事をうまく進捗させるために、 まず何を言いたくて その結果どうしたいのかまで考えて 相手の状況やタイミングを見計らって コミュニケーションを実行する・されると、あれこれスムーズにいきますよっていう。 このテクは中々に便利で、日常生活でもそれこそ夫婦間とかのコミュニケーションでも使える話かなーと思ってて。 ただ自分の場合はこれをやりすぎて、質問してるはずが誘導尋問みたいになっちゃうときがたまにある・・。 第2章: 達人のアプロー
『デス・ストランディング』がEpic Gamesストアで1日限定無料配布。新作を控えるコジプロの配達人アクション - AUTOMATON
Epic Gamesストアにて12月26日、『DEATH STRANDING（デス・ストランディング）』の無料配布が開始された。配布期間は2022年12月27日1時まで。期間中にライブラリへ追加しておけば、配布終了後もプレイできる。なお、同作のEpic Gamesストアでの通常販売価格は、税込7590円。ストアページの表記によると、音声、テキスト共に日本語に対応している。 『DEATH STRANDING』は、KOJIMA PRODUCTIONSが手がけたアクションゲームだ。プレイヤーは主人公のサム・ポーター・ブリッジズとなり、異常現象「デス・ストランディング」によって人類が分断された世界を再び繋ぎ直すことになる。本作は非同期のマルチプレイシステムを採用しており、シングルプレイながらもほかのプレイヤーとの繋がりを感じることができる。 本作のおもな目的となるのが配送だ。サムは配達人を生業とし
自己紹介 こんにちは。名刺メーカーDevグループの伊藤惇です。 私は2022年4月にSansanに新卒として入社して、現在に至るまで名刺データの作成および印刷発注をするサービスの開発に携わっています。 名刺メーカーDevグループでは、偶然タイミングが重なったこともあり、私が入社してからこれまでの間に5人が育児休暇を取得しました。 そうした中で感じた育休に対する考え方の変化を振り返りたいと思います。 なお、本記事はSansan Advent Calendar 2023の14日目の記事です。 名刺メーカー育休スケジュール 名刺メーカーDevグループの規模感 チームの人数やプロダクトのフェーズによっても育休のインパクトが変わってくるので、私が所属する名刺メーカーDevグループの規模感について補足しておきます。 チーム人数 後述するAさん、Bさん、Cさんの育休取得時は約15人ほどのチームでした。そ
React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん出た存在として常に注目を集めてきたReact。2022年3月にリリースされたバージョン18では、Suspenseの安定化やStreaming SSRのサポートなど数々の新機能を取り入れて話題になりました。本記事では、React／TypeScriptのスペシャリストとして幅広く活躍されているuhyoさんが、現時点におけるReactのベストプラクティスについて解説します。 Reactは、Meta社により開発・公開
git-schemlexとddl-makerを使ったDB migrationの紹介 / git-schemalex and ddl-maker migration #golangtokyo
TL; DR LangChainのメリデメを整理する過程で、今となってはopenai-pythonのうちChatGPTのAPIをを簡単に取り回せる程度のシンプルなライブラリがあるだけでも十分便利なんじゃないかと思ったので、ライブラリを個人で作ってみました。（バージョン0.0.1なのでちょっとお粗末な所もありますが） github.com はじめに こんにちは、データサイエンティストの坂元です。ABEJAアドベントカレンダーの13日目の記事です。世は大LLM時代ということで、ありがたいことにABEJAでも複数のLLMプロジェクトを推進させて頂いています。私自身もいくつかのLLMプロジェクトに参画しています。LLMといえばLangChainが便利ですね。OpenAI APIの利用だけでなく、各種ドキュメントのパースが出来たり、HuggingFaceやインデックスDBを扱う他のライブラリとインテ
本稿では、gihyo.jp編集部で利用しているMarkdownファイルの記述方法を主に解説します。 注意：gihyo.jp編集部内でのみ採用しているMarkdownの書き方をまとめた文書を、記事の体裁を取って公開したものです。なお、記事公開後に記述方法を追加・変更する可能性もあります。 Markdownとは？ はじめに、筆者の把握している範囲でMarkdownについて概説しておきます。 近年は一般向けのウェブサービスやテキストエディタでも利用されてきているMarkdown。端的に言えば、テキストファイル上で文書を書くための構文です。文書の読みやすさに焦点を当てており、Markdown形式のテキストファイル（＝Markdownファイル）をそのまま見れば文書とその構造が理解できるように、Markdown特有の編集記号や字下げを用いて表現します。また、MarkdownファイルをHTMLファイルに
GW なんも予定がなくてブログ書くかソシャゲやるか昼から酒飲むしかやることがないです。だから予定があったら使っていたであろうお金でソシャゲに課金したらめちゃくちゃ強くなりました。やったー。友達にはドン引きされましたが、GW に予定がある人よりかは節約できていると思います。そんなソシャゲもやることなくなって暇なので酒飲みながらブログを書きます。今日は WebRTC です。 免責 筆者は RFC を読んでいません。これは「そもそも WebRTC それ自体 の RFC なんてものは存在しないもんね〜」という意味でなく、ICE や SDP の RFC すら読んでいないという意味です。そのため WebRTC そのものの解説として読むと良くない表現が含まれるかもしれません。ただし自分が WebRTC でカメラ映像を送る実装を動作させ、そのコードの解説という点では間違ったことは書いていないはずです。動作
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
複数のプログラムを順番に処理していく同期処理システムでは、どこかひとつの処理に時間がかかると後続の処理がまるごと遅れてしまいます。そんな同期処理に対し、ある処理の完了を待たずに次の処理を実行できるのが非同期処理。重たい処理によるボトルネックを回避できるため、ウェブサイトの応答速度改善などに役立てられています。クラウドストレージサービスのDropboxで開発が進められていた大規模な非同期処理フレームワークについて、同社のエンジニアであるArun Sai Krishnan氏が解説を行っています。 How we designed Dropbox’s ATF - an async task framework - Dropbox https://dropbox.tech/infrastructure/asynchronous-task-scheduling-at-dropbox これまでDropb
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
Lambdaの内部アーキテクチャ教えます！A serverless journey: AWS Lambda under the hood #SVS405 #reinvent | DevelopersIO
CX事業本部の岩田です。 昨年re:inventから帰国後にyoutubeで見つけたセッション「A Serverless Journey: AWS Lambda Under the Hood」が非常に興味深い内容でした。今年も同様のセッションが無いかre:inventのセッション予約開始前からチェックしていたところ、なんと今年も同じタイトルのセッションがありました。これは現地で聞くしかない！ということで聞いてきましたので、改めてセッション内容をまとめてレポートします。 資料 セッション動画 スライド A Serverless Journey: Under the Hood of AWS Lambda 例年ならSlide Shareで公開されるのですが、今年に関しては今のところSlide Shareには上がっていないようです。なお以後登場する画像のほとんどはこちらのスライドからの引用となりま
はじめに JavaScript の「非同期処理」ってやっぱりかなり難しくないですか？ 自分も色々試行錯誤しましたが、結局「完全に理解した🤓」→「やっぱり何も分からん😭」っていうループの中で泥臭く理解を深めていくしかないようです。 さて、非同期処理の制御をある程度予測できるようになるには、非同期 API を提供する環境のことやイベントループ、マイクロタスクなどの仕組みについて理解する必要があります。 そして環境に埋め込まれた JavaScript Engine のことも理解する必要があります。 今回の記事では、JavaScript Engine の１つである V8 が内部で変換するコードから async/await の挙動を理解するための解説を試みたいと思います。V8 エンジンからアプローチすることで async/await の分かりづらい挙動を掌握して非同期処理を打倒します。 今回の記
async/awaitの鬼門の一つとして、適切なキャンセル処理が挙げられます。別に基本的にはそんな難しいことではなく、CancellationTokenSourceを作る、CanellationTokenを渡す、OperationCanceledExceptionをハンドリングする。というだけの話です。けれど、Tokenに手動でコールバックをRegisterしたときとか、渡す口が空いてないものに無理やりなんとかするときとか、タイムアウトに使った場合の始末とか、ちょっと気の利いた処理をしたいような場面もあり、そうした時にどうすれば良いのか悩むこともあります。 こういうのはパターンと対応さえ覚えてしまえばいい話でもあるので、今回はAlterNatsの実装時に直面したパターンから、「外部キャンセル・タイムアウト・大元のDispose」が複合された状況での処理の記述方法と、適切な例外処理、そして最
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
【サービス名変更のお知らせ】「Scrapbox」は「Helpfeel Cosense（ヘルプフィール コセンス）」に変わります
【サービス名変更のお知らせ】「Scrapbox」は「Helpfeel Cosense（ヘルプフィール コセンス）」に変わりますナレッジはみんなで作り上げる時代へ。組織が変わるナレッジイネーブルメントツール 株式会社Helpfeel（ヘルプフィール、京都府京都市、代表取締役/CEO：洛西 一周、以下「当社」）は、ナレッジ共有サービス「Scrapbox」の名称を、本日より「Helpfeel Cosense（ヘルプフィール コセンス）」に変更したことをお知らせいたします。 サービス名の変更を機に「Helpfeel Cosense（コセンス）」は、個人の暗黙知を組織のナレッジとして共有資産にしていく文化を日本に根付かせることで、組織の新たな価値創造への貢献を目指してまいります。 ◾️サービス名変更の背景 「Scrapbox」は、手軽に知識をアウトプットできるドキュメント共有サービスです。サービスを
はてなブログをECSに移行してリリース頻度も改善した話 - Hatena Developer Blog
この記事ははてなエンジニア Advent Calendar 2022の26日目のエントリです。 こんにちは id:cohalz です。はてなブログでは2022年7月にインフラをAmazon EC2からAWS ECS(AWS Fargate)に移行するプロジェクトが完了しました。 プロジェクトは2021年9月から始まったので約10ヶ月間という大きなプロジェクトでした。 プロジェクト完了までに行ってきたことのうち、特に面白かったところなどをこの記事で実施した順に振り返ってみます。 はてなブログのインフラのこれまで アプリケーションを動かせるようにする ALBを追加する 検証環境を用意だけしておく プロキシの設定埋め込み 証明書の配信 アクセスログを配送できるようにする アクセスログの形式を新しくする EC2でもFirehoseを経由するように タイムゾーンをUTCに統一 FirehoseのLa
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactでロジックをhooksにまとめないという選択肢 - Hello Tech
サーバーレスでサーバーサイドレンダリング 前編 - Sweet Escape
JavaScriptの演算子の優先順位と「禁止ルール」の一覧
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
MVCCとInnoDBでの実装について - shallowな暮らし
JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加
リーダブルコード 5-6章 コメントについて · GitHub
2020年に作ったソフトウェアや開発技術をふりかえる - laiso
React17におけるuseEffectの破壊的変更を理解する
達人プログラマー（第2版） 読んだ - console.lealog();
入社して1年半の間に先輩が5人育休に入った話 - Sansan Tech Blog
非同期開発体制を支えるドキュメント文化 / YAPC::Hiroshima 2024
LangChainを使わない - ABEJA Tech Blog
gihyo.jp編集部におけるMarkdown記法 | gihyo.jp
WebRTC を理解するためにカメラ映像を送るだけの最小実装を探る
サイトの表示高速化につながる18のこと | knowledge / baigie
Dropboxが新開発した「非同期処理フレームワーク」はどのように構築されているのか？
decoding="async" について詳しく調べてみる
V8エンジンによる内部変換コードでasync/awaitの挙動を理解する
neue cc - async/awaitのキャンセル処理やタイムアウトを効率的に扱うためのパターン＆プラクティス
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA