こんにちは。今回は、フロントエンドが超絶苦手な私が、スッキリ見やすい（と自分では思っている）プロフィールサイト作成サービスを作ったので、その過程や使ったものを紹介していきます。 作ったサービス 誰でも簡単に、個人のプロフィールサイトを作成できるprofioというサービスを作りました。 私の自己紹介ページはこちらです。 言語、使っているサービスなど フロントエンド: Next13（App Router) バックエンド: Go 1.20 画像ストレージ: cloudflare R2 BEホスティング: render FEホスティング: vercel DB: Postgres: render ドメイン: お名前.com DNS: cloudflare 認証: supabase 苦戦したこと やはりフロントエンドです。 元々バックエンドエンジニアなので、バックエンドのAPIを構築することはそれほど

私は2022年10月より実務未経験でフルスタックエンジニアとして事業会社に入社し、 現在はReactとRubyを用いたシステム開発に携わっています。 ReactとMUI（UIフレームワーク）を利用して開発に取り組む機会が多々あるので、 こちらでは「ReactとMUIを利用したログイン画面の作成方法」について紹介しようと思います。 開発環境は以下のとおりです。 OS : macOS Monterey 12.6 ブラウザ : Google Chrome テキストエディタ : VS Code React/React-dom : v 17.0.2 / v 17.0.2 MUI（Material-UI） : v 5.11.12 React学習を始める前に まずはじめにReact学習の最低限必要な知識として、「HTML」と「JavaScript」について理解している必要があります。この時点で「HTML

概要 Tailwind CSSを半年使い込んで分かった便利な点/注意点を説明する 最新v3.0のアップデート内容を紹介する はじめに 本記事では非常に便利なCSSフレームワークであるTailwind CSSについて説明します。 筆者はフロントエンドエンジニアとして仕事/趣味でこの半年いくつかのサービスやツールを実装しましたが、そのいずれでもTailwind CSSを利用しました。その中では素のCSSを書くことはほとんどありませんでした。例えば最近リリースされたDockpit liteというツールでもTailwind CSSをフル活用しています。 以下ではこうした経験の中で見えてきたTailwind CSSの特徴、便利なポイント、注意点をご紹介していきます。 また最後に最新のv3.0のアップデート内容を紹介します。 Tailwind CSSとは Tailwind CSSの概要 Tailwin

最初にプログラミングを始めた時は、学校にリファレンスマニュアルを持って行って全てのページを丸暗記した。丸暗記が目的だったわけではなく、読んで知識を吸収していくのが楽しくてしょうがなかった。 PC-9801のN88-BASICリファレンスマニュアルは、読み物としてとても良くできていた。各ステートメントの紹介があり、パラメータの説明があり、ごく簡単なサンプルコードも書いてあった。大体見開き一ページで一つのステートメントの説明なので読みやすかったし、ベーマガかなんかで読む呪文のようなコマンドの意味を詳細まで知れて楽しかった。 だがこれを「楽しい」と思う人は少数派のようだった。 僕のクラスメートのうち、相当数の人が親にパソコンを買ってもらい、BASICに挑戦したが、全くその世界に馴染めず結局ゲーム機になって行った。僕も親父がゲームなんかを買ってきたら話は変わっていたかもしれないが、親父の教育方針で

本稿は Gergely Orosz 氏によって書かれた次の記事の日本語翻訳です。著者に翻訳の許可を得て公開しています。 blog.pragmaticengineer.com また本稿は DeepL Pro を使って下訳したものに手を加えています。日本語翻訳の不具合または誤訳については Gergely Orosz 氏ではなく、本稿のコメント欄にお願いします。 著者も機械翻訳を下地にしたやり方に関心をもたれたようです。 The article translated to Japanese: https://t.co/4uynyyhm4E The author was transparent and noted that the article is a modification of an ML-translated article. This person managed to transl

最小限のコードで動く最も汚いコードから始める 2023.09.02 コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。 コードを書くときに最も大切なことってなんだろう？聡明な読者諸君ならご存知だろうが、コードは書く時間よりも読む時間のほうが長い。だから他人に読まれることを意識して、読みやすい「良いコード」を書かなくっちゃならない。コンポーネントは適切な粒度で分割されていて、適切な名前がつけられている。型システムに安全性だって守られてるし、最新のなんとかアーキテクチャにも準拠

オープンソースアプリフレームワーク "Skeet" が ChatGPT だけでなく Google AI にも対応。より柔軟なカスタマイズが可能に。今回のアップデートにより、Skeet は OpenAI 社の ChatGPT(GPT-4 等)に加えて、Google 社の Vertex AI にも対応いたしました。 Skeet は GCP (Google Cloud) と Firebase 上にフルスタックアプリを構築できるオープンソースの TypeScript 製サーバーレスフレームワークです。 API サーバーから Web・iOS・Android アプリまでを TypeScript で一貫して超速開発することができます。 今回のアップデートにより、Skeet は OpenAI 社の ChatGPT(GPT-4 等)に加えて、Google 社の Vertex AI にも対応いたしました。 V

