[B! JavaScript] [5ページ] hachiameのブックマーク

知らなきゃ損する！Web開発で絶対使いたくなる、人気のJavaScriptライブラリ8選と導入方法を公開 - paiza times

どうも、まさとらん︵@0310lan︶です。今回は、毎日のように誕生する新しいJavaScriptライブラリの中から、思わず使ってみたくなるようなオススメのライブラリを厳選してご紹介しようと思います。そのままWebアプリとして活用できそうなモノから、コードの書く量を大幅に減らしてくれたり、ユーザー体験を一気に向上してくれるモノまで、幅広いジャンルをまとめていますので、ご興味ある方はぜひ参考にしてみてください！ ■入力された内容を自動検証する！︻ Cleave.js ︼フォームなどでよく使う﹁inputタグ﹂で、何が入力されたかを検証して意図しないデータ入力を簡単に防ぐことができるのが﹁Cleave.js﹂です。使い方は非常にシンプルで、例えば﹁電話番号﹂を入力する﹁inputタグ﹂があったとします。 <input type=”tel” id=”input-tell” /> ﹁in

hachiame 2016/12/09

JavaScript

リンク

ゼロから始めるJavaScript生活 - Qiita

︵訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。︶モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい!より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。

hachiame 2016/11/04

JavaScript

リンク

JavaScriptの1msは4ms - Qiita

