はてなブックマーク

関連: Vue.jsチートシート(基礎編) Vue.jsチートシート(コンポーネントと構成編) Vueチートシートに引き続き公式チュートリアルの抜粋です。 参照 Nuxt.js日本語公式 ガイド 概要 Nuxt.js = Vue.jsおよびそのプラグインに基づくサーバサイドフレームワーク NuxtはVue.js, vue-router, vuex, Vue Server Render, Vue Metaなどを包含する Vueと同じく部分的に利用することができる(Progressive Framework) 公式によると以下のような機能を提供している: Vue ファイルで記述できること（*.vue） コードを自動的に分割すること サーバーサイドレンダリング 非同期データをハンドリングするパワフルなルーティング 静的ファイルの配信 ES2015+ のトランスパイレーション JS と CSS の

関連: Vue.jsチートシート(基礎編) Vue.jsチートシート(コンポーネントと構成編) Vueチートシートに引き続き公式チュートリアルの抜粋です。 参考 公式 概要 vue-router = Vue.jsにおける公式のルータ SPAのためのページルーティング機能を提供する 公式によると以下を特徴としている: ネストされたルート/ビューマッピング モジュール式、コンポーネントベースのルータ構造 ルートパラメータ、クエリ、ワイルドカード Vue.js の transition 機能による、transition エフェクトの表示 細かいナビゲーションコントロール 自動で付与される active CSS クラス HTML5 history モードまたは hash モードと IE9 の互換性 カスタマイズ可能なスクロール動作 導入 CDNを unpkg.com が提供している <script

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?

概要 nginx(エンジンエックス) = Apacheなどと同様のWebサーバ フリーかつオープンソース(BSD。ただし企業主導で開発している) 実装はCで、マルチプラットフォーム対応 C10Kが問題視された頃から、高速処理できるサーバとして着目された 特徴 フル機能のHTTPサーバ ロギング, 仮想サーバ, SSL, rewrite, アクセスコントロール, KeepAlive, HTTP/2などはデフォルトで使える Apacheと同様に、モジュールにより拡張可能 イベント駆動方式 単一のプロセスがリクエストをどんどこ捌いていくイメージ Apacheのように、リクエストに対してプロセスあるいはスレッドの割当が不要なので高速、省メモリ ただしメモリ空間は全リクエスト共有になるため、それに関連してアプリケーションサーバとしての利用に制限がある シングルプロセスなので、ひとつの処理に時間がかか

1. 導入編 2. コマンド編 設定編 概要 Redisの設定方法について抜粋した。 またセキュリティ対応、レプリケーション、永続化といった応用項目ごとに、その設定方法をまとめた。 なおDockerや仮想マシン等の環境に対応するための設定方針については含めていない。 主要な設定項目 各バージョンのソース内に設定ファイルのサンプルがあるので、これをベースに作るといい(ex. 3.0 redis.conf)。 設定ファイルは通常redis.conf などと命名する 設定ファイル内は、 <キーワード> <引数1>, <引数2>, ... の形式で書いていく コメントは他のconfと同様に# .conf以外の設定の指定・変更方法 サーバの起動時に設定する 設定は、サーバの起動時に直接指定することもできる。

当文書はRails + Rspec + Capybara環境を想定しています。 他のアプリ/テストフレームワークを利用したい場合は公式のREADMEを参照願います。 概要 Capybara = UIテストのためのrubyフレームワーク オープンソース / MITライセンス ページの表示、フォームの入力、ボタンのクリック等のUI操作をテストコード上で実行できる 複数のテストフレームワークから利用できる MiniTest, RSpec, Cucumberなど 複数の ドライバ (テスト環境, ヘッドレスブラウザ)を選択して利用できる Rack::Test, Selenium, Webkitなど 導入 インストール gemをインストールする。 Railsの場合、バージョンによってはデフォルトでGemfileに追加されている。

前回: FactoryGirlチートシート FactoryGirlに続いてRSpecの使い方を調べてみました。 当文書は単にツールとしてのRSpecの使い方のまとめです。 TDD/BDDの概念やワークフロー、あるいは良いテストを書くための指針等にはふれていません。 概要 RSpec = Rubyアプリケーションのテストのためのフレームワーク オープンソース / MITライセンス ビヘイビア駆動開発(BDD)をサポートする Spec(ification) = 仕様 = テストコード。コードの振る舞いを試験するためのテストと仕様を同じものととらえている 2017/07現在のバージョンは3.6系 導入 Railsの場合はgem rspec-railsをインストールする。

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

素のままのJavaScript(ES5)に直接触れる機会もだんだんと減ってきたので、うろ覚えだったES6の機能をまとめてみました。 なお文中のコードはBabel環境で書きながら確認したため、現行ブラウザでの直接の対応状況に関しては未調査です。 概要 ECMAScriptS6 = ES2015 = JavaScriptの新しいバージョン ES5(現行のjs)の次のバージョンとして策定された さらに新しいES7も作られている 現状は多くのブラウザが(部分的にしか)対応していないので、ES6で書いたコードを動かすためにはES5への変換(トランスパイル)が必要になる。 トランスパイル用のツールとしてはBabelが代表的な実装になる。 具体的な利用方法としては: ES6をサポートしているブラウザを使う 現状、サポートは部分的かつ挙動に差異がある babelのCLIを使って直接トランスパイルする we

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

