Works by

Ren's blog

アプリケーションバックエンド中心に書いていきます

npm

【npm/yarn】パッケージをダウングレードする

npm

メモ。 npm では、パッケージのダウングレードを行う場合、一旦パッケージを削除してから再度インストールし直す必要があります。 $ npm remove cowsay $ npm install --save cowsay@1.0.0 yarn であれば、 yarn upgrade [パッケージ名]@[version] で指定し…

【Angular】Angular CLIで簡単にAngularプロジェクトの作成・デプロイ・テストを自動化する

Angular CLI Angular CLIはGoogleが提供するフロントエンドフレームワークAngularのためのCLIツールです。Angularプロジェクトの作成やデプロイ、テスト自動化などをより簡単に実行することができます。 インストール npm でインストールします。 $ npm inst…

【Node.js】npxでローカルにパッケージを一時的にインストールして実行する

npm

npx npx はローカルにインストールしたnpmパッケージバイナリを直接実行できるコマンドです。npm5.2.0より導入されました。 このnpx にはパッケージを一時的にだけインストールしてその機能を実行する機能が備わっているので、 今回はその機能について紹介し…

【Firebase】Firebase(+Vue.js)でWebアプリケーション上に認証を実装する

Frebaseとは Firebaseは、Googleが提供するモバイルアプリケーション開発のプラットフォームサービスです。mBaas(Mobile Backend as a Service) とも呼ばれ、モバイルアプリケーションのバックエンド機能を提供します。例えばアプリケーションの構築に必要な…

【Vue.js】vue-cliでVueプロジェクトを作成する

Vue.jsとは Vue.jsとは、近年急激に普及しつつある軽量フロントエンドフレームワークです。ReactのVirtual DOMやAngularの双方向バインディングといったメジャーなフレームワークが実装する強力な機能を備えつつ、学習コストが抑えめであるという特徴を持ち…

【React Native】Native Base でiOS/AndroidのUIを構築する

npm

Native Base nativebase.io NativeBaseはReact Nativeで使うことのできるプラットフォームUIコンポーネントです。 iOS/Androidそれぞれに適切なUIを提供します。 例えば、iOS用のヘッダーには下図のような平坦なデザインが多いのですが、Androidではマテリア…

【Yarn】Yarnをインストールする

npm

Yarnとは YarnはFacebookが開発したパッケージマネージャです。Yarnは、Nodel.js上で用いられるパッケージマネージャであるnpmを代替します。 yarnpkg.com 前回の記事でも触れましたが、npmは昨今のWeb開発では頻繁に用いられています。一方で、npmはパッケ…

【Node.js】nodebrewでNode.jsを管理する

npm

nodebrewとは github.com nodebrewは、Node.jsのバージョンを管理するためのツールです。 nodebrewを使うことで、一つの環境に複数のバージョンのNode.jsを導入することができます。 Web開発でNode.jsが頻繁に使われる昨今、特にnpmのバージョン互換性が問題…

【React Native】React Nativeでカメラアプリを実装する

npm

ここ最近、React Nativeを使ってネイティブアプリで使いそうな機能を一通り試すことが多くなってきました。 rennnosukesann.hatenablog.com rennnosukesann.hatenablog.com 今回もネイティブ実装でよく使われる機能であるカメラ機能を試してみました。 実行…

【React Native】react-native-modalboxでネイティブアプリ上のモーダルを利用する

npm

react-native-modalbox github.com react-native-modalboxはアニメーション付きモーダル表示を手軽に実装できるUIコンポーネントです。 モーダルは使えるシーンが多いので、表示の仕方でユーザー体験を向上させたいときに使うと良いかもしれません。 (細か…

【React Native】react-native-textinput-affectsを使ってリッチなTextInputを実装する

npm

react-native-textinput-affects github.com react-native-textinput-effectsはReact Nativeアプリ上で使用できるTextInput UIコンポーネントです。 豊富な種類の入力フォームが用意されており、デモを見るだけでも楽しめます。 普通のTextInputと同様のプロ…

【React Native】React Native + Firebase + Expo 環境を構築する

React Native + Firebase + Expo 前回の記事では、React NativeにFirebaseを導入する方法を紹介しました。 rennnosukesann.hatenablog.com しかしながら、通常のreact-native initによる開発は、実機デバッグをしたい場合に億劫です。一方、Expoを使った実機…

【React Native】React Native + Firebase環境を構築する(iOS)

React Native + Firebase環境を構築する際のメモ。 Firebase firebase.google.com FirebaseはGoogleが提供するモバイルプラットフォームであり、クラウドDBや認証、アナリティクス、クラッシュレポートなど多くのサービスをサポートしています。今回はReact …

【React Native】react-native-swiperで画面スワイプを実装する

npm

react-native-swiper React Nativeでスワイプ画面遷移が可能になるreact-native-swiperを試してみました。 github.com Usage 1. 前回の記事に従い、create-react-native-appをインストール rennnosukesann.hatenablog.com 2. create-react-native-appプロジ…

【React Native】Expo + react-native-gifted-chat でチャットアプリを作る

npm

最近React Nativeの開発を始めたのですが、いろいろなReact NativeのUIコンポーネントが配布されているようなので 適当にいじって遊んでみることにしました。 今回は、チャットUIとして提供されているreact-native-gifted-chatを試してみました。 react-nati…

【React】Material-UIでReactアプリケーションをマテリアルデザイン化する

npm

Material-UI material-ui.com Material-UIはマテリアルデザインをReactアプリケーションに導入することができるUIコンポーネントです。Material-UIを使うことで、手軽にGoogleのマテリアルデザインを踏襲したアプリケーションを作ることができます。 Install…

【React】redux-loggerでActionやStateのログを出力する

npm

redux-logger ReduxではRedux Middelwareという様々な機能拡張が有志の手によって提供されています(プラグインのようなものです)。これから紹介するredux-loggerもRedux Middlewareの一つであり、これを使えばRedux上のActionディスパッチやStateの変化を…

【React】React+JSXを用いてUIコンポーネントを作成する①

npm

前回の記事でJSXについて書いたので、今回は簡単なUIコンポーネント作成の流れをメモします。 前準備 create-react-appをインストールし、Reactプロジェクトを作成します(アプリの立ち上げも行っておきます)。 $ brew install node $ npm install -g creat…

【React】JSX

npm

※ここで述べるJSXはReact.jsで利用されるものを指します。 JSXとは JSXはFacebook社が開発した、Reactの内部でHTML記述をより簡潔に書くためのJavaScript拡張構文です。 ReactではHTMLの出力を主にJavaScript上で定義します。というのも、Reactはコンポーネ…

【Sass】LibSassを導入する

npm

LibSassとは LibSassはSassプリプロセッサ実装の一つで、C/C++で実装されています。Rubyで実装されたRuby Sassとは異なり、コンパイルが高速であるという特徴を持ちます。ver3.3以降 Ruby Sassとの完全互換となったため、LibSassのシェアは増えつつあるよう…

【gulp】gulp generatorでgulpfile.jsを自動生成する

npm

# gulp generator gulp generator を使うと、GUI上でgulpfile.jsを生成することができます。 またnpm installに必要なpackage.jsonも生成してくれるので便利です。