30分でやるReactの環境を１から構築して自走するまで
環境構築は一人では難しい！
先日、友人にReactの学習を自走できるように、環境構築 + 進め方を話しました。 話してる中、どれから始めたらいいのか、何がわからないのかがわからない。という内容があり、 フロントエンドの複雑化とともに最初の一歩がふみ出しにくくなっていると感じました。
環境構築 〜 自走できるまでを記載したいと思います。(Mac OS用)
どの方法が自走しやすいか
を使う手もありますが、 恐らく、実務ではindex.htmlにurlを指定することは少ないでしょう。 現場ではReact + Redux(Flux)という組み合わせが多いと思ってます。(うちだけ？)そのためのフォルダ構成を最初から学んでおくと、React -> Reduxの学習に移りやすく、自走がしやすいと思います。
ただし、そのようなReact + Reduxの環境を１から構築(webpackや必要なmoduleをインストール)するのはとてもハードルが高いです。 そして、必死に覚えたところで、環境構築はリーダークラスの仕事だったり、すでに構築済みのところにアサインされるケースがほとんどのため、直近で直面するタスクでもないと思ってます。
そのため、僕は、githubの良いexampleを持ってきて、コーディングしながらLife cycleやstate propsなどReactの特徴を覚えていく。が一番実践的で良いと思ってます。
続きを読むDockerを使う①
久々のブログ更新です。
今日はDockerについてご紹介。(今更感はありますが)
Dockerとは
Dockerとは 、Docker社が提供しているサーバ仮想化技術の一つです。
コンテナと呼ばれる仮想的なOS環境をもちいて、１台のサーバで複数のプロセスを起動するサーバ仮想化技術です。
サーバ仮想化には大きく以下の種類があり、そのうち、Dockerはコンテナ型の仮想化技術になります。
コンテナ型以外では、ホスト型、ハイパーバイザー型があり、それぞれの特徴は以下の通りです
コンテナ型は他の２つの仮想化技術に比べ、使用できるOSに制限はあるものの、消費するリソース、オーバーヘッドが少ないという特徴があります。
FacebookまじでReact Nativeやるってよ
お久しぶりです。最近のこと
大分更新がとどこっていました。 約１ヶ月ぶりにました。村八分機能は機能していませんでした。申し訳ありません。(笑)
業務や開発が忙しく、ブログそっちのけにしてました。
react codeのリファクタリングや、業務でreact nativeのアプリを１本リリースしたり、割と忙しくできてます。書くことが溜まっているのでどんどん記事にしていかねばなりません。
firebaseを使った、面白い環境構築もできそうなので、それも記事にしたいなぁ。
Facebook本気(まじ)でReact Nativeやるってよ
タイトルは釣りです。釣りなのかな? ただ、びっくりしたのは事実です。
最近ふっとshowcaseを見ました。
( ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼ (；ﾟдﾟ) ・・・
え？Facebook アプリ追加されてへん？？？
そんな馬鹿なと遡ると、0.29から追加されておりました。
続きを読むchefを使ってサーバ管理②〜仮想マシン(VirtualBox、Vagrant)の作成〜
どうも、弟です。
前回は手元の端末にchefをインストールしました。
今回は、chefの設定を適用するための仮想サーバを構築します。
仮想サーバのインストール
仮想サーバはVirtualBox、仮想化ツールはVagrantで構築していきます。
VirtualBox、Vagrantは公式サイトからダウンロードできます。
VirtualBox
https://www.virtualbox.org/wiki/Downloads
Vagrant
https://www.vagrantup.com/downloads.html
chefを使ってサーバ管理①〜chefの概要
どうも、弟です。
今回からChefについての記事を上げていこうと思います。
そもそも、Chefに興味をもったきっかけは
「今後インフラ屋としてどう生きていこうか？Cloudの技術が当たり前になっていく中、いままでのようにオンプレミスのサーバ構築の技術だけじゃ通用しなくなるのではないか？」という漠然とした不安をもった中、DevOpsの考え方に出会ったからです。
DevOpsは、ざっくり言うと、Dev(Development:開発)とOps(Operations:運用)との壁をなくし、開発と運用が協力し、早いサイクルでモノを作りましょうという考え方です。
早いサイクルでモノを作る、となると、自動化できるところは自動化していきましょう！という考え方になるため、サーバの設定も手順書を作って作業するのではなく自動化してしまいましょう！となるわけです。
これは、過去の手順を参考にしようとするといつ整備された手順書かわからない！や、業務停止時間までわざわざ残って手作業で手順実行しているような古い環境で働いている弟にとっては衝撃的な考え方でした。
そんなことから、Chefを勉強し、記事化して残していこう！というわけです。
Chefとは
Chefとは、サーバの設定や更新を自動化するツールです。
私の現場もそうなのですが、サーバの設定は基本人の手で実施することが多いと思います。
例えば、新規にユーザを追加する場合、その手順書を作成し、人のオペレーションで作業を実施します。当然、人の手で実施するため、
手順書がある場合でもオペレーションミスが発生する場合もあります。(ルーチンワークになってくると、気をつけているつもりでも特に。。。)
Chefは、今まで手順書として起こしていたものをコード化し、Chefに実行してもらうことで自動化してしまおうというツールになります。
React Native ~ Reduxの導入2 Componentとの紐付け~
containersとcomponents
どうも、兄です。
前回のRedux導入に引き続きComponent(View)となる箇所の紐付けを行っていきたいと思います。
前回も冒頭触れましたが、Viewの部分は以下のフォルダでカテゴリ分けするのが綺麗な分け方と記載しました。
- containers：モバイルではpageで設計してます。reduxとconnectし、actionをdispatchするところでもあります。
- components：ボタン、イメージ、リストビューなどの部品。containersからreduxの値を引数としてもらう
これはReduxとComponentの接地面をできるだけ抑えることで疎結合化を進めるのが目的だと考えています。また、責任の所在がはっきりするので、何かRedux関係でbugがあっても、あぁ、あのファイルを見ればいいのね。となります。
※ただ、containerは入り口で全てをComponentでpropsでやりとりすればいいかと言えば、それは違うと思ってて、作りやすい範囲でいいのではないかと思ってます。(いや、自分に言い聞かせてるのかw)
また、あくまでも、これはカテゴリ分けでcontainersもcomponentsもComponentでそれ以上でも以下でもありません。
まだ設計のベストプラクティクスを見つけれていないので、もっと勉強しなくちゃだし、実践あるのみだなぁと思ってます。
続きを読むReact Native ~ Reduxの導入1 ~
Reduxの導入
どうも兄です。
前回に引き続き、reduxの導入をやっていきたいと思います。
今回、reduxの導入はreact-native-router-fluxを用いようと思います。
reduxの導入は、react-native-router-fluxを使わずともできますが、 flux/reduxに対応しており導入が楽なのと、 routingの際、stateが自動的にpropsとして渡ってきてとても便利です。
次の構成を目指して構築していきます。
続きを書きました。
続きを読む