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

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

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年の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アプリなど、さまざまな種類の... 続きを読む

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

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

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

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

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

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

TypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に（gfx執筆） - エンジニアHub｜若手Webエンジニアのキャリアを考える！

2019/04/16 1136 users TypeScript リファクタリング エンジニアHub

TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやす... 続きを読む

Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発 － Publickey

2018/02/06 1064 users Publickey puppeteer フレームワーク 操作

Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発 UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可... 続きを読む

イマドキのJavaScriptの書き方2018 - Qiita

2017/12/26 2252 users 旧来 Qiita 好き嫌い PySpa統合思念体 いまどき

PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌い... 続きを読む

知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁

2017/11/24 1022 users 特許庁 知財 デザイナー 経済産業省 ツール

マイメニューの機能は、JavaScriptが無効なため使用できません。ご利用になるには、JavaScriptを有効にしてください。 平成29年11月 特許庁審査第一部意匠課 特許庁は、デザイナーが円滑にビジネスを行い、社会で活躍するための基礎知識を修得するツールとして、調査研究に基づき、デザイナーやデザインを学ぶ学生に向けた知財教材「デザイナーが身につけておくべき知財の基本」を作成しました。 本教... 続きを読む

「娘に情報が古いと指摘されます」 老舗サイト「とほほのWWW入門」の管理人ってどんな人？ | HRナビ by リクルート

2017/11/17 1613 users WWW入門 Ruby Python リクルート HRナビ

90年代後半から2000年代にウェブ制作を経験した者なら『 とほほのWWW入門 』と聞いて、ピンと来ない人はいないだろう。同サイトは、HTMLやJavaScript、Ruby、Pythonなどの基礎知識が学べる、ウェブ制作初心者にとってはバイブルのような、とてもありがたい存在だ。サイトが開設されたのは1996年。国内でインターネットが普及し始めた初期からある老舗サイトで、お世話になった人も多いはず... 続きを読む

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス

2017/07/07 1897 users CSS div全体 Webクリエイターボックス 目次 実装

2015年3月17日 CSS 2011年に「 少しのコードで実装可能な20のjQuery小技集 」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 目次 Div全体をクリックできるようにする... 続きを読む

10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう - WPJ

2017/06/16 1151 users issue reproduced WPJ 知識 アップ 10分

10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう 2017/06/16 James Kolce Articles in this issue reproduced from SitePoint Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com.　Translation c... 続きを読む

リンクを作る時の target="_blank" の危険性 - 隙あらば寝る

2017/05/20 1177 users target blank ペー 悪用 落とし穴

html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くペー... 続きを読む

JavaScript初級者のためのコーディングガイド - Qiita

2017/01/02 1007 users Ruby 言語 Qiita 難易度 C++

JavaScriptは 大変難しい 言語です。Rubyの難易度と2、Cの難易度と5、C++の難易度を8にすると、JavaScriptは12ぐらいあると思います。このコーディングガイドはそんなJavaScriptが深みにはまらないようにするためのJavaScriptの書き方を規定したものです。初心者のための物ですので、わかってやっている人に好きにやってください。 1 禁止編 JavaScriptには... 続きを読む

【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog

2016/11/03 1292 users 翻訳 Endo Tech Blog gist 広告

2016 - 10 - 26 【翻訳】 2016年にJavaScriptを学んでどう感じたか list Tweet ※何度投稿しようとしてもBad Requestが出てしまったのでgistで投稿します。ご了承下さい。 gist.github.com kikuchi1201 2016-10-26 17:24 【翻訳】 2016年にJavaScriptを学んでどう感じたか list Tweet 広告を... 続きを読む

JavaScriptの基本をサルでもわかるようにまとめた【入門用】 - いつ俺〜いつから俺ができないと錯覚していた？〜

2016/05/19 1501 users サル CSS 一つ一つ HTML 要素

今回はJavaScriptの基本について話をします。 JavaScriptではWebページに様々な動きをつけることができ、これまでHTMLやCSSしか触ってこなかった人が、より多くのことをWeb上でできるようになります。 この記事では、そんなJavaScriptの基本を簡単に入門できるようにまとめました。 一つ一つの要素は簡単だけど、少し量が多いというのが大変なところ。ですが、この記事だけで基本的... 続きを読む

JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開！ - paiza開発日誌

2016/03/28 1324 users 0310lan paiza開発日誌 プログラミング学習 書籍

2016 - 03 - 28 JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開！ プログラミング初心者 プログラミング学習 Webサービス紹介 開発ネタ どうも、まさとらん（ @0310lan ）です。 みなさんは、「 JavaScript 」をどのような方法で学習されているでしょうか？ お手軽な方法としては…、 ・書籍やブログ記事を読む ・勉強会・セミナーへ参加する... 続きを読む

春からはじめるモダンJavaScript / ES2015 - Qiita

2016/03/16 1026 users Qiita リファクタリング 利点 配置 ES2015

春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、... 続きを読む

旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita

2016/01/18 1311 users 古文書 Qiita ツッコミ 各位 告ぐ

はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「 今時こんな書き方しねえよ… 」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分... 続きを読む

優秀なJavaScriptの開発者になるための5か条 | プログラミング | POSTD

2015/07/14 1227 users POSTD プログラミング 開発者

どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要を、具体的なリソースを含めてお伝えしようと思います。子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。ルネッサンスマン、つまり博学者と言う... 続きを読む

ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides

2015/06/13 1068 users ウェブページ 原理 minify CSS ミニファイ

可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK... 続きを読む

nanapiで使っているJavaScriptライブラリのまとめ | nanapi TechBlog

2015/05/02 7783 users nanapi akiyan ドラッグアンドドロップ API

2013/06/19 こんにちは！nanapiのakiyanです。今回はnanapiで使っているJavaScriptのライブラリとツールを紹介します。 jQuery filedrop plugin jQuery filedrop plugin – html5 drag desktop files into browser HTML5のAPIを利用して、ブラウザへのファイルのドラッグアンドドロップを... 続きを読む

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス

2015/03/17 1897 users CSS 偶数 div全体 奇数 Webクリエイターボックス

2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変... 続きを読む

第1回　JavaScriptの基礎を見直す：聞いたら一生の宝，プログラミングの基礎の基礎 ｜gihyo.jp … 技術評論社

2015/02/20 1074 users gihyo.jp 一生 技術評論社 宝，プログラミング 基礎

連載のはじめに みなさんこんにちは，今回より「聞いたら一生の宝，プログラミングの基礎の基礎」 の連載を担当させていただく本橋佑介です。 本記事では，広く利用されている技術から新しい技術まで，基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり，また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私... 続きを読む