令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフ
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
JavaScriptのsort関数の使い方を絶対わかるまで解説する
sort関数で数値の順番で並び替えができる原理まずは以下のサンプルを見てください。このサンプルは配列の中の数字を小さい順に並び替えます。 const numbers = [2, 5, 100, 4]; numbers.sort(function (a, b) { if (a < b) { return -1; } else if (a > b) { return 1; } else { return 0; } }); console.log(numbers); // 結果：[2, 4, 5, 100] こんな感じのコードはいろんな記事で紹介されていますが、僕は最初これを見た時にわからないことがいくつもありました。 まずはこのあたりを見ていきます。 引数にあるa, bって何？→配列の中の要素のうちの1つがa、次の1つがbです。sort関数で数値を比較する際には引数aとbを必ず取ります（名前は
まだ手作業でやってるの？Node.jsと自作アプリで快適すぎる開発環境が作れるぞ
Node.jsをせっかく使ってるなら、面倒な作業はもっとラクにしちゃいましょう。Gitリポジトリの初期化のステップを省力化するアプリを例に、コマンドラインアプリの作り方を紹介。 本記事は、Dan Princeが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 Node.jsは「伝統的な」Webアプリケーションでものすごい威力を発揮しますが、その潜在的利用価値はずっと広範におよびます。マイクロサービス（Microservices）、REST API、ツール、IoT、さらにはデスクトップアプリケーションでの作業においてさえ、強い味方になってくれます。 Node.jsが大いに活躍する別の分野は、コマンドラインアプリケーションの構築です。記事ではこの点を紹介します。はじめにコマンドラインでの作業に役立つように設計されたサード
nodejs v12(LTS)におけるasync, awaitを用いたstream処理 - Qiita
const fs = require('fs'); const stream = require('stream'); const util = require('util'); const finished = util.promisify(stream.finished); const msleep = util.promisify(setTimeout); // streamを用いた場合の処理(全体終了部分のみのpromise化) const reader1 = async (rs) => { rs.on('data', (chunk) => { console.log(chunk); }); await finished(rs); // stream.finishedを使わない場合下記のようなpromiseを生成する // await new Promise((resolve, r
苦手なJavaScriptで大嫌いな正規表現を克服する為のまとめ
最初に これは無職の非エンジニアが参考書を元に苦手なJavaScriptで大嫌いな正規表現をやったら理解するのに１ヶ月かかった話である。 未経験の方に 正規表現をやったことない人ならこの記事を読めば早速、明日から正規表現を読むことが出来るようになると思う。 正規表現を大嫌いな人が理解するために書いた記事なので参考書でつまずいた箇所などがわかるまで細かく噛み砕いているのでわかりやすくまとまってると信じている。 すでにエンジニアの方に Zennにいるような、つよつよエンジニアのみなさんなら当たり前の内容だと思うが初学者がどこでつまずき、どうやって教えるとわかって貰えるのか考える手助けになるかもしれない。参考書で分からない箇所が出ると心の叫びも残しておいたからだ。そんな時、自分はGoogle先生、参考書、スタックオーバーフローに助けて貰った。 それでもし、未経験からエンジニアに転職出来た際には優
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
業務ができる中級者になるためのJavaScript入門（DOM編）
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない（エピソード1） https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない（エピソード2） https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前に これからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。 【 The Modern JavaScript Tutorial 】 これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや
米ハーバード大学のプログラミング授業「CS50x」日本語訳が無料公開
米ハーバード大学がオンラインで無料公開している、PythonやJavaScriptのプログラミング学習とコンピューターサイエンスの入門講座の日本語訳ページ「CS50.jp」が無償公開されました。2022年8月31日に2022年度最新版の日本語化が完了しました。講義動画の日本語字幕の翻訳化を順次すすめています。学生向けですが、年代にかかわらず、コロナ禍で学習環境やキャリアに悩んでいる誰もが学ぶことができます。 ハーバード大学のCS50xとは ハーバード大学のCS50xとは、日本語翻訳ページ「CS50.jp」によると、コンピューターサイエンスとプログラミング技術を紹介するオンラインコースです。この講義がオンライン上で無償公開されており、世界で282万人が履修登録しています。 edX - CS50s Introduction to Computer Science 学べる内容はPythonのプロ
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
[VisualStudio Code] 言語によってインデント幅を変更する - ねこの足跡R
昔からの習性でコーディングする際のインデントはタブ派なんですよ、スペースの数は4つ。 ところが… GitHubでソース見るとタブがスペース8つ分になる ブラウザのデフォルト動作 URLの最後に?ts=4とかつけると変更はできるが… JavaScript界隈だとスペース2個が主流っぽい という空気を感じてまして、長いものには巻かれろ精神で、ひとまずJSだけインデントをスペース2個に変更することにしました。 VSCodeでプログラム言語ごとの設定を行う 設定画面を開く エディターの設定 参考ページ VSCodeでプログラム言語ごとの設定を行う 普段のコーディングは8割方、VSCodeで行っているのでこいつの設定を変更します。 設定画面を開く 公式ドキュメントの内容に沿って行います。VSCodeはしばらく前からJSONファイルを直接編集するのではなく、GUIの設定画面ができたのですが、これだと設
![[VisualStudio Code] 言語によってインデント幅を変更する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4084fc32b9dc6bff3042075edcca68b43834b48/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061423290%2F1701792199)
昨今のJavaScriptをレビューしたら全くわからなかった話 - aoma blog
はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClass { test() { 処理 } } function を省略して書けるのかなと思ったらそうではない。むしろ書いてはいけない。 下記はエラーになる。 class TestClass { function test() { 処理 } } PHPに慣れてるからか、もやもやする。 (a, b) => は無名関数なのはわかったけど function(a, b) じゃダメなの？ (a, b) => は無名関数で function(a, b) と同じ。 好みの問題
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
vim-javascript から tigris.nvim に乗り換えたら快適だった - 丁寧に手を抜く
最近neovimに乗り換えてから、javascriptの編集中にたまに固まる現象が発生して困っていた。 再現条件をいろいろ試したらどうやらvim-javascriptのインデント処理で無限ループしている様子。 という訳でvimの設定を見直してみることにした。 要件としては、インデントはPrettierでやるので、シンタックスハイライトだけ綺麗にやってくれればいい。 調べたら tigris.nvimというプラグインを見つけた。 これはnodeベースのプラグインで、Babylonを使って構文解析をしてハイライトを実現している。 Babylonはbabelプロジェクトの一部で、JSX, Flow, Typescriptを標準でサポートしている。 だからvim-javascriptのようにvimコミュニティが必死で新たな構文のサポートを追いかける必要がない。 ソースコードを覗いたらシンプルな実装だ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
