日経電子版での自作 SSR フレームワーク基盤について — HACK The Nikkei
こんにちは、Web チームの井手です。今日は私たち Web チームが作っている SSR フレームワーク(以下 FW)にについて紹介します。 記事を書くモチベーション 私たちのメインプロダクトである日経電子版においては k2 という自作 SSR 基盤を 2020 年から運用しています。SSR FW といえば多くの方が Next.js を想起すると思いますが、私たちは自作しています。一方で最近は Next.js の進化が凄まじく、自作 SSR 勢としても意識せざるを得なくなっています。もしかしたら「あぁ Next.js で作っておけばよかった」と思う時が来るかもしれません。特に k2 を保守する際には Next.js では実現できない機能を実現するために様々な手法や工夫を編み出していましたが、Next.js の進化に伴ってその必要性はだんだん減ってきているのを実感しています。そのためいつか N
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
fp-tsとio-tsを使ってWeb APIをいい感じに叩く - Qiita
はじめに 「fp-tsとかio-tsは使いこなせると便利だろうけどとっかかりがなぁ。。。」 「axios.getを叩いて返ってきたresponseの型をいい感じに推論したいなぁ。。。」 みたいな感情ないですか？僕はあります。 そういった方に向けて、fp-tsとio-tsを組み合わせたWebAPIの叩き方(with axios)の例を紹介します。 サンプルコードの実装はこちらのサイトを参考にしました。 この記事では扱わないこと この記事では上記ライブラリに興味を持ってもらうことを目的としているため以下の内容は取り扱わないです fp-tsやio-tsの導入方法 fp-tsやio-tsで提供されている機能の詳しい説明 関数型言語について 環境 OS: Ubuntu 18.04.6 LTS node: 12.22.5 fp-ts: 2.11.5 io-ts: 2.2.16 目次 responseの
Figma Flow
01. What is Figma Flow?Figma Flow is a collaboration model for Figma, created by Flow Platform Team. Heavily inspired by BDD and state machines, well suited to collaboration and scaling the product development process. It takes best practices from software development to the designers and product management world. 02. Key BenefitsGuided processFigma Flow is the way of working with your whole produ
フロントエンドエンジニアのステップアップのための集合知 - HackMD
# フロントエンドエンジニアのステップアップのための集合知 ジュニアとミドルはソフトスキル多めなのでフロントエンドエンジニアに限らなそうです - 期待役割 ... 該当ステップ内での TO BE - できてほしい ... 該当ステップ内での WANT (🔐は次ステップへ進む上では MUST) - 次のステップへの期待 ... 次のステップへ進む上での MUST ## ジュニア (ステップ1) ### 期待役割 - 指示された小さいタスクをこなすことができる - ~3人日くらいの影響範囲の閉じたタスクを想定 - 仕様が決まっている、あるいは不明な場合は質問できる ### できてほしい #### ハードスキル - 初歩的なセキュリティバグを生まない - #### キーワード - XSS - コード内に必要に応じて意図をコメントとして残せる - #### 🔐自立的にファイルや関数を分割ができ
テスト優先度をあげたくなる実話 - フロントエンド版 -
Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS
Just WebFrontend - 学び直しとメンタルモデル再構築
"Rebuild your mental model of web frontend programming." Web フロントエンドやそれにまつわるプログラミングにとりかかる上でもっておきたいメンタルモデルについて考える本です。 新しい知識は提供しませんが、Web フロントエンドの学び直し・向き直りをすることで楽しさ・自信を提供したいと考えています。 Web フロントエンドにおいて考えたいことは何なのか。 特定技術に左右されず、持っておくと良さそうなメンタルモデルとはどういったものなのか。 React, Angular を例に取り上げて 2 つの特徴を洗い出し、Web フロントエンドのコンポーネント志向と持っておくとよさそうなメンタルモデルについて考えます。 誤り・ご指摘やご意見があればフィードバックいただけると嬉しいです。
妄想的DHH理解 - Qiita
Caution この記事はDHHファンの妄想によるシナリオが多分に含まれます。 というかほとんどです。 成り立ちが間違ってることも当然あるように思うので話半分で読んでください。 これは一体 最近のRailsフロントエンドやDHHの活動には一連の流れがあるわけですが、一部トレンドに沿ってない部分がある故にそれが汲めないというところがあるのではと思います。 それらの流れを記憶が定かなうちにつないで記録しておこうという記事です。 前提知識 Railsの生みの親、Rubyist Basecamp(社) DHHがCTOやってる会社 Basecamp(サービス) Basecamp(社)が開発してるプロジェクト管理ツール Trixを開発してたある日 Basecamp(サービス)に組み込まれてるリッチテキストエディタのtrixをcustomElements使って開発してたある日、DHHはあることに気づく。
BCD Design の Common を徹底解説
はじめに ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています、 misuken です。 今回は BCD Design の共通の関心事である Common(Common Domain) に関して徹底解説していきます。 BCD Design とは 2020年3月に発表した BCD Design によるコンポーネントの分類 概念軸による分類 BCD Design はコンポーネント名に使用される単語の意味や性質を相対的に利用することで、 コンポーネントを Base Case Domain の3つの概念へ法則的に配置し、体系的に管理できるようにする分類手法です。 元々は AtomicDesign でモヤモヤする問題を解決するコンポーネント分類手法として考案されたものでしたが、 BCD Design のスキルは色々な分野で幅広く通用することもわかってきたので、Webフロントやコンポーネン
Mock Service Worker で開発用のモックAPIを作る
フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは？ Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立
Front-of-the-front-end and back-of-the-front-end web development
Front-of-the-front-end and back-of-the-front-end web development The Great Divide is real, and I’m pleased that the terms “front-of-the-front-end” and “back-of-the-front-end” have gained traction ever since I quipped about them on the Shop Talk Show. A few of my clients have actually moved away from a culture of “we only hire full-stack developers” and have instead adopted the labels “front-of-the
Hotwireの感想 - laiso
Hotwire https://hotwire.dev/ Turboを中心としたウェブアプリケーションのアーキテクチャの要素技術やコンセプトをPRするための名称 Hotwireというライブラリがあるわけではない 役割としてはMicro FrontendsとかReactのlearn once, write anywhereなどに似ている アプリケーション実装言語非依存だけど現状Railsアプリケーションしか実用できる基盤がない Hotwireの思想 アプリケーション開発者の生産性を上げることを目的にしていること サーバーサイド言語でフロントエンドを実装したいアレではなかった プログレッシブ(段階的に利用可能)であること 必要な技術だけを使い無駄なことをしないことで効率化する Hotwireが列挙する技術は1つづつ有効にできる クライアントサイドでViewを差分更新する現在の主流のシングルペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
チームで取り組みテスト改善のあゆみ
noteのフロントエンドApp分割