WordPress.comdocswpcalypso
ゼロから学ぶ！ Single Page Applicationの特徴と主なフレームワーク5選
本連載「モダンなフロントエンド開発者になるためのSPA超入門」では、フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や、サンプルアプリ開発を通じたSPA開発の流れ、フレームワークによる作り方の違いなどを紹介します。 サンプルアプリ開発では、SPA開発において人気がある「React」「Angular2」の使用を予定しています。第1回目である今回は、SPAの特徴と取り巻く環境、フレームワークを紹介します。 SPAとは SPAはAdobe FlashやMicrosoft SilverlightといったリッチなUIを提供できるRIA（Rich Internet Application）に代わるフロントエンド開発の技術として、ブラウザの進化やHTML5の登場などによって誕生したアーキテクチャです。H
Rails4アプリに対してクロスドメインでAjaxでCookieを送信したい場合 - Qiita
長い前置き 最近はWebアプリケーションを開発するときにサーバ側とクライアント側のプロジェクトを分けて開発することが多い。その理由としては、最終的にはクライアント側のリソースをサーバリソースと一緒にしてデプロイするのだけど、最近はYeomanなどクライアント側の開発プロセスも複雑になってきたので分けたいためである。 サーバはRails、クライアントはYeomanを使ってJavaScriptで開発している。 ログイン認証はRails側でFacebookのOAuthを使用し、セッション情報の保持はCookieを使用している。 Railsはポート3000、クライアントはgrunt serveを使ってポート9000で実行しているのだが、JavaScriptからRailsのREST APIにリクエストを投げたときにOriginが違うのでRailsで作成したCookieが付与されないので、Rails側
Rails5.1のwebpack実装、webpacker gem簡単解説 - Qiita
はじめに DHHがRails5.1にwebpackを取り入れる意向を示し、その実装としてwebpacker gemを提案しました。 まだ最低限の方針が示されただけで機能は全然足りてませんが（コミットチャンスですよ！！）、どんな実装になっているか軽く見てみました。 リポジトリ, PR webpacker gem: https://github.com/rails/webpacker PR to Rails: Basic --webpack delegation to new webpacker gem 内容 注： あくまで2017/1/18現在の話で、これから多くの変更が入ることになります webpackのラッパーになっている webpackを用いたJSアプリの素地を作ってくれる webpackのコマンドをrakeコマンドでラップしている rake越しにやりたくない人は、webpackを直に
Railsプロジェクトでグラフ描画ライブラリChartkickを使用する手順 - Qiita
Railsプロジェクトでグラフ描画用のライブラリ「Chartkick」を使用する手順をまとめました。 Railsでグラフを描画する Railsでグラフを描画する場合、「lazy_high_chart」「Chartkick」「Gruff」などのライブラリを利用することができます。 Ruby on Rails で使えるグラフ・チャート用ライブラリまとめ | EasyRamble 今回は、比較的簡単そうな「Chartkick」を使用してみました。 Chartkick Chartkickの使用手順 Gemfileを編集する JavaScriptのライブラリを読み込む グラフ描画用のデータを準備する ヘルパーメソッドでグラフを描画する 1. Gemfileを編集する Gemfileにgem 'chartkick'を追加します。
今すぐ知っておくべき！モダンな10のWeb技術
エンジニアやデザイナー、Web担当者が今すぐ知っておくべきモダンな10のWeb技術を紹介しています。Webデザインの世界が根本的に変化し、Webサイトの構築ははるかに簡単に高い技術でできるようになりました。ぜひ覚えておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのJake Rocheleau氏によって投稿されました。
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
JavaScript でも型チェックと契約による設計で安定した開発をする - Qiita
チーム開発をやっていると特定の処理を呼び出す際にインターフェイスを明示することがとても重要になってきます。言い換えると使い方がきちんと示されていることが最低ラインということです。ドキュメントは実際の処理と乖離しますし、各人がソースコードの処理を追わなければならないというのはチームでやっている意味がありません。 ところが JavaScript にはそういった仕組みが存在しません。どういった処理をするのかを表すための関数名は指定できますが、 JavaScript では関数を任意の名前の変数に代入できるので実はあまり役に立ちません。 といった状況にあった JavaScript ですが、昨今のツールの登場によって事情が変わってきました。 JavaScript でもインターフェイスを明示しながら開発するにはどうすればいいかを要素技術と一緒に書いていきます。 型チェック あくまでも JavaScrip
webpack & HTTP/2
This is the gist of the articles: There is still a protocol overhead for each request compared to a single concatenated file.The compression of the single large file is better than many small files.Servers are slower serving many small files than a single large file.So we need to find the middle ground to get the best for both worlds. We put the modules into n bundles where n is greater than 1 and
The Numbers on Webpack 1 vs 2
So last week I wrote about my experiences with upgrading to Webpack 2. In that story, I mentioned that it seemed like Webpack v2 was much faster than v1. So why not try and benchmark each version and provide some numbers? Disclaimer: I’m not a performance engineer or a statistician. Take this story as a data-point and do your own comparisons. I have no vested interests in any of the technologies m
DockerとSeleniumGridとNightwatchでE2Eテストを始めよう - 文系プログラマによるTIPSブログ
Dockerで簡単に始められますよ〜 Nightwatchならライトにサクッと書けますよ〜 皆さんはE2E(end to end)テスト、してますか？ 今回はDocker、Selenium grid、Nightwatchを使ったE2Eテスト（ブラウザテスト）の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。 技術要素 なぜNightwatchなのか 環境構築 docker node.js for mac for windows テストの準備 dockerコンテナ git clone node_moduleの依存 nightwatchの設定 docker-hub Nightwatchでテストを実行する ローカルでテストする場合 Selenium Gridで並列テストする場合 dockerコンテナの起動 Selenium Gridの動作確認 Nigh
Electron considered harmful
Electron considered harmful November 24, 2016 on Drew DeVault's blog Yeah, I know that “considered harmful” essays are allegedly considered harmful. If it surprises you that I’m writing one, though, you must be a new reader. Welcome! Let’s get started. If you’re unfamiliar with Electron, it’s some hot new tech that lets you make desktop applications with HTML+CSS+JavaScript. It’s basically a chrom
フロントエンドのパラダイムシフトとプロダクトの成長
Front Line of Frontend − Forkwell Meetup #2 発表資料 http://forkwell.connpass.com/event/42527/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascript/react at master · airbnb/javascript
PDF.jsとReactでブラウザ上で完結する暗記帳的なものをつくった。 - Qiita
GitHub - mizchi/frontend-boilerplate
https://chmln.github.io/flatpickr/
Inouetakuya
Vue.js 2.0 Server Side Rendering
https://github.com/jxnblk/repng/blob/master/README.md