初めてのNext.js×Railsハンズオン - Qiita
はじめに DMM WEBCAMP Advent Calendar 2023の1日目担当のみずたです、よろしくお願いします！🎁🎅🎄 今回作るもの CRUDのRとD（ReadとDestroy）のあるアプリをNext.jsとRailsを用いてハンズオン形式で作ります。CとU（CreateとUpdate）はぜひ自分で機能追加してみてください。 ※解説すると長くなる部分は解説を省略するので、不明な部分はご自身で検索等をお願いしますmm ハンズオンの完成コード↓ https://github.com/mizuta61/frontend_sample https://github.com/mizuta61/backend_sample 記事対象者 フロント（Next.js)とバック（Rails)を分けた開発を経験したい方 バージョン Ruby on Rails 6.1.4 node v20.9.0
Rails5でpuma + nginx連携 - Qiita
この際に、ポートでのlistenはコメントしておかないとsocketのlistenが行われず（pumaの仕様？）ハマった。 参考： https://qiita.com/kappy0322/items/b6c267dfb330a47fea9f これでpumaを起動すればsocketファイルができ、待受け完了。 rails s -e production nginxの設定 設定ファイルは大きく２つあるみたい。 nginxの基本的な設定 ・/etc/nginx/nginx.conf 各サイト用の設定 ・/etc/nginx/sites-available/* 今回は/etc/nginx/sites-available/配下に myapp ファイルを作成し、設定を記述。 upstream puma { # pumaの設定で指定したsocketファイルを指定 server unix:///home/
生産性向上のために身に着けたい10のこと - Qiita
はじめに こんにちは。 普段働いているとき「どうやったら生産性があがるんだろう？」と思うことが時々あります。 「生産性向上」といっても具体的にどうするのか、なかなかイメージがつきにくい方も多いと思います。 この度、最近色々なところで目にする「世界一流エンジニアの思考法」という本を読みました。 この本では主に生産性を向上させるためにアメリカの一流エンジニアが行っている習慣や考え方について書かれており、 そこから個人的に身に着けたい10のことをピックアップしました。 内容について 筆者の牛尾さんはマイクロソフトの現役ソフトウェアエンジニアです。 そこで出会う一流エンジニアたちの考え方や、実践していることについて書かれている内容となっています。 アメリカでの内容なので日本では考え方のことなる部分もあるかもしれませんが、参考になる部分は多く 働き方や思考法について考えさせられる内容です。 個人的に
本番サーバー60台のホスト名を全部 cat にしてしまった話 - Qiita
この記事は、本番環境などでやらかしちゃった人 Advent Calendar 2023 の4日目です。年末進行、いかがお過ごしでしょうか？みなさま無事に仕事が納まることを願っております… 新人インフラエンジニアが、本番ウェブサーバー60台のホスト名を全部 cat にしてしまった話について、ここに供養させていただきたいと思います 背景 おそらく今から7年くらい前、インフラエンジニアとして転職してきて1年ほどが経ち、本番環境での作業もこなれてきたなというバッチリのタイミングで事を起こしてしまいました。サーバーは CentOS 6 だったと思います。 職場としてはまだまだベンチャー感にあふれ大きな裁量が与えられスピード感のある環境ながら、サービスの登録ユーザー数は1,000万を超え、本番環境の規模としては既になかなかの大きさがあり、ウェブサーバーだけでも60台くらいあったと思います。ひと山につき
Ruby/Railsで土日＋祝日＋α営業日計算 - Qiita
# 2000/1/1から翌年末までの営業日を範囲とする start_date = Time.zone.parse('2000-01-01 00:00:00') end_date = Time.zone.now.next_year.end_of_year # 営業日計算ライブラリの営業時間を終日に指定 BusinessTime::Config.beginning_of_workday = "00:00:00 am" BusinessTime::Config.end_of_workday = "11:59:59 pm" # 営業日計算ライブラリへ日本の祝祭日情報を読み込み HolidayJp.between(start_date, end_date).each{|h| BusinessTime::Config.holidays << h.date } # 追加で独自の年末年始休暇を取り込み #
「心理的安全性」と「居心地の良さ」のちがい - Qiita
最近、IT業界における「心理的安全性」の重要さは広く知られるものとなってきました。 一方で、心理的安全性が誤解・誤用されるケースも見聞きすることもあります。 よくあるパターンは、「心理的安全性」とは「居心地の良さ」である、という認識でしょうか。なんとなく似た意味にも感じますが、実際はまったく別物です。 しかし上記の違いを説明するのはちょっと大変なため、『心理的安全性 最強の教科書』を頼りながら要点を押さえてみようと思います。 心理的安全性は「ゴール」ではない まず心理的安全性とはなぜ必要なのでしょうか。本書は次のように説明しています。 もうひとつ、ありがちな誤解があります。それは職場の心理的安全性を高めることを「ゴール」だと考えてしまうことです。もちろんマネジャーにとって、職場やチームの心理的安全性を高めることは大事ですが、心理的安全性はあくまで組織の生産性を高めるための手段のひとつであり
GitHub Codespaces が GA しました（概要、課金など色々まとめ） - Qiita
米国時間 8 月 11 日、ブラウザから利用可能な統合開発環境 GitHub Codespaces (以下 Codespaces) が GA しました。本記事は、情報のまとめとなります。随時引用元を記載していますので、詳細について気になる点などはドキュメントをご覧くださいませ。 ※ 追記 : 2022 年 11 月の GitHub Universe の情報を少し入れ込みました。 注 : Team および Enterprise Cloud プランの場合、Organization Owner が設定で有効にすることで利用できるようになります。個人プランのユーザーには、既存の Codespaces ベータ版が延長されます。ベータ版に参加されている方は、今後も無料でアクセス可能です。個人利用については、近日中に何かしらのアナウンスがあるようです。(2021/08/12 JST 現在) 注 : 20
だれかの進捗をうまく把握できないときのフレーズ集 - Qiita
ほとんどの人はだれかと恊働しています。マネージャーやリーダーであるなら、この割合はより大きくなります。 筆者は、仕事の重要な要素のひとつを「進捗を出すこと」と定義しています。そして進捗を出すには、進捗をただしく把握することも重要になってきます。 しかし「進捗を把握する」と言っても、想像以上に難しいと感じる場面が多々ありました。たとえば、 進捗はどうですか？ → 進行中です／〜をやっています なにか問題はありますか？ → とくにないです 〜までに終わりそうですか？ → たぶん大丈夫だと思います というようなやりとりは一般的なコミュニケーションだと思いますが、あまり有用な情報は得られていません。 この記事では、自身の経験則をもとに、進捗にまつわる良い情報をゲットするための具体的な質問を考えてみました。 なぜ進捗を把握すべきなのか 話の前に、なぜ進捗を把握すべきなのでしょうか。 それは良い計画づ
Dockerコンテナのpostgresqlがマルウェアに感染した件について - Qiita
背景 Dockerコンテナを立てたらマルウェアに感染したのでサイバーセキュリティの啓蒙を兼ねてメモ書きしてみました。 注意事項 マルウェアに感染した被害の対処方法を記述しています。マルウェア自体の機能や解析の解説ではなく一般利用者ユーザーの視点から感染経路と対応方法についての記述になります。 マルウェア感染状況 症状 Dockerコンテナを稼働させたホストのロードアベレージ(CPU負荷)が常時4を超える状況になっていました。つまり400%でホストがフル回転してた訳ですな。 例えるならエヴァンゲリオン初号機が暴走してマヤちゃんがコンソール画面に向かって叫んでいるところです（違） こうなるとクラウドサービスのAWSとかだと英文で警告アラートが飛んで来ますし毎日課金されで膨大な利用料金請求が来ることになります。恐ろしい！！ 状況の調査 CPUの利用状況やメモリの使用量などを調査するツール類があり
Webシステムの設計の変遷（2000年から2021年までの概観）ー 技術選定の指標 - Qiita
１．1990年～2000年初頭：カオス・黎明期 インターネットが流行り始めた頃は、HTMLに装飾を記述し、CSSに装飾を書くなどの分離はあまり見られなかった。 また、Javascript（以下、Js）の利用も限定的で、画面の要素をJsで作ったり、ましてや、コンポーネントの発想などほぼ見られなかったように記憶している。 見た目のデザインとコード構造もカオスだった時代。 ※@error_401さんのコメントにあるように、Javaでのシステム開発が多く、Java Appletによって動的な画面作成もあった。若い人は、Appletの存在はわからないかもしれないけど、少しの間、ブラウザにもその設定があった。 また、AdobeのFlashによる動的コンテンツの作成もあった。Appletよりは長く使われており、Jsでの動的なコンテンツ作成の前には、AdobeのFlashでの開発が多かったと思う。 １－１
【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
Next.jsとGo言語(gqlgen)でGraphQLを使ったアプリケーションを構築する方法 - Qiita
この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。 作成したのは以下のような簡易ブクマアプリです。 フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。 背景 個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。 そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。 加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンドと組み合わせて動かしてみることにしました。 構成要素 図
先取りVue 3.x !! Composition API を試してみる - Qiita
Vue.js v3.xのRFC（Request for Comments） となっているComposition API を色々触ってみたのでまとめます。 Vue Composition API とは？ Introducing the Composition API: a set of additive, function-based APIs that allow flexible composition of component logic とある通り、コンポーネントのロジックの柔軟なコンポジションを可能にする関数ベースのAPIです。 型推論の改善と、合成関数によるロジックの整理が可能になっています。 @vue/composition-apiを追加することで、Vue2系でも使用することができます。 環境構築 vue-cli でプロジェクトを作成します。 ポイントはManually sel
String#squish で長い SQL 文字列を 1 行にする - Qiita
[1] pry(main)> Character.where('EXISTS (SELECT 1 FROM anime_characters WHERE anime_characters.anime_id = characters.id)').to_a Character Load (70.1ms) SELECT "characters".* FROM "characters" WHERE (EXISTS (SELECT 1 FROM anime_characters WHERE anime_characters.anime_id = characters.id)) [2] pry(main)> Character.where(<<~SQL) [2] pry(main)* EXISTS ( [2] pry(main)* SELECT [2] pry(main)* 1 [2] pry(mai
【個人開発】正規表現を学ぶ狩りに出ませんか？モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りました - Qiita
【個人開発】正規表現を学ぶ狩りに出ませんか？モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りましたRubyRails正規表現TypeScriptReact はじめに はじめまして！ 個人開発者のハガユウキと申します。 突然ですが、皆さん正規表現はお好きですか？ 私は好きです。「複数の文字列を一つのパターンで表現できる」部分にすごく面白味を感じています。 もっといろんな方に正規表現を知っていただきたい、好きになってほしいと思っています。 しかし、現状では2つの課題があると感じています。 正規表現の勉強自体がそもそも面白くない。 正規表現を勉強しても、しばらく使わないと忘れる。 この2つの課題を突破できるサービスは、現状存在しません。 そのため、楽しみながら正規表現を学べるサービスがあれば良いなと思いました。 作りました。 ▼スライド型正規表現学習ゲーム【Reg
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
仮想通貨botterのカレンダー | Advent Calendar 2021 - Qiita
The Qiita Advent Calendar 2021 is supported by the following companies, organizations, and services.
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Render.comでRailsアプリの本番環境を作成する方法をどこよりも優しく伝える！ - Qiita
忘れやすい人のための git diff チートシート - Qiita
