はじめに先日、初心者でも簡単に参加できる GitHub チュートリアル 『First Contributions JA』を共同開発しました！ 振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。 ▼ GitHub のリンク： なぜ First Contributions JA を構築したのか？さて、First Contributions JA には、次のような特徴があります： - React/ Next.js で構築されたWebサイト - 初心者向けのGitHubチュートリアル - オープンソースのプロジェクト 上記を踏まえて、プロジェクトの経緯は、主に２つあります。 （技術スタックは、後で詳しく説明します） 1. JavaScript/ React 学習コミュニティで、共同開発を提案した！以前、 「JavaScript/ React を学習するコミュニティを、期間限
競プロ出身者・機械学習出身者の問題コード
https://anond.hatelabo.jp/20240625191650 競プロ出身者だけじゃなく、機械学習出身者も問題コードが多い 印象の問題ではなく実際に下記のようなコードが多い 念のため言っておくと底辺大や文系出身プログラマーも同様の傾向にある 正常系しか意識していない一番多いのはコレで異常系の動作を全く意識していない 入力値に想定外のものが入ることを考えていなかったりI/Oに関わるエラーについても配慮がない 「エラーが出たらとにかくtry-catchしてログ吐いて終わり」 ならまだマシな方で、「握りつぶして処理続行」みたいなことも平気でやる 「ここの処理でエラーログが出てるから対処よろしく」 「対処しました！（握りつぶし）」 とか滅茶苦茶多い セキュリティに関する意識が低い異常系の話と被るけど基本的に性善説でコード書くのでセキュリティの不備がめちゃくちゃ多い API作らせて
2024年7月25日紙版発売 柴田芳樹 著 A5判／208ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-14293-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Amazon Kindle honto この本の概要 本書は，著者が1993年から約30年間経験してきたAPI仕様の作成，2003年から20年間経験してきたテストファースト開発／テスト駆動開発の知見をまとめたものであり，一般的なソフトウェア開発者が習得することが容易ではない事柄を，本書を通して学び，実践してもらうことを目的としています。 本書が提唱する「API仕様ファースト開発」はWebサービスにおける大域的なテスト駆動開発の実現に必要なものであり，また，API仕様ファースト開発を実現するにはテスト駆動開発が必要です。API仕様ファースト開発とテスト駆動
はじめに 現代の人に名著以外の本を読むような時間はない こんにちは、Watanabe Jin (@Sicut_study)です みなさんは何か新しい技術を学ぶときにどんなコンテンツを利用するでしょうか？ 最近ではUdemyなどの動画講座を利用する人が多いと思いますが、本を読んで学ぶという人もまだまだ多いのではないかと思います 今回は私がこれまで5年間読んできた150冊以上の中から厳選した30冊の本を紹介します。広く多くの人に役立つものから、特定の技術の書籍までどれを読んでもあなたの大切な一冊になるのでぜひ読んでみてください 現代人には時間がない なぜ働いていると本が読めなくなるのかという本が話題になりました 現代人は本を読む時間がなくなっています。 仕事に追われてしまい、プライベートで本を読む暇などなくなっているのです。 しかし、エンジニアは「技術職」なのでプライベートの時間でも学習をして
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
公開日 2024/06/18更新日 2024/06/18身近なBtoCサービスを支えるアーキテクチャ大解剖 技術選定のポイントと今後の展望 多くのIT企業では、ユーザーに対してより高品質で安定した体験を提供するために、システムアーキテクチャを進化させ続けています。 本特集では、日常生活の中で多くのユーザーに利用されているサービスのアーキテクチャ設計に携わるエンジニアの方々から、技術選定の背景や意図、そして現在のアーキテクチャの課題から未来への展望まで、詳しく伺いました。この記事を通じて、各企業のエンジニアたちがどのように技術的な課題を克服し、システムの柔軟性と効率を高めているのか、知見を得ていただければ幸いです。 ※ご紹介は企業名のアルファベット順となっております アソビュー株式会社 アソビュー株式会社では「遊び」という領域に対し、マーケットプレイス型EC「アソビュー！」やD2C型SaaS
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
えにしテック15周年記念カンファレンスの発表資料です。 https://enishi-tech-15th-anniv-conf.peatix.com/ 資料中で参照しているURLは以下です: https://github.com/rails/rails/milestone/87 https:…
TL;DR プレビュー対象はcdk synthで出力されたCloudFormationのテンプレートファイル 構成図はVSCode拡張機能aws toolkitのApplication Composerでプレビュー表示(変更検知機能利用) nodemonを用いて、プレビューを開いた状態でtsファイル保存時にcdk synthを実行することで再表示させる nodemon -e ts --ignore cdk.out --exec 'cdk synth' 情報元: aws-summit-2024-iac-booth-demo/realtime-draw-diagram at main · aws-samples/aws-summit-2024-iac-booth-demo · GitHub 前準備 ※コンテナ開発/TypeScriptを前提とする。 1. CDKプロジェクト作成 すでに作成済み
公開日 2024/06/25更新日 2024/06/25モダンな開発環境のBtoB SaaSアーキテクチャ特集 技術選定のポイントと今後の展望 ご好評頂いているアーキテクチャ特集の第三弾となる今回は、BtoB SaaSを提供する企業10社にご協力頂き、技術選定のこだわりや今後の展望をご寄稿いただきました。アーキテクチャを通して、各社の事業特性や設計思想にも触れられる内容となっております。※ご紹介は企業名のアルファベット順となっております 株式会社あしたのチーム あしたのチームは「誰もが "ワクワク" 働ける世界を創る」をビジョンに掲げ、人事評価制度の構築・運用・クラウド化で "人と組織の成長" を支援しています。今回は、2024年4月にリリースされた同社の新サービス：パフォーマンスマネジメントプラットフォーム『Cateras™』のアーキテクチャについてご説明します。 アーキテクチャ選択の背
Phoenix | Phoenix
A lightweight macOS window and app manager scriptable with JavaScript. You can also easily use languages which compile to JavaScript such as TypeScript. Phoenix aims for efficiency and a very small footprint. If you like the idea of scripting your own window or app management toolkit with JavaScript, Phoenix is probably going to give you the things you want. With Phoenix you can bind keyboard shor
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック 2024年6月3日 フロントエンドエンジニア うひょ TypeScriptとReactが得意なフロントエンドエンジニア。株式会社カオナビ所属。ウェブ上の技術記事や雑誌を通じて技術的な情報発信を続けている。実はJavaScript歴19年。 著書『プロを目指す人のためのTypeScript入門』（技術評論社） X（@uhyo_） 個人サイト（uhy.ooo） 皆さんこんにちは。前回は、私の技術発信の遍歴をご紹介するとともに、私の考える、技術発信に必要な能力や考え方をご紹介しました。 今回は、より具体的なテクニックやその背景をご紹介します。すでに技術発信をしている方や、これからやろうと思っている方はぜひ参考にしてみてください。文章のテクニックと、登壇（登壇資料）のテクニックをあわせてご紹介します。 keyb
Serverless Frameworkの有償化に伴いAWS CDKとAWS SAMへの移行について検討してみた | DevelopersIO
なおこの「Credits」という単位は serverless.yml ファイルのregion,stage,serviceパラメータの組み合わせによって定義されるようです。 したがって、例えば開発者やチケット毎の検証環境をstageで分けている場合は、その分Creditsが嵩むという形になります。 また、serviceもどのように分割するかで総Credit数が変わってきますので、この辺は見積りのし辛さに繋がってくるのかなと思います。 例えばregionとして東京, シンガポールを用意し、stageとしてprod, stg, dev, user1, user2があり、serviceとしてxxx, yyyがある場合、単純に掛け算をすると2x5x2の20 Creditsとなります。 また、Serverless Dashboardの機能を使うと、トレース50,000あたりで1 Credit、メトリク
いかにして動的型付けのRubyに静的な型検査を持ち込むか？ SteepとRBSが目指すもの - Findy Engineer Lab
「奥野さんと社員のリファクタリング部屋」は、リファクタリングに励むトレタの社員と技術顧問の奥野さん ( @okunokentaro ) の間で実際に行われた会話を切り取った開発現場実録コンテンツです。 技術顧問: 奥野さん 三度の飯よりリファクタリングが好き。 今回の質問者: 武市さん トレタ在籍２年。沖縄在住のフロントエンジニア 今回の質問 今回は初期リリースを終えたWebアプリケーション(Next.js)のプロダクトを担当している武市さんから、複数人で開発を進めてきて統率が取れなくなったディレクトリ構造のリファクタリングについての質問です。 APIで外部とやり取りしている部分をリファクタリングして、クリーンアーキテクチャに沿ってリポジトリを作ろうと考えています。 その中で、GraphQL APIレスポンスの結果を変換するアダプター関数(adaptGetIServiceItemsAggr
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
GitHub - marpple/FxTS: A functional programming library for TypeScript/JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Google Cloud Run と AWS Lambda のコールドスタート時間を言語別に観察してみる - Qiita
コンテナをリクエスト処理時間ベースの料金体系で実行できるサーバレス環境としては、Google の Cloud Run（2019年11月GA）と AWS Lambda（2020年12月にコンテナに対応）が特に有名でしょう。 これらの環境は、一度起動したコンテナインスタンスをしばらく生かしておき、その後のリクエストに使いまわします。しかし、生きているインスタンスが足りない場合は新たなコンテナの起動から始めるいわゆる「コールドスタート」となり、応答のオーバーヘッドが大きく増加します。用途によっては、このコールドスタートにかかる時間が問題になります。 Cloud Run と Lambda でのコールドスタートの様子を観察するため、いくつかの言語で "Hello, World!" を返すだけのWebアプリコンテナを作り、コールドスタートの時間を「雑に」観察してみました。 注意: コストや性能は考慮し
バックエンド視点で振り返るGraphQLを採用したプロダクト開発 - enechain Tech Blog
はじめに 技術スタック eScanチームにおけるGraphQLの使い方 開発フローの工夫 N+1問題の対応と注意点 エラーハンドリングの工夫 モニタリングの工夫 ドキュメンテーションを必須化するための工夫 その他の取り組み 振り返り 良かった点 難しかった点 今後の展望 最後に はじめに こんにちは、enechainでソフトウェアエンジニアをしている小沢です。 私が所属しているチーム(以降、eScanチーム)では、eScanという電力会社向けのリスクマネジメントシステムを開発・運用しており、その中でGraphQLを採用しています。すでにGraphQLを採用するメリット・デメリットについて様々なところで語られていますが、eScanチームでもオーバーフェッチが解消できる点、1リクエストで必要なデータをフェッチできる点などのメリットを享受するために採用しています。 今回は実際にGraphQLを採
Object.keys() が返す配列の順序における数値キーの昇順には上限がある - カミナシ エンジニアブログ
はじめに こんにちは。昨年の10月にカミナシに入社したソフトウェアエンジニアの tokuse です。 気が付けば入社してから既に半年以上経っており、光陰矢の如しで驚愕しています！ カミナシではフロントエンドを TypeScript で開発しています。そんな中、先日 Object.keys() の仕様に起因する不具合が発生し、その際に Object.keys() が返す配列の順序に関する仕様について詳しく知りました。当稿ではその仕様について説明します（ECMAScript 最新前提です）。 はじめに 問題となった処理 Object.keys() の仕様 まとめ 余談 おわりに 問題となった処理 まず、問題となった処理をサンプルコードで紹介します。次のコードは、オブジェクトの数値キーのうち最大値を取得しようとした処理です。 type UserId = number; type User = {
はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見ているデザインシステムにフォーカスして記事を書こうと思います。 弊社のデザインシステムに関しては、 @Shunya078 の なぜ我々はデザインシステムを創るのか？ を読んでいただくと背景がご理解いただけると思います。 今回書く開発者体験について 開発者体験の定義についてはさまざまな解釈があると思いますが、今回は以下の3つのトピックに絞って紹介します。 eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザ
「Cloudflare Workers活用事例 業務利用の決め手とその効果に迫るLunch LT」https://findy.connpass.com/event/318382/ での発表資料です。
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査 ソフトウェアデベロッパーを中心とした調査会社のSlashDataは6月15日、2024年第1四半期時点のプログラミング言語ごとのコミュニティの大きさについてのレポートを発表しました。 これは同社が行った世界135カ国から1万人以上の回答者を集めたアンケート結果などを基に同社が推測しレポートとして発表する予定の内容の一部を公開したものです。 下記は同社が発表したプログラミング言語別のコミュニティを大きさ順に示した図の一部を切り取ったものです。 これによると、最大のコミュニティを持つプログラミング言語はJavaScriptで2520万人。もっともポピュラーな用途はWeb開発となっています。ただしこの人数にはTypeScri
TL;DR 楽しかった！ 本編 おはようございます。手札事故(twitter:@hand_accident)と申します。 Ruby知識ゼロから初参加したRubyKaigi 2024レポート、略してルゼロ*1という感じでやっていきたいと思います。 < Day 0 自己紹介でもしとくか。生まれ育った愛媛県松山市*2に帰って非IT企業でパソコン係をやっている過程で、すべてが個人開発の労働環境で趣味全ブッパ技術選定をした結果HaskellとNimを書くようになりました。すこしSvelteもします。 Rubyは名前を聞いたことがあるしちょっとニッチなPythonライブラリ探そうとしたら時々検索にgemが引っかかってそちらにはあるのねえという感想を抱くなどしていましたが何の因果か触ってみるには至らず、沖縄に来て初めてコードを見たまであります。 愛媛県松山市で趣味の音楽ゲーム(DDR)に高じていたところ
Readonly 使ってますか？
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Next.jsで不要なファイルを一掃する
Knipというツールが便利。JaveScriptやTypeScriptで書かれているプロジェクトの未使用のファイルやexportを見つけることができる。 Find unused files, dependencies and exports in JavaScript and TypeScript projects https://knip.dev/ インストールせずに使いたいのでnpxコマンドを使って実行する。 また、Next.jsのプロジェクトで使いたいのでプラグインを導入する。 上記のプラグインの中にNext.jsがあるのでこれを使う。 knip.jsonというファイルをプロジェクトのルートに配置する。除外したいディレクトリはignoreで指定できる。 { "ignore": [ "hoge" ], "next": { "entry": [ "next.config.{js,ts,c
この記事は、<strong><a href="https://techfeed.io/events/techfeed-experts-night-31">TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来</a></strong>の開催に際し、TechFeedのデータを元に日本語記事ランキングを紹介していくものです。 本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 こんにちは、TechFeed CEOの白石です。 この記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャ
コンピューティング基盤部の三吉（sankichi92）です。 アークエッジ・スペースでは、衛星リモートセンシング1による地球観測データ（以下、「衛星データ」）を活用したソリューションを提供する Web GIS2 アプリの開発をはじめました。 この記事では、プロジェクトの最初期にあたり、プロダクトのさまざまな可能性を高速に検証するために行った技術的な取り組みを紹介します。 Web GIS アプリをつくる背景 プロトタイプで検証するもの スモールスタートのための技術選定 SPA PMTiles GitHub Pages 開発をはじめてからの改善 React Router 導入 S3 + CloudFront 導入 Amazon Location Service 導入 プロトタイピングの結果 今後の課題と展望 データ基盤、ジョブ管理基盤 動的タイル生成への対応 解析の高度化 Web GIS エン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っておくと仕事が捗る便利ツール17選 - Qiita
Python + VSCode の環境構築 20240604
「GitHub難しい!!」を30分で解決するサイトを共同開発しました🚀｜kazzyfrog
Web API設計実践入門──API仕様ファーストによるテスト駆動開発
読まないと後悔する技術書30選 - Qiita
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
身近なBtoCサービスを支えるアーキテクチャ大解剖 技術選定のポイントと今後の展望 - Findy Tools
Vite ってよく聞くけど何なんですか？ あれは
2024年のRailsと自由について考える
AWS CDKのコード変更時にリアルタイムで構成図のプレビューを表示する
モダンな開発環境のBtoB SaaSアーキテクチャ特集 技術選定のポイントと今後の展望 - Findy Tools
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック
<T, K extends keyof T> をちゃんと理解する
奥野さんと社員のリファクタリング部屋 -リポジトリ層のディレクトリをどう作る？- - トレタ開発者ブログ
TypeScript 5.5 で追加された正規表現構文チェックを理解する
デザインシステムの開発者体験向上の試み - enechain Tech Blog
Cloudflare Workersで構築する非同期ジョブシステム
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
Ruby知識ゼロから初参加したRubyKaigi 2024レポート - 共沸
TypeScript v4.9からv5.5で追加された機能のおさらい - STORES Product Blog
TypeScriptに導入された新たな仕組みのデコレータ、その使い方と利便性とは？
【2024年6月版】フロントエンドアーキテクチャ界隈の必読記事まとめ【TechFeed】
サーバレスではじめる Web GIS アプリのプロトタイピング - ArkEdge Space Blog