gooberでtailwindcssを使うヘ(^o^)ノ

前の記事でNext.jsでgooberを導入してみました murajun1978.hatenadiary.com 今回はgooberでtailwindcssを使ってみます Next.jsにtailwindのセットアップしていきましょう $ npm install @tailwindcssinjs/macro @tailwindcss/ui tailwindcss $ npm install …

Next.jsでgooberを使ってみるヘ(^o^)ノ

はじめに gooberというcss-in-jsのパッケージがあります github.com 使い勝手はstyled-componentsとか、emotionなんかと同じです ただ、パッケージのファイルサイズがびっくりの1KBです このサイズは魅力的なので、Next.jsで使ってみましょう Installation $…

Prisma2で指定できるIDのType

Prisma2で指定可能なIDのTypeはドキュメントに書いてあります www.prisma.io // integerでautoincrementする model User { id Int @id @default(autoincrement()) name String } { id: 1, name: "murajun1978" } // cuidを使う model User { id String @id @…

CloudflareのImage Resizingを使ってプレースホルダ画像として表示する

はじめに Next.jsではpre-renderがデフォルトです。 pre-renderとは、server side renderingとclient side renderingの中間的な存在。(雑な説明です みなさんはMediumってブログを見たことありますか? Mediumの記事は画像がピンぼけして、すこしたってから…

Next.jsをCloudflare workersから配信したい! Part 2

はじめに Part 1では workder.devにデプロイするところまでやったよね murajun1978.hatenadiary.com Part2ではproductionにデプロイして、KVを使ってみましょう Productionデプロイ productionにデプロイする前にやることがあります。 それはAレコードの登録…

Next.jsをCloudflare workersから配信したい! Part 1

みなさま、Cloudflare workersってご存じですか? workers.cloudflare.com 90カ国 200都市のデータセンターで動いてるEdge serverです。 service workerのEdge server版ってとこです。 S3やCloud StorageのファイルをCDN経由で配信? ま、それも悪くないです…

Traefikでdocker-composeのポート重複を解決する

昨日のDockerCon LiveのセッションでTraefikの存在を知ってしまったので、ちょっと試してみました github.com 同一プロジェクト、または複数のプロジェクト間でportがかぶってちょっとずつ変えているなどなど 例) App1では3000ポートをApp2でも3000ポートを…

Next.jsのPreview modeでページのプレビューを表示する

Next.js v9.3でpreview modeが追加されました CMSっぽいの作ろうと思ってるので、ちょっと試してみました めちゃシンプルで簡単にPreviewできたのでメモ ドキュメントは↓ nextjs.org サンプルコードは↓ github.com Preview modeのAPIを用意する ヘッドレスCM…

Next.jsでTailwind CSSとEmotionを使う

Next.jsでTailwind CSSとEmotionを使える環境を作ってみます $ npm init next-app --example with-tailwindcss-emotion [アプリケーション名] create-next-appを使って、exampleをダウンロードするだけでOKです Exampleのリポジトリ github.com これだけだと…

Railsのmodelでprivateメソッドのロジックをテストしない

みなさんはRailsのモデルでprivateメソッドをテストしますか? 僕はしません。 理由はpublicメソッドではないからです。 Privateメソッドをテストするって理由の一つが、「privateメソッドのロジックをテストしたい」だと思います。 ふーん、でもそのロジッ…

Apollo serverのSchema directivesを使ってdeprecation warningを表示する

Apollo serverでリファクタリングや仕様変更などで、特定のフィールドをdeprecatedにしたい場合があります Apollo serverの @deprecated を使えば簡単にdeprecation warningを表示できます では、やってみましょう // src/index.js const { ApolloServer, gq…

RailsでYAMLに定義したカスタム設定を使う

Railsで自分で定義したYAMLファイルをロードしてアプリケーションで使いたい! ってことでやってみますー 僕がRailsでカスタム設定といえば、そうこの子です! github.com Latest commit 0ae134b on Aug 7, 2014 なるほど、開発やめちゃったんだねー そう言…

Markdown BlogをNext.jsで作る

はてなブログに書いてるけど、興味のある技術を試す場としてブログを自分でbuildしようかと思う Markdownで記事を書くなら、GatsbyJSとかでさくっとできそうだけど、そこはあえて自分が興味あるもので作ってみる Next.js + MDX + TypeScript でブログを構築…

【現場で役立つシステム設計の原則】ドメインオブジェクトの見つけ方

現場で役立つシステム設計の原則をよみ直している ドメインオブジェクトの見つけ方 かなり適当に言ってしまうと、会話だと思いました! (実際、そう書いてある) この辺は僕もあやしくて、多分こんな感じーって実装してしまいます ですが、優秀なエンジニアさ…

【現場で役立つシステム設計の原則】データとドメインモデル

最近、現場で役立つシステム設計の原則をよみ直している データベースにはコトを、ドメインモデルには業務ロジックを記述していく このことを考えるとデータベースをアップデートすることは、マスターデータ以外はそうはなさそう 例えば、商品名は変更するこ…

JSConfJP 2019に参加してきたヘ(^o^)ノ

