jQuery→JavaScript書き換え一覧表 - Qiita
<ul> <li id="first">テキストテキストテキスト</li> <li id="second">テキストテキストテキスト</li> <li id="third">テキストテキストテキスト</li> <li id="fourth">テキストテキストテキスト</li> </ul> <ul> <li class="first">テキスト<strong>テキスト</strong>テキスト</li> <li class="second">テキスト<em>テキスト</em>テキスト</li> <li class="third">テキスト<span>テキスト</span>テキスト</li> <li class="fourth">テキストテキストテキスト</li> </ul> <ul> <li lang="en">テキストテキストテキスト</li> <li></li> <li><span>テキ
『GoogleAppsScript完全入門』がプログラミング入門に最適な一冊だった - Qiita
先日、プログラミング入門者向けの人気Webサイトを運営しているタカハシさんという方に、『詳解! GoogleAppsScript完全入門』という書籍を献本いただいた。 この本を読み終えて、「そういえば、GoogleAppsScriptってプログラミング入門に最適だよな・・・」と感じたので、GoogleAppsScriptがプログラミング入門に最適な理由、そして最後に『詳解! GoogleAppsScript完全入門』がGoogleAppsScripの入門に適している理由もあわせて紹介したい。 新年早々、「今年はプログラミングを身に着けたい」と決意している方が、1人でも実際にやる気になって一歩を踏み出すきっかけになってくれればよいな、と思う。（本記事の公開日は2018/1/1） GoogleAppsScriptとは？ GoogleAppsScriptは、JavascriptをベースにしたGo
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 - ICS MEDIA
JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 JavaScript（ES2015+）、TypeScriptの需要は高まる一方ですが、プログラミングの効率化をどれくらい意識していますか？ プログラミングが効率化されれば、作業時間の短縮、ケアレスミスの軽減、プロダクトの品質の向上、そしてストレスの軽減に繋がります。 筆者が5年間使用している「WebStorm（ウェブストーム）」は、JavaScriptのプログラミングをする上での面倒な処理をほとんど自動化するための機能が揃っていて、ロジックの検討や表現の作り込みに時間を割けるようになります。 本記事では、多くの機能の中からとくに便利だと感じるものをピックアップして紹介します。WebStormを使ったことがない方も、「この作業はツールで自動化できるのか」という知識を得て、
【Labs】JavaScriptで振り分ける方法２パターン
こんにちは（・∀・） 今日はJavaScriptで振り分ける方法２パターンをご紹介します。 JavaScriptとレスポンシブデザインの組み合わせ レスポンシブデザインのサイトでスマホ向けとPC向けでJavaScriptを使い分けたい場合は多くあると思います。 スマホ向けのページにはJavaScriptを使いたいけどPC向けのページではJavaScriptは必要ない、逆の場合もあれば、またはそれぞれ別のスクリプトを使用したいこともあります。 Contents Windowサイズで振り分ける 要素の有無で判別 Windowサイズで振り分ける Windowサイズで振り分ける方法です。 サンプル <script> $(function(){ if($(window).width() < 769){ //forスマホ }else{ //forPC } }); </script> 画面サイズで振り分
1か月かけてJavaScriptで13KBのゲームを作るゲームジャム「js13kGames」がもたらした知見とは
ゲームジャム（Game Jam）にはさまざまな形があるが，その多くは24〜48時間という短時間でゲームをゼロから完成させることを目指す。だがその一方で，1か月という余裕のあるスケジュールでゲームの完成を目指すゲームジャムも存在する――ただしコードが合計で13KBを超えてはならないという，別の縛りがそこにある。はたして，この特殊なゲームジャムによって，参加者はどのような知見が得られるのだろうか？ Game Industry Conferenceでの講演の模様をお届けしたい。 短時間（24〜48時間）でゲームを作る「ゲームジャム」というイベントは，全世界で一斉に開催するグローバルゲームジャムを筆頭に，さまざまな団体（あるいは企業内）で行われている。 そして，これまで多くの場合，「ゲームジャムがもたらすメリット」について語られてきたが，その一方で「ゲームジャムが持つ問題点」も，少しずつ開発者の間
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
くそったれJavaScript - Qiita
以下はWhat the f*ck JavaScript?というリポジトリの日本語訳です。 What the f*ck JavaScript? JavaScriptは素晴らしい言語です。 単純な構文、大きなエコシステム、そして最も重要なところはコミュニティです。 同時に、JavaScriptは非常にトリッキーで面倒な言語でもあります。 幾つかの仕様は我々の仕事を地獄に変え、他の幾つかは笑える仕様です。 WTFJSの大元のアイデアはBrian Lerouxによるものです。 以下のリストは2012年のdotJSにおける彼のトーク、WTFJSに触発されています。 Node Packaged Manuscript 以下の内容はnpmでインストールできます。
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
最強のフロントエンドの雛形作った (2016/12/31) - Qiita
yarn とりあえず yarn install と yarn start だけで動く npm(yarn) scripts babel/webpack での多段ビルド build:js はChromeでだけで動くビルドを吐く（デバッグを容易にするため） build:js:production はIE11+ ava/nyc/istanbul でテストとカバレッジ postcssでCSSのビルド uglify-js/csswring で圧縮 CircleCI eslint, flow, ava release ブランチに push で gh-pages にデプロイ ## やってないこと React も Angular も jQuery も何も入ってない。あくまでそれ以前にやることをまとめた。 参考になるだろうけど、人によっては使わないツールも多いと思われるので、適当に削ってください。 こういうの
CSSやJavaScriptで実装された、2016年に人気が高かったテクニックのまとめ -Top Pens of 2016
世界中の多くのWeb制作者・クリエイターが利用しているCodePenから、CSSやJavaScriptを使って実装された2016年にもっとも人気のあったデモを紹介します。 Top Pens of 2016 on CodePen Top Pens of 2016では、人気が高かったスゴ技が100個紹介されており、その中からベスト10を紹介します。 当ブログで紹介したものもいくつかあり、初見のものいくつかありました。 I DESIGN WITH CODE ❤ 10位は、Creogram animatedの動画にインスパイアされて実装されたSVGアニメーションのデモ。動きだけでなく、見せ方もうまいです。
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
はてな教科書 JavaScript編
はてな教科書JavaScript編 講義の目的 JavaScriptについて、自分で調べて学習するための基礎知識を身につける リファレンスをひけば良い部分は覚えない 話の流れ JavaScriptの言語コア部分 構文とか WebとJSにまつわるあれこれ DOM 非同期プログラミング Ajax jQuery フロントエンド設計 Node.js 駆け足で進めるので、速すぎるなら遠慮せず言ってください！ LICENSE この作品は クリエイティブ・コモンズ表示 - 非営利 - 継承2.1日本ライセンス の下に提供されています。
図で理解するJavaScriptのプロトタイプチェーン - Qiita
JavaScriptのリファレンスといえばMDNですよね。 JavaScriptで調べものをする際に、真っ先に見る方も多いでしょう。 そんなMDNですが読めていますか？ 例えばArrayのページを見てみましょう。 さらっと書かれているprototype JavaScriptを理解するにはプロトタイプチェーンを知る必要がある 本記事の目的 プロトタイプチェーンを理解する MDNをより読めるようにする JavaScriptのObjectやArrayなどの基本型の構造を理解する 確認環境や記述について Chrome 52のコンソールで動作確認 ES5で記述 説明のしやすさを重視、プロトタイプをあらわすのに__proto__を使って記述 まずはオブジェクトについてみていく シンプルなオブジェクトを作る
『JavaScript: The Good Parts』で紹介されている標準メソッドまとめ - Qiita
『JavaScript: The Good Parts』で紹介されている標準メソッドまとめ JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスは、JavaScriptの「良いパーツ」のみを厳選した、JavaScriptを書く人なら一度は読んでおきたい 良書です。したがって、ここで紹介されている標準メソッドは、積極的に取り入れるべきメソッドです。 「車輪の再発明はするな」とはよく言われることですが、標準APIに詳しくなることで普段書くJavaScriptもかなりきれいにまとまって書けるようになります。 本記事では省いているRegExpやNumberの節、または標準メソッド以外のJavaScriptの「良いパーツ」に興味が出た方は、一度本書を手にとって見てみてください。 「JavaScriptは言わばひとかたまりの大理石であり、私はその中からこの言語
一度使えばもう手放せない！ Web制作の効率を上げる厳選Webサービスまとめ！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Webサービスやサイトを制作する過程において、知っていると役に立つユニークなサービスを厳選してみました。 ゼロから実装すると難しい機能を簡単に提供してくれたり、サイトにちょっとしたアクセントを加えてくれるモノや、専門的な解析・分析をサポートしてくれるものまで幅広くご紹介していますので、ぜひ参考にしてみてください！ ■Webサイトに「感情ボタン」を設置する！ 【 Emotify 】 ブログの記事などには、よく「SNSボタン」が設置されていますが、これと同じような感覚でユーザーの「感情」を表現したボタンを設置できるのが「Emotify」の特徴です。 導入方法もシンプルで、ユーザー登録後に生成されるコードをコピーし、表示させたい箇所のHTMLに貼り付ければ完了というお手軽さ。 実際に、「感情」ボタンを設置するとこんな感じになります！(スマホに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
