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

{ "name": "asset", "version": "1.0.0", "description": "", "main": "webpack.config.babel.js", "scripts": { "watch": "webpack --watch --progress" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-es2015-riot": "^1.1.0", "riotjs-loader": "^4.0.0", "webpack": "^1.14.0" }, "dependencies": { "riot":
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに スマートフォン向けFX情報サイトSmartFXをBackbone.jsを使ったSPA(Single Page Application)で運用しています。 そこでの気づいた問題点とその対応方法を共有したいと思います。 直帰率が高くなりやすい! SPAにより、各ページの遷移が一瞬でできるようにしたのに、最初のうちは約半数の人がTopページのみで離脱してていました。 理由なのですが、2つあると思っています。 SPAに対する認識 そもそもSPAって普通の人は知らないし、知っていたとしても見ためは普通のWebページとなんら変わらなければ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はRiot.js Advent Calendar 2016の24日目の記事です。 前置き ご注意 ある程度Riotが分かっている人が、JavaScript初心者のチームにRiot的な考え方に親しんでもらうワークショップについて書いた記事です。 Riotについての説明はほぼ皆無ですので、ご注意を。 Riotなら誰でも使いこなせると思った Riot.js、良いですよね。JavaScript初心者集団でも、現代的なコンポーネント指向でサクサク作れるようになんて、夢のようじゃないの! ……そんな風に思って、Riotの基礎の勉強会を開催。
概要 Riot.js というライブラリがあって最近話題です。 Riot.js http://riotjs.com/ja/ Qiita の記事 http://qiita.com/search?q=riot これを使って bootstrap の carousel を簡単に実装するためのカスタムタグを作ってみました。 確かにすごく簡単で、便利に使えそうです。 この記事は、次の記事とのマルチポストです: http://dora.bk.tsukuba.ac.jp/~takeuchi/?%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%2FRiot.js%2Fbootstrap-carousel%E3%82%BF%E3%82%B0%E3%82%92%E5%AE%9F%E8%A3%85 Bootstrap の carousel
【お知らせ】webpack-dev-serverの起動方法が変わったため少し修正しました(2021/10)。編集リクエストありがとうございました。 はじめに この記事は、JavaScriptからTypeScriptにそろそろ移行したい方向けに書いています。JavaScript自体がちょっとあやふやでも他のオブジェクト指向系の言語の経験があれば理解できるように書いていきます。 TypeScriptとは TypeScriptは、JavaScriptの代替となるべくマイクロソフトによって開発されたオープンソースのプログラミング言語です。その特徴は、大規模なアプリケーションの開発に耐えるように、(C++やJavaなどの)クラスベースのオブジェクト指向プログラムの機能や、変数への静的な型の指定などを取り込んで、設計されています。それはJavaScriptの標準仕様であるECMAScript2015以
JavaScriptのWebアプリケーションフレームワーク道 SEとしての1年目も終わりに差し掛かり、個人的にやってきたJavaScriptのWebアプリ作りで学んできたことを整理して、アウトプットするために記事にしました。 今回はExpressからDB(MySQL)への接続についてです。 前回に引き続き、メモ帳アプリを作っていきます。 目標 JavaScriptのWebアプリケーションフレームワークの中で最もシンプルなのが"Express"。 Expressでメモ帳アプリを作成することを目標にします。 記事が長くなりそうだったので、基本編とDB接続編の2本を立てです。 この記事は、DB接続編として前回までに作った部分にCRUD処理を追加していきます。 前回の基本編→SE1年目のJavaScript Webアプリケーションフレームワーク道...Expressで簡易メモ帳アプリ(1) 基本編
JavaScriptのWebアプリケーションフレームワーク道 SEとしての1年目も終わりに差し掛かり、個人的にやってきたJavaScriptのWebアプリ作りで学んできたことを整理して、アウトプットするために記事にしました。あまりまとまっていませんが、ご容赦を。 今回はExpressについてです。 目標 JavaScriptのWebアプリケーションフレームワークの中で最もシンプルなのが"Express"。 Expressでメモ帳アプリを作成することを目標にします。 記事が長くなりそうだったので、基本編とDB接続編の2本を立てです。 この記事は、基本編として画面表示まで行います。 基本編とDB接続編をまとめた完成版コードはGitHubに置いてありますので、ご自由に御覧ください♪ → sasaken555/expMemo ##やること Webアプリケーションフレームワークの利用 ##やらないこ
nanameue,incでインターン中の斎藤です。 最近JSばっかりでkoa.jsにまで手を出してしまったのでkoa.jsの入門記事を書きます。 個人的には1年半ほどRailsをいじっていたのですがReactからJS界隈に入り始め、ついにバックエンドまで到達しました。 Rails界隈と比較すると割とミニマムな物が好まれていて、高機能なものよりシンプルな部品を組み合わせて作っていく感じです。 Railsのあまりの大きさに嫌気がさしRailsからnode系に移った人も多いらしくRailsを真似たsailsというフレームワークもありますが全く流行ってません。 自分は1週間ほど前からkoa.jsをやり始めたのですが、yieldとかgenerateなどを使っているので理解するのに時間がかかりました。なのでその部分を解説します。多分ここがkoaの本質でkoa自体はスーパーミニマムなので多分ここを理解す
はじめに とあるサイトに定期的にログインして利用履歴のCSVを取ってくるというプログラムを AppleScript + Safariで書いていたがいちいち Safari が起動してめんどくさいので、PhantomJS で書きなおすことにした。 さっそく PhantomJS の最新版(1.9.2) をインストールして、スクリプトを書いた。コードは下記のとおりである(簡易化してある)。 page = (require 'webpage').create() callbacks = [ -> # ログイン画面の処理 page.evaluate -> document.getElementById('user').value = 'user' document.getElementById('pass').value = 'pass' e = document.createEvent('Mouse
はじめに サーバ一台で稼動するアプリでしたらサーバー内でセッション情報を持たせとけばいいですが、 サーバ複数台に対してELBでリクエストを振り分けるとかなるとそういうわけにもいかなくなります。 セッション情報のためにDBサーバとかRDSとかは仰々しいし、ファイルにしてS3に置くというのも微妙な気がしてたのですが、DynamoDBを使うモジュールがあったので使ってみました。 パッケージインストール 使うのは express-session connect-dynamodb の二つですので、 npm install --save express-session connect-dynamodb でさくっとインストール 余談 express-sessionはセッション情報の保存先に応じて必要なモジュールを追加でインストールするという形式をとっていて、 対応できる範囲はかなり広いです。 app.j
React Native 開発でも mocha を使う理由 React Native ではテスティングフレームワークとして Jest が推奨されていますが、 Jest は Jasmine 系の API を受け継いでいることもあり、 mocha に比べると習熟が難しいことが難点です。 API を覚えるまでは expect に続けてどういった条件を書けるんだっけ、とリファレンスをあさる必要が出てきます。 こういったことを覚えずにすむ mocha は非常にコストパフォーマンスのよい技術です。単純に assert で満たすべき条件を羅列してやるだけでテストが書けます。テスト駆動開発で有名な @t_wada 和田卓人さんは No API is the best API とおっしゃっています。 ちなみに react-native init 時の Jest インストールは設定で抑制できます。 React
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
@armorik83です。今回はangular-cliについてまとめます。 angular-cli https://cli.angular.io/ Prototype of a CLI for Angular 2 applications based on the ember-cli project. angular-cliはAngularの2.x以上(本稿ではAngularと記述する)を用いたアプリケーションの開発を補助するCLIツールである。 インストール インストールは至って簡単だ。 node_modulesのグローバル空間にインストールするため抵抗がある人もいるかもしれないが、その場合適宜工夫してもらいたい。基本的にコマンドラインツールとして使うので、筆者はあまり問題ないと考えているが、バージョン違いによる挙動の差異があり得るため、チームで運用する際はメンバー間でバージョンについて
ギークハウス Advent Calendar 2016の12月22日の記事です。 他の方とは、全然違う雰囲気になってしまいましたが、読んでいただけると幸いです。 なぜVue.js?? 普段の仕事では、Ruby/Railsなので、フロントエンド周りは、jQueryにCoffeeScriptで片手間感覚... ↓ しかし最近のフロントエンド界隈は、良くも悪くも盛り上がっていて楽しそうだなあと思う日々。 ↓ いろいろ、ググって調べてみると、ES6、Babel、Reactふむふむ...🤔 ん?? Webpack? JSX?? Flux?? Redux?? 「落ち着け!とりあえず日本語でOK」状態。。正にこの記事で書かれている状態そのものでした。 ↓ Reactとかでイケてるフロントエンド開発をちょっと試したいと思っても、BabelやWebpackの設定など環境構築でつまづき、肝心のアプリケーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く