この記事は食べログ Advent Calendar 2020の10日目の記事です。 お久しぶりです。食べログフロントエンドチームの辻です。 このブログでも頻繁に紹介しておりますが、食べログフロントエンドはjQueryベースからReact/TypeScriptへのリプレースを進めています。 ページごとではなく、コンポーネントごとにリプレースを進めていきます。 店舗画面の右下に出ている「○人が見ています！」というバナーはリプレース済みですが、この赤枠の中のみ、Reactです。 店舗ページ自体はSPAではありませんし、他のコンポーネントはjQueryで動いています。 この記事では、コンポーネントごと、つまり部分導入という判断に至った経緯と、どのような方法で部分導入を実現しているのかを紹介します。 ページごと VS コンポーネントごとページごとにリリースし、nginxなどでリプレース前後でリソース

仕事でフロントエンドの技術選定をおこなうことになり、その情報収集としてIT企業の先例を調査しました。 jQueryなどのレガシーな技術スタックからモダンなフレームワーク（ライブラリ）への移行をした企業のリプレイス記事をまとめます。 一休.com、Yahoo!トラベル【Nuxt2 -> Nuxt3】 比較的少ない印象のVue/Nuxt系の移行記事です。 Nuxtのバージョンを上げたとのことですが、Vueのマイグレーションガイドをチームで読み合わせたとの記述があるので、Vueも2→3へアプデないし実装の移行をしたのでしょうか。 どちらかというとReactを採用している事例を多く見かける中、Vue/Nuxtの貴重な例ではないでしょうか！ MonotaRO【JavaScript->React/Next.js】 言わずとしれたECサイト「モノタロウ」。モノから産まれたモノタロウ。 主にVueとRea

はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート

こんにちは。PR TIMES の開発本部でフロントエンドエンジニアをしている鈴木雄大(@szkyudi)です。 2021年10月に2020年新卒の僕と2021年新卒の2人の計3人で企業ページのフロントエンドをレガシーなコードから React.js にリプレイスしたものをリリースしたので、そのお話をしようと思います。 企業ページがどういったページかについては下記の PR TIMES MAGAZINE の記事をご覧ください。 リプレイスに至った背景 リプレイス前の企業ページのフロントエンドの技術スタックは以下のようになっていました。 jQueryJavaScript (ES5以前)JavaScript (ES6以降)Vue.jsSCSS このようにひとつのページの中でも複数の技術が混在していました。また、ディレクトリ構造や記述ルールも整備されていませんでした。 そのために、コードのキャッチアッ

元ネタ @localdisk さんの記事です。 こちらで概ね適切に説明されているものの，文章のみで図が無くて直感的に把握しづらいので，初心者にもすぐ飲み込ませられるように図に描き起こしてみました。 図 解説 illuminate/auth: 最小限の認証認可コアロジック コアコンポーネント群の laravel/framework に含まれているものです。 Socialite 以外のすべてのパッケージが，実質このコアに依存していることになります。 以下の記事でこのパッケージの詳細について説明しているので，ここでは端折って説明します。 伝統的 Cookie ベースのセッション認証 こちらでも解説している， 「Cookie に識別子を載せ，それに対応する情報はサーバ側のファイルに記録する」 という手法に近いものです。 実装は illuminate/session にあり， PHP ネイティブのセ

Laravel のログイン認証周りのカスタマイズをする度、 「この場合どこをいじればいいんだっけ・・・」と混乱するので、 図にまとめてみました。 全体感を掴んでいただくことが目的ですので、 この記事では、具体的なカスタマイズのコードは紹介しません。 ご了承ください。 まずは登場人物一覧 ガード (guard) Laravel では「認証」と呼ぶことが多いです。 ログイン機構の種類を表します。 たとえば、ECサイトの「管理者」と「会員」など。 ログイン画面の数だけガードがある、というイメージです。 provider (認証方法) と driver (認証状態の管理方法) で構成されています。 config/auth.php に定義されており、追加・変更ができます。 ガードドライバ (driver) ログインの認証状態をどうやって管理するか。 多くの場合はセッション認証 (session) で

DevOps Topologies 10 years on: what have we learned about silos, collaboration, and flow? - ShipItCon 2024

仕事の進め方がグダグダの会社はどうすればいいのか、「プロジェクトマネジメントの基本が全部わかる本」の著者に聞いてみた 「プロジェクトマネジメントの基本が全部わかる本」を執筆し、ご自身もプロジェクトマネージャーやプロダクトマネージャーとして23年経験を積んできた橋本将功さん。 橋本さんは、セミナーや著書でプロジェクトマネジメントについての知見を発信されていますが、今回 Agend であえてお聞きするのは「専門のプロジェクトマネージャーがいないグダグダになっている職場で、どう仕事を回していくか」。 「うちの会社は仕事を回すのが下手」と感じている方にこそ読んでいただければと思います。

