hotwire_or_react
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
Renovateを使ってフロントエンドのバージョンアップを改善した話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。Renovateを使ってフロントエンドのパッケージやライブラリのバージョンアップを改善したことについて紹介します。 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 このリポジトリは作成されてから2年ほどしか経っておらず、使っているライブラリも比較的新しいため、今までバージョンアップの仕組みを特に整備していませんでした。 ただフロントエンドのライブラリはバージョンアップの頻度が多く、異なるライブラリ間でバージョンの依存関係があることもあり、将来のことを考えればライブラリのバージョンを更新する仕組みを作ることはほぼ必須でした。 また、monorepoであるためライブラリのバージョンを大きくあげようとした際の対応コストも大きく、最新との差が小さいうちに細
一躍話題「鍵垢しかないSNS」。天才たちに囲まれてしまった筑波大生の個人開発奮闘記【フォーカス】 レバテックラボ（レバテックLAB）
一躍話題「鍵垢しかないSNS」。天才たちに囲まれてしまった筑波大生の個人開発奮闘記【フォーカス】 2024年8月30日 筑波大学 情報学群 情報科学類 2年 n4mlz（ネームレス） 小学生時代にビジュアルプログラミング言語「Scratch」に熱中し、情報技術者を志すようになる。古典的AIを入口として機械学習にも興味を抱き、高校進学後は本格的なテキストプログラミング言語学習に取り組む。現在は情報科学について体系的に学びつつ、フリーランスでのWeb制作業務受託や個人開発に勤しんでいる。名前は、良いハンドルネーム案が思いつかず、ひとまず無名を意味するNamelessにしたのがきっかけ。あまり気に入ってはおらず、いずれ改名したいと考えている。 X GitHub snooze（n4mlzさんが個人開発したSNS） 2024年5月、「鍵垢しかないSNS」をコンセプトとする「snooze」というサービ
2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト | The WebStorm Blog
JetBrains は過去 7 年間にわたり、変化し続ける開発者の状況と使用されている主要テクノロジーを関連付けるために開発者エコシステムアンケートを実施してきました。 その結果は生データと分析レポートの両方の形式でコミュニティと共有され、すべての関係者がこのエコシステムの状況を把握できるようになっています。 本日は今年の調査結果を JavaScript と TypeScript に焦点を当てて確認したいと思います。 アンケートの概要 2023 年の開発者エコシステムアンケートでは、世界中の 26,348 人の開発者からインサイトを収集しました。 このアンケートの結果を自分で確認し、プログラミング言語やツール、テクノロジーから回答者に関する有用な情報や豆情報に至るまで広範なトピックを網羅した情報を入手できます。 私たちは開発者独特のライフスタイルにも注目し、その情熱や興味を明らかにする予定
新人プログラマにとって「タイプミスなのか」「型が違うのか」典型的なエラーの種類やデバッグの仕方を知ってるだけで、劇的に開発が速くなる話
おばあちゃんのプログラミング教室（ばあプロ）As A Service @Pythonist19 12年間の開発と5年間の新人教育の経験を活かしやさしく解説。初学者向けにWeb制作の歩き方公開。VSCode。Python, PHP, Perl,モダンJS,React, ラズパイ,ML。Djangoが好き。MBAほるだぁ。組込,Svelte。AI小説（baapuro.com/story/one/） baapuro.com おばあちゃんのプログラミング教室（ばあプロ）As A Service @Pythonist19 タイプミスなのか。型が違うのか。典型的なエラーの種類やデバッグの仕方を知ってるだけで、劇的に開発が速くなるので、新人以外にも超重要じゃと思ったのう👵 pic.x.com/eok6s7mogo
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック 2024年6月3日 フロントエンドエンジニア うひょ TypeScriptとReactが得意なフロントエンドエンジニア。株式会社カオナビ所属。ウェブ上の技術記事や雑誌を通じて技術的な情報発信を続けている。実はJavaScript歴19年。 著書『プロを目指す人のためのTypeScript入門』（技術評論社） X（@uhyo_） 個人サイト（uhy.ooo） 皆さんこんにちは。前回は、私の技術発信の遍歴をご紹介するとともに、私の考える、技術発信に必要な能力や考え方をご紹介しました。 今回は、より具体的なテクニックやその背景をご紹介します。すでに技術発信をしている方や、これからやろうと思っている方はぜひ参考にしてみてください。文章のテクニックと、登壇（登壇資料）のテクニックをあわせてご紹介します。 keyb
WordPressの小ネタ集 - Qiita
この記事は、「CMS Advent Calendar 2023」の21日目の記事で、WordPress に関してもしかするとあまり知られていないかもしれない事を、とりとめもなく独断でまとめたものです。 特に、ここ数年 WordPress に触れておらず、今の WordPress はどうなっているのか? という事を知りたい方向けの情報も少し盛り込んでいます。 クラシックエディターはいつまで使えますか ? Classic Editor プラグインの説明には、この記事を書いている時点で「Classic Editor は公式な WordPress プラグインであり、少なくとも2024年まで、または必要なくなるまでの間、完全にサポート・保守されます。」と記載されています。 それでは2025年以降、クラシックエディターが使えなくなる可能性があるのでしょうか ? 自分は、クラシックエディターは残り続ける
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感 | MEDLEY Developer Portal
2024-07-23Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感こんにちは、医療プラットフォーム本部・プロダクト開発室・第1開発グループ所属の加藤です。 オンライン診療・オンライン服薬指導アプリ「CLINICS」の開発を担当しています。 今回は CLINICS で採用している Next.js と Server-side Rendering (SSR) についてお話ししたいと思います。 Next.js は昨今注目を集めている React ベースの Web フレームワークです。 これから Web フロントエンドの開発を始めるにあたって採用を検討している方も多いのではないでしょうか。 Next.js といえば React コンポーネントをサーバー上で実行して HTML を返す SSR に対応しているのが大きな特徴です。 SSR
1年間CTOとEMを兼任して考えたこと
はじめに 昨年2023年は、株式会社NoSchoolのCTOとして、オンライン家庭教師マナリンク（https://manalink.jp/ ）に関わる開発、エンジニアリングマネージャー、採用、UIデザイン、運用保守、PMなどを兼任していました。 本記事では、エンジニアリングマネージャー（以下EM）を兼任していて考えたことをまとめていきます。 シリーズA前後のスタートアップという特異な状況かつ、マネジメントしたメンバーも3人と小規模なためあまり参考になる知見か分かりませんが、現時点での自分の考え方の備忘録的な意味も込めてまとめておきます。 考えたことまとめ それでは早速矢継ぎ早に考えたことをまとめていきます。 テキストによる情報量の欠落を想像するようになった 直接会話することと、文字でやり取りすることを比べると、つくづくテキストって情報量が欠落するなぁと思います。ソースレビューのコメント1つ
「エンジニアDB」というサービスを開発しました！【Next.js / Rails / AWS / Terraform / Docker / GitHub Actions】 - Qiita
3.インフラ（全体構成）について ここから技術的なことについて話していきます。 まず大前提として、プロジェクトの全体構成は、Happiness Chain の卒業課題の条件に基づいて決めれらていました。これらの条件には以下が含まれます Rails APIモード / Reactで完全SPAのポートフォリオを作る。 本番環境と開発環境にDockerを使う。 本番環境にはECS Fargateを使う。 GitHub Actionsを使ってAWSに自動デプロイする。 Terraformでインフラをコード化する。 なので、これに倣って実装しています。 アーキテクチャの全体像 フロントエンドはVercelにデプロイして、バックエンドはAWSのECSにデプロイしています。 ブランチ運用は、GitHub flowを採用しています。 プルリク時にテストが走り、mainブランチにマージされるとデプロイされる感
オープンソースのRAG UI「kotaemon」を試す
2024/09/03追記 ちょっとX経由で見に来ていただいた方が増えているようなのであらかじめ注意。 kotaemonで普通のRAGをやる場合は、OpenAI/Ollamaどちらの場合でも多分問題なくできるんじゃないかと思います。 kotaemonでGraphRAGをやる場合（多分ここに期待している人が多いと推測）は、以下の注意が必要です。 OpenAIならGraphRAGが動作しますが、モデルがgpt-4-turbo限定になると思います、つまりコストが高いです OllamaでGraphRAGは現状の実装だとちょっと難しそうです 公式にIssue上げてます（どっちかというとGraphRAG側の問題かなと思います）ので、kotaemonのGraphRAG対応については今後のリリースに期待するほうが良いかなと個人的には思います。 ここで知った。 GitHubレポジトリ kotaemon ドキュ
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
【技術Tips】私がRuby on Railsを選んだ理由と学習の参考になるOSSアプリケーション - TECH Street (テックストリート)
はじめに こんにちは、オシロ株式会社でリードエンジニアとして働いているにっく（webuilder240）と申します。オシロでは自社プロダクトとしてコミュニティ専用オウンドプラットフォーム「OSIRO」を提供していますが、私は2015年の開発開始から一人目エンジニアとして携わり、技術選定の意思決定を行ってきました。 今回は、そのなかでもRuby on Railsを選択した理由、 その学習に役立つOSSアプリケーションについて紹介したいと思います。この記事を読むことで、Railsの選定理由や実践的な学習方法について理解を深めていただければと思います。 はじめに Ruby on Railsの選択理由 開発に必要な便利機能がはじめからそろっていた 可読性・コードの美しさ 選び続けている理由 RailsのコードリーディングにおすすめなOSS Mastodon forem Writebook 最後に
はじめに 2022 年 1 月から、趣味で PC 向けの将棋アプリを開発しました。その中で取り組んだことや学んだことについて簡単にまとめます。 作ったもの ShogiHome 背景 最近ではスマホやタブレットでも将棋の対局や研究ができるようになりましたが、本格的に将棋の勉強や研究をするには必ずしも十分ではなく、特に将棋 AI を動す上で PC の処理能力やカスタマイズ性は有用です。 2010 年あたりからオープンソースの将棋 AI が増えましたが、その多くは GUI や通信対局機能を備えておらず GUI のアプリケーションと組み合わせて使う必要があります。AI と GUI がやりとりするための USI という共通仕様があり、 USI に対応しているものどうしなら任意の GUI と AI を連携させることが可能です。 USI 対応の GUI は何種類か存在しており、かなり良く作り込まれたアプ
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
WSAは、米Amazonとの提携により、Microsoft Store経由でAmazonアプリストアに登録されているAndroidアプリをPCにダウンロードできるようにするものだ。 3月5日より前にWindows 11上のAmazonアプリストアからAndroidアプリをインストールしたユーザーは、終了日まではそのアプリを利用できる。 Amazonアプリストア自体は存続する。AmazonアプリストアにAndroidアプリを登録している開発者が何らかの作業をする必要はなく、アプリはWSAと共に終了日に自動的に廃止される。 Microsoftは、WSAの終了の理由については特に説明していない。WSAで利用できるAndroidアプリはAmazonアプリストアに登録されているもの（と一部のゲームメーカーのゲーム）のみで、米Googleの純正アプリなどは利用できないままで、あまり利用されていなかった
C#はやめとけと言われるのはなぜ？C#エンジニアが人気な理由とキャリアアップの方法を解説 | エンジニアスタイル
はじめまして、エンジニアスタイル編集部です！ コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！ 本記事が、皆様の参考になれば幸いです。 経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。C#の案件の一例と、案件一覧を以下からご覧いただけますのであわせてご確認ください。 C#の案件 はじめに Microsoftが開発した、オブジェクト指向のプログラミング言語であるC#（シーシャープ）。プログラミング言語の人気をランキング形式で発表しているTIOBE Indexで、C#は2024年5月時点でJavaScriptやGoを抑えて5位にランクインしています。 2002年にリリースさ
Rewrite it in Rails
01 Nov, 2024 In 2022 I started building an application for creating Customs declarations. After evaluating some options and writing code in various programming languages and frameworks such as .NET/F#, Go, Rust, React, I eventually decided to write it in Ruby on Rails. Why? Because I was already familiar with Rails and because of that I could literally go 10x faster than I was with any of the afor
Honoの今の状況 - ゆーすけべー日記
この記事は2023 JSConf JPで発表したHono v3 and v4を元に11月17日に書いたCloudflare社内のブログ記事「Current Status of Hono」を日本語に訳した記事です。 Honoの「Initial commit」からおおよそ2年が経ちました。このプロジェクトは2021年の12月15日に始まりました。 当初、私はCloudflare WorkersのみのためにHonoを作りました。itty-routerはよかったものの、私が欲しかった多くの機能が欠落していました。また、私は勉強のためにTrie木構造のルーターを作りたかったのです。それがHonoの生まれた理由です。 それから多くのことが起こりました。私がCloudflareにいるのもHonoのおかがです！HonoはCloudflare開発者コミュニティで認知されていきました。Honoの人気が出ること
はじめに 自分が何者なのかを示すことの重要性が高まっている こんにちは、Watanabe Jin (@Sicut_study)です。 最近フリーランスでは大きな問題が起きている フリーランスとして受け入れをしたが、いきなり「飛んで消えてしまう」などトラブルが相次いで発生している 最近はフリーランスをNGとする企業も増えてきている では、なぜフリーランスをNGとしているのか これには大きく2つあるように思える フリーランスのスキルが低いことが目立っている フリーランスを信じることが難しくなっている スキル不足のフリーランスが増えた背景には、フリーランス1000万円といった過大広告によって経験があまりない状態からフリーランスになってしまった人があふれていること フリーランスの信用をするための材料(例えば法人化している、知名度があるなど)がないことからいつ無責任になるかわからない このような理由
使ってみたい技術を試せる、汚いコードを書くとどんな目に遭うかわかる… 個人開発で得られる“6つの利益” 個人開発がおすすめな理由 名人氏の自己紹介 名人氏：タイトルは「個人開発がおすすめな理由」というところで、株式会社NoSchoolでCTOをしている名人という者ですが、発表します。お願いします。 目次です。自己紹介と、私が個人開発しているツールを話したあとに、おすすめな理由を6つほど用意してきたので、それを話す感じで発表をしていきます。 最初に軽めに自己紹介をします。名人というハンドルネームで「Twitter（現X）」や「Zenn」で記事を書いているので、良かったら見てもらえたらうれしいです。ふだんはオンライン家庭教師「マナリンク」という家庭教師のサービスを開発している株式会社NoSchoolでCTOをしています。個人開発で「テストメーカー」というサービスを作っています。 好きな言語はT
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。 はじめに 「スクラムマスターがいることでどんな利益があるの？」 スクラムマスターをやっていると時々この質問を受けることがあります。 スクラムを始めたばかりのチームや組織はもちろん、広報BLOGに「専任のスクラムマスターをおくことにこだわってます。」とCTOが書いているような企業の中にいても こうした問いかけを受ける事があります。 この記事では私が実際にこの問いかけを受けてから、ずーと考えていたことを、なるべく整理してまとめています。それでも雑な文章になっていること、そして個人的な見解でしかない事はご承知おき頂けますと幸いです。 この記事の概要 この記事をまとめるこんな感じです！ 「スクラムマスターがいる事でどんな利益になる？」と言われたら信頼されていな
初めて企業のインターンに参加しました。DMMさんのGo言語5daysのインターンです。今回はこのインターンの内容、またGo言語でのAPI開発で学んだTipsを中心に記事を書きます。 温かい目で見てくださると嬉しいです。記事の内容に誤りがあった場合は、いつでもご指摘ください 🙇♂️ インターン概要 今回のインターンは8月5日から8月9日の5日間にわたって行われました。最終日はオフィス開催で、4日間はオンラインでの開催でした。 初日と2日目は主にライブラリの使い方を学び、残りの3日間はハンズオン でAPIのエンドポイントを実装しました。このインターンの教材はDMMさんの新卒バックエンド研修の課題として使用されているため、難易度はとても高かったです。 私はGo言語を使用した経験がありますが、本で独学という勉強の仕方だったので、少し古い情報で学んでいたこともあり、 今回最近のバージョンに追加さ
シンプルなUIライブラリを使おう2023 - Qiita
皆さんこんにちは。昨今の技術選定においては、「シンプルさ」が重視されることが良くあります。 特に「イージー VS シンプル」という対立軸が持ち出されることが多く、規模の大きなアプリケーションを作る際には「シンプル」側の技術を選定するほうが有利だという論調がよく見られます。 本当にそうなのか、あるいはそもそも「シンプル」とはどういう意味なのかについては皆さんそれぞれの考えがあるでしょうから、この記事では深入りしません。 代わりに、実際どのような技術がシンプルなのかが気になるところです。そこで、今回は筆者が比較的得意なWebフロントエンドのUIライブラリの領域において、どのライブラリがシンプルなのか調査してみました。 React 先日プロジェクトでReactを使ってみたら、本当にシンプルな実装でやりたいことが全部できちゃうというか、すぐに画面に反映できて開発効率的にも良いなと感じました。 フロ
【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに PlaywrightはMicrosoftが開発・メンテナンスしているCypress、Puppeteerなどと同じE2E自動テストフレームワークとして有名です。 playwright.dev Chromium、Edge、Firefoxなどの複数のブラウザに対応しており、全てに単一のAPIで簡単にテストの実装が可能になっています。 目玉機能
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
これまでメインで使うAIチャットをChatGPT Plus、Claude Proと順番に乗り換えてきました。なので今月はGoogleのGemini Advancedを1ヶ月間使ってみたので、その感想を書いてみます。 gemini.google Gemini Advancedの特徴 Gemini Advancedにすると現最上位モデルのGemini 1.5 Proが使えます。Gemini 1.5 Proは、Googleによると既存のモデルよりコーディング、論理的推論、ニュアンスの異なる指示に従うことなどの複雑なタスクを処理する能力が大幅に向上しているとされています。また100万トークンのコンテキスト・ウィンドウ（Large Context Window）で長文が読解できます*1。 無償版は画像のみアップロード可能ですが、Gemini AdvancedではテキストやPDFも対応しています。コン
こんにちは！アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAでは主にバックエンドにRails+graphql-rubyやKotlin+DGS、WebフロントエンドにTypeScriptとReactを採用していて、私が参加するチームでの仕事もそれらを触る事が多いのですが今回はそこでコードレビューをする際に気にしている「べからず」をティア別に見ていきましょう。 特に理由なくlintを無視してはいけない アルダグラムでは利用エディタの規定や制限はありませんが、Webフロントエンド開発で一番利用者が多いのはVSCodeでextensions.jsonにlint表示等のために必要な拡張プラグインリストが整備され半自動でインストールされるようになっています。VimなどVSCode以外のエディタを利用する場合には同等のリアルタイムlint表示ができるよう自主整備
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた - SmartHR Tech Blog
こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうことなく多言語化対応を進められるよう、TypeScript の型定義を工夫した話をします。 まだまだ改善の余地がある状態ではあるのですが、私達のチームでの試行錯誤が読んでくれた方の参考になれば幸いです。 SmartHR の多言語化対応 SmartHR の既存のページではすでに WOVN.io というツールを使った多言語化対応が行われていました。 ただ諸々の理由があり1、新しいプロダクトでは自前で翻訳の仕組みを用意していこうとしています。 実際に、Smar
今日から始めるSvelte入門
みなさんはSvelteって知っていますか？ SvelteはReactやVue.jsなどと同じ、モダンなJSのUIフレームワーク(厳密に言うと、コンパイラベースのJSフレームワーク)です。 0からSvelteに入門し、Vite/TS/Tailwindを用いての漢字クイズアプリ開発を通して、その記述を理解しましょう。 ✅ Svelte ✅ Vite ✅ TypeScript ✅ TailwindCSS
はじめに こんにちは、株式会社TERASSでエンジニアをしている myrear です。 先日 React Blog にて公開された React Labs: 私達のこれまでの取り組み - 2024年2月版 という記事に React Compiler に関する記述があります。 この React Compiler とは React コードを自動的に最適化し、それにより開発者はメモ化について考える必要がなくなる(忘れることができる)というものです。 まるで魔法のようですが、一体どのような方法でコードの最適化を実現しているのでしょうか？ 本記事では2023年秋の講演の動画を自動翻訳字幕で追いながら要所要所をかいつまんで解説していきます。 React Forget とは？ 先述の通り React コードを自動的に最適化してくれるコンパイラです。 具体的には JavaScript と React のルー
こんにちは！プロダクト開発統括部 システムアーキテクト部 dodaリビルドGの大野です。 私はパーソルキャリア株式会社に2023年5月に入社し、「dodaリビルドプロジェクト」のPMとして従事しております。今回はdodaリビルドプロジェクトについて現場目線でご紹介させていただきます。 dodaリビルドプロジェクトとは 転職サービス「doda」が抱える技術負債を解消すべく発足しているプロジェクトです。 発足当時の背景等は過去記事（こちら）を参考にしていただければと思いますが、現在の取り組みを大きく分類すると下記２つに取り組んでおります。 dodaサイトのマイグレーション エンジニアの開発効率向上 １つめのdodaサイトのマイグレーションとはモノシリックな既存画面を順にフロントエンド/バックエンドへの構成に変更していくものです。既存doda画面をフロントエンドはNext.js化、React版デ
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
イベントハンドラの関数名についての雑記 - Qiita
今日のXでは、イベントハンドラの関数名についての話題を見ました。元の投稿はこちらです。要するに、次のhandleClickのようなhandleイベント名という命名は良くないということです。 const handleClick = () => { ... }; <button type="button" onClick={handleClick} /> これについて少し考えたので、せっかくなのでアウトプットしておくことにしました。 この記事の目的 考えたことを頭の中に残しておくのがもったいないので、文章の形にしておく。 色々な意見が出る問題であり、ベストな答えは無いので各々好きにすれば良いということを、読者に理解してもらう。 とはいえ、筆者の考えに納得して同じ考えの人が多いと嬉しいので、なるべく納得してもらう。 筆者の考え 自分の考えとしては、むしろhandleClickいいじゃん！ どんど
はじめに Reactパッケージのコードは難しいらしいのですが、React を利用している人なら誰でも中身を読んでみたい！と思いますよね。 日々 React を使ってコードを書いていますが、function 関数でいい感じ HTML っぽい<p>Hello, World</p>コードを書いて、その後にyarn devしてみただけで、画面にHello, Worldが現れてしまう React なのですが、その動きはまるで魔法みたいだなと思っています。 ということで、React パッケージを読むことに挑戦したお話をさせてください。 本記事では以下について書いていきます。 React を読むにあたって取り組んだ流れ 今回の取り組みで学んだ React 内部の仕組みや API などの紹介やその所感 我々が普段 React を触っている時には全く意識しないけれど、よくよく考えたら魔法みたいに不思議なその
こんにちは！もみです🐶 皆さん、GitHubプロフィールのREADME は設定していますか？ GitHubのプロフィールを充実させることで、 GitHub上での交流はもちろん、就活や転職でもきっとちょっと役に立ったりと、素敵なご縁に繋がるかもしれません。 たった5分で設定できるので、さっそく設定していきましょう！ 🚩 今回作成するプロフィール シンプルさを保ちつつ、スキルやGitHub上での活動を中心にした自己紹介テンプレートにしてみました！ GitHubリポジトリ： https://github.com/NonokaM/sample-github-profile/blob/main/README.md 1. リポジトリを作成しよう まず、ユーザー名と同じ名前のリポジトリを作成しましょう。 （ ユーザー名と同一のリポジトリは、特別なリポジトリと認識されて自動的にプロフィールに表示されま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック
Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
2023年版！エンジニア必見のチートシート集 - Qiita
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
Electronを使ったPC向け将棋アプリ開発 - Qiita
ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
Microsoft、Windows 11でのAndroidアプリサポートを終了へ
【完全解説】エンジニアの複利を考えた投資戦略 - Qiita
使ってみたい技術を試せる、汚いコードを書くとどんな目に遭うかわかる… 個人開発で得られる“6つの利益”
DMMのGo言語5daysインターンが最高すぎた！ - Qiita
Gemini Advancedを1ヶ月間使ってみた感想 - laiso
コードレビューの時に気にしている、べからずTierリスト
React Forget は何を「忘れ」させてくれるのか
dodaリビルドプロジェクトとは - techtekt
Reactを読んでまほうの正体を（少し）理解する
5分でできる！GitHub README プロフィール 💬 - Qiita