小〜中規模サイトのフロントエンド・コーディング規約 CSS・JavaScript編 - Qiita
2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約 CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │ ├ scss │ │ ├ lib ... 外部ライブラリなど │ │ ├ sprite ... spritesmith などで生成したファイル │ │ ├ foundation (base) ... 変数や mix
Underscore.jsを使って、簡単に絞り込み検索を実装する ｜ Tips Note by TAM
以前作ったサイトで、扱っている商品をカテゴリや値段で絞り込みできる検索機能をつけたいという要望がありました。 どうしたもんかと思っていたのですが、Underscore.jsを使って実装してみたら、とても簡単に良い感じにできたので紹介します！ Underscore.jsの説明については、以前TipsNoteで紹介されているので詳細な説明は省きますが、簡単に言うとJavaScriptの便利な命令がたくさん詰まったライブラリです。 Underscore.jsの使い方 個人的には、配列やオブジェクトを使った処理がすごく楽になるところが特にお気に入りです！ デモ いきなりデモからいきます！ 色 形 を指定して 検索 を押すと絞り込み検索が行われます。 See the Pen underscore.jsを使った絞り込み検索 by daichi (@kandai) on CodePen. 良い感じに絞り
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
[JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll
ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。 Infinite Scroll 一番最初にリリースされたのはかなり前ですが、いつの間にか2.0にバージョンアップされていたのでご紹介。 Infinite Scrollのデモ Infinite Scroll -jQueryのプラグイン Infinite Scroll -WordPressのプラグイン Infinite Scrollのデモ デモはテキストだけのページです。 ページ下部の「more」をクリック Infinite Scroll -jQueryのプラグイン Infinite Scroll -jQueryのプラグイン Infinite Scrollの使い方 Infinite Scrollの実装は簡単です。 まずは、外部ファイルをセットします。 <sc
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
[JS]ページ内のリンクを印刷時にQRコードにして配置するスクリプト -printQr
ウェブページを印刷する際、ページ内に配置されたリンクをページ下部にQRコードとして配置するスクリプトを紹介します。 ページをPDFで印刷したキャプチャ ※分割印刷には「iPrint」を使用してます。詳しい説明は「不必要な箇所は印刷しない！必要なページだけ印刷（割付印刷も）ができるフリーソフト -iPrint」をどうぞ。 printQrの実装 printQrの実装は簡単で、既存のページにも簡単に実装できます。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして、指定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="jquery.printqr.min.js"></script> JavaScript すべてのa要素を抽出す
使い方簡単で見た目も綺麗なダイアログ実装jQueryプラグイン「Apprise」:phpspot開発日誌
Apprise - The attractive alert alternative for jQuery 使い方簡単で見た目も綺麗なダイアログ実装jQueryプラグイン「Apprise」 次のようなダイアログを apprise('Hello?', options); だけで実現できるようになります。 optionsに色々渡すことで様々にカスタマイズが可能。 confirm っぽくしたり 入力ボックスにしたり。 アニメーションで表示させたりも出来ます。 ダイアログは色々ありますが１つの選択肢として覚えておいてもよさそうです。 関連エントリ 超カッコいい確認ダイアログをjQueryで実装するチュートリアル jQueryを使って作るシンプルなモーダルダイアログ その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAction」 効果音付きでアニメーション
初心者にも分かる Node.js と WebSocket についての解釈まとめ
解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何？ Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使
ドラゴンボールで学ぶオブジェクト指向
オブジェクト指向の基本亀仙流やつ鶴仙流など、世の中にはいくつかの流派（＝クラス）があり、それぞれの流派にかめはめ波やどどん波、舞空術などの技（メソッド）がいくつかあります。 実際に流派にある技を使う場合、技を覚えているZ戦士（インスタンス）が必要になります。 例）亀仙流を覚えた孫悟空を使ってかめはめ波を放って敵を倒す goku = new KamesenRyu("goku"); goku.shootKamehameha(teki); Z戦士によっては複数の流派の技が使えたり、自分の技を人に教えることが出来ます（継承）。 また悟空とクリリンのように同じ流派でも同じ技で違う性能を持っていたり、オリジナルの技を持っているなどの違いがあります。 クラスはセルを作るためのZ戦士達の遺伝子情報と言っても良いかもしれません。 例）セルを作りましょう。 class Cell extends Goku,Ve
JavaScriptでソフトウェアの正しさを数学的厳密に証明してみた - yukobaのブログ
現在、Shibuya.js が開催中です！Ustream で http://www.ustream.tv/channel/shibuyajs にて放送されています。これから、このブログの内容をしゃべります！ 今回「テスト」がテーマなうえ、Shibuya.js は「役に立つ話担当」「ネタ担当」に分かれていて、僕は「ネタ担当」なんですが（笑）、いつも通りネタです。でも、遠い未来の役立つネタです！ きっかけは、id:t-wada さんに、GUIの自動テスト関係の質問をしたら、凄くいいことを教えてもらいました。 全てのテストはサンプリングテストである （少し表現違ったらごめんなさい）話の流れで、部屋を移動しなくていけなくて、たしか、それしか話ができなかったのですが、要するに、サンプリングテストである以上、全ての入力パターンをテストすることは不可能であり、できることは、限られたコストの中で、効率よく
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
node.jsはじめました - KAYAC engineers' blog
はじめまして！ 技術部2年目のsugyanと申します。 初めてtech.kayac.comに投稿します！ 先日自分のブログで書いた記事が思いのほか好評だったので、これについてもう少し詳しく書いてみようと思います。 node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモ node.jsについて 最近話題の、サーバーサイドJavaScript「node.js」。みなさん触ってみてますか？ 「Google V8 JavaScript Engineによるイベント駆動の…」と、どんなものかは知っているものの実際には触っていない、という人がまだ多いような気がします。 僕も昨年の12月くらいにようやく触ってみた という程度なのですが、意外にお手軽で簡単に使えるし面白いので、 「JavaScriptはまだニガテで ＞＜」というヒトでも安心して始められるのでは
Titanium mobile で開発を始める時に役立つ情報のまとめ | astronaughts.net
かなり熱くなってきた Titanium mobile 去年あたりから JavaScript で iPhone や Android のネイティブアプリが開発できる Titanium mobile が注目を集めています。実は僕も、この Titanium mobile を使用してアプリを開発しています。まだ何もリリースできていませんがっw Titanium mobile の情報は、有志の方々がドキュメント等を日本語でまとめてくださっているんですが、まだまだ細かい情報が少なく、分散してしまっているのが現状のようです。 そこで、自分が集めた情報を一度まとめてみました。これから Titanium mobile を触ってみようと思われる方は一度目を通してみてください。 Titanium mobile 入門関連 まず Titanium mobile を触る前に必ず見ておきたいサイトです。 チュートリアル
node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌
node.jsに関する基礎やチュートリアルのまとめ。 リアルタイムなWEBを実現するには必須のサーバサイドJS、node.jsについて色々とまとめてみました。 node.js node.jsについて node.js なんとなく凄そうだけどよく分からないという方も多いかもしれないので簡単に解説。 一番最初見た時は何かのJavaScript ライブラリかと思ったのですが、全く違って、V8というChromeにものっている高速JavaScriptエンジン上で動くサーバを動かせる仕組み。 サーバ自体を具体的に言うと次のようなコードで実現します。 var http = require('http'); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain
第2回 jQueryの基本（お題編） | gihyo.jp
はじめに 第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-（以下、jsdo.it）を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。 今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。 jQueryってなに？ そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところ
第1回 jsdo.itってなんだろう？ | gihyo.jp
はじめに はじめまして。株式会社ピクセルグリッドの外村です。今回この連載では、マークアップエンジニアやデザイナを対象に、『jsdo.it -Share JavaScript,HTML5 and CSS-』（以下、jsdo.it）というサイトを使ってユーザ参加型のJavaScriptやCSS3の学習コンテンツを提供していきます。今回は初回ですので、jsdo.itというサイトの概要や連載に向けての事前準備を解説します。 jsdo.itとは jsdo.itというのは2010年に株式会社カヤックがリリースしたWebサービスで、Web上でHTML5、CSS、JavaScriptを書いてその場で実行することができます。書いたコードは誰でも見ることができ、トップページに並んでいる人気のコードを見るだけでも楽しむことができます。 また、単にコードを書いたり人が書いたコードを見たりするだけでなく、他にも
JavaScriptでVM作って「30日でできる！OS自作入門」をやってみた (2日目) - yukobaのブログ
カーネル／VM Advent Calendar の40日目です。ごめんなさい1日遅れ。他の方のも面白いですよ！左のリンクからどうぞ。 私、JavaScriptでVM(仮装機械)を色々作ってきましたが、いつも、言語処理系のVMばかりで、VMwareのような、マシン自体のVMはやったことがなかったので、トライしてみました。 選んだテーマは、川合秀実さんの5年前の名著、「30日でできる! OS自作入門」。これ、凄くいい本ですね！読んでみてびっくりしました。かなりお勧めです。英訳は出ていないと思いますが、英訳を出すに値する本だと思います。でも、川合さんのOSASKは終了（中断？）しちゃっているみたいですね。 30日でできる! OS自作入門 作者: 川合秀実出版社/メーカー: 毎日コミュニケーションズ発売日: 2006/03/01メディア: 単行本購入: 36人 クリック: 735回この商品を含むブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSLinux
HTML5の使えるスニペットを投稿・共有できる『html5snippets』 | 100SHIKI