ひとり会社を経営してこの4月から第6期になる。期間として次の12月で創業5年になる。先日、その5年近くの経営の中での失敗からのふりかえりについて書いたところ、多くの人たちに読んでいただいたので嬉しい。 この記事で引用した次の経理の書籍についても多くの人たちが読んでくれているようにみえる。それ自体は素直に嬉しいものの、約4年前の記事であるため、当時の私が起業に関して無知だったり、よくわかっていなかった内容もいくつかある。そこで現時点でのアップデートを含め、いま私が起業するならこうした方がよかったと、自身の経験からわかったことを整理してみる。 起業時に夢も希望もない私自身、先にあげた過去の記事を読み返していて、よい大人がひどい理由で会社を辞めたものだと思う。一方で世の中には既存の社会構造や組織に馴染めない人もいる。自分で会社を経営することは自己責任ではあるが、社会に対して馴染めないなにかを少し

2019年12月に自分の会社を設立した。 なんの考えもなく意味なく3月決算にしてしまい、4ヶ月弱で決算を迎え、2ヶ月以内に法人税を納める必要があるので5月に入ってから法人決算を行った。そのときに役立った本の紹介と実際に法人決算をやってみた経験談 (失敗談) を書いておく。 (2024-05-05 追記) 本稿の続編として時間が経ってからわかったことなどをまとめました。 法人設立のきっかけ仕事を辞めようと思ったとき、次にやりたいことはとくになかったし、40歳を超えて年齢的にも雇ってくれる会社をみつけるのは難しいだろうということは容易に予測できた。少し転職活動をしてみたものの、自分自身にやりたいことがないのもあり、あまり手応えを感じなかったので消去法のような流れで起業することにした。 私の場合、会社設立 freee を使って法人設立のための手続きをした。必要な手続きや書類作成など、法人登記まで

多分今回のポストは多くの人には参考にならないだろう。相当ニッチなので。でもこれは自分にとってはとても大きなことだったので、忘れないように記録しておきます。 生産性の悩み　あまりこの世界では生産性とはあいまいな言葉で、何をもって生産性が高いとは言いにくい。速いのが良いのではない。ただ、自分の実感として自分は生産性が良くないといつも感じていた。だからいろいろ努力したり、考え方をできる人を観察して真似してみたり、直接本人に聞いたりして工夫をしてきた。 実は自分はめっちゃコーディングが早い人になりたいわけではない。そうではなくて、「平均的」になりたいだけだ。それぐらいいければ「Strategy」でカバーできるどころかもっと上に行けると確信があったから。でもそうではなくて明らかに遅いのでそれが自分の足を引っ張っていた 努力の方向性　様々な努力をして、特に有効だったことを自分の本に書いたつもりではある

この記事は Laravel Advent Calendar 2020 - Qiita 最終日の記事です。 TL;DR DDD や "真の" クリーンアーキテクチャは， Web 業界における大抵の現場ではオーバースペックだし，導入しても全員がついてこれるとは限らない app/UseCases ディレクトリだけ切って，ドメインごとに単一責務なクラスを置くと使いやすいよ ActiveRecord 指向のフレームワークで Repository パターンを無理に導入すると死ぬので， UseCase で Eloquent Model の機能を使うことを恐れるな はじめに Zenn では初投稿です。日本の Laravel コミュニティではもうお馴染みのようで実はあまり顔を出していない（？） @mpyw と申します。オンラインサロンの火付け役となった Synapse が最初の仕事でしたが，就職後すぐ会社が

有償ソフトウェアを売る方法分かんなすぎるから、気軽に相談できる人欲しくなってきた...。 ・寄付募集型か、有料で一部の機能を解放する型か ・価格設定 ・有料で一部の機能を解放するなら、どこまで有料にするか ・買い切り型か、月額サブスクリプション型か とかとか、考えること無限にある。。 — Cside (@Cside_) October 2, 2023 個人開発ではないが、課金については仕事で結構やってきてまぁまぁの知見を得た。かつて自分も情報を得ようとネットで探してみたが、極めて情報が少なかった。ソフトウェア開発についてのノウハウは結構ネットに転がってるが、値付けなどについての情報は少ない。エンジニアとマーケッターでは文化が違うのかもしれないが、そもそも値付けに関しては商材（ソフトウェア）によって様々なので定石がなく、結局のところ自分で試してみないと正解がわからないのではないかと思う。そう

