Technology for Web Developers Webエンジニアリングに関するトピックで、フロントエンドをメインにバックエンドやインフラ周りまで、個人的にまとめたドキュメントを公開してます。 なんの気なしに公開していたドキュメントでしたが、最近急激に読者が増えてきて、そろそろ内容も古くなってきたこともあり今後真面目にメンテナンスや運用方法を検討中です。 ※本Wikiは内容が古かったり誤りがある可能性がありますのでご了承ください。 ※内容に致命的な問題を発見した場合はお気軽にご指摘ください。 Front-end FEのためのJS基礎 これだけ覚えるべきJSの基礎 現場で使うjQuery FEの実践的なJS頻出表現 フロントエンド環境構築とnpm CommonJSモジュール運用 JS小規模なView設計 JSモジュール設計 ReactとRedux Reactの基礎 Reactの実践
B! 5 0 0 0 ソーシャルボタンを自作に変更 で作った自作ボタンだと はてなブックマークの数がhttpsで接続するような場合だと 取得出来なかったのでその部分を改良。 改良版はてなブックマークボタン 改良版はてなブックマークボタン はてなブックマークのAPIはhttpsでの接続が出来ないので、 //api.b.st-hatena.com/entry.count&url=... みたいにしておいてページと同じプロトコルを使おうと思っても httpsのページからだと上手く行きません。 そこで、 ソーシャルボタンを自作に変更 の中でもPocket等の数を取得するのに使った YQLというサービスを中継して取ってきます。 httpの場合は直接取ってきて、httpsの場合だけ経由して取るようにすると、 下の様な感じ。 if('https:' == document.location.protoc
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
HamlだのMarkdownだのSlimだのJadeだのSassだのSCSSだのLESSだのStylusだのCoffeeScriptだのLiveScriptだのTraceurだの一体なんなのよ！？ 長いタイトルですがつまりそういうことです。主にCODEPENで使えるHTML/CSS/JavaScriptのテンプレートエンジンとかプリプロセッサとか軽量プログラミング言語とかをまとめてみました。後半尻すぼみになってる感は否めません。 HTML関連 人気順 いきなりですがGoogleのトレンドを調べてみました。最初にこれを頭に入れておくと良いんじゃないかと思います。2010年10月から2014年10月までの期間です。（Markdownってなんでこんなに低いんでしょうか…Googleトレンドの使い方間違ってるのかなぁ？） Haml HTML Abstraction Markup Languageの
サイトの高速化手法40選基本編1．HTML・CSS・JSの無駄な部分の削除HTMLやCSS、Javascriptのファイルで余計な空白・改行、無駄なコードはなくして、容量を削減しましょう。ダウンロード時間が短くなります。 HTMLは以下のツールを使うことで簡単に空白や改行を削除できます。 Compress HTML CSSは以下のツールを使用すると、空白・改行と共に、それぞれのプロパティを文字数が一番少なくなる記述方式に変えて容量を削減できます。 Online YUI Compressor Javascriptは以下のツールを使用すると、空白・改行と共に、コードを文字数が少なくなるように変更し、変数も短いものに変えて、容量を削減することができます。 Closure Compiler Service 2．複数のCSSファイルはすべて1つのファイルにまとめるCSSの外部ファイルを複数読み込んで
AjaxのプログラムでjQueryのreadyを使ってみましょう。 jQueryとはJavaScriptライブラリの一種で、今やデファクトスタンダードと言われるくらい人気です。 前回はわざとJavaScriptのプログラムの中で、jQueryの機能を呼び出していました。 何故なら、最初はできるだけ元のプログラムを変更せずに、 最小限の修正だけで動くようにしたかったからです。 でもjQueryっぽい書き方というか、 本来ならjQueryのイベントやメソッドを使った書き方があります。 そこで今回は、前のプログラムを、jQueryを主体として書き換えてみます。 早速、やってみましょう。 【1】前回に作成したsample002jq フォルダをコピーして sample002jq-2 フォルダを作成します。 【2】今回は以下のようなファイルの構成になります。 ・test.js を少しだけ変更します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
