令和のHTML / CSS / JavaScriptの書き方まとめ

2024/05/13 1152 users CSS HTML 令和 書き方まとめ

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コ... 続きを読む

「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita

2024/02/26 732 users ナニコレ Qiita 供養 テクニック 休日

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちな... 続きを読む

"オジさん"と言われないためのJavaScript再入門

2023/10/08 778 users おじさん chatgpt リズ キャッチ コードリーディング

ChatGPTにコードリーディングをしてもらっていると「これは伝統的な書き方ですが、もっと現代風の書き方がありますよ」といった旨を言われて悲しくなってしまった。要は新しい情報をキャッチアップできてないおじさんと言われたようなものだ。"現代風"のJavaScriptの書き方を調べるのは大変なのでChatGPTにいろいろリス... 続きを読む

console.log(); しか使えなかった自分へ。。。 - Qiita

2022/05/19 696 users Qiita デバッガー Rails console.log

この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconso... 続きを読む

JavaScriptを遊び尽くす究極のWebサービス・ツールを厳選して大公開！ - paiza開発日誌

2022/01/27 663 users 0310lan paiza開発日誌 究極 まさとらん ツール

どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。 ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご... 続きを読む

セガがjavascriptでぷよぷよを作るプログラミング講座を出しているが、とても良いプログラミングの教材になっている「写経はとても大事」

2022/01/10 1759 users 写経 セガ 教材 プログラミング講座 ソースコード

ショーヘー@デイトラ運営 @showheyohtaki プログラミング学習中の方へ👨‍💻 これ面白い！！セガがjavascriptでぷよぷよを作るプログラミング講座を出してくれてます😊 動作ごとに細かくコメントも入ってるので、ちゃんとソースコードを読んでから写経していったらめちゃくちゃいいプログラミングの勉強になると思う！ puyo.... 続きを読む

クリエイティブコーディングの教科書

2021/11/21 1568 users クリエイティブコーディング プリミティブ 教科書 描画 本書

ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。 続きを読む

JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ - paiza開発日誌

2021/10/13 1195 users 0310lan paiza開発日誌 最強 テキスト まさとらん

どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類の... 続きを読む

JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー - GIGAZINE

2021/06/02 503 users ウェブアプリ GIGAZINE 特定 動作 オプション

JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確... 続きを読む

米ハーバード大学のプログラミング授業　日本語訳が無償公開　誰でも聴講可 | ツギノジダイ

2021/05/29 2359 users コロナ禍 Python ツギノジダイ 無償 年代

米ハーバード大学がオンラインで無償公開している、PythonやJavaScriptのプログラミング学習とコンピューターサイエンスの入門講座の日本語訳ページ「CS50.jp」が無償公開されました。講義動画の日本語字幕の翻訳化を順次すすめています。学生向けですが、年代にかかわらず、コロナ禍で学習環境やキャリアに悩んでいる誰... 続きを読む

「正直９年経ったいまでもfor文ググってる」 - Qiita

2021/03/24 592 users テキストエディタ IDE Qiita 言い訳 ほん

「正直９年経ったいまでもfor文ググってる」 という議論記事があった。正直なところ私もググる方の人だ。私の感想: ポンとテキストエディタだけ渡された時に書けるか自信ないぞ...IDEがあればまあ大丈夫かなあ。 JavaScriptだけじゃない。言語色々扱うしという言い訳。正規表現とか毎度調べる。 だから世の中にチートシ... 続きを読む

2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる

2021/03/20 931 users node.js 資料 ECMA TypeScript TC39

2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39... 続きを読む

2021年、HTMLやCSSやJavaScriptなどのコードを書く時に便利なVS Codeの機能拡張のまとめ | コリス

2021/03/04 524 users コリス デベロッパー CSS HTML VS Code

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるコミュニティによって作成された機能拡張の巨大なライブララリがあることです。 その中から、...記事の続きを読む 続きを読む

10 年前に JavaScript で Flash Player を開発し買収された話

2020/12/24 594 users Flash Player ExGame 買収 実装 実現

この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 私は過去に自分が設立した会社で ExGame という HTML5 実装の Flash Player（正確には Flash Runtime Engine）を開発し、その会社ごと DeNA に買収（M&A）... 続きを読む

JavaScriptの基礎知識をGIFアニメで分かりやすく解説 -総まとめ | コリス

2020/12/15 956 users コリス スコープチェーン GIFアニメ イベントループ 解説

JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説して... 続きを読む

プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法

2020/11/13 762 users node.js min.t 歴史 プログラミング初心者 賛成

プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが... 続きを読む

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス

2020/11/12 1084 users レンダリング CSS コリス HTML 実装時

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

この書籍について · JavaScript Plugin Architecture

2020/09/06 599 users 書籍 プラグインアーキテクチャ azu ライブラリ ＰＤＦ形式

JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin... 続きを読む

配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA

2020/08/25 549 users 配列 ICS MEDIA filter forEach 冗長

JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 filter()やevery()など配列のメソッドで処理を簡潔に書けるのに、forEach()メソッドやfor ... of文の冗長なコードを書いている 書いても意味のないArray... 続きを読む

長男がプログラム(でゲーム)を作りたいと言い出したので、Javascriptの書き方..

2020/07/27 696 users 次男 長男 HTMLファイル 動作 空気

長男がプログラム(でゲーム)を作りたいと言い出したので、Javascriptの書き方とブラウザでの動作確認を軽く教えた 次男も感化されたようで長男の真似をし始め、今は簡易な動作のHTMLファイルであれば作れるようになっている ある日、二人の空気が険悪だった(大喧嘩したあとの空気だった) まずは長男に事情を訊いてみると... 続きを読む

[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita

2020/04/13 507 users Qiita 特集 初見 初心者

Help us understand the problem. What is going on with this article? 続きを読む

現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti｜note

2020/03/29 743 users ウェブアプリケーション React angular Vue

この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなく... 続きを読む

GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ － Publickey

2020/03/16 521 users GitHub Publickey npm 買収 統合

GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ GitHubは、JavaScriptのパッケージ管理サービスを提供するnpmの買収を発表しました（GitHubの発表、npmの発表）。 We’re excited to announce that @npmjs will be joining GitHub. Millions of JavaScript developers rel... 続きを読む

昨今のJavaScriptをレビューしたら全くわからなかった話 - aoma blog

2019/09/13 633 users 昨今 aoma blog function class 引退

はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClas... 続きを読む

実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方 | コリス

2019/07/23 779 users CSS コリス 一昔前 コード かなり

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neog... 続きを読む