Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

今時のアプリ開発において、コンテナは避けて通れないものになっています。そして数多くあるコンテナ実行環境の中でも、デファクトスタンダードと言えるのがDockerです。そんなDockerのイメージですが、皆さんは正しくビルドできていますか? そのコンテナは無駄に太っていませんか? 効率よく最短時間でビルドできていますか? セキュリティは大丈夫ですか? 今回はDockerfileの書き方をテーマに、「今さら聞けない」Docker入門をお届けします。

切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React

YouTubeでみれる日本と海外のライブカメラ映像をまとめました。動物の癒し映像から、宇宙の絶景まで盛りだくさん！【作業用BGMにも】 こんにちは、ライターの松岡です。 みなさんは自宅のリンビングでくつろいでいる時、どんな映像をテレビで見ていますか？ 僕はケーブルテレビ「イッツコムチャンネル」で放送している、二子玉川の河川敷などを映すライブカメラの映像をよく見ています。 自宅にいながらリアルタイムで様々な場所の景色や様子を見るのは、地味に楽しいですよね。 今回はYouTubeでみれる、オススメのライブカメラ映像を紹介します！ 鳥羽水族館 ラッコ水槽ライブカメラ 2頭のラッコが水槽で気持ちよさそうに泳いでいたり、のんびりしている様子が癒されます。 24時間配信をしているので、隙間時間にみて楽しむこともできますよ！ 同じチャンネルで定期的に「ラッコのお食事タイム」をライブ配信しているので、そち

ロサンゼルス在住。1995年に渡米、現在は通信社の通信員として、MLB、NBAを中心に取材を行っている。 「どうしたんですかね。ちょっと聞いてみようと思っているんですけど」 3月27日（現地時間）、ロサンゼルス・レイカーズが敵地でメンフィス・グリズリーズと対戦したあと、八村塁は会場で姿を見ることのなかった渡邊雄太について、話した。 「NBAというのは大変なところなので。ああいう風にシーズン前は、雄太さんが契約したと盛り上がって、（ケビン・）デュラントとスタメンになるんじゃないかとか、そういう話にもなっていた中で、こういう、いきなりトレードされたりして、試合にも出られなくなったりするので、どれだけNBAが辛いかということをみんなにもわかってもらいたいですし、僕もそうですけど、外から見て簡単そうにやっているように見えるかも知れないですけど、そうではないというのが事実なので」 それから3週間あま

4月12日朝、メンフィス・グリズリーズの今季最終戦の2日前に渡邊雄太はグリズリーズの本拠地、フェデックスフォーラムのコートにいた。3月1日の試合を最後にメンタル面の問題から欠場が続いており、3月半ばからはホームゲームでもベンチに座ることもなくなっていたのだが、この日はチームの集合写真撮影のため、久しぶりにチームメイトたちと共にグリズリーズのユニフォームを着た。

入居者のための食堂、昼・夕食500円、朝食はなんと100円！ 「トーコーキッチン」開店から9年目。入居者希望増、書籍化など、さらにすごいことになってた！ 手づくりの食事を朝100円、昼・夕500円のワンコインで毎日提供する、賃貸物件の入居者のために不動産会社が運営する食堂「トーコーキッチン」。2015年のオープン以降、「街の一角に自分たち専用の食堂がある」という安心感を味わえる魅力的な仕組みによって、賃貸物件への入居希望者が増えるとともに、多くの注目を集め続けています。食堂「トーコーキッチン」のある淵野辺（神奈川県相模原市）を訪れ、８年間の変化について聞きました。 「きっかけは、ご家族から聞こえてきた食事への心配の声でした」 「トーコーキッチン」は、神奈川県相模原市の不動産会社・東郊住宅社が運営する入居者のための食堂。JR横浜線・淵野辺駅から徒歩２分ほどの商店街に立地しています。東郊住宅社

新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開

先週MacBookAirのM3モデルが発表されて、勢いで買ってしまいました。 普段は行き当たりばったりで必要なアプリをインストールする感じでセットアップしているのですが、もう少しスマートにセットアップしたいので、整理しながらセットアップしようと思います。 スクリーンショットの見た目等が変わると思うのでOSVersion等貼っておきます。 MacBookAirのスペック また、この記事で紹介されていないアプリでおすすめなものやおすすめ設定があればコメントしていただけると喜びます！ OS設定 トラックパッド まず一番最初にやりたいのはOS設定からトラックパッドを選択して軌跡の速さを最速にします。 これをしておくとこの後の作業も早くなるのでまずはこれ。 Dockの整理 MacにはDockというよく使うアプリや起動中のアプリが表示される領域が存在します。 個人的には1軍のアプリしかDockに置いて

目的 アプリケーションが通信に失敗した際のテストを行いたい 例. 「通信に失敗した場合に再取得ボタンが表示されること」など 方法1. Chrome DevTools を使う https://developer.chrome.com/docs/devtools/network/reference?hl=ja#throttling 任意の設定を追加して使用することができる メリット PCとモバイルデバイスの両方で使用可能 新規にアプリケーションをインストールする必要が無い デメリット パケロス率などを設定できない Android, iOS のネイティブアプリでは使用できない 方法2. Network Link Conditioner を使用する Network Link Conditioner は Apple が提供しているネットワークユーティリティツール 使用手順等は以下のサイトが分かりやす

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 最近話題のRemixを使って、シンプルなTodoアプリを作成する方法をご紹介します。 Todoアプリの作成を通じて、簡単なフルスタック開発を体験していただければと思います。 はじめに プロジェクトの作成 モデルの定義 Root Routeについて ルーティングについて 一覧画面の作成 新規追加画面の作成 編集画面の作成 削除機能の追加 まとめ プロジェクトの作成 はじめに以下のコマンドを実行して、プロジェクトを作成します。 ※Node.js v18以上、npm v7以上がインストールされていることが前提です。 npx create-remix@latest --template remix-run/indie-stack 今回はindie-stackというテンプレートを使用しています。 この

