※何度投稿しようとしてもBad Requestが出てしまったのでgistで投稿します。ご了承下さい。 gist.github.com

投稿開発部の外村(@hokaccha)です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション(以下SPA)についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
ずっと「~は有害なのか」という記事を書いてみたかったんです ^(1) 。 まず本題に入る前に、1つ言わせてください。 jQueryはWeb業界の発展に大いに役立った と私は考えています。jQueryがあることで、開発者はこれまで想像もできなかったことをできるようになりましたし、そういった機能をブラウザの製作者がネイティブに実装するきっかけにもなりました(もしjQueryが開発されていなければ、今でもdocument.querySelectorAllは存在していなかったでしょう)。jQueryは、今ある便利なツールを使うことができなかったり、IE8やそれ以下の過去の遺産をサポートしなければならない際に今でも必要になってきます。 しかし、そのようなケースはもはや稀なものとなりました。Web開発者の大半は、マーケットシェアの縮小した古いブラウザをサポートする必要はありません。更に、忘れてはならな
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが (謎) な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript (というか jQuery) でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
あけましておめでとうございました。本年もよろしくお願いいたします。 さて去年後半、xmlを読み込んでは切ったり貼ったりする仕事が相次いでました。 大変勉強になったので、サンプルや注意点、参考URLなどをまとめておきます。 本当にメモ書きのようなものなので、JS部分のみ抜粋してます。詳しい書き方はサンプルのソース見てくださると助かります。 Google Feed APIが廃止されたため、このページで公開されている方法の一部は使用できません。現在はPHPを使う必要がありますのでご注意ください。 (2018.08.08追記) 外部サーバのXMLファイルを読み込む 「ア○ーバブログの更新情報をサイトに載せたい!」なんて時に使えます。 Google AJAX Feed API を使う シンプルにデータ取得→HTMLに表示はこんな感じでできます。 <script src="https://www.go
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 投稿日2011年06月20日 更新日2011年06月20日 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く