はじめに 自身の4年間を振り返って。 「認識していない」とはNull（あるいはEmptyやNothing）のようなものをイメージしています。 初心者が知ることによって、その技能Lvが0以上になるようなTIPSを目指して書きました。 ※筆者の4年振り返りの3部作 未経験から4年働きながら、読んでよかった読み物 未経験者が認識してなさそうなTIPS（当記事） 新卒後輩の扱いについてのTIPS 労働者として 本を読んで学ぶこと やはり本が一番コスパ良い。 今の時代はAmazonレビューを見ることで、当たり外れも予測しやすい。 何度も読む　or　ランダムアクセスに読む　or　古本が安い　→　紙本が良い。 上記以外　→　電子書籍でも良い。 「未経験から4年働きながら、読んでよかった読み物」※筆者の別記事。 https://qiita.com/Nao9syu/items/0bedec7a749ab2d

はじめに Pythonはコードが汚くなりがち（個人的にそう思う） そんなPythonくんを快適に書くための設定を紹介します。 拡張機能編 ここでは Pythonを書きやすくするため の拡張機能を紹介していきます。 1. Error Lens before 「コード書いたけど、なんか波線出てるよ💦」 記述に問題があった場合、デフォルトでは波線が表示されるだけ。。。 after Error Lensくんを入れることによって 波線だけでなくエディタに直接表示される。 はい、有能〜 2. indent-rainbow before Pythonくんは インデントでスコープを認識している。 for の f から下に線が伸びてるけど、ちょっと見にくいなぁ after 色が付いてちょっと見やすくなった！ 3. Trailing Space before 一見、普通に見えるコード after 末尾にある

趣味でエレキベースを弾くのですが、自宅で練習するときに必要になるので「低音がよく出るヘッドフォンがほしいなー」とおもい、オーディオテクニカのATH-PRO700を買ったのがもう10年くらい前だろうか。この間、イヤーパッドは何度か交換していますが、ヘッドバンドがだんだんボロボロになってきてしまいました。 ↓実際にはこんな感じになってました。 今回もイヤーパッドは交換するとして、どうやらネットで調べたところ「ヘッドバンド」は自分で本革に張り替えられるよ！みたいな記事に出会いました。 具体的には下記の2つの記事。 だったら私もやってみよう。 必要なもの 革：端切れ。1枚300円でした。念のため2枚用意しておく。 糸：革用の糸があるんですね。今回「太」を選んでしまいましたが「中細」でも良かったなと後から思った。250〜300円くらいだったか。 針：普通の裁縫用でもできるみたいですが、革の近くに売っ

2023年5月31日午前9時(太平洋時間)更新: Adam Mosseriが、この投稿にInstagramでのランキングの最新情報、透明性、コントロールについての記載を追加した更新版を公開しました。Instagramの仕組みに関する最新情報については、最近投稿されたこちらをご覧ください。 仕組みがわからないものは、安心して利用しにくいものです。本記事は、Instagramの仕組みについて、これまでよりもわかりやすい説明ができればと考えて執筆しました。世間では多くの誤解があるようですが、Instagramの仕組みを正しく理解してもらえるように力を入れたいのです。これから数回にわたって一連の投稿を行い、Instagramの技術的な仕組みと、その仕組みがアプリの利用体験に与える影響について解き明かしていきます。その初回として、今回は次のような疑問にお答えしたいと思います。「自分に表示されるコンテ

バックエンドエンジニアの makino です。本日は、先日リリースしたライブゲーム「あてっこ！ぷにまるず」のバックエンド技術について紹介します。 ライブゲーム「あてっこ！ぷにまるず」について ライブゲームとは、Mirrativアプリ上で遊べるゲームであり、配信中のゲームに視聴者が介入できることが特徴です。 「あてっこ！ぷにまるず」では、配信中に視聴者を招待して一緒にGvGバトルを楽しむことができます。 開発スタッフがプレイした動画をご紹介📺✨ バウンド数に注目👀⁉ こんなに連鎖できたら気持ちよさそう…🐰💕 動画を参考にレッツ❗チャレンジ💁 SNSスタッフは2回バウンドできました🙌 まだまだ道のりは険しい…🏔 pic.twitter.com/YdZMRKxbgv— 【公式】あてっこ！ぷにまるず (@punimals_jp) 2023年7月18日 Mirrativのライブゲームは

