こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

How to Study Effectively for Exams: The Art of Preparing Well for Exams? Studying is an important issue related to academics, and the right strategies would highly improve your grades during exams. Nonetheless, numerous students fail in exam preparations because of inadequate approaches. This article will examine proven ways of how to study quickly and effectively for exams. Consequently, you will

毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え

スクロールというのはユーザが好きな場所まで自分で指定できるのが基本です。しかしサイトの種類によってはスクロールさえも制御したいと思うことがあります。一つのページの中で複数の情報を分けて表示したい時などがそうです。 そこで今回はスクロールを制御できるsmartscrollを紹介します。 smartscrollの使い方 実行例です。ぴしっと上辺で止まるのが分かります。 高さを合わせてウィンドウ全体を一色にすることも簡単です。 smartscrollではスクロールに合わせてハッシュタグを自動的に変化させたり、そのハッシュタグを使ってアクセスした時に表示を再現することもできます。シングルページアプリケーションで使うと効果的なライブラリです。 smartscrollはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 ‎d4nyll.github.io

23. ●このハンズオンの注意点 Google Chromeで起動すると下記のエラーが発生し、正常に動作しない 可能性があります。 riot+compiler.min.js:2 XMLHttpRequest cannot load file://hoge- hoge/riotjs_todo/tags/home.tag. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome- extension, https, chrome-extension-resource. その際は、Google Chrome起動時に`--allow-file-access-from-files`を 引数を指定して起動するか、Firefoxなどの別のブラウザでお試し下さい。 26. ●構成 .

編集はすべて Markdown で行います。 Markdown を使えば、わかりやすい平易な文法で記載でき、美しく整形されます。 また編集中はリアルタイムにプレビューで確認することができます。

最近のWebサービスでは定期的にサーバとの通信を行っているものが多数あります。情報がリアルタイムに更新できるというメリットがある一方、通信量が増えてしまうと言う欠点があります。 そこで使ってみたいのがPageVisibilityEventです。ページがフォアグラウンドかどうかを判定できるJavaScriptライブラリです。 PageVisibilityEventの使い方 利用例です。タブがメインになっているかどうかでイベントが起きています。 タブのところにある絵文字が変わっていたりします。 PageVisibilityEventを使うとフォアグラウンドでない時には通信を抑えたり、余計なアラートを出さないと言った工夫ができるようになります。ユーザはもちろん、サーバにとっても嬉しい仕組みでしょう。 PageVisibilityEventはJavaScript製のオープンソース・ソフトウェア（M

ブラウザベースでJavascriptのプログラミングができるエディタをまとめて紹介します。何かと話題のES6の対応状況や、コード補完、シンタックスハイライトなどもチェックしてます。 Codiad Codiad Codiadは、ダウンロードしてオンプレミスで利用出来るWebベースのIDEです。PHPで作られていて、データベースも不要ですので導入にあたっての敷居は低いでしょう。高速な開発をサポートする、シンプルなエディタを目指しているとあります。デモで実際に操作できますので、本格的な利用を前に確認して見てはいかがでしょうか。 主な機能 40を超える言語のサポート シンタックスハイライト コード補完 複数ユーザーのサポート 編集画面の分割 リアルタイムの共同編集 ES6対応状況 ES6にも対応していて、シンタックスハイライトやコード補完も可能でした。 Codiad Web Based IDE b

今年2015年6月にJavaScriptの標準仕様であるECMAScript 2015（ES2015 / ES6）が正式にリリースされ、フロントエンド界隈ではかなり盛り上がってきています。先日のHTML5とか勉強会も『ECMAScript 2015 & 2016特集』というテーマで開催されていました。そうした盛り上がりの中で思うのは、「すでにBabelありきで話が進められている」ということです。Babelも最初のコミットからやっと1年経ったくらいです。まだまだ使い方についてわからない方もいると思うので、ここでまとめておこうと思います。特に使用頻度が高いファイル状態を監視し自動でコンパイルする環境構築方法となります。 はじめに（ES2015とは）今年2015年6月に、これまで長々と仕様の策定が進められてきたECMAScriptの6thエディションがECMAScript2015（ES2015）

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指

みなさんは、上の画像みたいにパラメータをいじれるGUIを見たことがあるでしょうか？ いろいろネットを検索していると、たまに見かけたりするのですが、だいたい3D系のサンプルデモや物理演算のシミュレーションなどによく使われているようです。 実際に触ってみると意外に便利なライブラリで、プログラムの好きな箇所をGUIで表示させて、誰でも気軽にいじれるようにできるのは面白いと思います。 そこで今回は、この「dat.gui」の簡単な使い方などをまとめておきたいと思います。 使い方！ まず、簡単なサンプルデモを作りながら、基本的な使い方を見ていくことにします。 今回は、「div要素」で四角のボックスを作り、これにCSSをGUIからコントロールしてみようと思います。 サンプルデモはこんな感じ！(スマホ対応してないので、できればPCブラウザ推奨です…) See the Pen http://codepen.

HTML/JavaScript/CSSの良いところはWebブラウザ上でそのまま実行できると言うことです。そのためJSFeddleやjsdo.itといったサービスが人気になります。環境を用意しないでデモが見られるのは良いことです。 そんな実行環境を自分でホスティングできるのがJottedです。プラグインの仕組みもある面白い実行環境です。 Jottedの使い方 右側がJottedを使った表示です。結果から。 HTML。 CSS。 JavaScript。 HTMLを編集してみます。 もちろん即座に反映されます。 Markdownプラグインがあります。 CoffeeScriptで書くこともできます。 Jottedを使えばJavaScript SDKなどで説明と実際の実行を一つの画面でできるようになるでしょう。また、デザインフレームワークでも活躍しそうです。 Jottedはnode/JavaScri

これはクローラー／Webスクレイピング Advent Calendar 2015の9日目の記事です。 本記事では、Scrapinghub社*1が開発しているSplashというオープンソースソフトウェアを紹介します。 github.com JavaScriptを使ったページからスクレイピングする方法としては、PhantomJSとSelenium/CasperJSなどの組み合わせが一般的ですが、これらとは少し違う手段として使えるかもしれないソフトウェアです。 私自身Splashを最近知ったばかりで、軽く探した限りでは日本語の情報もないので、調査しつつSplashの使いドコロを探ってみたいと思います。 Splashとは READMEには以下のように書かれています。 Splash is a javascript rendering service with an HTTP API. It's a

pdf.js-controllerというライブラリを書きました。 名前の通りmozilla/pdf.jsを扱うものです。 PDFをスライドのようなページめくりをするものを作るときに簡単に作れるようにする目的で作成しています。 実際に以下のスライドはこのライブラリを使って動作しています。 https://azu.github.io//slide/2015/year-end/pdf.js.html 使い方 インストールして、以下のように書くだけでとりあえずpdfを表示できます。 普通にpdf.jsを扱うと文字列の選択ができない、日本語が文字化けする、リンクがクリック出来ないなどハマりどころがたくさんあります。 このライブラリではpdfjs-distのディレクトリをpdfDistDirで指定する以外はあまり意識しなくても自動的にやってくれます。 (pdfjs-distはdependenciesと