Ubuntu 14.04.4 LTS のPHP5.6をPHP7にした話 - Qiita
どうも、虚弱サーバーを必死にサーバー管理してます。 今日はサーバーのPHPをせっかくなのでPHP7にするまでのお話。 ０．導入環境 Ubuntu 14.04 １．リポジトリ追加 まずは【Ubuntu】PHP 5.6 を PHP 7 へアップグレード を参考にリポジトリを追加します。 せっかく公開されてるのでありがたく使います。 $ sudo add-apt-repository ppa:ondrej/php $ apt-get update updateも忘れずに。 尚、追加するリポジトリは非公式で個人やチームでも 公開できるものであるため、環境によっては システムが非常に不安定な状態や、 パッケージマネージャーが動作しなくなるといった 状態を招く恐れもあるため、 ご理解の上で利用してください。 又、この記事を参考に導入した際に 生じたいかなる損害についても責任を負いかねます。 ２．PHP
Hot Module Replacementの設定と仕組みを理解する - Qiita
Hot Module Replacement (HMR)はwebpackの提供する仕組みで、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。再描画無しにと言うのは、「F5とかリロードボタンを押さなくても自動的に再描画してくれますよ」ということではなく、文字通り変更したモジュールのみを置き換えてくれます。 Reactを導入して開発環境を整えると、当然のようについてくるので使う分には意識する必要もないですが、、 で、これって何なんだっけ？というのを整理しました。 HMRは、Websocket通信と、ソースコードに注入されたいくつかのRuntimeと呼ばれるスクリプトによって実現されます。ソースコードの変更をコンパイラが検知し、WebSocketでブラウザに通知、通知を受け取ったRuntimeはサーバーから変更分のスクリプトを取得してモジュールを置き換えます。 前述
もうBabelじゃない - Bubleだ。 - Qiita
JavaScript を書くとき、もはや新しい ES でないとストレスではないでしょうか。 だからこそ僕らは新しい ES で開発してから、ブラウザ対応のために Babel を使って ES5 にトランスパイルするというのが定石となっていました。 しかし、必要最小限の機能に絞って高速なトランスパイルを実現する Buble 1 が登場しました。 TL;DR Buble は、 Babel やその他のトランスパイラと比べて以下の点で異なります。 仕様への準拠ではなくブラウザで動くことを目指す 設定ファイルは不要 高速なトランスパイル Babel は新しい ES で書かれたコードを ES5 ( など )の仕様に準拠したコードにトランスパイルすることが目的です。一方で、新しい ES から ES5 への “完全” な変換は不可能です。 そこで Buble の取ったアプローチは、他仕様へのトランスパイルでは
jQuery.ajaxの代わりにSuperAgentを使う - Qiita
脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 superagentの良さ かわいい。 ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest scriptタグでsuperag
ES6のPromiseを使ってsuperagentでapiを叩く - Qiita
AJAXを使うときは、素の状態で使うよりもライブラリから使ったほうがいいです。現在のプロジェクトはReact.jsを使っていますが、DOM操作は必要ないので、足りないのはAJAXを利用するだけのライブラリが欲しいです。そこで、superagentがシンプルで目的に合致します。 ES6ではPromiseが使えます。非同期通信を使うときは、Promiseを使えばネストが深いコールバック嵐から解放された約束の地へ行けます。それではsuperagnetによるAJAXの非同期通信をES6のPromiseを使って利用してみます。 import request from 'superagent'; function callApi(apiName) { return new Promise() { (resolve, reject) => { request.get("http://localhost/
Redux: Actionのコーディング規約 と redux-actions - Qiita
概要 Redux / Flux の Action にはオブジェクトであれば何を指定しても大丈夫ですが、非公式のコーディング規約(flux-standard-action)があり、Redux の公式ドキュメントでもこのコーディング規約に従うことを奨励しています。 redux-actions を使って、サンプルコードをコーディング規約に従った Action に修正します。 準備 Middleware編 の続き(tag/middleware)を使います。 Action の構造 flux-standard-action の規約では Action は次のような構造のオブジェクトになります。 { type: FOO_TYPE, // must payload: {object}, // optional meta: {object}, // optional error: false, true, u
社内でCSSの新しい方針について話したメモ - Qiita
社内で新しいドメインを設立するにあたり、CSS Modules, PostCSS, cssnextを試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか？」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき 1. コンポーネント時代のスタイリング 2. グローバルCSS、BEM、そしてローカルCSS 3. CSS Modules、そしてJSXへの割り振り 4. cssnextと、その書き方 5. 我々のPostCSSスタンダード 新ドメインの CSS環境（案） CSS Modules css next PostCSS on webpack 何が変わるのか 我々の今までのスタイリング sassで書く スタイルのモジ
フロントエンドエンジニアが暇なときにやると良いかもしれないこと - Qiita
（ゆるいスキルアップ的な意味で）フロントエンドエンジニアが暇なときにやると良いかもしれないこと。 主観です。「これが良いよ！」というのがありましたら、ぜひ教えて下さい🙇 W3Cを読む whatwgを眺める。 ↑のissueを見る MDNを読む JavaScript CSS Web API NodeのAPIを読む caniuseを見る npmパッケージを眺める starが多い順 パッケージ一覧 ↑で１位のexpressが使っているパッケージ スライドを読む node学園 React.js Meetup Mediumを読む JavaScriptタグの記事 FrontEndタグの記事 Twitterで著名人をフォローする TBD @addyosmani @LeaVerou @paul_irish @BrendanEich Podcastを聞く Mozaic.fm Front-end Five
React Tutorial Example (PostCSS) - Qiita
React の Style Sheets は コンポーネントに設定すると効果的です。 また Style Sheets も Hot Module Replacement が利用できるので便利です。 前回 のアプリケーションに PostCSS を追加してみましょう。 Learning Style Sheets の Hot Module Replacement を利用する。 CSS Modules で ローカルスコープ を利用する。 PostCSS で SCSS や Sass の機能を利用する。 Environment node: v4.4.5 npm: v3.9.6 Comment Box Form 完成される Source Code のファイルリストです。 $ tree -a -I node_modules . ├── .babelrc ├── app │ ├── actions │
redux-sagaで非同期処理と戦う - Qiita
はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の
たぶんこれが一番分かりやすいと思います 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がさっぱりわかんねぇ！」 ぐらいの人向け。自分
Vue.jsのカレンダー | Advent Calendar 2016 - Qiita
URLYou can post either your article on Qiita or your blog post. About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
Riot.jsのカレンダー | Advent Calendar 2016 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
Vue.js概要？ - Qiita
Vue.js とは 原作者である Evan You氏 が中心となって開発中のクライアント サイドJavaScirpt(JS)フレームワークです。 MVC の派生種である、GUIライブラリに適した MVVM を設計基盤と して採用し、構築されています。 MVVM を採用していること が、構文の理解しやすさに繋がって います。 MVVM を採用したフレームワークでは、表示そのものであるView、 表示するデータ 及び データを操作する手続き をひとまとめにした View Model(VM)、が舞台上の役者です、それらを管理する コントローラ(Controller)は、存在するものの、黒子のような 存在で、ユーザからは隠蔽されているため、コードを書く際に 意識する必要はありません。 公式サイトで Vue.js の特徴は Approachable、Performant、Versatile という３
【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita
はじめに Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。 多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。 それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。 こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです！ 特徴 Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。 HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。 シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレーム
React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが/muut/riotjsから/riot/riotにお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定 最初は今ブームの２大フレームワークとなっている『
ES6 on React.js で徹底的にテストしてやる - Qiita
これは freee エンジニアによる、アドベントカレンダー 1日目の記事になります。言い出しっぺということで、初日を飾らせていただきました。 ビューのテストしてますか？ freee では、プロダクトによっていくつかの技術を組み合わせてフロントエンド開発を行っています。その中でES6 による React.js を使った実装が増えつつあります。特に、今の私の担当は、インタラクティブな挙動が求められ、DOMの状態が激しく変化する画面の開発となっております。そこで、React.js を使った開発が適していると判断し、かなり込み入ったReact.jsベースのビューコンポーネントを開発しています。 ところで、ビューのテストというと、下記のような様々な理由で相対的に優先度を低く扱われる場合が多いと思います。 ユーザの操作が起点となるためテスト実装がしづらい 細かな変更頻度が高くテスト実装によるオーバーヘ
Jest と ReactTestUtils で React Component のユニットテストを書く - Qiita
facebook製のテストフレームワークJestを使ってReact Component のユニットテストを書く方法について簡単にまとめました。 こちらに今回使ったサンプルコードをアップしましたので、合わせてご参照ください! 前提 jest-cli v0.9.2 babel-jest v9.0.3 react-addons-test-utils v0.14.7 react v0.14.7 babel で jsx, es6 をコンパイルする Jest の主な特徴 テストコード内で require した module は、自動的に mock 化される(後述)。https://facebook.github.io/jest/docs/automatic-mocking.html デフォルトで jasmine 2を利用している。 設定 module のインストール Jest でテストを実行するために
Mac用 Apple英字配列(US)キーボードにおける日本語入力切替のおすすめ：Commandキーのみで実現 - Qiita
私は数年間これを使って、快適な日本語入力の切り替えを行っています！この切り替え方法による影響など、詳しい情報をまとめました。 設定の所要時間は、ダウンロード＆インストール後、1分〜3分程度です。 （他にもシチュエーション別の対策方法などを記載しているため記事が長くなっています） ※こちらはMacユーザー向けの記事です。→Windows向けの記事はこちら 2019/12/30 更新：全体的に可読性を向上、入力ソース切り替えのショートカット案を追加、コメント頂いたフィードバックを本文に反映 目次 概要 設定手順 Apple US Keyboard(英字配列)を使うメリット・デメリット おまけ 概要 英数や かなキーがないUSキーボードで、左Commandを英数キー、右Commandをかなキーに割り当てるように設定し、日本語入力の切り替えを行う 元々のCommandの機能は維持され、コピー(Co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【個人メモ】JSON Serverを使って手っ取り早くWebAPIのモックアップを作る - Qiita