はじめに 34 歳のとき、勤めていた会社の経営が傾き早期退職を促されたのを契機に独立しました。その後、41 歳で Authleteオースリート 社を設立しました。諸般の事情で現在も Authlete 社の代表取締役という肩書きを持っていますが、経営者的な仕事は他の人に任せ (参照: シリコンバレーのプロフェッショナル CEO を迎えて米国市場に挑戦する日本のスタートアップの話)、50 歳目前の現在もプログラマとしてコードを書き続けています。 Authlete 社設立 (2015 年 9 月) から 8 年半弱経過したものの、まだまだ小さな会社で道半ばであるため、起業家として何か語るのは時期尚早ではあるものの、軽い体調不良が長引く中、『自分のエンジニアとしてキャリアを振り返ろう！』という記事投稿キャンペーンを見かけ、生きているうちに子供世代のエンジニアの方々に何か書き残しておこうと思い、文章

『ポケットモンスター ルビー・サファイア』『ポケットモンスター ファイアレッド・リーフグリーン』のBGMや効果音、全181曲を新たに公開！「ミュージックボックス」や「プレイリスト」をチェックしてね！

JASRAC許諾第9009285055Y45038号 JASRAC許諾第9009285050Y45038号 JASRAC許諾第9009285049Y43128号 許諾番号 ID000002929 ABJマークは、この電子書店・電子書籍配信サービスが、著作権者からコンテンツ使用許諾を得た正規版配信サービスであることを示す登録商標(登録番号 第6091713号)です。

はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。

2013年から始まった「ネットの音楽オタクが選んだベストアルバム」11年目です。今回は502のデータを集計しました。毎度同様、順位はあまり気にせず、国とかジャンルも気にせず、この記事をきっかけに2023年の作品を再発見していただければ幸いです。 最終日です。作品にはできる限りリンクを付けているし、記事末尾にはプレイリストも付けています。ぜひご活用ください。（ぴっち） このランキングについて ネットの音楽オタクが選んだベストアルバムは音楽だいすきクラブ、及びそのメンバー等の特定の誰かが選んで作ったものではありません。 Twitterのハッシュタグ、募集記事のコメント欄に寄せられたものを集計しています。 502人分のデータを集計しました。 同点の場合、乱数を発生させて順位づけしています。 順位に深い意味はありません。気にしすぎないでください。 150位以内はすべて4人以上に挙げられたものです。

はじめに こんにちは。今年クラウドエース株式会社に新卒入社し、現在 SRE をしている渋谷と申します。 自分の愛車は MAZDA の RX-8 という車なのですが、この車に搭載されているロータリーエンジン（おにぎりエンジン）にちなんで、自分が執筆する記事のアイキャッチは 🍙 にすることにしました。 さて、この記事では GUI を用いてコンテナを管理・操作する際に使用されるコンテナ管理ツールとして代表的な以下の 3つのツールを紹介し、機能検証を行います。 Docker Desktop Rancher Desktop Podman Desktop それぞれのコンテナ管理ツールのメリット・デメリットを解説し、最後に自分が選んだコンテナ管理ツールを紹介します。 自分の用途に合ったコンテナ管理ツールを選択することで、より快適に Docker を使用することができるようになると思いますので、ぜひ参考

16年と半年前、57歳になったばかりの2007年の9月に初めての投稿をしました。その2ヶ月くらい前から閲覧はしていた気がしますが閲覧履歴のようなものはないためわかりません。 ちょうどその頃、勤務していた会社で役員に昇格したばかりでした。法学部を卒業し新卒で入社して以来、ひたすら営業畑にいた私が役員になってから与えられたのは情報システム部を含むIT分野でした。 その10年前ごろから会社にパソコンが導入され始め、総務部門にいた同期が悪戦苦闘しており「大変そうだな〜」なんて気楽に思っておりましたが、まさか自分がそれらを統括する立場に置かれるとは思いませんでした。 IBMが主催する勉強会に参加したり、書籍を購入したり、パソコン教室にも通い、DELLのデスクトップPCを購入して大学生だった息子に助けられながら設定をしていました。 インターネットを徘徊する中で見つけたのがはてな匿名ダイアリーです。 結

ハイどうもこんにちわ！あとあけましておめでとうございます！ ということで今年も英語と猫とDJでこちらのnoteはやっていきたいと思うのですが、今回はハウスDJの考える「基本のミックス」について書いていきたいなと思います。いわゆるDJテクニックの話なので、好みや流派もありますし僕個人の考え方なので、そういうのもあるんだね～くらいに受け止めていただければと思います。 ちなみにまたまた宣伝ですが、昨年爆売れした選曲術の記事もまだ読んでない方が居たらぜひそちらもチェックしてくださいね。 まずは縦フェーダーだけでミックスということで早速ですが、僕が色んな人にミックスのコツを教えて！と尋ねられると100%で返すのは「まず縦フェーダーだけでミックス出来るようになろうぜ！」という回答です。 これは僕も昔DJやり始めた頃にハウスはいいぞ、かっこいいだろ～とイキってたらとある人に「縦だけでミックスも出来んのに

まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