はじめに 現在ITエンジニア歴16年目でこれまでなんどかチームリーダー(プロジェクトリーダー)を経験してきましたが、数年前は上手くいっていたけど、ここ1年位のチームではなかなかうまく行かないことが多く、メンバーからのクレームが上長経由で伝えられてくることがあります。 クレームを伝えてくるメンバーの多くが経験が浅いエンジニア(若手、未経験中途入社)であり、まだITエンジニアとしての業務や商流が分かってない部分もあるゆえのエゴのようなクレームもあるのですが、中にはリーダーとして気をつけるべきだなと思ったことがあったので、まとめておきたいと思います。 なお、経験が浅いエンジニアと主語大きめに書きましたが、数年前にリーダーをした際にQAから転身したてのITエンジニアや、20台中盤くらいの方もいましたが特にクレームはなかったので「メンバーによる可能性はある」ということは書き添えておきます。 また、上

小中新規開発グループ (a.k.a. tara チーム) の qsona です。 tara チームでは、スタディサプリ中学講座というプロダクトを開発しており、約1年前 (2022-02) に本リリースして以来、継続してプロダクト開発を続けています。 tara チームのプロダクト開発は、基本的にスクラムの手法にのっとる形で行っています。ビジネス的な境界により分けられた3つのスクラムチームが存在します。 スクラムの運用については、それぞれの現場において悩みごとが起きがちだと思いますが、tara チームでもご多分に漏れず、うまくいっていること・いっていないことが存在します。今回は、その3つのうちの1つのチームである「学習コアチーム」において存在した、Sprint Planning に関する (あるいはそこから掘り出された) 課題と、それに対してどう対処したかについて書きたいと思います。 なお、本

単方向通信であるということと、HTTP/1.1上で動作しているのが大きな特徴です。 また、HTTP上で動作することから、通信の互換性が高く、セキュリティモデルも使いまわせるので安心です。 どんな用途と相性がいいの？ 双方向通信がしたいわけでなければ、相性の幅がとても広いです。 今回の ChatGPT のような、GPT がトークンを生成するごとに送るケースはもちろん、通知の未読件数バッジの更新、ニュース速報の表示など、サーバからイベントを送りたい時ならなんでも使えます。 HTTP/1.1で動くカラクリ SSEはHTTPのレスポンスヘッダにContent-Type: text/event-streamを指定した上で動作します。 SSEが動く流れ クライアントがサーバーに HTTP/1.1 リクエストを送信し、イベントストリームに接続します。 サーバーは、Keep-Alive 接続を使用して、T

コマンドの書式を知りたいときは、ネットで検索すればそのコマンドの使い方やオプションなどの説明ページはすぐに見つかります。 しかし、コマンドの利用方法を説明するために利用される構文フォーマットというものがあり、この構文フォーマットがわからないと、説明サイトを見てもヘルプを見てもコマンドの書き方が具体的にわからないというケースが多いので構文フォーマットをまとめてみました。 構文フォーマットの特殊文字一覧 基本的に書式を説明する際は特殊文字を利用します。 ※わかりやすく解説するため、「cmdxxx」という架空のコマンドを利用して説明します。 斜体 斜体で記載されている部分は適切な値を入力する必要のある部分を意味します。日本語または英語で書かれているそのままの意味の値を入力します。 【例】cmdxxxファイル名 この例ではcmdxxxというコマンドを実行するファイル名を入力します。 [ ] [ ]

昔のことなので、思い出して書くけれど。西暦2000年になる少し前のこと。 大きな大きな会社に、おそらくSESとして常駐した。入館証も与えられたし自分の席もあった。専用のパソコンも与えられたが、ものすごくスペックが低く、業務用のアプリケーションを開くのに時間がかかった。そもそもスリープ機能なんてなかったので、OSは毎度電源オンしOS起動から始まったが、それも時間がかかった。あらゆることで時間がかかった。一緒に来ていた先輩から「パソコンが遅いってことはそれだけ遅く仕事していいってことだから気にするな」と言われてなるほどなと思ったこともあった。昔の生産性の低さはその辺りから来ている。何しろパソコンはまだまだ性能が低かった。 技術的な問い合わせに回答する仕事だったけれど、なんとも残念なことに検証環境が不十分だった。聴かれたことを実機で試せないのは本当に困る。ただ、今と違ってコンピューター資源が豊富