LernaとYarn WorkspacesでMonorepo管理 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 本記事では、Lerna と Yarn Workspaces を使った Monorepo 管理について解説します。 Monorepoとは 本記事では、単一のリポジトリで複数のモジュールやパッケージ（今回の場合は npm パッケージ）を管理する手法を Monorepo と呼んでいます。 有名なところだと、Babel や Jest、Create React App などが後述する Lerna を使い複数パッケージを単一のリポジトリで管理しています。 他にも React も Lerna は使っていませんが単一リポジトリで複数パッケージを管理しています。 また、上記のようなライブラリ以外にも企業で利用している npm パッケージを Monorepo として管理している例もあります。下記は Shopify の例です。 pack
Yarn のワークスペースの初歩 - 30歳からのプログラミング
Yarn にはワークスペースという機能があり、これを使うとひとつのリポジトリで複数の npm パッケージを開発できるようになり、効率的に作業を進められるようになる。 この記事の内容は、Yarn のv1.22.4で動作確認している。 シンボリックリンクが作られ、パッケージをまたいだ開発をしやすくなる ワークスペースをつかうためには、リポジトリのルートディレクトリにpackage.jsonを作成し、workspacesフィールドを指定する必要がある。 また、このディレクトリをパッケージとして公開することはないので、privateフィールドをtrueにしておく。 { "private": true, "workspaces": ["project-a"] } 上記の例では、project-aというディレクトリを、ワークスペースの対象としている。 次に、以下の内容の./project-a/pack
GraphQL, TypeScript, React を用いて型安全に社内システムをリニューアルした話 | MEDLEY Developer Portal
2020-11-06GraphQL, TypeScript, React を用いて型安全に社内システムをリニューアルした話こんにちは。メドレーのエンジニアの山田です。現在、医療介護求人サイト「ジョブメドレー」のチームで開発を担当しています。 今回、ジョブメドレーの社内スタッフが利用する社内システムをリニューアルした事例をご紹介します。 リニューアル対象はバックエンド領域も含まれますが、本記事ではフロントエンドの話を中心にご紹介します。 また、弊社デザイナー酒井が以前投稿した デザイナーがデザインツールを使わずに、React を使ってデザインした話 も関連しているので、よろしければあわせてご覧ください。 リニューアルの背景社内システムでは、求人サイト「ジョブメドレー」を利用する求職者に関する情報や求職者の応募状況を管理しています。 前回のリニューアルから時間が経ち、複雑性が高くなってきました
graphql-codegen で型定義を生成する (React, Apollo, TypeScript) - Qiita
graphql-codegen で型定義を生成する (React, Apollo, TypeScript)TypeScriptReactGraphQLapollo 本記事はこのリポジトリでやったことのまとめです。 GraphQL + TypeScript への課題感 TypeScript(に限らず他の静的型付の言語) と GraphQL を使うと、型の二重定義が発生がちです。折角 GraphQL に通信規約としての型を書いているのに、それを多重定義することで、運用の面倒臭さやバグの温床になりかねない、という懸念がありました。 今回は、graphql のスキーマとクエリを書くと、サーバー向けに resolver の型定義、クライアント向けにクエリの型定義を生成し、それによってできるかぎり型安全なコードを扱うのをゴールとします。 やり方 graphql-code-generator を使います
nodemonとは? - Qiita
メモ残しておきます Koa.jsのチュートリアルを進めていると序盤でnodemonという見慣れないツールが出てきたのでメモを残しておきます。 nodemonとは? ソースを監視して、自動でサーバーを再起動してくれるツール。 nodeの代わりにnodemonを使ってコードを走らせると、コードの変更時にプロセスが自動で再起動する。 ターミナルに以下を打てばインストールできる。 特徴 アプリケーションの自動再起動 監視のためにファイルの拡張子を検出 node&coffeescriptがデフォのサポート。しかし、実行可能はファイルであれば走らせる事ができる。 特定のファイルやディレクトリを無視する 特定のディレクトリを監視する サーバーアプリケーションまたは1回のユーティリティとREPLを実行 nodeのアプリでは必須 オープンソースであり、githubを利用可能 実際に変更があると。
GraphQL Apollo-Server ハンズオン | suzukalight.com
突然ですが、@suzukalight は来年からジョブチェンジして、バックエンドエンジニアとして働くことになりました！ 弊社の開発環境としては、Node, GraphQL, koa, apollo-server, RxJS などを採用しているのですが、順次キャッチアップするとして、まずは基本中の基本からしっかり押さえておきたいと思い、GraphQL の素振りを始めています。 Apollo-Server を使った GraphQL サーバの具体的なチュートリアルとして、こちらの素晴らしい記事がありましたので、これをなぞりつつ、TypeScript で記述したり、適宜改造したりしながら素振りをしていこう、というのが本記事の主旨になります。なお数回のシリーズとして書いていく予定です。 今回実装したリポジトリはこちらです； https://github.com/suzukalight/study-g
Client Side Rendering（SPA）・SSR・SSG を整理してみた - 7839
Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機能が本格的に導入されたので、Next.js は SSR はもちろんのこと、SSG も対応可能となった。） SSR を理解する上で、Client Side Rendering または SPA と対比しながら整理を行った。 Client Side Rendering SSR SSG まとめ Client Side Rendering Client Side Rendering は、SPA（= Single Page Application）とほぼ同意義である。 ブラウザからリクエストされると、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
