こんにちは。歴１０年のアプリエンジニア（Best of AppStore🏅受賞歴あり）です。 neeboor🗯という位置情報を使った新しいSNSアプリを作りました。 toC向け＆コンテンツ系＆モバイルアプリというサービスの特性上、最初からある程度高い完成度のサービスを提供しないとユーザーの手に取ってもらえないなと思い、UI/UX中心にかなりこだわって開発した結果、開発に２年以上かかってしまいました。 今回はサービスの紹介をしつつ、開発で苦労した点や工数をかけた点について記事にしたいと思います。 サービスの紹介 neeboor🗯は、「あなたの生活圏をもっとおもしろくするSNS (Make your living area hackable)」というコンセプトの位置情報系SNSアプリです。従来のローカル系サービス（＝地域情報サイト、半径◯メートルでお店や友達探す系、出会い系、ナビ系、トラ
はじめに この記事では、VST（オーディオプラグインの形式の一つ）開発に突如現れた、 React-JUCEという黒船について紹介します VSTとは DAW(Digital Audio Workstation)と呼ばれる音楽制作ソフトウェアでは、VSTと呼ばれるプラグインの仕組みが標準的に用いられています。 VST形式で開発すると、CubaseやロジックといったDAW上でMIDIやオーディオを処理するプラグインを動作させることができます。 VSTの開発においては、JUCE と呼ばれるフレームワークを用いてC++で開発されることが多いようです。 今までのVST開発のツライところ 音楽家でありエンジニアである筆者は、 ずっと興味がありつつも、VST開発からこれまで一定の距離をおいてきました。 その理由としては、 C++こわい 信号処理こわい UIを命令的に記述したくない（※後述します） という理
■ WSLの代わりにDockerを使う 自宅で仕事をするようになって、さすがにWSLのI/Oの遅さに嫌気が差してきた今日このごろ。 世間的にはWindows10 2004*1のWSL2がたいへん評判が良くて、おれもはやく移行したいんだけど、2004にまだけっこう致命的なバグがあって、関係するデバイスを持つうちのPCにはまだ当てられそうにない。PCも古いので買い換える予定なんだけど、まだ機種選定中なものだから、WSL2までのつなぎとして、同じHyper-V上の仮想環境であるDockerをWSLの代わりに使うことにした。 といってもやったことはそんなに難しくはない。ちょっとした自作ツールはだいたいRubyで書いてあるので、ベースにするイメージを「ruby:2」にしてDockerfileを書く。rubyの公式イメージは使い慣れたdebianをベースにしているので都合がいい: FROM ruby:
GitLab Flow + GitHub Actions ではじめる、デプロイフローの改善・自動化 - エクサウィザーズ Engineer Blog
DevOps エンジニアの 根本 征 です。 前回のエントリーでは GitHub Actions の self-hosted runners について紹介しました。 今回はそれらを活用したデプロイフロー(主に API / Frontend)の改善について紹介したいと思います。 これまでのデプロイフローと課題 GitHub Flow はどうか GitLab Flow とは git-pr-release + GitHub Actions を使った、リリース Pull Request の自動生成 GitHub Actions を使ってデプロイを行う 効果と課題 おわりに これまでのデプロイフローと課題 部署やサービスによって異なりますが、これまでのデプロイにまつわる環境は大まかに下記のような状況でした。 3つの環境 develop 環境(主に開発者が使う環境) staging 環境(本番リリース
How Pokémon GO scales to millions of requests? | Google Cloud Blog
Priyanka VergadiaStaff Developer Advocate, Google Cloud Have you caught Pokémons? Pokémon GO is a popular game played by millions, but it scales extremely well. This blog is a behind-the-scenes look into how the Pokémon GO engineering team manages and maintains the scale. Joining me is James Prompanya, Senior Engineering Manager at Niantic Labs who leads the server infrastructure team for Pokémon
はじめに 普段はRailsを使用して開発をすることが多く、開発環境はMacBook Pro(Intel) + Docker for Macを使用しています。 ただ最近は以下のようなこともあり、今後のためにRails/RSpecの実行時間がどのようになるか検証しました。 MacBook Pro 2021 (M1 Pro)を購入 Docker for Macの有料化（個人的には対象外ですが） Docker for Macの代替えとして、Lima + Dockerがよさそう Lima + Dockerで、Docker for Mac ボリュームマウントの遅さから解放されるのでは？ 環境 MacBook Pro 2021 (M1 Pro) CPU: M1 Pro (10 core) メモリ: 32GB MacBook Pro 2018 (Intel) CPU: Intel Core i5 2.3G
こんにちは。フィナンシャル開発センターWeb開発室の鈴木です。Web開発室は現在「LINE証券」のフロントエンドを担当しています。【LINE証券 FrontEnd】 シリーズでは、Web開発室メンバーがLINE証券のフロントエンドにまつわる様々なトピックや、LINE証券の開発中に得た知見をお届けします。今回は第1回ということで、LINE証券のフロントエンドの全体像を説明します。LINE証券というアプリがどんな技術で動いているのか、そして技術に対する考え方を知ることで、LINE証券をより身近に感じていただけると幸いです。 TypeScript + React LINE証券は、いわゆるSPAとして作られています。最近のSPA開発で最初に決めることといえば、1に言語、2にViewライブラリですね。見出しにすでに出ていますが、LINE証券ではプログラミング言語としてTypeScriptを、ライブラ
Backend web development is the part of web development that deals with the server-side of a web application. This includes creating and managing the server-side logic, connecting the application to a database, creating server-side APIs, handling user authentication and authorization, and processing and responding to user requests. It often involves the use of backend development languages such as
フロントエンド開発者も知っておきたい�AWS Lambda とサーバーレス / Serverless for frontend developers
Front-End Study #1「Cloud Native時代のフロントエンド」での登壇資料です。
それっぽいタイトルを付けましたが特に意味はないです。 workspace を使ったコマンドを最適化して実行する Turborepo についてのお話で Turborepo を軽く触ってみた際にnpx create-turbo@latestで作られる構成がとてもわかりやすく、プロダクトの初期段階からモノレポを採用するのは選択肢の 1 つとしていいのでは、と思い続編を書きました。 前回と同じくサンプルのリポジトリはこちらになります。 https://github.com/nus3/p-turborepo/tree/main/yarn 概要 モノレポを採用することで、同一リポジトリ内で自作した汎用的なライブラリやコンポーネントを複数のアプリケーションで使いまわせる モノレポの規模が大きくなってきた場合には、モノレポ内のパッケージを npm に公開することでアプリケーションとパッケージを非同期に開発
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【2. Introduction】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回はIntroduction編です。 Vue.js とは？ Vue.jsは、ユーザーインターフェース（UI）を構築するためのプログレッシブ・フレームワークです。 Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. このモノシリックなフレームワークが何を指しているかといえば、例えばAngular.jsです。モノシリ
巨大モノリスをKubernetesに移行してシングルクラスタ運用にするためにどうしたか | メルカリエンジニアリング
この問題を解決するため、もともとのコードベースであるところのモノリスもコンテナ化してKubernetesに乗せることにしました。ツールセットの統一をすることでよりシンプルな体系ができ、プラットフォームチームも一つの環境向けの改善に注力できるようになります。 プロジェクトの流れ PoC 計画についてあたため始めた際にちょうどよくUSチーム内でのハッカソンイベントがあったため、それに合わせて試しにKubernetesで動かすデモを発表しました。デモで見せる部分はごく限られたものだったため3人で3日くらい集中して開発したところ動くものができあがりました。 デモの評判は上々でEM、CTOに説明し実際にプロジェクトとしてすすめられることになりました。 現状分析 プロジェクト始動後、まず実施することは現状分析とどう移行するかの設計です。ここでのどの程度システムを把握できるかが計画の精度を決めます。しか
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームは、プロダクトのフロントエンドを横断的に支援するチームです。今回はフロントエンドエキスパートチームが行っている、プロダクトへの支援活動について紹介します。 フロントエンドエキスパートチームがどういったチームかに関しては、次の記事をご覧ください。 サイボウズのフロントエンドエキスパートチームの紹介 フロントエンドエキスパートチームの活動 サイボウズは主力プロダクトとしてGaroonとkintoneを提供しています。この 2 つのプロダクトはそれぞれ提供開始の時期が 2002 年と 2011 年となっており、浅くない歴史を持っています。 サイボウズの Web フロントエンドは、フロントエンド専任ではないエンジニアがバックエンドと合わせて担当しています。そうした背景もあり、フロン
Nikkei Advent Calendar 2023の 14 日目は IDE がやっていきます。いま Web チーム内の基盤改善を専門とするチームで活動しています。自分が入社するより前に作られてメンテナンスがあまりされていなかったシステムを、現代でも戦えるようにするお仕事をしています。メンテナンスを放置することはセキュリティ的によくないので、メンテナンスを専業で行っています。最近の自分の仕事は、今日紹介する rnikkei と呼ばれるマイクロサービス群の Node.js バージョンを、v12 から v18(一部は v20) まで引き上げることです。この rnikkei は当初「爆速の日経」と呼ばれていた頃に設計・実装されたサービスです。今日はそのような過去に作られたサービスにもう一度スポットライトを当ててみようと思います。 see: https://marketing.itmedia.c
SPA に移行しづらいシステムたちレンダリングの移り変わりCSR を有効活用しづらい事業領域App Directory によって Next.js は他と対等な選択肢になりうるServer Component がデフォルトの世界React のエコシステムの恩恵を受けられるようになるどういうアーキテクチャになるか1. モノリスから Frontend サーバを分離する2. 元々あった Frontend サーバーをリプレイスする3. SPA + BFF を１つの Next.js サーバーにするまとめこんにちは、@p1assです。 最近、Next.js 13 から beta で導入されている App Directory を趣味で触っているのですが、今まで SPA を採用しづらかった事業領域でも React のエコシステムを使えるようになりそうな予感がして、ワクワクしています。 このブログでは、今まで
こんにちは。食べログのフロントエンドチーム の荒川です。 先日、「Clean Agile 基本に立ち戻れ」を読みました。 本日はこの本の要約を、私たちのチームの活動を交えてご紹介しようと思います。 著者の Robert C. Martin氏は、アジャイルマニュフェストの創案者の一人で、 国際的なソフトウェアコンサルティング、スキル開発を行っています。 https://agilemanifesto.org/iso/ja/manifesto.html 1章 アジャイル入門 アジャイルの歴史 アジャイルの歴史は５万年以上前、人間同士が協力して、共通の目標を達成しようとしたことが始まりと述べています。ソフトウェア開発においては、アラン・チューリングがチューリングマシンの論文を執筆した1936年の当時や、1946年にACE（Automatic Computing Engine）のために書いた最初のコ
こんにちは。SALESCORE株式会社CTOの成澤です。 祝・Publication機能のオープンβリリース🎉🎉 ということで、SALESCOREのテックブログを発信し始めます！ テックブログの一発目ということで、2022年で一番開発体験が変わったTurborepoによるモノレポ・モジュラーモノリスによる開発について紹介します。 今後もTypeScriptでのWebサービス開発について記事を出していく予定なので、気になる話題などあればコメントいただけるととても嬉しいです🙋♀️ モジュラーモノリスという選択肢 ソフトウェア開発における重要な要素の1つは抽象化です。 抽象化をあえて噛み砕いて、平坦な言葉で言うならば 「適切なグルーピング」 と呼んでも良いでしょう。抽象化とは、ものごとをグルーピングして、適切な名前を与えることです。 100行の処理の羅列は分かりづらいが、10行ずつグルー
I joined GitLab in October 2015, and left in December 2021 after working there for a little more than six years. While I previously wrote about leaving GitLab to work on Inko, I never discussed what it was like working for GitLab between 2015 and 2021. There are two reasons for this: I was suffering from burnout, and didn't have the energy to revisit the last six years of my life (at that time)I w
本記事は2022年11月に開催した「Tech-Verse 2022」で発表したセッションを要約したものです。アーカイブ動画を文末に掲載しています。質疑応答の様子も収録されていますのでぜひご覧ください。 ヤフーショッピングのフロントエンドを支える共通配信技術について、「共通UI配信サービス誕生までの経緯」と「共通UI配信サービスを支える技術」の2部構成で紹介します。 共通UI配信サービス誕生までの経緯 ヤフーショッピングには、トップ、検索、商品詳細、カート、レビュー、問い合わせ、製品、キャンペーン、ランキング、注文履歴などさまざまな画面があり、それに合わせてさまざまな開発チームが存在しています。 各チームでアプリケーションは独立していて、それぞれリンクで接続されています。共通UIのHTMLもアプリケーションが異なれば、それぞれに記述されます。同じアプリケーション内で共通UIを実装するのは簡単
Cloudflare Pages
Install Cloudflare PagesWhere do you want to install Cloudflare Pages?github-usernameInstall & Authorize Cloudflare PagesInstall & AuthorizeCancel Frontend developers want to build fast and beautiful sites, not play system integrator: bogged down by configuring build systems, setting up environments, and keeping production up to date. With Pages, you can connect your GitHub or GitLab account. Afte
この記事は、マネフォアドベントカレンダー2022 14日目の投稿です。 13日目は 廣瀬 さんで「チーム運営の仮説検証サイクルを高速化させるために、新卒スクラムマスターが取り組んだこと」でした。 本日は 岐阜在住で名古屋開発拠点のsainu が「マネーフォワードで実践したマイクロフロントエンド」について書きたいと思います。 はじめに マイクロフロントエンドは、2022年10月にBuilding Micro-Frontends（Luca Mezzalira 著）の翻訳版がオライリーから出版されて少し話題になってました。ThroughWorks Technology Radarには2016年から登場して、2019年にAdoptになっています。 私は今年の年初にマイクロフロントエンドという言葉を初めて知りました。今年、名古屋拠点で開発しているマネーフォワードクラウドの業務基盤システムでマイクロフ
Introducing Rome
We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain. Rome is a monolithic tool con
Next.js 14
As we announced at Next.js Conf, Next.js 14 is our most focused release with: Turbopack: 5,000 tests passing for App & Pages Router 53% faster local server startup 94% faster code updates with Fast Refresh Server Actions (Stable): Progressively enhanced mutations Integrated with caching & revalidating Simple function calls, or works natively with forms Partial Prerendering (Preview): Fast initial
モダンフロントエンド = 宣言的 UI = 仮想 DOM ターゲット npm ツールチェインが使えない環境で、パフォーマンスを悪化させずにモダンフロントエンドをやりたい人 サードパーティスクリプトを提供する人 方向性 省ビルドサイズを目指す とくに外部から読み込まれる 3rd party script は、サイズ要求が厳しい lighthouse で 100 点の環境の点数を落とさないためには、おそらく 3rd は 20~30kb 未満を目指す必要がある 今後パフォーマンスが SEO に関わってくるので、このへんは重要 Google、ウェブサイトの UX 健全性を示す Web Vitals を導入。3 つの重要指標は LCP/FID/CLS | 海外 SEO 情報ブログ 実行時パフォーマンス要求 よほど複雑なアルゴリズムを実行するので無い限り、省ビルドサイズ制限を満たせば十分 モバイルで重
React Hook FormとZodを組み合わせて利用する｜食べログ フロントエンドエンジニアブログ
こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した React 向けのライブラリです。 なぜReact Hook Formを利用したか今回のプロジェクトでは複雑なフォームを組む必要があり、フォームの状態管理を任せられる点や、パフォーマンス面、ドキュメントや検索でヒットする情報の多さからReact Hook Formを利用することを決めました。 基本的な使い方まずはReac
HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Hotwire: Reactive Rails with no JavaScript? — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2021/04/12 原著者: Vladimir Dementyev -- Evil Martiansリード開発者。 サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 長文につき前編と後編に分割しました。 サマリー The HEY stack: - Vanilla Ruby on Rails on the backend, running on edge - Stimulus, Turbolink
我が Design-Frontend Ops論〜フロントエンド開発を加速するためのデザイン - 仮説編〜｜seya
やはりデザイナーがアレだとフロントエンドエンジニアの生産性も著しく下がり、逆に良ければ上げることもできると思うので、自分が考えてる「デザインの側面からフロントエンドの生産性を考える」というのは割と筋がいいアプローチなのではという想いが深まった — フロントエンド大好きseyaさん (@sekikazu01) June 15, 2021 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あふれるデザイナーも募集
チャリティーカンファレンス沖縄2020 フロントエンド編の資料です。 https://charity-conf.okinawa.jp/
レガシーなフロントエンド環境をリプレースするためにチームでやっていること｜食べログ フロントエンドエンジニアブログ
はじめに はじめまして！食べログFE（フロントエンド）チームの金野と申します。 普段は、食べログフロントエンドの設計・開発や、新規事業・食べログテイクアウトの技術サポートなどを行っています。 食べログテイクアウトについては、Nuxt.js + TypeScriptの開発について記事を書いているので、興味がある方はぜひ御覧ください。 さて、以前の記事でご紹介したように、食べログFEチームではレガシーシステムのリプレースをReact/TypeScriptで行っています。 今回は、新しいシステムについてもう少し詳しい技術スタックや、どのようなプロセスで開発しているのかを紹介します。 開発効率化のための取り組みリプレースのお仕事はただひたすら実装するだけではありません。 「壊れにくいアプリケーション」「メンテナビリティが高いアプリケーション」にするために、アーキテクチャや採用する周辺技術について、
めっちゃくちゃ久しぶりの記事です。 弊社のStampはTabisakiの運用を始めたこともあり、SEOに取り組む機会も増えてきました。そんなタイミングで、Googleの検索結果のランキングアルゴリズムが流出したとのことですので海外の記事をベースにAIで内容をまとめました。 ドメイン権威（Domain Authority） ドメイン権威（Domain Authority、DA）は、SEOの世界で広く使用される指標であり、特定のドメインが検索エンジンの結果ページ（SERP）でどれだけの影響力を持つかを測定するものです。この指標は主にMozが提供しているもので、0から100のスコアで表され、高いスコアほど検索結果でのランキングが高くなる可能性があるとされています。ドメイン権威は以下のような要因に基づいて計算されます。 リンクプロファイルの質と量: 外部サイトからのリンクの数と質。 ドメインの年齢
みなさん、ブラウザ内で TypeScript が直接動いてくれたらいいなぁ、と思ったことはありませんか？ しました。 これができます。 どのようにうごいてるか Service Worker は合法 MITM とも言えて、 fetch 時のリクエストを好きに書き換えることができます。 開発時 初回インストール時に Service Worker をインストール コンパイラを内蔵した Service Worker がリクエストの拡張子に応じて js に書き換える Content-Type: text/javascript として SW でキャッシュして返却 TypeScript(.ts, .tsx) と Svelte(.svelte + preprocess) に対応 WebSocket サーバーを起動。ファイル変更を監視して、変更されたファイル名をブラウザに通知 変更されたファイルを Serv
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション（OOUIの考え方を取り入れたら画面数が減りました） 基本的にバック
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果 - ABEJA Tech Blog
第0章：はじめに こんにちは。はじめまして。 ABEJAでフロントエンドとバックエンドをフラフラしているエンジニアの齋藤(@z-me)*1です。 本ブログは ABEJA Advent Calendar 2019 の9日目です。 不本意ながらABEJAで開催するフロントエンドのミートアップやカジュアル面談でよく、 ABEJAってAIの会社ってイメージはあるけどUI/UXガッチリやってるイメージがない。 と言われる事が多いので、当ブログ編集長*2が言っている通り*3、ABEJAではプロダクトを開発＆提供しているということをお伝えしたいと思います。 今回はその中でも、あまり外部に広く知られていない、ABEJA Insight for Retailの提供しているDashboardで、どのようにUI/UXに力を入れて開発しているのかや、その開発手法(Atomic Design)やグラフCompone
The key to achieving world-class expertise in any skill, is to a large extent, a matter of practicing the correct way, for a total of around 10,000 hours — Malcolm Gladwell in OutliersI'm certainly not a world-class expert, but I have put my 10,000 hours of deliberate practice into programming. Here are 31 of my reflections on programming. These are reflections only about pure coding — no lessons
Web フロントエンドにおける API モック戦略
はじめに 新規開発のプロジェクトでテスト戦略を立ててしばらく開発をしています。そのテスト戦略の内の 1 つに Web API モックの運用ポリシーを決めていたのですが、大きな問題がなく運用ができているので「API モック戦略」と大袈裟に題してみました。 特に奇抜なことはしていないですが、振り返りとしてまとめたいと思います。 目的 Web フロントエンドの開発時にモック API を利用して動作確認・自動テストをしたい 開発サーバを起動するだけでブラウザで動作確認をしたい Testing Library などを用いた UI コンポーネントの振る舞いを自動テストしたい モックデータの管理を簡単にしたい ブラウザでの動作確認と自動テストで同じモックデータを利用したい 前提 API のモックサーバは Mock Service Worker （以下 MSW と呼ぶ）を利用する。MSW のメリットや利用
サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル - カミナシ エンジニアブログ
はじめまして、株式会社カミナシのエンジニア @tomiです。 カミナシは、2020年10月にサービスサイトをフルリニューアルしました。 kaminashi.jp 今回のサイトリニューアルでは、どのような構成で作ったのか、また技術選定で考慮した点をお伝えします。 Jamstackな静的サイト構成 Gatsby.jsとWordpressを使いJAMstack構成で作成しました。 最終的に以下の画像のような構成になりました。 利用した技術を並べると、 Gatsby.js Typescript StyledComponents GraphQL EsLint + Prettier Wordpress + Gutenberg Netlify 導入事例やセミナー情報など、動的な情報は記事としてWordpressに登録し、Gatsby.js側で記事をGraphQL経由で取得して表示しています。 静的なファ
CTOの川口 (id:dmnlk) です。 これはBASE Advent Calendar25日目の記事です。 今年も僕は立候補してないのに勝手に日程が組み込まれてました。毎年書いてくれるメンバーが増えていってくれているのになぜ。 CTOについて 自分は2019年からBASE株式会社のCTOをやっています。 気づいたら4年近くやっていることになっていて驚いています。 たまに社外のエンジニアの方とお会いするとCTOになるにはどうすればいいかということを聞かれることがあります。 僕個人のサンプルではありますが、少し書いてみようかと思います。 なぜCTOが必要なのか 必ずしもCTOが必要なのでしょうか。 これに関しては僕は必要であると考えます。 自分がWeb企業にいるという前提条件はありますが、システムやテクノロジーが非常に重要な市場優位性となります。 ただプロダクト開発をするだけでなく最新の技
JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画
JavaScriptランタイム「Bun」が約9億円を調達、「Oven」社を設立。ホスティングやCIサービスなど計画 7月に発表されるやいなや急速に注目を集めているJavaScriptランタイム「Bun」の開発者であるJarred Sumner氏が、Bunの開発とサービス提供などを目的とする企業「Oven」社の設立を発表しました。 Introducing Oven: the company behind Bun. Oven has raised $7m led by @buckymoore at Kleiner Perkins with participation from @rauchg @ycombinator and morehttps://t.co/HG2TUCQWbL — Oven (Bun) is hiring engineers (@oven_sh) August 24, 20
Starting today we are evolving our brand identity to clarifying the difference between our company and our products. Material-UI: the organization is now called MUI. Material-UI: the Material Design components developed by MUI is now called Material UI, we ditched the hyphen! Material-UI X: the set of advanced React components is now called MUI X. Material-UI: the set of foundational MIT React com
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
２年かけて個人で全く新しいSNSアプリを作ったお話し - Qiita
Reactでオーディオプラグインを作れる時代になったという話
WSLの代わりにDockerを使う - ただのにっき(2020-07-23)
M1 Pro + Lima + Dockerが速い (Rails/RSpec検証)
【LINE証券 FrontEnd】LINE証券フロントエンドの全体像
Backend Developer Roadmap: What is Backend Development?
フロントエンドのモノレポ構成はスケーリングの夢を見るか | サイボウズ フロントエンドエキスパートチーム
フロントエンドの開発体験向上と脱レガシー - Cybozu Inside Out | サイボウズエンジニアのブログ
Express と handlebars で動き続ける日経 — HACK The Nikkei
バックエンドエンジニアがNext.jsのApp Directoryに夢を見る - ぷらすのブログ
Clean Agileを読みました｜食べログ フロントエンドエンジニアブログ
TypeScript・モジュラーモノリスによる型安全なWebサービス開発
What it was like working for GitLab
ヤフーショッピングのフロントエンドを支える共通配信技術
マイクロサービスのその先へ。マネーフォワードのビジネスを加速するマイクロフロントエンドという選択
省ビルドサイズ要求環境でモダンフロントエンドをやる (主に preact の話)
フロントエンドのエコシステム / Frontend Ecosystem
Googleのランキングアルゴリズム流出から考えるSEO - Qiita
Swdev: 真の No bundle frontend
Next.js+TypeScript+AWS Amplify+RecoilでToDoリストを作る - Qiita
Reflections on 10,000 Hours of Programming
CTOに必要なものとは - BASEプロダクトチームブログ
Material-UI is now Material UI! - MUI