とある企業の面談で、「reactは運用コスト高いと思うんですけどなんで選定したんですか？」って聞かれてめちゃくちゃ困った話→Web開発の運用コストに関する様々な意見が集まる
Tonosaki @seino914 この間、とある企業の面談で、「reactを使用したWeb開発をしております」って言ったら「reactは運用コスト高いと思うんですけどなんで選定したんですか？」って聞かれてめちゃくちゃ困ったんだけど、reactって運用コスト高いんすか？？しかも末端エンジニアのワイに選定理由聞かれてもわからん。 Tonosaki @seino914 エージェントにモダンWeb開発してる企業って事で進められて面談したんだけど、面談担当者、reactアンチだったから色々とケチつけられたり、詰められたんだけど。
フロントエンドエンジニアとは、WebサイトやWebアプリケーションの見た目や動作など、ユーザーが直接目にする部分を開発する職種です。 今後のキャリアプランを考えるうえで、フロントエンドエンジニアの平均年収を知りたいと思っている方もいるのではないでしょうか。 そこで本記事では、レバテックフリーランスが保有する案件から、フロントエンドエンジニアの平均年収を算出しました。すでにフロントエンドエンジニアとして働いている方はもちろん、今後フロントエンドエンジニアとして働きたいと考えている方も、ぜひ参考にしてください。 【調査概要】 調査対象：「レバテックフリーランス」の利用者が参画した案件データから、稼働日数が5日のものに絞り、月額案件単価と参画者の年齢、案件に紐づくフレームワーク・ライブラリを算出しました。 対象期間：2023年6月～2024年6月 対象案件数：358件 対象職種：フロントエンドエ
How to review code effectively: A GitHub staff engineer’s philosophy
As a staff engineer at GitHub, code review is one of my main focus areas in my day to day work. Over the past eight years, I’ve reviewed more than 7,000 pull requests. Why so many? Because code review is crucial to building good software and another set of eyes can often spot issues you would have otherwise missed. I see code review as one of the most important aspects of my job. In fact, whenever
State of React 2023
React has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server
こんにちは。 めろたんです。 最近は咳としゃっくりが同時に出るようになってしまってとてもしんどいです。 はい。 今回は、弊社のサービスである、リーナー見積のフロントエンドをVueからReactに乗り換えた話について書いていこうと思います。 まず前提 リーナー見積では、フロントエンドは３つのサービスに分かれており 買い手向け画面 売り手向け画面 リーナー運営向け画面 という構成になっております。 サービスの構成図 各々Nuxt.jsで作られており、その全てでSEOや初期ページローディングのパフォーマンスをすごく求められるものではないため、CSRで行うように構成していました。 また作り始めた当時、会社やプロダクトがアーリーフェイズであり、そもそもプロダクトがこれで行けるかどうかというのもあったため、何を使って作るかというのは深く考えず、後に作り直すだろうというのを前提でNuxt.jsを選定して
6万5000人以上の開発者に「好きな言語」「好きなOS」「好きな開発環境」「好きなAI」を聞いた年次調査「2024 Stack Overflow Developer Survey」の結果が公開される
開発者のためのコミュニティ「Stack Overflow」が実施した年次調査「2024 Stack Overflow Developer Survey」の結果が公開されました。6万5000人を超える開発者が、コーディングやAI、使用および学習したいと考えるテクノロジーやツール、職場での体験などについて回答しています。 2024 Stack Overflow Developer Survey https://survey.stackoverflow.co/2024/ まず、回答者の最終学歴は以下の通りで、41％が学士号を、25.6％が修士号を取得しています。Stack Overflowは「開発者の66％が学士または修士の学位を持っているが、学校でコードを学んだ開発者は49％に過ぎない」とも指摘しています。 コードを学習するために最も優先する選択肢を問うた項目では、「その他のオンラインリソース
The New Internet
WireGuard is a registered trademark of Jason A. Donenfeld. Avery Pennarun is the CEO and co-founder of Tailscale. A version of this post was originally presented at a company all-hands. We don’t talk a lot in public about the big vision for Tailscale, why we’re really here. Usually I prefer to focus on what exists right now, and what we’re going to do in the next few months. The future can be dist
コンポーネント粒度と依存関係チェック feat. STORES予約フロントエンド - STORES Product Blog
はじめに STORES 予約 でエンジニアをしているyuta07です。 STORES 予約 の管理画面の新規開発はNext.jsを用いて開発しているのですが、日々のカジュアル面談や採用活動でフロントエンドの技術状況についての質問を受けることが増えてきました。 今回は STORES 予約 のフロントエンド開発の中でもコンポーネント粒度と依存関係チェックについて紹介します。 はじめに 主な使用技術 コンポーネントの分類 Pages Templates Organisms Molecules Atoms 依存関係チェック Eslintによる依存ルール おわりに 主な使用技術 Next.js、React、TypeScriptを採用。 スタイルはTailwind CSSを使用。 STORES 全体で統一されているconfigをユーティリティクラス（フォント・カラー等）として使用してスタイリングしてい
Del Walker 🇵🇸 @TheCartelDel She can't even react to the being THE WORLD'S GREATEST, because she's too just being nonchalant and mysterious.
こんにちは。 名刺アプリ「Eight」でエンジニアをしている鳥山（@pvcresin）です。 最近、ミスタードーナツのミニオンコラボの商品を食べたのですが、 どれも美味しくて見た目もかわいいので最高でした。 特にポン・デ・リングベースのものは、表面のキャンディが口の中でパチパチと弾けて楽しいのでオススメです。 さて今回は、RailsのViewで使う、HTML用ERBファイルのフォーマットを統一した話をします。 ERBとは ERB（eRuby、embedded Ruby）はテキストにRubyのコードを埋め込むための仕様です。 Railsでは特にViewの部分のHTML生成によく利用されます（拡張子は.erb）。 ERBでは、以下のような記法でRubyのコードを埋め込めます。 <ul> <% @features.each do |f| %> <li><%= f %></li> <% end %
3rd Party Cookie 廃止の方針変更など : Cybozu Frontend Weekly (2024-07-23号)
3rd Party Cookie 廃止の方針変更など : Cybozu Frontend Weekly (2024-07-23号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 7 月 23 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Temporal を取り巻く仕様を整理する ECMAScript Stage 3 の Temporal に関する発表資料です。仕様そのものの整理や、タイムゾーン・カレンダーのサポート、Intl との関係性について解説されています。 Fastly が開発者向けの無料プランを提供開始
エンジニアとして働くにあたって、無意識に気をつけていたことを自覚するたびに、言語化しておきたいなと思うようになりました。 今日はフレームワークを作らないようにしている話を書いてみます。 （個人ブログを育てていたのですが、なんとなくはてなブログに復帰することを検討しているので、こっちに書いてみる） なぜフレームワークを作らないのか フレームワークの定義は正直いまだに厳密にはよくわかっていませんが、ここでは「その仕組みの上に乗っかってプロダクトコードが書かれるような基盤となる仕組み」全般をフレームワークと呼びます。（Reactは自称libraryですが、このブログではあれはフレームワーク扱いしたい、くらいのふわっとした独自定義でいきます。そもそもグラデーションなので、あまり厳密なものでもありません。） なぜ僕がフレームワークを作らないようにしているかというと、すごく単純な話で、自分でフレームワ
In the early days of high-performance computing, the major tech companies of the day each invested heavily in developing their own closed source versions of Unix. It was hard to imagine at the time that any other approach could develop such advanced software. Eventually though, open source Linux gained popularity – initially because it allowed developers to modify its code however they wanted and
はじめに この記事はTypeScript初心者に向けて基本を一通りハンズオン形式で学べる教材となっています。 世の中にTypeScriptの教材は多くありますが、どれも文法ごとに文法紹介するためのコードを教えているだけで、学んだあと実際どのように自分のアプリに適応すべきなのかイメージがわきません。 これがTypeScriptの難しいところだと思っています。 このハンズオンではJavaScriptのアプリケーションをTypeScriptに移行しながら学んだことを活かしていくことで実践的に学ぶことが可能です。 ハンズオン動画と一緒に活用 こちらの記事をさらに活用できるハンズオン動画を用意していますのでご活用ください JavaScriptの怖い振る舞い JavaScriptはタイプセーフ機能が存在しません。 タイプセーフとは、コンパイラやランタイムがデータ型をチェックし、型が互換性のない操作に使
Remix入門【はじめからそうやって教えてくれればいいのに！】
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Remixとは？ Remix とは、公式サイト によると、React ベースのフルスタックの Web フレームワーク のことです。 Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. （訳）Remixはフルスタックのウェブフレームワークで、ユーザーインターフェイスに集中し、ウェブスタンダ
State of React 2023
React has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server
はじめに Github Copilotって便利ですよね。コードを一部分だけ打っても、内容を予測して続きを予測して補完してくれます。 マークダウンファイル内では文字列についても使えます。 VScode + Github Copilotっぽいエディタを自分でも作成してみました。 技術的な学びについて解説を加えていきます。 なお、Claudeを使いながら作成しているため不自然なコードが含まれている可能性があります。ご注意ください。 作ったもの 文字を入力すると、予測した続きの文章がグレーで表示されます。Tabキーを押すと確定します。 解説している技術的要素 useRef 日本語IMEの入力状態判定 デバウンス処理 useEffectのクリーンアップ関数 イベントリスナー（onKeyDown）を使用したキーボード入力の処理 カーソル位置の移動 コード コード import { NextRespon
何を作ったのか お見せしたほうが早いかと。 デモページ （マウスもしくはApple Pencilといったスタイラスペンで各マスに文字を書き、右上の赤いボタンを押す） 結構すごくないですか？ こんな感じで、映画「千と千尋の神隠し」の千尋が湯婆婆に名前を捉えるシーンを再現してみました。作ってみて、なかなかおもしろかったので記事にしてみました。 どうやって作っているか これがどのように作られているか、簡単に解説します。 技術構成 本アプリは以下のライブラリを使用しています。 Next.js ・・・Webアプリのフレームワークです tailwindcss ・・・Webアプリのcssライブラリです Three.js ・・・3d描画ライブラリです。 react three fiber・・・reactのthree.jsライブラリです。 作り方 実際の作り方について簡単に述べます。 初期設定 Next.j
エンジニアからアーキテクトを目指す方や、アーキテクトとして仕事を始めたばかりの方は、アーキテクトの仕事やアーキテクチャ設計のトレンド、さらにどんなスキルが必要なのかをまず理解しておくことが大切です。今回は長年アーキテクトとして活躍されている米久保剛さんの著書『アーキテクトの教科書』（翔泳社）から、アーキテクトの定義や職務、アーキテクチャ設計のトレンド推移、そして米久保さんが考えるアーキテクトとして備えておくべき能力と考え方について解説します。 本記事は『アーキテクトの教科書 価値を生むソフトウェアのアーキテクチャ構築』の「第1章 アーキテクトの仕事」から一部を抜粋したものです。掲載にあたって編集しています。 アーキテクトの定義 複雑な構造物であるソフトウェアにおいて非常に重要なアーキテクチャを適切に設計するには、ソフトウェア開発業務に関わる幅広い知識や経験が必要とされます。そのため、アーキ
【入社エントリ】フロントエンドからバックエンドへ、さらなる高みを目指すために入社しました！🔥 - PLEX Product Team Blog
はじめまして、プレックスの高岡と申します。 2024年4月に株式会社プレックス（以下、プレックス）にエンジニアとして入社しました。 今回、入社して4ヶ月程経ちましたので、入社経緯や入社してからの感じていることをまとめておきたいと思います。 一人でも多くの方にプレックスを知ってもらえると嬉しいです。 自己紹介 プレックスへ入社した理由 入社して感じたところ やっぱり求められる基準が高い 他のエンジニアチーム・メンバーの色や個性が多様でおもしろい ビジネスサイドにも魅力的なメンバーが多い 最後に 次回予告 自己紹介 現在25歳で社会人4年目になります。 新卒では、地元の受託開発の会社に就職しました。 大学時代に海外留学をしていて、新卒で就職するつもりはなく2,3年は海外で暮らそうと考えていました。 ただコロナ禍の影響もあり帰国することを決めたので、地元で就活を行い、その会社に新卒入社いたしまし
はじめに reactでtodoアプリを作成しているのですが、アロー関数の省略記法についての理解が不足していると感じたので今回の記事を書いてみます。今回は省略記法に絞った記事のためアロー関数とは何かについては書いておりませんのでよろしくお願いします。また、もし間違いなどがあればコメント頂けますと私の勉強になりますのでよろしくお願いします。 省略記法の書き方 引数が1つだけの時はカッコを省略できる //通常の書き方 const hello = (word) => { return word } console.log(hello("こんにちは") //出力結果 こんにちは
Storybook 8.2
Storybook is the component workshop behind the world’s top design systems (Carbon, Polaris, Fluent, Lightning, etc.). Accordingly, it is often associated with building and documenting atomic components for reuse. But UI components come in many sizes and shapes. For teams at Faire, Yoobic, and Monday.com, Storybook is the tool of choice for “product UI” such as shopping carts, dashboards, chat widg
生成 AI や Gemini の基本について学べる Generative AI Study Jam 開催のお知らせ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
オープンソースAIがなぜ重要か — Llama 3.1リリースに寄せてマーク・ザッカーバーグが情熱的な投稿、歴史的な書簡となるか
7月24日、MetaはLlama 3.1を公開した。 それに合わせる形で、Meta社のCEO マーク・ザッカーバーグが、オープンソースAIの意義と重要性、そして未来像について語る書簡を発表した。 もしかすると、これがオープンソースAIの歴史的な転換点における重要な書簡と見なされる可能性もあると思い、以下に、その意訳を掲載する（※本文章は、元の文章からChatGPTによる出力と人手による編集を経て制作した）。 もし翻訳や解釈のミスがあったら、コメント欄でご指摘願いたい。 Open Source AI Is the Path Forward (オープンソースAIは、前進への道である） 2024年7月23日 マーク・ザッカーバーグ、創設者兼CEO ハイパフォーマンスコンピューティングの黎明期において、主要なテクノロジー企業はそれぞれ独自のクローズドソース版のUnixを開発することに多大な投資を行
この話の概要 大阪公立大学 工学部 情報工学科3年のボクが大学1年の夏に作った非公式シラバス「裏バス」が「大阪公立大学 授業カタログ」として、omu.ac.jp ドメイン下で公開することになった経緯をお話します。 このようなサイトです。 👇ぜひアクセスしてみてください。 https://catalog.sp.omu.ac.jp 制作した動機と既存シラバスの問題点 既存のシラバスには以下のような問題がありました。 検索が遅い 授業ごとに固有のリンクがないので友人などに共有することができない 戻るボタンや再読み込みボタンすら使えない それを解決するために、スクレイピングしてシラバスデータを抽出して、独自サイトで公開すればいいのでは！？と考えたのが始まりです。そもそもシラバス自体は公開されているので、大きな問題はなさそうと考えました。 ▲ とりあえず作って公開 Webの知識やスクレイピングでき
※このブログはヌーラボ真夏のブログリレー2024の6日目の記事です。 こんにちは！ウェブサイト課の松永です。 最近のウェブサイト課の活動として大きなものはNulab Developer APIサイトのリデザインとJBUG（ジェイバグ）サイトの新規開発があり、2024年6月にいずれも公開することができました。この記事では、フロントエンドエンジニアの視点でJBUGサイトの開発について共有できたらと思います。 なぜ作ったか JBUGはJapan Backlog User Groupの略で、Backlogユーザーによるコミュニティです。これまではJBUGに関する情報を紹介するページが存在せず、ヌーラボがJBUGについて情報発信をするときはブログやSNSに限られていました。もっと多くの人にわかりやすくJBUGの活動をお届けし、かつJBUGの理念や目的を一貫性のあるメッセージでお伝えすることで、JBU
G-gen 又吉です。当記事では、2024年6月に GA した Vertex AI Search の最新検索方式である Answer API について紹介します。 はじめに RAG とは Vertex AI Search Answer API 概要 メリット クエリフェーズ クエリ言い換え クエリ簡素化 マルチステップ推論 クエリ分類 検索フェーズ 回答フェーズ フォローアップ検索（マルチターン検索） 概要 セッション サンプルコード コード Tips クエリ言い換えの制御 フォローアップ検索 はじめに RAG とは RAG とは、Retrieval Augmented Generation の略称であり、生成 AI によるテキスト生成に、外部データソースを用いて情報の根拠付けを行うアーキテクチャのことです。 本来生成 AI が持ち得ない情報を与えることで、組織固有の情報を加味したテキスト
「コンテキストの共通化」を加速させるために1年以上モブプロを続けた結果 - Cake.jp Product Blog
こんにちは、Cake.jp技術部の中村です。 Cake.jp技術部では、週に2回モブプログラミング(以下、モブプロ)を実施しています。導入してから1年以上経過して、導入してよかったこと、課題について紹介させていただきます。 1. モブプロとは Cake.jpでは、1つの画面を3人以上のエンジニアで共有し、コーディングを行うことをモブプロとしています。一般的なモブプロと異なり、コーディングを進めていく「ドライバー」とそれを見守り、意見をいう「メンバー」に分かれて行っています。(一般的なモブプログラミングでは、「ナビゲーター」の指示の元「ドライバー」がコーディングを行っていくと思いますが、Cake.jpでは「ナビゲーター」不在で行っています。) 全エンジニアがフルリモートで業務を行っているので、Slackのハドルミーティングを使って画面を共有しています。(ハドルミーティングの画面の拡大/縮小機
We finally know why some people got COVID while others didn’t
Throughout the pandemic, one of the key questions on everyone’s mind was why some people avoided getting COVID, while others caught the virus multiple times. Through a collaboration between University College London, the Wellcome Sanger Institute and Imperial College London in the UK, we set out to answer this question using the world’s first controlled “challenge trial” for COVID – where voluntee
生存戦略：プロ作業員とチームメンバー - Qiita
はじめに 今回は、IT業界における生存戦略をプロジェクトのヒエラルキーから雑に考察します。 まずは、考察にあたってプロジェクトに参画する人員のヒエラルキーを図示します。 ヒエラルキーというとピラミッド状に▲で書かれることが多いですが、実情を鑑みるとそのようには書けなそうでした。1 リーダーやPMのフォントサイズを小さくして、Opacity (不透明度) を下げて見えにくくしているのは、リアルさの追求（？）です。2 サブリーダーもいたりいなかったり、リーダー候補として抜擢されるも勝手に期待された動き方が何か分からず結局はメンバーとしての動きをしました、というケースもありそうなので微妙な表現にしてみました。 IT生存戦略 生存戦略は生存率を上げるための戦略です。 シンプルにヒエラルキーの上にいけば行くほど生存率は上がるのですが、フォントサイズが小さくなったり不透明度が下がって霞んで見えたりと最
JSer.info #701 - TypeScript 5.6 Beta がリリースされました。 Announcing TypeScript 5.6 Beta - TypeScript ESLintのno-constant-binary-expressionと似たチェックを行い、常にtrue/nullishとなる間違った書き方をコンパイルエラーにする変更が含まれています。 Interesting bugs caught by no-constant-binary-expression - ESLint - Pluggable JavaScript Linter Iterator Helperのサポート、ES2022のArbitrary module namespace identifier namesをサポート、--noUncheckedSideEffectImportsフラグの追加も行わ
Googleカレンダーが超便利！会議室の空き状況を一覧表示する方法 - BIGLOBE Style ｜ BIGLOBEの「はたらく人」と「トガッた技術」
Googleカレンダーで会議室を管理している組織向けに、自分のカレンダーに会議室を追加するURLの作り方と、空き状況を表示するウェブアプリの公開方法を紹介します。 会議室のIDをスプレッドシートに表示する トラブルシューティング Googleカレンダーに会議室の空き状況を表示する ウェブアプリに会議室の空き状況を表示する Apps Scriptを使った業務改善 開発部門（プロダクト技術本部）の高玉です。 BIGLOBEではオフィスツールにGoogle Workspaceを利用しています。特にGoogleカレンダーは便利に使っていて、Googleカレンダー上で会議室を予約することもできます。予定を作り開始時間と終了時間を指定すれば、空いている会議室を簡単に割り当てられます。 support.google.com ただ「予定を決めてから、空き会議室を選ぶ」というやり方とは逆に、会議室の空き状況
プロジェクトでページネーションまわりの改修を担当した時に「Google 検索セントラル」やその他の記事を読んで、知ったことや考えたことをまとめてみました。 「どのようなライブラリを使うおうか」と調べ始める前に、知っておくべき前提知識を収集しておくのは大切だなと気づいたので、この記事がその一助となれば嬉しいです。 ページネーションのUI 最初と最後のリンクを常に表示する 各ページに最初のページへ戻るリンクを設定し、Google に対して一連のページの始点を示すこともおすすめします。これにより、ページ列中で最初のページが他のページよりもリンク先ページとして適しているというヒントを Google に与えることができます。 ページネーション、無限スクロールや「もっと見る」ボタン | Google 検索セントラル | ドキュメント | Google for Developers UIに関して
フロントエンドに DDD を導入してみた - Qiita
LaBBaseプロダクト Advent Calendar 2022 の17日目担当、プロダクト部でエンジニアをしている @sho-kanamaru です！ 今年は社内で DDD が大流行。 ほとんどのメンバーが DDD を触るのは初めてだったので、勉強会や輪読会をたくさん実施しました。 弊社が運営しているスカウト型の就活サービス「LabBase就職」のコア機能であるプロフィールを0から作り直すプロジェクトに配属されたので、良い機会だなと思いフロントエンドに DDD を導入してみました！ 今回は、どのように導入したか、導入してみてわかったこと、メリット、デメリットなどをまとめたいと思います。 ディレクトリ構成 LabBase就職のフロントエンドは React ＋ TypeScript で構成されているのですが、ディレクトリ構成は以下のようになっています。 レイヤードアーキテクチャで構成されて
Lambda@Edgeを使うとき、デフォルトで作成されるIAMロールは権限が足りないので注意｜TechRacho by BPS株式会社
baba 高校時代から趣味でプログラミングを始め，そのままずっとコードを書いています。2010年SFC卒業，在学中にBPS入社。ゲームなどの趣味プログラミング，Webシステム，スマホアプリ，超縦書エンジン(C++/Chromium)，Webフロントエンド(TypeScript/React)などを主にやってきました。最近は自社製品(超シリーズ，くんシリーズ)の開発に関わるお仕事が中心です。管理業務もしますが，ゆとりプログラマーなので気楽にPCに向かっているのが好きです。 情報処理技術者試験(16区分 + 情報処理安全確保支援士試験)，技術士(情報工学部門)，中小企業診断士、Ruby Programmer Gold，AWS Certified Solutions Architect - Professional，日商簿記2級，漢検準1級。情報処理技術者試験 試験委員(2021-)。 babaの
てんてんてん(..., 3点リーダー)をいい感じにしたい！ フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUI こちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？ React, MUIを用いて.tsxに実装する場合の一例を残しておきます。 MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！ 追記：chakraにはnoOfLinesというpropsがあると同僚エンジニアが教えてくれました！ /** * テキストを指定行数で省略表示するコンポーネント * @param param0 lineLength: 表示行数 * @returns T
プログラミングでよく使う「ライブラリ」という言葉を聞いたことがあるだろうか。ライブラリは、特定の機能を実現するための道具箱のようなものだ。ここでは、ライブラリが何かを中学生でもわかるように説明する。 ライブラリの基本 ライブラリは、プログラムを作るときに使う便利な機能が集まったもの。例えば、計算を簡単にする機能や、インターネットからデータを取得する機能などが含まれている。 ライブラリの主な特徴 必要なときに使う: ライブラリは、自分が必要なときに使うことができる。例えば、計算が必要なときだけ計算ライブラリを使う。 特定の機能に特化: ライブラリは、特定の機能を簡単に使えるようにするために作られている。例えば、ゲームを作るときのグラフィック表示や、音楽を再生するための機能など。 簡単に使える: ライブラリを使うことで、自分で一からその機能を作らなくても済むので、簡単にプログラムを作ることがで
GoサーバーでReactを配信
今回は簡易的にReactのビルドした静的コンテンツを配信する手順を紹介します。 GoとReactの入ったプロジェクトの作り方は前回の記事を参考にしてください! Bun + Go の開発コンテナ Reactのプロジェクトをビルドする 今回のプロジェクトでは下記のようなディレクトリ構造です。 GoサーバでReactのプロジェクトを配信するには静的コンテンツである必要があります。 なのでReactプロジェクトはビルドできる状態にする必要があります。 そして、GoサーバにGetメソッドでコンテンツを取得するという手順です。 ビルドコマンド(bun) -> bun run build Goサーバーを作る 問題なくReact側がビルド出来たら配信するためのGoサーバーを構築します。 下記コードはfrontディレクトリのdist(静的コンテンツ)を配信するためだけのコードです。 ※ルーティングするのにc
要約 背景 WebAssembly (WASM) とは？ Rust言語とは？ サンプルアプリ概要 LBP特徴量計算をRustで実装 フロントエンド環境構築 バックエンド環境構築 スキーマ定義 Rust実装 WASMバイナリの生成 TypeScript実装 実行結果 まとめ メンバー募集しています！ おまけ こんにちは！美味しいタコスを食べることを専門としているプロダクト開発部エンジニアの井上です。 要約 WebAssembly（WASM）、Rustは近年注目されている技術であり、これを利用することでWebアプリケーション上で高速な画像処理を実現できるよ。 我々も画像前処理を行っていたWindowsデスクトップアプリケーションを、WebAssembly+Rustを使用してWebアプリケーションに置き換えたよ。 Rust言語で実装した画像処理をWASMにコンパイル、そしてWebアプリケーション
はじめに JavaScript やそのフレームワークを使用して Web アプリケーションを開発する際、イベントハンドラの命名規則について悩むことはありませんか？私は、onClick、handleClick、onSubmit、handleSubmit など、イベントハンドラ名について悩むことが多々ありました。 React の公式ドキュメントで、どのようにイベントハンドラ名を命名するべきかについて記載がありましたので、共有します。 結論：イベントハンドラ名は handle[Event]とする React の公式ドキュメントには、下記のように記載があります。 慣習的に、イベントハンドラは handle の後ろにイベントの名称をつなげた名前にすることが一般的です。onClick={handleClick}、onMouseEnter={handleMouseEnter} などがよく見られます。 この
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【調査結果】フロントエンドエンジニアの平均年収！最も稼げるのは40代？
リーナー、Nuxt.jsからNext.jsに乗り換えたってよ - リーナー開発者ブログ
オリンピックの射撃競技に出場しているキム・イェジ選手がかっこよすぎてもう漫画
HTML用ERBファイルのフォーマットを統一した話 - Sansan Tech Blog
フレームワークを作れる人に憧れながら、ユーティリティを作る - 右上↗
Open Source AI Is the Path Forward | Meta
【完全版】これ1本でTypeScriptの基本をマスターできる！ - Qiita
Github CopilotみたいなAIアシスト日記エディターを作る
コードで蘇る「千と千尋の神隠し」：プログラミングによる名前の浮かび上がり演出 - Qiita
アーキテクトを目指すなら知っておきたいアーキテクチャ設計のトレンド変遷、そして必要な能力と考え方
アロー関数の省略記法について - Qiita
非公式シラバス作ってたら大学に雇用されて公認サイトになった話
Astroを利用したJBUGサイトの開発について #ヌーラボ真夏のブログリレー2024 | 株式会社ヌーラボ(Nulab inc.)
Vertex AI Searchの新方式Answer APIを解説 - G-gen Tech Blog
2024-07-29のJS: TypeScript 5.6 Beta、Node.jsの実験的なTypeScriptサポート、State of React 2023
「Google 検索セントラル」から学ぶ、ページネーションを実装する前に検討しておくこと
【React/MUI/CSS】複数行かつ溢れたら3 点リーダーを付けれるコンポーネントを作ろう！
ライブラリとは何か？中学生でもわかる解説 | リモマガ
Rust+WebAssemblyを使ったWebアプリでの高速画像処理入門 - アダコテック技術ブログ
イベントハンドラ名はonClick？handleClick？