[B! js] yusuketsudaのブックマーク

2019年前半の「JavaScriptをちゃんとやるための地図」（追記あり）｜TechRacho by BPS株式会社

こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。目的 JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい最初の一歩をどこから踏み出すかの手がかりが欲しいそういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在の

yusuketsuda 2019/06/29

リンク

Nuxt.js + Netlifyで爆速構築するサーバーレスSPA開発入門

概要こんにちは、アジアクエスト株式会社でフロントエンドエンジニア(以下、FE)をやっています、かめぽんです。最近、VueもNuxtも勢いすごくないですか？？すごいですよね？！？！そんでもって、FirebaseやAWSを使ったサーバーレスアーキテクチャのアプリケーションも増えてきていますね！だけど、「覚えること多くてよくわからん！けど、なんか動かしてみたい！」と、思う方もいると思うのでぜひこの記事を参考にしていただけたらと思います。サーバーレスSPAの構築方法はたくさんありますが、まずは手軽にモダンフロントエンド周りの知見をインプットしつつ、Nuxt.jsとNetlifyを用いてサーバーレスSPA環境を爆速で作っていければと思います！ターゲット手軽かつ本格的にサービスorサイトを公開してみたい人 FEもしくはFEになりたい人サーバーレスを手軽に爆速で体験してみたい人 PW

yusuketsuda 2019/03/12

リンク

[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。レスポ

yusuketsuda 2018/08/01

js

リンク

User Onboarding and Product Walkthrough Library | Intro.js

Powerful User OnboardingBuilt to Increase AdoptionIntro.js is a lightweight JavaScript library for creating step-by-step and powerful customer onboarding tours

yusuketsuda 2017/12/05

リンク

JavaScriptコードは1行のみ！超手軽にWebサイトでパララックス効果を実現できる「Rellax.js」使ってみた - paiza開発日誌

どうも、まさとらん（@0310lan）です。みなさんは、自分のWebサイトに「パララックス効果」を取り入れたいと考えたことはありませんか？「なんだか難しそう…」とか、「実装が面倒くさい…」のようなイメージをもし持っているのであれば、今回ご紹介するJavaScriptライブラリが一発解消してくれますよ！【 Rellax.js 】今回のテーマである「パララックス（視差効果）」がどんなモノであるかは、「Rellax.js」の公式サイトを見ると分かりやすいです。このように画面を上下に動かす際に、複数のHTML要素が異なるスピードでアニメーションすることで、Webページが立体的になって印象に残りやすいサイトになります。「Rellax.js」は、このような「パララックス効果」を可能な限り簡単に書けるようにしてくれるJavaScriptライブラリというわけです！（ちなみに、「ver1.0」か

yusuketsuda 2017/02/23

リンク

現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA

現場で使えるアニメーション系JSライブラリまとめ GSAP, CreateJS, WebAnimation, VelocityなどウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。今回紹介するメジャーなJSライブ

yusuketsuda 2017/02/17

リンク

ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方

Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと

yusuketsuda 2017/01/19

リンク

「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita

はじめに http://qiita.com/raccy/it ems/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。【2017 1/3 15:10 追記】元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。解説サンプルコードにも出ていますが言葉足らず

yusuketsuda 2017/01/04

リンク

[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js

ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモデモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。

yusuketsuda 2016/09/05

リンク

背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。背景に画像や動画のスライドショーを実装できる「Vegas」背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。

yusuketsuda 2016/01/12

リンク

[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity

デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl

yusuketsuda 2015/01/29

リンク

2014年総まとめ、jQueryのプラグインとスクリプト100選

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。背景関連 SVG関連縦長ページ関連スクロール連動・パララックス関連その他スクロール操作・補助関連レスポンシブ関連ナビゲーション関連レイアウト関連コンテンツ生成関連コンテンツ紹介・ツアー関連スライダー・カルーセル関連画像拡大・配置・キャプション関連アニメーション関連エフェ

yusuketsuda 2014/12/07

リンク

[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro

デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。今必要とされるさまざまな機能を備えています。「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。デフォルトの5タイプのスライダー機能は非常に豊富です。さまざまなデバイスのスクリーンに対応デフォルトで完全にレスポンシブ対応（デモ全て）タッチ・スワイプ操作に対応（デモ全て）ブレイクポイント

yusuketsuda 2014/11/19

リンク

[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip

スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。フラットなデザインにも相性が非常によく、操作も快適でエレガントです！しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 StripのデモデモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。各画像をクリック・タップすると、拡大画像がスライドして表示されます。拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。デモ：幅780pxで表示スライド表示させるのは画像だけでなく、YouTubeやVimeoなど

yusuketsuda 2014/10/06

リンク

Gulp使い始めた

みんなGulp Gulp言ってるので僕もようやく使い始めた。 gulp.js - the streaming build system 何が良さそうか設定ファイル(gulpfile)が簡単に書ける気がする動作軽い気がするプラグインもいっぱいあるなんかこんな感じ。 gulpfileが簡単に書けるのはホントその通りで、実際に「Gulp使えるようになるか」と思い立っていろいろサイトを見て、2時間後くらいには自分でなんとなく書けるようになった。インストールGulpインストールする$ npm install --global gulp ディレクトリに移動$ cd (プロジェクトのフォルダ) 依存ファイルのインストールgulpfile.jsやpackage.jsonがある前提。 $ npm install Gulp実行$ gulp Gruntと何ら変わりはない。 package.json{ "name

yusuketsuda 2014/08/07

js
Gulp

リンク

FICC | デジタルエージェンシー

LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。

yusuketsuda 2014/01/14

js

リンク

Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン

圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部）「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery

yusuketsuda 2013/08/23

リンク

はてなブックマーク

タグ

関連タグで絞り込む (26)

jsに関するyusuketsudaのブックマーク (17)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス