Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
脳に収まるコードの書き方
Mark Seemann 著、吉羽 龍太郎、原田 騎郎 訳、Robert C. Martin まえがき TOPICS 発行年月日 2024年06月 PRINT LENGTH 312 ISBN 978-4-8144-0079-9 原書 Code That Fits in Your Head FORMAT Print PDF EPUB ソフトウェアは複雑さを増すばかりですが、人間の脳は限られた複雑さしか扱えません。ソフトウェアが思い通りに動くようするには、脳に収まり、人間が理解できるコードを書く必要があります。 本書は、拡張を続けても行き詰ることなくコードを書き、複雑さを回避するための実践的な方法を解説します。最初のコードを書き始めるところから機能を追加していくところまでを解説し、効率的で持続可能なペースを保ちながら、横断的な問題への対処やトラブルシューティング、最適化を行なう方法を説明します
GPT-4oの画像認識力と理解力ならいけるのではと思い手書きの仕様指示を読み込ませたら本当にコードを書き上げてくれた→｢ついにコーダーが恐怖を感じる時が来たか｣
kmizu @kmizu A Software Engineer in Osaka (& Kyoto). Ph.D. in Engineering. Interests: Parsers, Formal Languages, etc. ツイートは所属先の見解と関係ありません．思いついたことをつぶやきます．人生を楽しく生きよう（New!） kmizu.github.io kmizu @kmizu GPT-4oの画像認識力と理解力をもってすればいけるやろと思ってやってみたら実際いけた。 ペーパープロトタイピングから最初のHTML書き起こすのにかなり使えるのでは。 つーか指示そのものを画像の中に書いたの読み取ってくれるの何か世界の壁を超えて対話してる感があって凄い #GPT4o pic.twitter.com/3XHMFg3yye 2024-05-14 12:49:41
スレッドとプロセスの違いを完全に理解する
はじめに こんにちは、FarStep です。 プログラミングを学ぶ中で、「プロセス」と「スレッド」という言葉を耳にしたことがある方は多いと思います。 しかし、これらの違いを明確に説明できる自信がない方も多いのではないでしょうか。 本記事では、プロセスとスレッドの違いについて、エッセンスを抽出して 解説します。 説明を簡潔にしましたので、本記事は 5 分程度で読み終えることができます。 本記事の内容を自分の言葉で説明できるようになれば、プロセスとスレッドの違いの理解は十分でしょう。 それでは、始めます 🚀 プログラムとは プロセスとスレッドの違いを理解する前に、まずは「プログラム」について理解しましょう。 プログラムとは、プログラミング言語で書かれた一連の命令 のことです。 プログラミング言語の例としては、以下のようなものがあります。 C 言語 Java Python Ruby JavaS
自分も含めて社内に詳しい人がいない領域のコードをいじることってあるよね。特に歴史の長いサービスだと当時触っていた人が誰もいないとか。仮にいたとしても1年くらい触ってないとほとんど忘れてしまって知らないのと同じような状態になっていたりする。 自分もそういうことが何度もあって、雑にスタンスややってることをまとめておこうと思う。 前提のスタンス 「これを倒したら俺がこの領域で一番詳しい最強になるんや」という気持ちを持ってる 詳しい人がいない状態で属人化とか気にしても仕方ない。まずは自分が詳しくなってから考えるでよい 自分用メモを作る キャッチアップしたことを書き残していく。ドキュメントじゃなくてSlackに垂れ流すでもいい 過去のドキュメント・やりとりを探す 全体像を把握できるドキュメントがないかを探すのを最初にやってる ここは近道はない。とにかく全部集めて全部読む気持ちで臨む Google D
はじめに 株式会社ファースト・オートメーションCTOの田中(しろくま)です！ 先日、 OpenAIからGPT-4oがリリース されました。 いろいろGPT-4oに関して調べていると、スピードが速くなっていたり、音声も直接扱えてマルチモーダル化が進んでいたりするようなのですが、画像に関して GPT-4-turboに比べ、認識やOCRの精度が向上している ようです。 製造業という観点からすると、これは 設計図面などに活かせるようになるのでは？ と思いました。 機械部品などの設計図面は以下のように、特定の方向から部品を2次元上に落とし込んだ形で書かれるのですが、部品本体を描いている図以外に、寸法や名称といった文字も含まれた画像になっています。 このような 図と文字の複合データにおいて、GPT-4oの進化は有効なのではないか と考えました。 ※画像元URL: http://cad.wp.xdoma
プログラミング言語で書かれた謎の広告→「分かる人」が見ると……？ 粋なアイデアが「おしゃれ」と話題 東急に制作背景を聞いた
東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 CSS部分をよく見ると…… しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！ 「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ 別バージョンでは「
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。
技術的負債という言葉がある。もともとは、「楽するために導入したが、メンテにコストがかかるようになってしまった技術や構成」くらいの意味合いで使われているように思う。しかし、そもそも全部が負債ではないか、というのがこのメモの趣旨である。 負債 同僚とSlackで会話していると、「けっきょくどの言語を利用しても負債になるときはなるし、大抵負債になる」といった話になった。言われてみればそうで、基本的にコードというものは書いたそばから負債になっていく。去年書いたコードのことも思い出せない。 そんな中で思ったのだが、そもそも、負債になるコードと負債にならないコードとがあったり、技術が「負債化する」のではなく、コードや技術そのものが負債なのではないか。そして、どの言語で書こうが負債からは逃れることができない。負債にならないコードは存在しない。ゆえに、コードや技術は無ければ無いほど良い、ということになる。
なぜSQLiteはバイトコードを使うのか
以前にデータベースを自作しようとして、SQLiteのアーキテクチャを見てみたらVMだったことに疑問を感じ、それをツイートしたところ作者からリプをもらいました。 作者いわく、次のような背景があったとのことでした。 SQLiteを作った当初はデータベースエンジンのことをよく知らないがコンパイラのことをよく知っていた SQLデータベース・エンジンを書くという問題をコンパイラ構築の問題として扱うのは自然なことだった データベースエンジンのコアの部分をVMにするという発想がまったくなかったので、どんなメリットがあるのか？と気になっていました。 それを作者に聞いたら、詳細な説明ページを作ってくれました。 個人的にVMにしたことで、評価&実行のパフォーマンスは多少良くなると思うが、データベースエンジンのパフォーマンスにそれほど寄与していないんじゃないかな？って思ったりしました。 本記事はそのページについ
どうもエラーを出すもしくはエラーが出るのが怖いという人がいるみたい。例えば改修を行うときに既存部分でエラーが出ないことを最優先にして増築を行いいびつな構造を生み出すとか、単純に例外を全然使わないとか。エラーが出ると、「うわ、エラーになった。手間かけさせやがって面倒だなぁ…」みたいな感覚があって、とにかく自分がコードを書くときも一切例外を投げないというスタンスをとりがちなのかもしれない。 私はここで、適切にエラーが出てくれるのはむしろ喜ばしいことであり、自分がコードを書くときも積極的にエラーを出すようにすべきだ、という主張をする。 関数定義のドキュメンテーションの一部 ある関数の中身で一番最初に書くべき処理は何か、それは引数のチェックをして条件を満たさなければエラーを出すことである。例えば文字列は特定の形式になってなければならないとか、数値に最大値最小値があるとか、これらは関数の入力の前提条
こちらで登壇させていただいた資料です。 https://trident-qa.connpass.com/event/314818/ ※ こちらは2024/05/23 時点の私の考えとなります。更新の予定はございませんのでご了承ください
最近、LLMにWeb Backendを書かせて遊ぶ、Hanabiというサービスを作っています。その開発過程で、前に試したLLMをAPIとして振る舞わせるアプローチを再検討したので、記事としてまとめました。 一年ちょっと前、私はChatGPTをWebフレームワークにしようと試みました...が、残念ながら全く実用的ではありませんでした。しかし、あれから一年、LLMは目覚ましい進歩で進化を遂げました。価格は下がり、速度も上がり、記憶容量の増加やRAGの発展など、もはや別物レベルで進化しています。 いまならもうちょっと実用的なヤツが作れるんじゃねってことで、色々な手法を面白がった再検討したまとめです。 余談ですが、一年前はLLM=ChatGPTという状況でしたね...懐かしい。ちょうどvicuna13Bが出た頃ですかね? ↓去年の記事(できれば読んでほしい)↓ 出来たもの 全部プロンプトに入れちゃ
はじめに こんにちは、愛知でWEBエンジニアをしているkokuboと申します。 ここ最近の業務でコードレビューをすることが多くなり、人によって読みやすさの違いがあることや過去に自分で書いたコードが読みにくかったことから、良いコードとは何かを調べて見ました。 今回は「リーダブルコード」を元に良いコードとは何かを簡単紹介させていただきます。 この記事では難しい技術がいらないため、初心者や私と同じようにレビューを始めた方達の参考になれば幸いです。 概要 【この本での「良いコード」とは】 他の人(過去の自分も含む)が最短時間で理解ができるコードのこと 【メリット】 理解しやすい コードを読んだだけで、そのコードが何をしようとしているのかがすぐに理解できる メンテナンスしやすい バグの修正や機能の追加など、コードを変更する際に、その意図を把握しやすくなる チームで開発しやすい 複数の開発者が同じコー
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
将棋AIで用いている詰将棋ルーチンにdf-pnというアルゴリズムがある。 これは、proof number(証明数)、disproof number(非証明数)を用いて効率的に探索を行い、その局面が詰むか、詰まないかを判定できるとても強力なアルゴリズムである。 将棋ファンなら『脊尾詰』と言う「ミクロコスモス」(1525手詰)を解く詰将棋専用ソフトについて一度ぐらいは聞いたことぐらいあるだろう。これは、脊尾さんが大学時代に作成されたプログラムである。そこに使われていたのが脊尾さんが考案されたdf-pnというアルゴリズムである。 df-pnに関しては、脊尾さん自身の論文(1998年)があるものの、要点しか書かれておらず、いまのようにGitHubにソースコードがあるわけでもなく、その詳細については長らく謎に包まれたままであった。(この脊尾さんの論文では、証明数のみを用いており、非証明数は陽には出
『３種の神器』と呼ばれるものを始め、私たちが快適な日常生活を過ごす上で、家電という存在は必要不可欠です。 清潔感を保つにも、料理をするにも、家電のサポートがあってこそ。だからこそ、できるだけ大切に長く使いたいものです。 家電の取扱説明書を処分できる『ライフハック』に絶賛の声 家電を長く使うには、適切な使用方法を心がけることが重要。しかし、ハイテクすぎるゆえ、使い方を忘れてしまうのは珍しくありません。 また、大切に使っているつもりでも、時には故障させてしまうことも。慌てて、自宅のどこかにしまった取扱説明書を探しまわった経験はありませんか。 さまざまな機能が搭載されているぶん、取扱説明書は分厚くなっていくもの。持っている家電が多いほど、どうしてもかさばってしまいます。 思い切って家電の取扱説明書を捨てているというのは、澤田翔（@shao1555）さん。自宅で行っている工夫について、X（Twit
はじめに 弊社にはGoで作ったシステムが存在しますが、作られてから数年が経過して、メンテナンスも十分にできていない状況でした。 そこで、このシステムをリファクタリングして生産性を上げようという結論になりました。 リファクタリングにあたり、Goのままで行くのか、弊社でよく使われているRubyで行くのかを検討してみましたので、その過程を紹介したいと思います。 Rubyでリプレイスしようと思った理由 Goで動いてて言語やライブラリのバージョンアップなどメンテナンスがされてない部分はありますが、 そこを解消すればGoのままで行った方が良いのでは？と思うかもしれません。 しかし、あえてRubyでリプレイスしようと思うに至ったのは以下の点があります。 Rubyの方が開発速度があがりそう Goのリファクタリングをするのに時間がかかりそう Goのリファクタリングと機能追加でコード修正箇所が被るとスケジュー
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動
はじめに こんにちは、愛知でWEBエンジニアをしているkokuboと申します。 ここ最近の業務でコードレビューをすることが多くなり、人によって読みやすさの違いがあることや過去に自分で書いたコードが読みにくかったことから、良いコードとは何かを調べて見ました。 今回は「リーダブルコード」を元に良いコードとは何かを簡単紹介させていただきます。 この記事では難しい技術がいらないため、初心者や私と同じようにレビューを始めた方達の参考になれば幸いです。 概要 【この本での「良いコード」とは】 他の人(過去の自分も含む)が最短時間で理解ができるコードのこと 【メリット】 理解しやすい コードを読んだだけで、そのコードが何をしようとしているのかがすぐに理解できる メンテナンスしやすい バグの修正や機能の追加など、コードを変更する際に、その意図を把握しやすくなる チームで開発しやすい 複数の開発者が同じコー
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
コードレビューで本を参照として使う
コードレビューをすると修正の提案をする機会がありますが、その時に本を参照として添えることをしています。ちょっとポエムっぽい記事です。 そして、この記事は meihei GW アドベントカレンダー3日目の記事です。 meihei GW アドベントカレンダーとは？ meihei GW アドベントカレンダーとは、meiheiがゴールデンウィークの5月1日〜5日までの間に毎日記事を投稿する企画です。勝手にやっています。 1日目 https://developers.prtimes.jp/2024/05/01/had-a-good-time-at-phpcon-odawara-2024/ 2日目 https://developers.prtimes.jp/2024/05/02/use-leaguecsv-for-japanese-columns/ コードレビューの目的 個人的にコードレビューを行う目
Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 125 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるアンカーのポジション CSSのステップ値関数 round(), mod(), rem() 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去 スクロールバーのカラースキーム はじめに 5/15にリリースされたChrome 125で4
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
社内に詳しい人がいない領域のコードを触る時 - Konifar's ZATSU
GPT-4oを使って2Dの図面から3DのCADモデルを作る
すべてのコードやライブラリ自体が技術的負債である / 高利率な技術と低利率な技術 - Lambdaカクテル
エラーが出たら喜べ。エラーをちゃんと出せ。 - Qiita
GitHub Copilotと快適なユニットテストコード作成生活
LLMをWebフレームワークにしたら、未来が見えた #2024
「誰にもできる」より良いコードを書くためのテクニック - Qiita
詰将棋アルゴリズムdf-pnのすべて | やねうら王 公式サイト
家電に貼ったモノに「天才現る」 電源ボタンの横を見ると…「その手があったか」
Goで作ったシステムをRubyでリプレイスすることを検討してみた
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
TypeScript の型検査にかかる時間を短縮した話
「誰にもできる」より良いコードを書くためのテクニック - Qiita
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能