ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！　Bonfire運営の春野です。 2020年2月5日（水）にヤフーのセミナールームにて「Bonfire Frontend #5」を開催しました！　そのイベントの様子をレポートします。Bonfire Frontendは、様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会です。 第5回となる今回のテーマは「テストと自動化」。 ヤフーからはトップページを担当している西村 宗親が登壇し、ゲストスピーカーとして株式会社ICSより森田 勝駿さん、株式会社ゆめみよりunotovive・おとべさんにお話しいただきました。どのようにテストを活用しているの

この記事のシリーズでは私がフロントエンドに関して思っていることを徒然に語っていこうと思います。 ちょっと長くなり過ぎそうなので以下の4つに分けて書いていこうと思います。 1.概念的な話 - フロントエンドアプリケーションとは何でできているか フロントエンドアプリケーションを保守性とユーザへの価値提供を両立して開発するために、アプリケーションを抽象化して、いい感じの設計をする必要があります。 これの土台作りをするために概念としてフロントエンドアプリケーションとは何なのかを考えていきます。 2.技術的な話 - フロントエンドアプリケーションはどのように実行されるか Webフロントエンドはブラウザで実行され、表示のためには HTML, CSS, JS が必要です。当たり前のことではありますが、実際に開発を進めていく上では概念だけでなく、実際に動く How の部分を知る必要があります。 これらの要

Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation

こんにちは丸山@h13i32maruです。システム全体を簡単な図とテキストでまとめる「ARCHITECTURE.md」というものを最近知りました。これは良さそうと思い、JasperのARCHITECTURE.mdを書いてみました。 jasperapp/jasper/ARCHITECTURE.md ARCHITECTURE.md自体の目的は「プロジェクトへの新規参加者が全体像の把握を効率的に行えるようにする」という感じです。書き方の指針や注意点などは考案者による記事を見てもらうのがよさそうです。また良いサンプルとしてrust-analyzerというOSSのARCHITECTURE.mdが紹介されています。 https://matklad.github.io//2021/02/06/ARCHITECTURE.md.html https://github.com/rust-analyzer/ru

Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv and .json files to create a powerful data layer for your application. Use Vue components in Markdown with the MDC syntax.

grdの作者が考える、いまフロントエンドエンジニアに求められる「速度という機能」 Webパフォーマンスの改善に、並々ならぬ情熱を傾けるエンジニアの泉水翔吾（@1000ch）さん。氏の手がけるOSSはこの情熱を体現するかのように、パフォーマンス改善にフォーカスしたものが多数あります。なぜWebパフォーマンスにこだわるのか、そして現在のフロントエンドエンジニアに求められる技術を聞きました。 「サイトの表示に3秒以上かかると、訪問者の53%がそのサイトから離脱する」 Googleが公開した上記のドキュメントは、Webの「使いやすさ」とは、スピードと不可分なものであることを示しています。 「パフォーマンスはサービスが持つべき“機能”の一部」と語るのは、『超速! Webページ速度改善ガイド』の著者の一人である泉水翔吾（せんすい・しょうご／ @1000ch ）さん。彼は、前職の株式会社サイバーエージェ

先日、ウェブフロントエンドについて理解するためのただ一つの方法を記事にしました。それは「古い知識に頼るな。公式を読め」でした。たった一つの方法です。これをできない人は必ず行き詰まります。公式をひたすら読み込むことができる人は、たぶん大丈夫でしょう。 今回の記事は、その先にあるものです。 モダンフロントエンドの重要性ここでは少し前回の記事のおさらいをしておきます。 2020年のソフトウェアエンジニアリングの世界ではウェブ技術の重要度は増すばかりです。もちろんウェブ技術というのは広い分野です。ウェブ（HTTP/HTML/JS/CSSその他）によるサーバー・クライアント型のソフトウェアは、莫大な市場を背景にどんどか技術が投入されています。 ウェブ技術の中でも、ここ数年はフロントエンド技術の比重がとても大きくなりました。前回の記事にも書いた通り、少なくとも50%以上の影響力を持っています。 ソフト

JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です！ 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri

Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)

オブジェクト指向のハードコアは2019年5月25日にゼロベースサロンで行われたイベントです。「オブジェクト指向」というキーワードについて、プログラミング、デザイン、哲学などの分野を横断しつつ知的な議論ができました。記録映像は必見。 企画意図／招待状 この研究会の企画意図については、私が送った招待状を見ていただくのが早いでしょう： いくつか異なる分野で「オブジェクト指向」がキーワードとして注目されています。昨年からGUIデザインの分野では「オブジェクト指向ユーザーインターフェイス」(OOUI)の議論がホットです。ソフトウェア開発の分野では、数年前からオブジェクト指向の見直しとしての「ドメイン駆動設計」(DDD)が広まっています（※原著である英語版から日本語への翻訳は数年遅れています）。さらには「オブジェクト指向存在論」(OOO)も思想業界でブームになっています。 これはもうオブジェクト指向の

https://fortee.jp/object-oriented-conference-2020/speaker/proposal/view/b06110e6-717e-4cb2-97c3-cd8d53693378 の初版スライドです 当日の発表版は https://speakerdeck.…

Like these songs? Click the icon next to the song to purchase their music.

※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何？」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ

【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分

今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる

詳解 "Fixing For Loops in Go 1.22" 自作linterをgolangci-lintへコントリビュートした話

2. 自己紹介 name: “よしだ しんいちろう” age: 32 worksAt: “Studio Arcana co.,Ltd.” roles: [ “Web Application Developer”, “Management” ] twitter: “@yossy222” graduated: [ “Advanced Institute of Industrial Technology”, “National Institute of Technology, Kushiro College” ] 2

Reduxでのディレクトリ構成3パターンに見る「分割」と「分散」投稿者: hahnah 投稿日: 2019-09-262019-09-26 Redux を使っていいて、ディレクトリ構成に悩んだことはないだろうか。 もしくは、見かけるディレクトリ構成が多様で、どれがいいのか分からないなんてことはなかっただろうか。 この記事では Redux を用いる際の代表的な３パターンの構成を紹介するとともに、それぞれをソースコードの分割・分散の度合いで比べてみる。 redux-way ducks re-ducks パターン1. redux-way (あるいは Rails-style) redux-way では、 “Redux によって導入される概念” ごとにディレクトリを分ける。 以下のようにcomponents/,containers/,reducers/,actions/,types/などとディレクト

Robin Wieruch氏によるHow to fetch data with React Hooks?を著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-hooks-fetch-data/ このチュートリアルでは、ステートフックと副作用フックでデータを取得する方法を解説します。テック系の人気記事を取得するためによく使われるHacker News APIを利用します。また、アプリケーション内の任意の場所で再利用したり、スタンドアロンのnodeパッケージとしてnpmに公開したりできるデータ取得用のカスタムフックも実装します。 React のこの新機能が初見であれば、まずReact Hooks入門に目を通してください。完成したプロジェクトでReact Hoos でのデータ取得事例

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいバージョンの React の流儀では、最新の React の使い方がライブサンプル付きで学べます。 巨大で軽快な Web アプリを開発する場合に、React は最高の手段であると、私たちは考えています。Facebook や Instagram といった私たちのサービスにおいても、とてもよくスケールしています。 React のすばらしい特長がいくつもありますが、あなたがどんなアプリを作ろうかと考えたことが、そのままアプリの作り方になる、というのはそのひとつです。本ドキュメントでは、検索可能な商品データ表を React で作っていく様子をお見せしましょう。 モックから始めよう すでに、JSON API が実装済みで、デザイナーからもデザインモックがもら