なんか速くなるやつ、程度の理解だったturbolinksを調べてみました。 「(ロード制御がややこしいので)静的なサイトに関してのみ使うべし」のような意見を多く見かけたのですが、 機能を俯瞰してみると本来はSPAの代替(複数ページでフロントアプリを構成する)を意図したツールのように思えました。 react-redux等と組み合わせての運用を検討してみたいところです。 概要 turbolinks = Ajaxによるページ遷移の高速化のためのライブラリ オープンソース / MITライセンス 導入コストが低い サーバ側の特別な対応は不要 モバイル環境にも対応 ユーザ側から見て、通常のページ遷移と同じように表示される/動作する Rails4で公式採用された バインディング(turbolinks-rails)がデフォルトでGemfileに含まれている 仕組み turbolinksにおいて、リンクがク

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

webpackに引き続き、Railsが推してるフロントパッケージマネージャのyarnを調べてみました。npmも慣れてきたんで変えるのやだなー、と思ってたのですが互換性高くて移行しやすいし、動作も速くていい感じです。 概要 yarn = フロント(js)のパッケージマネージャ Facebook発、オープンソース、BSDライセンス npmと互換性がある npmと同じpackage.json, node_modules/で構成される コマンドも似ている バージョンの厳密な管理ができる package.jsonでバージョンそのものではなく、許容するバージョンの範囲を指定する 実際にインストールされた際のバージョンはyarn.lockに記録され、別マシンで再現可能になる npmに比べて高速に動作する 導入 Homebrewあるいはnpmでインストールできる。

前回: ES6(ES2015)チートシート ES6に続いて、altJSの中でもひときわ勢いを感じるTypeScriptについて調べてみました。 概要 TypeScript = altJSの一種 オープンソース / マイクロソフト発 構文はJavaScript(ES5-6)と上位互換性がある ES6の構文はすべて使える 静的型付けによる型チェックができる点が特徴 その他、interface/enum/genericなど独自の機能が追加されている ES6と同様、開発時にjs(ES5)にトランスパイルすることで、ブラウザ上で実行できるようになる トランスパイルはnpmパッケージ(typescript)を使う 導入 試す(Playground) ブラウザ上でTypeScriptを書いて動かせるPlaygroundが公開されている。 http://www.typescriptlang.org/pla

(2019/11/24) 大人の事情で(だいぶ前に)FactoryGirlがFactoryBotに改名されたので、本記事も更新しました。 単純置換しただけで内容は依然書いた当時のままなので、最新版とは乖離があるかもですご注意ください Railsのテスト環境として人気のあるFactoryBot/RSpecの組み合わせを学習中です。同時に学ばれている方も多いかと思うのですが、混乱しそうなのでFactoryBotだけ先に調べてみました。 概要 FactoryBot = データ(モデルインスタンス)生成のためのライブラリ オープンソース / MITライセンス 柔軟に記述できるため、Rails標準のfixturesの代替として人気 主にテストデータの生成に利用する 導入 Railsの場合はgem factory_bot_rails をインストールする。

Reactからの流れで、組み合わせての運用例の多いReduxを勉強してみました。 Fluxの概念、Reduxの基本機能、Reactとの連携について公式のドキュメントを中心にまとめています。 フロー自体が厳密でありながらも実装上の制約が少ない点が魅力的に思えましたが、 データモデルやUIツリーの設計、ファイル/クラス分割やディレクトリ構成などについても明確な規約が存在せず、(特にスケールを見越しての)運用方針は使い込みながら模索していく必要がありそうです。 概要 Redux = React Communityが開発しているJavaScriptフレームワーク オープンソース, MITライセンス Fluxの考え方/アーキテクチャにもとづいている 単方向にデータや処理をフローさせることで、わかりやすくフロントエンド作りましょう、という考え ユーザの操作 → View → Action → Redu

概要 MongoDB = ドキュメント指向のDB ドキュメント = 構造化されたデータのこと RDBのレコードに相当する これを単位としてデータを扱う ドキュメントは、主キーとして _id を必ず持つ ドキュメントはJSONのように扱える(内部的にはBSON) データは型付けされる(BSON互換) コレクション = データの集まり RDBのテーブルに相当する(ただしスキーマは存在しない) SQLのような複雑なデータ操作はできない 検索機能としては柔軟に対応できる 企業(MongoDB Inc.)が開発し、オープンソースで公開されている 有料版が存在し、セキュリティ強化などの追加機能とサポートが受けられる その他、コンサルや教育も受け付けているとのこと GNU APGLライセンス クロスプラットフォーム C++実装 スケーリング/クラスタリングに対応している スクリプト言語としてJavaSc

フロントまわりのツールは群雄割拠してる感がすごくて手を出せずにいたのですが、Rails5.1 で gem webpacker が導入されたこともあってwebpack/yarn構成に魅力を感じています。 今どきのモジュール/パッケージ管理したいので、まずはwebpackです。 概要 webpack = JavaScriptファイルのバンドラ モジュール単位に分離されたjsファイルをひとつのjsファイルにまとめる(バンドルする) 結合の過程で、jsファイルの依存関係を解決する CommonJS, AMD, ES6 Moduleなど復数のモジュールシステムに対応する 競合はrequire.js(依存解決), browserify(バンドル)など オープンソース, MITライセンス 導入 npmでインストールする。 プロダクション環境ではバンドルした状態で配置するわけなので、開発環境のみを指定する

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?