はじめに JavaScriptのタイマー処理(setTimeout(), setInterval())は1000分の1秒の精度(ms)で遅延時間を指定することができます。 setTimeout(function() { // 1ms後に実行してほしい alert('hello!'); }, 1); 見ての通り、上記のコードは第一引数に渡した関数が1ms後に実行されることを期待して書かれていますが、実際にこれを実行すると4ms以上の遅延が発生する可能性があります。これは、JavaScriptエンジンの実装によって、4ms以下の設定値は4msに矯正するという処理が行われているためです。 ※追記︶厳密には上記処理のみを実行した場合は4msへの矯正は行われないようです。4msへの矯正が行われる条件として当記事最下部に追記を行っておりますので併せてご参照下さい。なぜ4msなのか実はこの4msと

hachiame 2016/10/24

@bottomzlife 間違ってる。5段階ネスト時に*最低*4msのインターバルが入るだけ

JavaScript

リンク

入門3日目の僕が感じたAngular 2のすごいところ - teratail blog

はじめまして。teratail開発チームでインターンをしている草間(@tkow39)と申します。来年4月1日よりレバレジーズ株式会社に入社予定となっています。よろしくお願い致します。今までは主にフロントエンドを担当し，バックエンド，テストなどもサポートする形で開発していました。少し期間が空いてしまいましたが，10/3(月)に開かれたAngular2入門者の会でLTしました。 connpass.com Angular2熟練者の方からAngular2の良さや楽しさとアドバイスを色々教えていただき，今後もAngular2を使って何かを作ってみたいと思いました。そこで，今回はプロダクトに生かして行く上でこれはすごいと思ったところと，使ってみて良かったところの4点を入門者として紹介していきたいと思います。更新が即座にされるサーバ環境がすごい公式のチュートリアルを試してまずびっくり

hachiame 2016/10/19

リンク

JavaScript 製ファミコンエミュレータを公開しました - まるまるこふこふ

公開しました(過去系) github.com Demo FaithJS Screenshot 作ろうと思ったきっかけコンピュータの仕組みについて知りたいなら NES エミュ作るのが手っ取り早いと、優秀な人が強い事を言ってて、僕もコンピュータの仕組みについて知りたかったので、実装しようと思いました。まず読んだ本コンピュータシステムの理論と実装 ―モダンなコンピュータの作り方 CPUやメモリの仕組みを大まかに知ることができる30日でできる! OS自作入門OSの仕組みやアセンブラの基本がわかる自作エミュレータで学ぶx86アーキテクチャ　コンピュータが動く仕組みを徹底理解！こちらもアセンブラに慣れるために読んだたのしいバイナリの歩き方バイナリに慣れるために読んだコンピュータの仕組みについて何も知識がなかったので、上記の本を読んで勉強しました参考にしたサイト NES on

hachiame 2016/10/18

リンク

黒魔術（JavaScript）まとめ - Qiita

まえがき JavaScript、書いてますか？ JavaScriptは今や世界中の人々に愛されています。 stackoverflowの2016年の調査によるとJavaScriptは地球上で最も一般的に使用されているプログラミング言語だそうです。 JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use itthan any other language. link しかしJavaScriptは愛されすぎているが故、しばしば黒魔術のようだと比喩されることも少なくありません。愛と憎しみが紙一重とはこのことですね。ということでそんなこんなはどうでもいいのですが、自分もJavaScriptは大好きです。今回は黒魔術まと

hachiame 2016/10/11

リンク

20160930 フロントエンド高速化業務編 (社内勉強会)

スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です

hachiame 2016/10/06

リンク

はてな教科書 JavaScript編

はてな教科書JavaScript編講義の目的 JavaScriptについて、自分で調べて学習するための基礎知識を身につけるリファレンスをひけば良い部分は覚えない話の流れ JavaScriptの言語コア部分構文とか WebとJSにまつわるあれこれ DOM 非同期プログラミング Ajax jQuery フロントエンド設計 Node.js 駆け足で進めるので、速すぎるなら遠慮せず言ってください！ LICENSE この作品はクリエイティブ・コモンズ表示 - 非営利 - 継承2.1日本ライセンスの下に提供されています。

hachiame 2016/10/06

リンク

Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ - paiza times

どうも、まさとらん︵@0310lan︶です。今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる﹁ユーザー認証﹂機能を、できるだけシンプルに作ってみたいと思います。利用するのは、さまざまなバックエンド機能を提供するGoogleの︻ Firebase ︼です！非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方！今回は、﹁メールアドレス﹂と﹁パスワード﹂でログインする一般的な﹁ユーザー認証﹂ページの作成に挑戦してみましょう！そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。好きな﹁➀プロジェクト名﹂と、自分の﹁➁国名﹂を指定します。すると、プロジェクト

hachiame 2016/10/04

リンク

HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame - ICS MEDIA

HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの﹁A-Frame﹂を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。デモを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ﹁A-Frameエー・フレーム﹂を使用します。﹁やっぱりJa

hachiame 2016/09/30

これは簡単でおもしろいね！3Dモデリングができるようになりたいな。

リンク

jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法｜BLACKFLAG

このところ立て続けに、 Webページ上に初回アクセスのみ動画を表示させたい、 Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、など、初回アクセス時に処理・制限を変える要望があり、﹁jquery.cookie.js﹂を使ってのクッキー処理にてそれらを制御するサンプルを作ってみたので、メモ書き程度に紹介してみます。今回のサンプルでは、初回アクセス時のみページ上に﹁初回アクセスです。﹂のメッセージテキストを表示するサンプルです。 jQuery Cookie First Access Control まずは動作サンプルから。下記のリンクをクリックして表示されるページは、初回アクセス時のみ、ページ上に﹁初回アクセスです。﹂のテキストが表示されます。 ※リロードしてアクセスが2回目以降となるとテキストは非表示になります。 ≫jQuery Cookie First A

hachiame 2016/09/20

リンク

ES2015で始めるJavaScript入門 - Qiita

はじめに JavaScript勉強会の資料です。内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定されるこれによりナンバリングは策定した年に変更 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された新しいブラウ

hachiame 2016/09/15

リンク

長文日記

hachiame 2016/09/06

リンク

『JavaScript: The Good Parts』で紹介されている標準メソッドまとめ - Qiita

﹃JavaScript: The Good Parts﹄で紹介されている標準メソッドまとめ JavaScript: The Good Parts ―﹁良いパーツ﹂によるベストプラクティスは、JavaScriptの﹁良いパーツ﹂のみを厳選した、JavaScriptを書く人なら一度は読んでおきたい良書です。したがって、ここで紹介されている標準メソッドは、積極的に取り入れるべきメソッドです。﹁車輪の再発明はするな﹂とはよく言われることですが、標準APIに詳しくなることで普段書くJavaScriptもかなりきれいにまとまって書けるようになります。本記事では省いているRegExpやNumberの節、または標準メソッド以外のJavaScriptの﹁良いパーツ﹂に興味が出た方は、一度本書を手にとって見てみてください。﹁JavaScriptは言わばひとかたまりの大理石であり、私はその中からこの言語

hachiame 2016/09/05

“Function” から読むこと

リンク

レスポンシブWebデザイン実装時にスクリーンサイズによってJSの処理を分岐させる方法

レスポンシブWebデザインを実装する時にはメディアクエリを用いてCSSをスクリーンサイズ毎に設定できますが、JavaScriptの処理をスクリーンサイズ毎に分岐したい時ってありますよね。今回はそんな時にJSの処理を分岐する方法をご紹介します。 window.matchMediaを使う方法 window.matchMediaを使うとCSSのMedia Queriesと同じようにスクリーンサイズによってJSの処理を分ける事ができます。具体的には下記のようにif文で条件判定をして使います。 if (window.matchMedia('screen and (min-width:768px)').matches) { //768px以上のデスクトップでの処理 }else{ //スクリーンサイズが768pxより小さい時の処理 } また以下の例のようにaddListenerを用いてリスナを追加する事

hachiame 2016/08/30

リンク

オライリーの薄い本まとめ｜NZ MoyaSystem

すべてのプログラマにとって知識と権威の象徴であるオライリー本。緻密に描かれた動物の表紙絵に圧倒的な情報量と質、そして人を殴り殺せるのではないかと思えるほどの暴力的な分厚さがその特徴であり、数多の新人プログラマたちに﹁これさえ読めば自分も超絶凄腕エンジニアになれる﹂と夢を抱かせつつ、へし折ってきた。かくいう私もその1人だ。新米システムエンジニア時代、残業が終わらないのは自らの知識が足りないからである、ならばとびきり難しくて分厚い技術書を読めば良いではないか、おれは毎日定時で帰るスーパーエンジニアになるのだと日本橋の丸善まで赴き、Java と Tomcat と Apache、3冊で合計2500ページに迫ろうかというボリュームをまとめて購入、結局1冊も読破すること無く本棚の肥やしにしてしまったのは苦い思い出である。高価なギターを買ったからといって難曲が弾きこなせるわけではないように、高額なオ

hachiame 2016/08/13

リンク

JavaScript中級TIPS - Qiita

文字列リテラル HTMLを含む文字列を生成する際に便利なため、囲む時はシングルクォート'hoge'がよいセミコロン末尾にセミコロンをつけなくても解釈してくれるが、バグを生む可能性があるのでセミコロンはつけるように習慣化する ES6のclass記法のメソッド末尾にはセミコロン不要同値比較基本的に===をつかう。==だと寛容過ぎる解釈のため、バグを生むことがある。短絡評価 hogeFuncの引数にtrue相当の値が入ってきた場合、 ||の右側は読まれない。 hogeFuncの引数にfalse相当の値が入ってきた場合、（false, null, undefined, NaN, "", 0） ||の右側を読みにいく。 function hogeFunc(e){ e || console.log('piyo'); } hogeFunc(1); // 何も出力されない。もし短絡評価がなけれ

hachiame 2016/08/10

JavaScript

リンク

高機能で非依存のlightboxスクリプト・「lightgallery.js」

lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 Video等のサポート、iframeやGoogle Mapのサポート、20種から選べるCSS3transitionsによるアニメーションエフェクト、各SNSへのシェアボタン、ハッシュプラグイン対応、フルスクリーン化対応などなど、よくあるlightboxの機能を詰め込んだようなもので且つ、jQuery等のライブラリに依存せず単体で動作してくれるのが特徴です。モジュールはオートプレイ、動画、フルスクリーン化等がデフォルトでビルトインされているみたいです。ファイルサイズは非圧縮の状態で42KB、圧縮版で24KBほどです。なかなか良いのでは。ライセンスはApache 2.0。 lightgalle

hachiame 2016/08/04

JavaScript

リンク

iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法

iframe で読み込んだ子ページの高さが動的に変わる場合、読み込み元の html に固定サイズで height 属性を設定するのは望ましくありません。サイズ設定が大きすぎると余白ができるし、小さすぎると縦スクロールバーが表示されます。ページ内の一部に縦スクロールバーが表示されるのはユーザビリティが悪くなります。よって iframe 内のコンテンツサイズが動的に変わるのであれば、親画面で設定する iframe の高さも動的に変更すれば良いのです。 iframe の子画面要素に合わせて動的に高さを指定する方法呼び出し元の親画面の設定まず親画面での iframe 呼び出し方法です。ここで高さを設定しないのがポイントです。