JavaScriptで綺麗な色を生成する
人は見た目がn割（nには好きな数字を入れてね）だとよく言われます。そしてそれはウェブサイト/ウェブアプリケーションにおいても同じことです！1990年代丸出しのウェブサイトより、2018年的な見た目の方が好まれるでしょう。 見た目において大きな比重を占めているのが「色」です。色を工夫することで、我々はポップな新人歌手から、クールな高級ブランドまで幅広く表現できるのです。 そんな「色」ですが、コンピュータに生成させようとすると、なかなか苦労する羽目になります。そこでこの記事では、綺麗な「色」を生成するための工夫について紹介します。 色は色々 ウェブの世界と色とは、切っても切れない関係にあります。表示を司る以上、色から逃げることはできないからです。 例えばあなたの関わるプロジェクトで、配色に100色必要だとします。100色！なかなかの難問です。自分で一生懸命100個も考えるのは難しいですし、デザ
JavaScript: 配列から null、undefined、空文字を削除する
JavaScript で、配列から「null」や「undefined」、 「"" 空文字」が入った要素を削除する処理を紹介します。 ループを使う方法と、filter() メソッドを使う方法を紹介します。 ループを使って削除する ループ（for文）を使って削除する場合は、 次のようになります。 let arr = [1, 2, 3, 4, 5, null, undefined, 0, "", false]; for (let i = 0; i < arr.length; i++){ if (arr[i] === null || arr[i] === undefined || arr[i] === ""){ arr.splice(i, 1); // 削除 if (i > 0) i--; } } console.log(arr); // Array [ 1, 2, 3, 4, 5, 0, fal
自作フレームワークをつくって学ぶ 仮想DOM実践入門
昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！ そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは？ D
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
JavaScriptでゲームシナリオを快適に実装する（デモ有） - Qiita
以下のような人向けの、実践的なサンプルやデモを含む記事です。 ゲームのシナリオデータをJavaScriptできれいに書き下したい デモ ゲームの敵・NPC等の動きをJavaScriptできれいに書き下したい デモ Flash や AfterEffects のタイムライン編集でやるようなアニメーションを JavaScript で実装したい デモ1 デモ2 Web UIのチュートリアルとして「実際に操作している様子」を画面上で見せる機能を実装したい デモ async-await の同期版みたいなものが欲しい ジェネレータの有用性を理解したい 「普段はJavaScriptをフロントエンド開発に使用している」という読者を想定して書いていますが、例えば async-await についてよく知らないという方は、それに関する記述を読み飛ばしていただいて構いません。 事の発端 今年の新年会で同僚から「エイ
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
AngularJSの基礎を理解しよう(1/5):初心者のためのAngularJS入門 - libro
AngularJSは、JavaScriptのライブラリです。――というと、多くの人は「ああ、なるほどね……」と思うでしょう。そして、そこで急速に興味を失う人も多いかも知れません。 「JavaScriptのライブラリ？ まぁ、どんなのか知らないけど、特にいらないよ。jQueryがあるし、それで十分だからね」――そう思いませんでした？ 皆さんが今まで知っているJavaScriptライブラリは、基本的に「JavaScriptを便利にするもの」でした。「DOMの取得や属性の操作がjQueryなら格段に簡単に書けるよ」というようなことでライブラリを導入していくことになった人も多いでしょう。 これらは、プログラマが自分で作成するプログラムを考え、それを書いていくことを楽にしてくれる、というものでした。作成する処理は自分で考える。それを作るのが楽になる――それが今までのライブラリでした。 では、Angu
JavaScriptのクロージャは内部でどう機能するのか | POSTD
もうだいぶ前からすでに私はクロージャを使っています。使い方を学びましたが、実際にクロージャがどう機能するのか、また、使うと隠れたところで実際に何が起きるのかを明確に理解しているとは言えませんでした。そもそも、クロージャとは一体何なのでしょうか。 ウィキペディア はあまり役に立ちません。クロージャはいつ生成され、いつ削除されるのでしょうか。どのように実装されるべきなのでしょうか。 "use strict"; var myClosure = (function outerFunction() { var hidden = 1; return { inc: function innerFunction() { return hidden++; } }; }()); myClosure.inc(); // returns 1 myClosure.inc(); // returns 2 myClos
JavaScriptのスタイルガイドまとめ(おすすめ4選) - Qiita
はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ４選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語：https://google.github.io/styleguide/javascriptguide.xml 日本語：http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl
JavaScript：日付の加算方法 - 覚え書き.com
日付の加算（例：開始日「2014/04/01」、加算日数「5」なら加算後日付「2014/04/06」）を求めるJavaScriptのサンプルです。 HTMLサンプル 日付：<input id="txt1DateAddSample" type="text" name="txt1DateAddSample" value="2014/04/01"/> 加算日数：<input id="txt2DateAddSample" type="text" name="txt2DateAddSample" /> 日数加算後の日付：<input id="txt3DateAddSample" type="text" name="txt3DateAddSample"/>
イヌでもわかるJavaScript講座
Netscapeには点滅 ( BLINK タグ ) は有効ですが、Internet Explorer や Opera は効果ありません（点滅しない）。フォームで作ってみます。 【リスト】 <script language="JavaScript"><!-- myFlg = 0; function myFunc(){ if (myFlg == 0){ document.myForm.myFormMes.value = "いらっしゃいませ！"; myFlg = 1; }else{ document.myForm.myFormMes.value = ""; myFlg = 0; } } // --></script> <form name="myForm"> <input type="text" size="20" name="myFormMes"> <script language="Java
javascript 日付の大小比較と特定期間で実行を実装する方法 | Stronghold Archive
こんばんは。Toshikuraです。今回のtipsは【javascript 日付の大小比較と特定期間で実行を実装する方法】です。地味に使い勝手が良いこともあり、特定期間前だった場合や特定期間後の判別・分岐を含めた例をメモしておきます。 今日、開始日、終了日の取得方法 ますはじめに、今日、開始日、終了日を取得します。今回の大小判定ではgetTime()で取得できる1970/1/1午前0時からの特定日までのミリ秒を使用します。念のため各日付の年度/月/日も取得していますが、大小比較には使用しませんので無視していただいて構いません。 today = new Date(); myD = today.getTime(); // 1970/1/1午前0時からの現在までのミリ秒 myD_y = today.getFullYear(); // 現在の年度 myD_m = today.getMonth()
文字列から開始位置と終了位置を指定して部分文字列を取得する(slice, substring)
String オブジェクトのインスタンスメソッドである slice および substring メソッドは、文字列に対して開始位置と終了位置を指定して部分文字列を取得します。ここでは String オブジェクトの slice メソッドおよび substring メソッドの使い方について解説します。 ※ slice および substring メソッドはほぼ同じ動作をするためまとめて解説します。違いはインデックスとして負の値を指定した場合の挙動と、開始インデックスが終了インデックスよりも大きい場合の挙動です。
[javascript]現在の日付から指定した日付までの日数を求める
ブログタイトルにプログラミングとか書いておいて、１つもそれ関係の記事がなかったのでいい加減投稿しようかと。 勉強中のjavascriptの備忘録です。 ＜本題＞ まず、現在日時の取得方法ですが var today = new Date(); こんな感じで求めることが出来ます。 次に指定した日時を取得する方法ですが、Date()オブジェクトには次のような引数を渡すことが出来ます。 西暦4桁/月/日 曜日 月 日 西暦4桁 時:分:秒 西暦4桁,月,日 西暦4桁,月,日,時,分,秒,ミリ秒 上記の形式以外にも色々あるみたいです。また、ブラウザによっては挙動が変わることもあるようです。 今回は1つ目の形式を使用してみます。 var apDay = new Date("2013/1/16"); 今作成した変数today、apDayをalertで表示すると こんな感じ。 上手く初期化出来てますね！
![[javascript]現在の日付から指定した日付までの日数を求める](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a9821919efddb78c045943bff3d750f2ee534a4/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhW59OYrWQr4xUTjXYNPqcGJbx7H_KZw3k6LHCl_9w4rzBKeenFAZ7V5bBoERutN0DlTBQt95m18iwL5sRukn1QdGMFGpRqh2aDJA5ZoblQoutrTnxN_ZONJVM2wVr8ltXIkfaDNLlzocSY%2Fw1200-h630-p-k-no-nu%2Falert.png)
javascriptのfor-in文は、for-each文の代わりじゃない - うろ覚えメモ
例えばJAVAには、for-each文という便利な構文があります。 class Test { public static void main(String args[]) { int [] ary = new int[] { 1, 2, 3, 4, 5 }; for(int num : ary) { System.out.println(num + ","); } } } 実行結果 1,2,3,4,5, これは拡張for文とも言われ、配列のすべての要素にアクセスすることができます。 Javascriptにも似たような構文のfor-in文があります。 が、このfor-in文実に曲者で、JAVAのfor-each文と同じ感覚で使うと、必ずどこかで痛い目を見ます。 例文を見てみましょう。 <html> <head> <title>for inテスト</title> </head> <body>
javascriptで文字列を一行ずつ読み込む方法
ちょっとした覚書。 PHPのfgets()のように、文字列を一行ずつ読み込む方法がjavascriptでもないか検索したんだけど、 面倒臭そうな方法が多かったので、以下の方法で解決しました。 var hoge = New Array(); hoge = TargetString.split("\n"); //hoge[n]で一行ずつ取得可能 文字列を改行で区切って、配列にして取得してます。 お手軽です。 よろしくどうぞ。
String.prototype.split() - JavaScript | MDN
標準組み込みオブジェクトStringコンストラクターString() コンストラクター静的メソッドString.fromCharCode()String.fromCodePoint()String.raw()インスタンスメソッドString.prototype.anchor() 非推奨 String.prototype.at()String.prototype.big() 非推奨 String.prototype.blink() 非推奨 String.prototype.bold() 非推奨 String.prototype.charAt()String.prototype.charCodeAt()String.prototype.codePointAt()String.prototype.concat()String.prototype.endsWith()String.prototyp
Google Maps API(1/4):JavaScript/Ajaxライブラリ入門 - libro
Googleマップは、Googleが提供するマップ・サービスですね。最近では、さまざまな情報を地図形式で表示する「エリア情報のデータベース」と化してきています。これを自分のWebサイトで利用できれば、ずいぶんと表現力もアップします。 Googleマップを利用するための機能は、「Google Maps API」として公開されています。これはGoogleのサイトに用意されており、それをロードする<script>タグを書くだけで、誰もが利用することができます。以前は、利用するためには自サイトを登録し、マップキーというシリアル番号をもらう必要があったのですが、Google Maps API 3.0からキーは不要となり、誰もが自由に使えるようになりました。 とりあえず、実際に表示するサンプルを見てもらいましょう。下のリストは、東京駅を中心としたマップを表示する例です。Google Maps APIを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webprofessional.us13.list-manage1.com/track/click?u=5ec38c468c6c149ddb04d2f5e&id=ef70cb02e2&e=ce1cac37ea
文字列の部分取り出し | Javascript(jQuery) | th88i™ Weblog