スライダーやカルーセル、ナビゲーション、アニメーションを伴ったスクロールエフェクトなど、目的にあったJavaScriptのライブラリを探す時に役立つJavaScript専門の検索エンジンを紹介します。 人気はあるのか、アクティブなのか、リリースされてどのくらいなのか、といった情報も一覧できるので、かなり便利だと思います。

const fsbx = require('fuse-box'); const fuseBox = fsbx.FuseBox.init({ homeDir: 'src/', sourcemaps : true, outFile: './dist/app.js', plugins: [ [ fsbx.SassPlugin({ outputStyle: 'compressed' }), fsbx.CSSPlugin({}) ], fsbx.TypeScriptHelpers(), fsbx.JSONPlugin(), fsbx.HTMLPlugin({ useDefault: false }) ] }); fuseBox.devServer('>main.ts **/*.html', { port: 4445 }); シンプル！！ fuse-boxの特徴として ・TypeScriptはデフォル

久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？  モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは

はじめに AWS Lambda + API Gateway でAPIつくってReactの部分はS3に置けば超低コストでSPA作れるんじゃね！？という思いつき（みんな気づいてる）を実践してみた記録です。 バージョン Serverless v0.5.5 React v15.1.0 aws-cli v1.10.35 Node.js v4.3 Serverlessはバージョン毎にかなり差異が大きいようなので注意してください（数カ月前に書かれた記事を読んでも？？？となることが多い）。 Nodeの他にPythonでもいけますが今回はNodeでいきます。LambdaはNode v5~系にはまだ対応していません。 プロジェクトをつくる AWSのIDとシークレットを取得する Serverless - Configuring AWS に書いてある通りに進めます。また、AWSは日本語に設定してあるものとします。

SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し

こんにちは。サーバーワークス こけし部 部長でCS課の坂本（@t_sakam）です。前回に続いて、Serverless Frameworkの話題です。 前回は、Serverless Frameworkのドキュメントに沿って、簡単に使い方を確かめてみました。今回は、API GatewayやDynamoDBをからめた使い方をみてみたいと思います。 Serverless Frameworkを使うと、設定ファイルのserverless.ymlに必要な設定を書いて「serverless deploy」とコマンドを打つだけで、必要なリソースの作成ができます。Lambdaファンクションのデプロイだけでなく、API GatewayとDynamoDBのリソース作成もServerless Frameworkでやってしまいましょう。 Serverless Frameworkのアップデート サービスの作成 必要な

Serverless Frameworkとは 最近巷で騒がれているサーバーレスなアーキテクチャを容易に作成、管理できる一般的なフレームワークというよりツールに近いもの。 Severless FrameworkのAWS環境においては、CloudFormation・Lambda・API Gateway・DynamoDB・S3・IAMなどのサービスを組み合わせてサーバーレスなアーキテクチャを管理・構成している。 今回は、Severless Frameworkを用いてLambda・API Gateway・DynamoDBのアーキテクチャで簡単なREST APIを実装する。 なお、本記事ではv1.0.xを対象としている。 v0.xと大きく構成・設定が変わっているので注意。 環境 今回はAWS上で、Severless Frameworkを用いて簡単なREST APIを作成する。 Severless F

昨年くらいから次世代JavaScript（ES2015 & 2016）やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。そして2016年はさらに脱jQueryの動きが加速するのではないかと見ています。その最も大きな要因として1月12日に実行されたマイクロソフトによる旧IE（Internet Explorer 8, 9 ,10）のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。ぜひ参考にしてください。 はじめに脱jQueryに関して以下のような記事が年末に投稿されました。 You-Dont-Need-jQuery – jQueryを使わない書き方教

CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmicrodataやMetaタグなどのコードを簡単に生成できるオンラインツールを紹介します。 コードごとに対応ブラウザも表示されるので、かなり便利です。

ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS

「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。 本記事ではJulian Shapiroにより開発された高速かつ強力なJavaScriptアニメーションエンジン、Velocity.js（以降、Velocity）を紹介します。記事のコードやデモすべてに目を通せば、Velocityを使って自分のアニメーションが作れるようになり、サイトはさらにインタラクティブで使いやすいものになるでしょう。jQueryには頼らず、すべて素のJavaScriptだけで作ります。 この記事は『CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！』『HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場』の続編

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら

この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに

Septeni Originalの大久保です。 世間ではSPAが流行ってるかと思います。 ただHTMLのレンダリングはサーバー側で行うケースは以前多いのではないでしょうか？ 現在自分が携わってる新規プロダクトでモダンなフロントエンドの技術（WebapackやES2015など）を使いつつ、HTMLレンダリングはサーバーに委ねるようなアーキテクチャ（Multi Page Application）の調査を行ったので、そこでの知識を備忘録的にまとめたいと思います。 今回作成したコードはGithubにあげているので、興味あればご参照ください。 Github URL：https://github.com/yoppe/webpack-es2015-base-for-play #やりたいこと バックとフロントのGitリポジトリを分けずに作る。 ⇒ リリース時などにバックとフロントを別々にリリースしたりデプ

はじめに [React Native](React Native | A framework for building native apps using React)での開発が全体的にどんな感じか掴みたかったので、小さなアプリを開発し、App Storeでリリースしてみました。 プロジェクト作成からストアでのリリースまでの間、開発中に出てきたテーマを振り返ってみます。（React Nativeの概要や特徴の解説については、他の方の記事をご覧ください。） 今回の一連の開発を通して、現段階ではネイティブ側（Xcode）を触らないといけない場面がちらほらあるということが分かりました。 ※記事執筆時点のReact Nativeのバージョンは0.43です ※2020年に別のアプリを作った記事を投稿しました【2020年版】 React NativeでiOSアプリを作ってストアでリリースしてみた -

ARCANA Meetup #23 の「React + FLUX + Redux + Redux Saga のお話」 のスライドです。 http://www.s-arcana.co.jp/blog/2017/04/06/3627

こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし

SnippetsLabにいつも使う関数まとめるついでにQiitaにもメモっとく。 汎用関数 Htmlタグを除去 /** * Htmlタグを除去 * @param {string} str Htmlタグが含まれた文字列(<h1>サンプル文字列</h1>) * @returns {string} Htmlタグ除去された文字列(サンプル文字列) */ const removeHtmlTag = function (str) { return String(str).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, ''); }; /** * URLをパースしてGET値のオブジェクトにする * @returns {{}} GET値のオブジェクトです。 */ const purseQuery = function () { const result = {}; cons