HEALTH At Gamer Supps, our goal is to offer esports athletes and gamers the most effective and healthy energy choice to help us perform at our highest potential. GG® is keto friendly, less than one calorie, and sugar free. TASTE GG’s powerful formula comes in many tasty flavors that will have you coming back for more. Expect a smooth chalk-less ride and a juicy-salivating mouthfeel. COST GG® is an

デベロッパーのReno Gamesは日本時間7月21日、『The PenguinGame 2 -Lies of Penguin-』のSteamストアページを公開した。7月31日に、基本プレイ無料にて配信予定。ペンギンを主人公とした、シュールさが際立つアクションゲームとなっている。 『The PenguinGame 2 -Lies of Penguin-』は、ソウルライクアクションゲームだという。本作の主人公は、ペンギンだ。人間の環境破壊により、地球の気温は上昇。南極の氷河は溶けてペンギンが住みにくい環境になってしまった。そこに現れたのが、伝説の棍棒（日本語ストアページではなぜか伝説の“猿”と記述）を岩から抜いた主人公ペンギンだ。主人公は4人のペンギン賢者の試練をクリアし、英雄として人間に復讐を果たし、南極を救うのだ。 本作のゲームプレイは、三人称視点のアクションとなる。主人公は、行く手に立

文章でリストを表示（少し詳細あり） fix: バグ修正 既存の機能の問題を修正する場合に使用します。 hotfix: 緊急対応 稼働中のシステムのバグ修正など、緊急性が高い修正を行う場合に使用します。 add: ファイルや機能の追加 新しいファイルや機能を追加する場合に使用します。 feat: 新機能・新規ファイル追加 新しい機能やファイルを追加する場合に使用します。 update: 機能修正 既存の機能に問題がなく、ただし修正を加えたい場合に使用します。 change: 仕様変更による機能修正 仕様変更により、既存の機能に修正を加えた場合に使用します。 clean・refactor: リファクタリング コードを修正し、改善する場合に使用します。 improve: コードの改善 コードの改善をする場合に使用します。 disable: 機能の無効化 機能を一時的に無効にする場合に使用します。

『レイアウト・デザインの教科書』（SBクリエイティブ）の共著者であるベーコンさんが、ちょっとしたデザイン術やツールの使い方を解説します。今回は、Canvaによるデザイン制作がテーマです。 Canvaは、一言でいうと「素人でも一定のレベルのデザインを良い感じに作れる」無料デザインツールです。言ってしまえば、「デザイン力を強化してくれる」ツールと言ってもいいかもしれません（この言いかただと語弊があるかもしれませんが） そんな「デザイン力強化ツール」を、プロのデザイナーが使ったらどうなると思います？ 鬼に金棒？プロデザイナーにCanva？ 今回はデザイナーでありCanva公式クリエイターでもある僕ベーコンが、Canvaを使って本気でデザインを作ってみました。畳めるかわからないほどの大きな風呂敷を広げたけど、最後まで読んでもらえばCanvaのすごさをわかってもらえるはずです。 Canvaって実際な

この記事は新野淳一氏のブログ「Publickey」に掲載された「期限の制約なく無料で使えるクラウド「Free Tier」主要サービスまとめ。2023年版」（2023年7月10日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 いくつかのクラウドサービスでは、新規ユーザーに対する1年程度の無料トライアルや一定額のクーポンなどの提供だけでなく、期間の制限なくずっと無料で使える、いわゆる「Free Tier」や「Always Free」と呼ばれるサービスが提供されています。 こうしたサービスは試行用の環境や一時的なテスト環境、あるいはホビー用途などに適しています。 本記事では期限の制約なく無料で提供されている主なクラウドサービスを、2023年版としてまとめました（新規ユーザーとして期限の制約なく無料で使えるものを優先しています）。 ただしこれらの無料のサービスは、提供側の

きっかけ 仕事でkubernetes(以下K8s)を設定したのはいいがいろいろブラックボックス過ぎて自分の理解が進んでいないと感じた。なんかちょっとアップデートするとスペランカー並みにすぐ死ぬのも気に入らないし基礎がわからないと対処もできない(大昔の、version 2か3あたりのPHP思い出してしまった)。 そこでお正月休みを利用して最近練習用にしているRaspberry Pi 3でその辺がいい感じでいじれたらいいなと思った。 とはいうもののK8sは基本的に富豪な環境を必要とするしそもそもラズパイのARM系で動くのこれ・・・と思っていたら軽量なKubernetesであるK3sというのがあるらしい。これで行こう。 とりあえずの目標はなんか簡単なコンテナアプリを複数個立ててアクセスするところまで。 以下、やったことのメモ書きです。 使っている環境 Raspberry Pi 3(メモリ1GB)