JSConfJP 2019のスピーカーを見た瞬間にチケット購入したイベントに参加してきました! jsconf.jp チケットを買ったときに聞きたかったセッション は以下 Day 1 THE STATE OF JAVASCRIPT by Sacha Greif BUILDING SECURE AND SEAMLESS SIGN-IN EXPERIENCE US…

明神岳を登ってきたヘ(^o^)ノ

最近、登山いってます! 今回は明神谷ルートで、明神平 => 前山 (ルート間違いww) => 明神岳にチャレンジしてきました! 入り口はこんな感じ 第1印象はけっこう激坂! 心拍数はあがりましたが、筋トレの成果もあり足は余裕でした! だた、40分ほど登ってる…

GitHub Registryが使えるようになったので、Next.jsのDocker imageをPushしてみたヘ(^o^)ノ

GitHubからWelcome to the beta of GitHub Package Registryメールが来たので試してみた GitHub Package Registryにpushできるものは ↓ リンクを参照してください help.github.com 今回はNext.jsのDocker imageをGitHub Package Registryにpushしてみました …

Docker Container上のNext.js with TypeScriptなAppをVSCodeでDebugする

Docker containerで動作しているNext.jsをVSCodeでDebugしてみました サンプルコード github.com Requirements Docker Docker Compose インストールはこの辺を参考に ↓ Install Docker Install Docker Compose Docker 開発用のDockerfileを作成 Dockerfile F…

GR-CITRUS ミニハッカソン in OSAKA に審査員として参加した

connpass.com GR-CITRUS ミニハッカソン in OSAKA に審査員として参加してきました IFTTTを使ったIoTなものから、アイディア満載の作品などどれもレベルが高かったです! 個人的にもいい刺激をいただきました! でもね、スタッフとか審査員とかで参加した場…

Rails Follow-up Osaka #13 を開催したヘ(^o^)ノ

rails-follow-up-osaka.doorkeeper.jp 会場提供は株式会社エイチームさんでしたーヽ(´▽`)/ ありがとうございましたっ! localhostでsubdomainのURLにアクセスしてデバックしたかったようなのでサポートできたかな? e.g. # config/routes Rails.application…

Rails Follow-up Osaka #12を開催した

rails-follow-up-osaka.doorkeeper.jp 会場提供は株式会社エイチームさんでしたーヽ(´▽`)/ ありがとうございましたっ! チームにjoinしたての方が環境構築に手間取っていたのでサポートできた。 具体的にはRMagickのインストールに失敗していた。 なんだかI…

神戸.rb Meetup #64 へ参加した ヘ(^o^)ノ

koberb.doorkeeper.jp 参加してきたメモ ちょっとできるエンジニアが1人で色々やってもあんまり会社としてもメリットないよってお話 他のメンバーと一緒に階段を1段ずつ登っていかないとダメだよねってお話 できるエンジニアがいなくなると何も残らなくなっ…

Getting started with Mastodon ヘ(^o^)ノ

Today, I attended this event. dddrb.doorkeeper.jp But I failed to setup Mastodon. The reason for the failure was a bug in cld3-ruby. Fortunately this bug was fixed. github.com github.com Setup for macOS $ gem install foreman $ brew install…

Kunibiki.rb #3に参加したヘ(^o^)ノ

kunibikirb.connpass.com 発表内容 Railsアプリ開発者のためのDocker入門 by セラリンさん slides.com rails + reactでアプリ作成 by 吉岡さん React, Vue.jsなどフロント回りのお話でしたー 参考資料 qiita.com めんどくさがりの僕はフロントエンドとバック…

Tmuxを使ってプロジェクトの開発環境をいっぱつで起動するヘ(^o^)ノ

一つのプロジェクトで複数のタブを開いて作業したりしませんか? Rubyのアプリケーションであれば foreman を使ったりするかもしれませんが、、 Shinosaka.rbで今回のテーマにぴったりなプロジェクトがあるのでそいつを使って試してみます。 github.com まず…

Destructuring Object in ES6

often use const props = { label: 'label', text: 'text' } const { label, text } = props console.log(label) #=> 'label' console.log(text) #=> 'text' default value const props = { label: 'label' } const { label, text = 'text' } = props consol…

Jestでcontextを使うヘ(^o^)ノ

Environment Jest 18.1.0 Jestでは context が使えません、、 github.com なので、使えるようにしてみましょう。 とはいっても、contextはdescribeのエイリアスです。 global変数を定義してみましょうヘ(^o^)ノ // setupTestFramework.js global.context = d…

Rails5でActiveSupport::PerThreadRegistryがdeprecatedになったよヘ(^o^)ノ

ちょっと今更ですが、Rails5でActiveSupport::PerThreadRegistryがdeprecatedになった。 ActiveSupport::PerThreadRegistryを使ったほうがイイ理由は遠い昔に書いたブログを参照してね。 murajun1978.hatenadiary.com ActiveSupport::PerThreadRegistryにも…

フロント用にサクッとAPIのレスポンスを用意するヘ(^o^)ノ

Mock API response with json-server github.com Create sample data with Faker.js github.com Sample code github.com Setup $ git clone git@github.com:murajun1978/faker-sample.git $ cd faker-sample $ npm install Start server $ npm start faker.j…