Next.jsプロジェクトに追加したい設定11個 - Qiita
pnpmについて 私は普段、パッケージマネージャーにnpmではなくpnpmを使っています。npmよりパッケージインストールが高速であったり、ちょっと良い機能が付いていたりします。1 この記事の内容のほとんどはnpmとpnpmのどちらでも問題ないように書いているつもりですが、念のため前提として紹介させていただきます。 create-next-appの実行(オプション追加) create-next-appにはいくつかオプションがあります。私はいつも以下のようにしています。 # pnpmの場合 pnpm dlx create-next-app ./some-directory --ts --no-tailwind \ --eslint --app --src-dir --import-alias '@/*' # npmの場合 npx create-next-app ./some-director
リーダブルSQL[より良いSQLを書くためのシンプルで実践的なテクニック] - Qiita
はじめに 最近エンジニア界隈では「リーダブルコード」が話題なっていますね。 リーダブルコードでは、このような定理が紹介されています。 「コードは他の人が最短時間で理解できるように書かなければいけない。」 Dustin Boswell リーダブルコード P.3 より引用 SQLでも同じことが言えそうです。 リーダブルなSQLを書いてないと結婚できない時代が今まさに到来しようとしています。 皆さん、クソSQL1を読んだことがありますね？ クソSQLを書いたことがありますね？ 僕は、あります。 そこで、本記事ではどうしたらリーダブルなSQLが書けるかというアイデアを紹介します。 処理の流れの順に上から読めるようにする 人間のメンタルモデルは、問題やタスクを小さなステップに分割し、それぞれを順番に実行することに適しています。 サブクエリを使ったSQLでは、処理の流れは上から下ではなく、ネストされた
![リーダブルSQL[より良いSQLを書くためのシンプルで実践的なテクニック] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e4b50cb826dc76ffa5a15a97343ab36cac44503/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJTk2JUUzJTgzJUFCU1FMJTVCJUUzJTgyJTg4JUUzJTgyJThBJUU4JTg5JUFGJUUzJTgxJTg0U1FMJUUzJTgyJTkyJUU2JTlCJUI4JUUzJTgxJThGJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFCJUUzJTgxJUE3JUU1JUFFJTlGJUU4JUI3JUI1JUU3JTlBJTg0JUUzJTgxJUFBJUUzJTgzJTg2JUUzJTgyJUFGJUUzJTgzJThCJUUzJTgzJTgzJUUzJTgyJUFGJTVEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jMjEwYmIwZGRkMTc0MmI1ZGU1OGMxMTQ5ODJiNDI3ZQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwemFja2V5MiUyMGluJTIwJUU2JUEwJUFBJUU1JUJDJThGJUU0JUJDJTlBJUU3JUE0JUJFTSUyNkElRTMlODIlQUYlRTMlODMlQTklRTMlODIlQTYlRTMlODMlODkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYyNDU1MjZkZTUzZTdlOGQ0NDI5MTJhY2FlNWI2MjM4%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D564d0bbe76f00558f53eda62333d7309)
ソフトウェアはなぜバージョンアップしなければならないのか - Qiita
はじめに 社内インフラの運用担当者にとってソフトウェアのバージョンアップは地味な割に大変な業務です。 特に社内のオンプレサーバで動いているようなソフトウェアの場合、バージョンアップに伴う諸々の調整をそのソフトウェアを利用している各部署と行う必要があります。 そんなときに「今は忙しいからバージョンアップを先送りしてほしい」「このバージョンはスキップしてもよいのでは？」なんて声が各部署から聞こえてきます。バージョンアップの価値を各部署に理解してもらうのは大変です。 この文章はそんな時になぜバージョンアップしなければならないのかを上司や各部署のマネージャに伝えるために書きます。 ソフトウェアの有効期限は2-5年 まず、第一に、ソフトウェアというものは無限に使えるわけではなく、一定の有効期限があり、それを過ぎると徐々に動かなくなってきます。俗にいう「何もしてないのに動かなくなった問題」です。 なぜ
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
【ハンズオン】Next.js × Go × AWSでJWT認証付きGraphQLアプリとCI/CDを構築してみよう - Qiita
■ご案内■ 本内容は合計４つの記事で構成されています。 【環境構築編】 👈いまここです 【Next.js編】 【Go編】 【AWS編】 これからも頑張ってハンズオン系の記事を書いていきたいと思っているので、いいねっと思って頂けたらLGTM押していただけると励みになります！ 作成に至った背景 普段エンジニアの皆さんは、業務用に新しいライブラリやツールを調べたり、趣味で新しい言語やフレームワークを使ってサンプルアプリを作ってみる方は多いと思います。 エンジニアになって歴は浅いものの、私も例に違わず、業務前後や休日を使って趣味の延長でコードを書いていました。 ある日、ふと自分のGitHubリポジトリを見返してみると、それなりに多くの"インプットの跡"に気づきました。 "使えそうなプロジェクトを合体"してみれば、それなりのボリュームにもなるし、何よりGitHubの藻屑となりえたこの子達にも少し
moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴： moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン（時間帯）指定に対
シンプル図解: 正規表現の (?= ) とか (?! ) とか (?<= ) とか (?<! ) とか - Qiita
入社1年目、趣味は整理整頓、 @pal4de です。 正規表現が大好きです。 先日投稿した記事が好評いただき本当にうれしかったです。もっとたくさんの人に読んでもらいたい！！！ さて、上の記事で紹介したのは単語境界 \b でしたが、これは先読み/後読みを駆使して下記の通りに表せると紹介しました。 便利な\bですらショートハンドに過ぎず、真に強力なものは 先読み(?=...)と後読み(?<=...) だということを主張したい！！！ わかりすい図解も添えましたので、是非お楽しみください🏝️ 正規表現の記号は4種類 先読みの紹介に入る前に、改めて正規表現を俯瞰してみましょう。 誤解を恐れずに言えば、正規表現に出てくる記号の種類は4つしかないといえます1 2。 このようにとらえてみると、正規表現と向き合うのがだいぶ楽になります。体系化された理解への第一歩ですね 🗿 図にもある通り、 行頭 ^ も
GoogleのShell Style Guideの邦訳 - Qiita
背景 (Background) どのシェルを使うか (Which Shell to Use) Bash は実行が許可された唯一のシェルスクリプト言語である。 実行可能ファイルは #!/bin/bash と最小限のフラグで始めなければならない。シェルオプションの設定に set を利用することで、 スクリプトを bash script_name として呼び出してもその機能を損なわないようにせよ。 全ての実行可能シェルスクリプトを bash に制限することで、全てのマシンにインストールされた一貫したシェル言語を得る。 これに対する唯一の例外は、コーディング対象によって強制される場合である。この1つの例として、Solaris SVR4 パッケージは、どんなスクリプトにも plain Bourne shell であることを要求する。 いつシェルを使うか (When to use Shell) シェル
Next.js x Relay な GraphQL 環境で Render-as-you-fetch の良さを最大限生かしつつ SSR にも対応したいあなたへ - Qiita
Next.js x Relay な GraphQL 環境で Render-as-you-fetch の良さを最大限生かしつつ SSR にも対応したいあなたへRelayGraphQLNext.js はじめに 最近 Next.js ベースのプロジェクトに GraphQL クライアントとして Relay を導入したのですが、これが端的に言ってめちゃくちゃ大変だったので記事にしました。 チームの試行錯誤の結果を余すところなく伝えたいと張り切りすぎた結果死ぬほど長くなってしまったので、「いいからコードはよ」という方は 最終的にこんな実装になりました (コード編）をご覧ください。 謝辞 愛するチームメンバーのみんな。これまでの道のりで私を支え、愛してくれたみんながいなければ、この記事は完成できなかったと思う。 また、この記事が世に出せたのは、スーパーテクニカルアドバイザーである koichik さんの
プログラマーのための原則（2 万字） - Qiita
はじめに 今でも語り継がれる「原則」は、それだけ価値のあるコンセプトです。 歴史を振り返ることは、失敗を防ぐための効率の良い方法になります。 👑 DRY (Don't repeat yourself) 「同じことを繰り返すな。」 Andy Hunt と Dave Thomas の著書『達人プログラマー』（1999 年）で提唱された原則で、プログラミングに関する最も重要な原則といっても過言ではありません。 DRY 原則だけでなく、どんなデザインパターンやベストプラクティスでも、同じ処理が重複することは基本的に許されていません。 これにはどういう意図が込められているのでしょうか。 🔖 表面的な理由 この原則は、コードの再利用性を高め、そのために疎結合な状態を保つことは、極めて有用なことを示唆します。 1 箇所を直せば済むべき箇所をあちこちに分散させてしまうのは、自分で事故を招いているのと同
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事になる予定なので、部分的に読まれる場合の参考になさってください。 実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。 よく見る度：コーディングしていて出てくる頻度(n=1)。 お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの
[Doc] 要件定義書テンプレート・要件定義書の書き方 - Qiita
下記ドキュメントバージョンに関する注意点です。 バージョン番号のルールを定める：バージョン番号は、どのようにつけるかルールを定め、チーム全員が同じ理解で使用するようにする必要があります。たとえば、変更内容によって数字がどのように増えるか（major, minor, patch）、何桁で表現するかなど、具体的に決めておくことが重要です。 変更履歴を明確にする：どのような変更があったのか、それがどのバージョンで実施されたのかを明確にすることが必要です。これにより、何らかの問題が発生した場合に、どのバージョンから問題があるのか特定することができます。 ドキュメントの保存場所を一元化する：ドキュメントのバージョン管理には、ドキュメントを保存する場所を一元化することが重要です。それにより、異なるバージョンのドキュメントが、複数の場所に分散してしまい、誤ったバージョンが使用されることを防ぐことができま
![[Doc] 要件定義書テンプレート・要件定義書の書き方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7d131e38e26f54466aece3306435a4c09990de8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCRG9jJTVEJTIwJUU4JUE2JTgxJUU0JUJCJUI2JUU1JUFFJTlBJUU3JUJFJUE5JUU2JTlCJUI4JUUzJTgzJTg2JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgzJUJCJUU4JUE2JTgxJUU0JUJCJUI2JUU1JUFFJTlBJUU3JUJFJUE5JUU2JTlCJUI4JUUzJTgxJUFFJUU2JTlCJUI4JUUzJTgxJThEJUU2JTk2JUI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01MjE0ZDhhMTY1ZjE1ODIxNGE5NzU4Njc3MTNjOTBmNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzeWFudGllbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTc4MmM0MTlmNzhiYTJjNTk0ODYwZmExZDc0OWYzNjQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db088349e276a1ebcdb9dcf1e2d753094)
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
ドキュメントDBかリレーショナルDBどっち使う？ - Qiita
はじめに ドキュメントデータベースかリレーショナルデータベース、どちらを選ぶか。 この選択で、アプリケーションのパフォーマンス、コスト、コードの可読性など幅広い影響が出るため、慎重な判断が必要です。この記事では、自分が思う「考慮すべきポイント」を解説したいと思います。 考慮すべきポイント 1. どのデータモデルがアプリケーションコードに最適か スキーマ制約を課さずに、データレコードをドキュメント（つまりJSONオブジェクト）として保存すべきか？それともスキーマを正規化してデータをいくつかのテーブルに分けるべきか？ このような判断をするために、開発しているアプリケーションのモデルの関係性（例: UserとTaskの関係が1:N）と、一度に読み込むデータの種類を見た方がいいです。 ドキュメントDBがおすすめの時 アプリケーションのデータは、以下のような木構造で表現できますか？普段そのデータを一
React脳によるUIライブラリ書きやすさランキング - Qiita
前回のおさらい 前回の記事では、Reactに有利なベンチマークでUIライブラリに競ってもらいました。 こういうベンチマークに対しては、「実務では〜」みたいな反応が一定数出てくるのが自然の摂理です。 書きやすさランキング そこで、シリーズのまとめとして、より実務に近い指標として「書きやすさ」で競ってもらおうと思います。ただし、今回は筆者の独断と偏見によるランキングとなります。せっかく6つのライブラリで同じアプリケーションを書いたので、感想を記事にして残しておきたいという意図です。筆者と同じくReact脳の方にとっては参考になるかもしれません。 なお、前の記事を読んだ方はお分かりの通り、今回書いたアプリケーションはコンポーネントが何個かのものであり、React以外の知識は公式ドキュメントを一通り読んだ程度です。したがって、今回のランキングはコンポーネントの書きやすさに着目しています。大規模開発
Reactに有利なベンチマークを作ってみた - Qiita
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
ゲーム感覚でプログラミング学べるサービス集 - Qiita
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
あいまいを避けて勘違いの起きない命名をするための体系的分類（を目指して） ―― 英文法による一般化と明確化 - Qiita
はじめに：この記事を書いた動機 これらの素晴らしい先行記事を見て、「言語学を用いれば、共通点を見つけ出して一般化・大項目化したり、取り違えやすいエッジケースを明確化できるんじゃないか？」と思ったことが、この記事を書き始めたきっかけになります。 １章は３つの主要なパターンとその詳細・例外、２章はそれらに関する文法的な解説になっています。 構造化・体系化が必要な理由 太郎くんと花子さんが英作文の問題を解いています。 次の日本語を英文に訳せ。 (1) 彼女は楽しい人だ。彼女といると退屈することがない。彼女はいつも新しいことに挑戦して…… 太郎くん（『楽しい』って英語で何やったっけ……） 狩井先生@ 1年6月「exciting は楽しいって意味やで～」 ~~ 月日が流れる ~~ 柱鈴先生@ 2年4月「excited は楽しいって意味やで～」 太郎くん（……って教わったけど、exciting か e
初心者プログラマーのための変数/関数/メソッドの英語命名規則 - Qiita
はじめに 「なんか、レビューのたびに変数名を指摘されてる気がする...」 「日本人なんだから、英語で命名とか無理...」 こんなお悩みありませんか？ この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します！ これであなたも駆け出しエンジニアを卒業できるかも!? ※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。 プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。 対象者 この記事は下記のような人を対象にしています。 駆け出しエンジニア プログラミング初学者 PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中 前提知識 下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。 三単現のsって何？ 5文型(SV/S
"戦力外通告"をされるスタッフがどうして生まれるか - Qiita
１．色々な職場を渡り歩いて 15年ぐらいソフトウェア開発の業界にいます。 グローバル企業、大企業、中小企業までいろいろなサイズの現場で手伝いをしたことがあります。 ゆく先々で、"戦力外通告"をされる人をみてきました。 派遣やフリーランスなら契約解除です。 正社員で解雇される人はあまりみたことはないですが、自分から退職エージェントを雇って辞めた人は見たことあります。 僕が見た人は、企業サイドから辞めてほしい人なのになぜ、エージェント雇うんだろうと思うような感じでしたが。 ちなみに、記事のタイトルに「生まれる」と書いたのは、次の理由からです。 雇用関係は、雇い主と労働者の双方向であり、状況もまた一方的にできるものではなく、双方の問題で生じると思うので、「生まれる」という表現にしました。 ２．"戦力外通告"をされる人の特徴 いろいろなパターンがあると思いますが、私が実際に見てきた人の特徴を書いて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
