【Rails】開発環境でCSSの変更が反映されない
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
アプリのデザインを修正していたら、途中から変更が反映されなくなりました。
恐らく、React.jsが関係していると思うのですが、、、
解決はできたので、 その方法を記録しておきます。
内容
キャッシュを削除する
$ rails tmp:cache:clear
この後に、railsを再起動させるとcssの変更が反映されていました。
今後に向けて
この方法だと、cssを変更する度にキャッシュを削除する必要があります。
開発に時間がかかるので、コンパイル関係をもっと深く学習する必要がありそうです。
React
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
諸事情でReactを使ってアプリを一つ開発します。
Reactは使ったことがないので、学んだ内容をブログにしようと思います。
Reactとは？
JavaScriptのライブラリです。
ユーザーインタフェースを構築するのに使われ、Viewに特化しています。
基本的にはES6に基づいて開発を進めることになります。
仮想DOMを採用しており、変更発生する度に仮想DOMの差分を確認(再描写)し、差分箇所のDOMを更新します。
(ReactDOMによって、React要素に合致するようにDOMを更新します)
そして、Reactでは仮想的にHTML(JSX)が使えます。
つまり、変更があればHTMLを更新する、そして常に最新の状態のDOMをレンダリングすることができます。
システム側からすると、差分更新になるので高速に実行が可能になります。
jQueryのような「ここはこう変化させる」と要素ごとに操作する必要がなくなります。
なのでReactは、記事などHTMLの活躍が多いWEBサービスよりも、JavaScriptの活躍(動作)が多いWEBサービスにReactは向いています。
注目ポイント
・SPAの需要増=View(フロントエンド)の部分でJavaScriptの作業が増えた
・JSXを利用した仮想DOMを採用している(実装者は仮想DOMを記述する)
・コンポーネント指向
・コンパイル時に通常のDOM生成コードに変換できる
・XSS(cross-site-scripting) 対策
歴史
ReactはFacebookのソフトウェアエンジニアによって開発されました。
同じくFacebookで開発されたPHP拡張のXHPの影響を受けているので、記述方法はXHPと似ています。
「XHPが使いやすかったので、JavaScriptでも使いたい」と思い開発されたのがReactといったところでしょうか。
2011年にFacebookのニュースフィード上で最初に使用され、2012年にはインスタでも使用されるようになった。
2013年にオープンソース化されました。
既存アプリへのReact環境構築
環境
・Mac
・React
React環境構築
詳細はこちらをご確認ください。
用語
SPA：
Single Page Applicationの略。
2010年頃から流行したアプリ構造で、HTML5によりURLの動的書き換えが可能になったことでページ遷移が必要なくなり、部分的な更新を行うのが主流となった結果生まれたアプリ構造。
単一Webページで構成ができるが、サーバーエンド側で行う処理の大半がフロントエンド 側に移行することになった。
JSX：
JavaScript XMLの略で、コンポーネントのマークアップを書くための規則・記法。
HTMLとほとんど同じなので、JavaScriptにマークアップが混在するような形になる。
ReactでJSXを使用することは必須ではありません。
React要素を生成できます。
JavaScriptの値を使いたい場合は、{}で囲む必要があります。
キャメルケースのプロパティ命名規則を使用します。
コンパイルするとJavaScriptになります。
様々なエラーや警告を表示してくれます。
React要素：
Reactアプリケーションの最小単位の構成ブロックで、イミュータブルオブジェクトです。
一度要素を作成すると、その子要素もしくは属性を変更することはできません。
JSXで記述します。
プログラミング言語などの人工言語で定められている構文規則や記法。
ユーザーインタフェースパーツのロジックとマークアップを一箇所に定義したもの。
Reactにおいては、DOMとJavaScriptのセットがコンポーネントとなる。
簡単に言うと、Viewをオブジェクト化したもの。
コンポーネント名は大文字で始める。
JSXのロジック：
他のユーザーインターフェースロジックと本質的に結合しているらしい。
なので、イベントへの応答や経過的な状態変化、画面表示のためのデータを準備する方法などは他のユーザーインターフェースと同じロジックのようです。
XSS(cross-site-scripting)対策：
ReactDOMはJSXに埋め込まれた値をレンダリングされる前にエスケープします。
renderの前に全てが文字列に変換されます。
renderメソッド：
コンポーネントを返すことができるメソッド。
使い方は、renderメソッドでコンポーネントのDOM構造を返し、ReactDOM.renderで指定したReact要素にコンポーネントを記述する。
props：
コンポーネントに対して外部から値を渡すメソッド。
読み取り専用です。
外部とのインターフェースになる。
state：
コンポーネントによって完全に管理されているメソッド。
ユーザー操作や時間経過などで動的に変化するデータを扱うために確保されている機能です。
【注意点】
・stateは直接変更しない
・stateの更新は非同期に行われる可能性がある
・stateの更新はマージされる
ライフサイクルメソッド：
マウントとアンマウントが交互に実行されること。
マウント：
クラスやコンポーネントがDOMとして描写されるときのこと。
アンマウント：
クラスやコンポーネントに基づいて生成されたDOMが削除されること。
今後に向けて
jQueryとDOMの勉強をしないといけないなーと痛感しました。。。
JSXは掘り下げたら面白そう！
時間もないので、実際にアプリを開発してReactに慣れていこうと思います。
参考
これからReactを勉強する人が最初に見るべきスライド７選 | UX MILK
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
サーバー
爆速学習のサーバ編です。
なんだかんだ4日かかった。。。
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
サーバーとは？
サービスを提供するコンピュータやそのコンピュータにある機能のこと。
自身のパソコンも設定をすれば、サーバーにすることができます。
離れた場所にあるサーバーの中で作業を行いたい場合は、SSHを利用します。
SSHは、暗号や認証の技術を使って、安全にリモートサーバーと通信することができます。
Railsの開発環境では、サーバーに見立てた自身のPC内に、pumaというアプリケーションサーバーを作成し、「rails s」でこのアプリケーションサーバーを起動させていました。
最近では、クラウド上でサーバーを設置できるサービス(AWSやherokuなど)の台頭が目紛しいです。
役割
・データの保存(バックアップ)
・開発したサービスデータの保管
・外部クライアントと接続する機能
WEBアプリ開発においては、主に以下三つの役割を果たすことができます。
・パソコン同士の通信を行う(WEBサーバー)
・データを管理/保存する(データベースサーバー)
・アプリを管理する(アプリケーションサーバー)
WEBサーバー
WEBブラウザから送られてきたリクエストに対して、情報を処理し、その結果をレスポンスとしてWEBブラウザに返すコンピュータやソフトウェアのこと。
役割
・静的なコンテンツをクライアントにレスポンスとして返す
・動的なコンテンツ生成をアプリケーション本体(アプリケーションサーバー)に依頼する
・アプリケーションサーバーから返ってくる処理結果をクライアントにレスポンスとして返す
WEBの仕組みについてはこちら
動作
・「80ポート」でHTTPリクエストを受け取る
・リクエストに応じて情報の処理を行う
・処理した情報をリクエストしてきたWEBブラウザにレスポンスする
データベースサーバー
詳しくはこちら
アプリケーションサーバー
Webアプリを管理するサーバーです。
Webサーバーから渡された情報から動的なコンテンツを生成し、その結果をWebサーバーに返します。
AWS
Amazon Web Servicesの略です。
サーバーやそのサーバーを整える機能を提供してくれるクラウドコンピューティングサービスです。
物理サーバーを設置する必要がなく、設定も容易にできるため、非常に使いやすいサービスです。
一方で、物理サーバーは共用になることが多いため、セキュリティ面が少し心配です。
また、提供されているサービス以上の拡張ができないのも難点です。
AWSを利用したデプロイ
EC2インスタンスの仮想サーバー内に、「アプリケーションサーバー(Unicorn)」「Webサーバー(Nginx)」「データベースサーバー(MySQL)」をインストールします。
流れ
※環境変数の設定は慎重に行なってください
・EC2インスタンスを作成
・Elastic IPを作成
・「80」のポートを設定する
・SSH接続でEC2インスタンスにログインし、EC２インスタンスの環境構築を行う
Node.js/openssl-devel/rbenv/ruby-build/Ruby/
・MySQLをインストールする
・Unicornをインストールする
・アプリのコードをGithubからEC2インスタンスにクローンする
・「3000」のポートを設定する
・データベースを作成する
・アセットファイルをコンパイルする
・Nginxをインストールする
・Unicornの設定を修正する
・Capistranoを導入
・S3を導入する
※環境変数の設定は慎重に行なってください
用語
プロセス：
WEBサーバーやコマンドなどLinux上で実行されるプログラムの処理のこと。
プロセスはプロセス名とプロセスIDという番号が自動的に付与されます。
Linux上では100を超えるプロセスが動いているが、１つのCPUが一度に実行できるプロセスは１つだけです。
プロセスを確認することで、コマンドが正常に動いているかどうか分かります。
また、以下の性質があります。
・プロセス毎に自分だけのメモリを割り当てられる
・WEBサーバなどネットワーク機能を利用するプロセスはポートを占有する
デプロイ：
配置するや展開するといった意味。
IT業界では、アプリをサーバー上に配置し、Web上に展開する意味になります。
ソフトウェアやハードウェアの利用権などをネットワーク越しに提供する技術。
「必要な時に、必要な分だけ使う」ことができるので、それぞれの事情に合わせてサービスを利用することができます。
Amazon EC2(Elastic Computing Cloud)：
仮想サーバーを提供する仮想マシンサービスのこと。
クラウドストレージを提供するサービス。
画像のアップロードなどに使う。
Amazon RDS：
データベースを提供するサービス。
AMI(Amazon Machine Image)：
サーバーに関するデータをまるごと保存したデータのこと。
サーバーの設定を自分でゼロからインストールする手間が省けます。
Elastic IP：
みんなはこのIPアドレスを頼りにWebアプリを利用します。
ブラウザからリクエストを受け取りRailsアプリを実際に動作させるソフトウェア。
Railsではpumaがデフォルトで設定されており、「rails s」でそのアプリケーションサーバーの起動を行なっています。
Rack：
アプリケーションサーバーとアプリケーション本体の言語が違うため、それらを連携させるための翻訳プログラムのこと。
自動デプロイツールのgemです。
デプロイ時に必要なコマンド操作が一回で済むので、コマンドの打ち間違いや手順間違いの発生を防ぐことができます。
IAM：
AWSのサービスの一つで、ある権限のみを持たせることができるユーザーアカウントです。
今後に向けて
これでカリキュラムで学んできたことを復習し終わりました。
これからは、今まで作ってきたWEBアプリの説明ができるよう言語化していきます！
データベース
爆速学習のデータベース編です。
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
データベースとは？
様々な情報(データ)を格納し、その情報を活用する機能がついているソフトウェアです。
活用する機能とは、「追加」「検索」「抽出」などのことです。
Railsでは運用環境毎(開発・テスト・本番)に一つのデータベースを持っています。
現在広く使われているデータベースは、リレーショナル型のデータベースです。
そして、そのリレーショナルデータベースを管理するシステムがRDBMSといいます。
RDBMSの代表的な製品
MySQL
世界で1,000万以上のサーバにインストールされています。
実は、商用RDBMSで世界No.1のOracleとMySQLは、同じOracle社の製品です。
元は別会社で開発されたRDBMEでしたが、Oracle社の買収によって、同じ会社の管理下に置かれることになりました。
また、Googleで採用されているMariaDBは、MySQLの開発者が開発しました。
MariaDBには独自の機能はあるものの、MySQLと互換性があり、基本的な操作方法も変わりません。
特徴
・動作が速い
・多くのOSで動作する
・多くのプログラミング言語で対応している
使用例
Railsにおけるデータベース
既に何度か出ていますが、Railsではデータベースを運用環境毎(開発・テスト・本番)に使い分けています。
こうすることで、他の環境で行なったデータベースの操作の影響を受けることがなく、事故を防ぐことができます。
データベースの設定は「database.yml」で行います。
本番環境では、AWS EC2やHeroku内にデータベースサーバを作成したりします。
Active Record
アプリのオブジェクトモデルとデータベースのリレーショナルモデルとの構造的なギャップ(インピーダンスミスマッチ)を解消するためのライブラリ。
Railsではこの「Active Record」がデフォルトで設定されています。
詳しくはこちら
運用環境
開発環境(development)：
通常(ローカル)、開発をする際に使用する環境。
本番環境(production)：
アプリを実際にリリースする際に使用する環境。
テスト環境(test)：
アプリの動作をテストする際に使用する環境。
用語
リレーショナルデータベース：
１つのテーブルに全てのデータを入れるのではなく、データを「それぞれ関係を持った(共通項がある)」複数のテーブルに分けて管理し、必要なテーブルの必要な部分だけ集めて利用できるデータベースのこと。
１つのデータをいくつかの項目の集まり(テーブル)で表しています。
１つのデータをレコード、項目をカラムと呼びます。
SQL：
Structured Query Languageの略。
データベースに命令をするための言語。
大きく分けると、「DML(データ操作言語)」「DDL(データ定義言語)」の２つに分けられる。
DML：
・SELECT文
・UPDATE文
・INSERT文
・DELETE文
など
DDL：
・CREATE文
・DROP文
・ALTER文
など
クエリ(Query)：
データベースに対しての命令を文字として表したもの。
Sequel Pro(シークエル・プロ)：
データベースの中身を分かりやすく視覚化して表示するアプリ。
Macで使用できる。
YAML(ヤムル)：
構造をインデントや記号で表現するファイル。
ファイル名の拡張子は「.yml」にする。
今後に向けて
データベースにはかなりいじめられてきたので、時間をかけずにまとめることができました。
残りはサーバだけです。
そして、開発してきた内容を棚卸しして、自分の言葉で説明できるようになれば、目標達成です。
Ruby on Rails
爆速学習のRails編です。
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
Ruby on Railsとは？
Rubyで利用可能なWebアプリケーションフレームワークです。
フルスタックフレームワークとも呼ばれ、Webアプリ開発に必要な機能を一通り揃えているフレームワークです。
先人の知恵と努力の結晶です。
アプリケーションフレームワーク導入の利点
・アプリの根幹となる設計方針や基盤部分が決まっているので、開発のスピードと質がある程度担保される
・開発ルールが決まっているので、コードに一貫性がありメンテナンス性に優れる
・フレームワークの要求に従えばアプリが完成する
・最先端の技術の導入が速く、開発者の負担を軽減してくれる
→開発者の負担を軽減し、Webアプリの品質が一定以上担保される
設計哲学
DRY(Don't Repeat Yourself)
同じ記述を繰り返さない
CoC(Convention over Configuration)
設定よりも規約
Railsがあらかじめ用意している規約を優先する
MVCパターン
Model：ビジネスロジック
View：ユーザーインターフェイス
Controller：ModelとViewの制御
このModel-View-Controllerの役割を明確に分離しようという設計モデルのことです。
メリットは、
・プログラマー(バック)とデザイナー(フロント)とで平行作業を行いやすい
・デザインやロジックの修正が相互に影響しない(保守が容易)
・機能単位でテストを実施できる
が挙げられます。
開発環境設定
開発に必要なソフトフェア
・Ruby
・Webサーバ(HTTPサーバ)
・データベース
開発環境の設定(Mac/Linux)
・Homebrewをインストール
・Homebrewでrbenvとruby-buildをインストール
・bash_profileを読み込み、有効にする
・Homebrewでreadlineをインストール
・rbenvでRubyをインストール(rbenvでバージョン管理を行えるようにするため)
・HomebrewでMySQLをインストールする
・MySQLコマンドを実行できるようにする(PATHの環境設定を行う)
・bundlerをインストールする
・Ruby on Railsをインストールする
・rehashを実行する
用語
コマンドラインツール(command line tool) :
キーボードで画面を操作するためのプログラム。
Xcodeなどでインストールすることができます。
Homebrew：
Mac OS Xオペレーティングシステム上で、ソフトウェアの導入を単純化するパッケージ管理システムのひとつ。
パッケージ(ソフトウェア)同士の依存関係などを管理してくれます。
そして、ターミナルからコマンドを実行するたけで、パッケージ(ソフトウェア)のバージョン管理やインストール・アンインストールを簡単に行うことができます。
ソースディストリビューションとバイナリディストリビューションについてはこちら
rbenv(アールベンブ)：
Rubyのバージョンを切り替えます。
ruby-build(ルビー・ビルド)：
Rubyの様々なバージョンをインストールすることができます。
シェル：
人間が入力したコマンドラインをカーネルに伝えるプログラム。人間は直接カーネルに指示を出すことができないようになっている。
ログイン直後から動き始めます。そして、途中で別のシェルに変更することもできます。
シェルは入力内容によって使用するシェルが変わる。
ログイン時に起動するシェルをログインシェルと言います。
bash：
シェルの種類の一つで、shをパワーアップしたシェル。
sh：
最も基本的なシェル。
.bash_profile：
ログインシェルがbashの状態でログインした時に読み込まれる設定ファイル。
場所はホームディレクトリにありますが、隠しファイルなので通常は見えません。
gem：
Rubyを便利に扱うためのアプリケーションの総称。
ターミナルからそれぞれのgemが持つコマンドを実行するという形で使用する。
Linuxコマンド：
ターミナル内で使用できるコマンド。
データベースの一種。
ちなみに、Railsでは運用環境(開発・テスト・本番)毎に一つのデータベースを持っています。
今後に向けて
Active Record(詳しくはこちら)や名前付けのルールなど、他にも重要な概念はありますが、それは実践の中で知識の定着をしようと思います。
難しい内容は記事にしてみます。
あとはデータベースとサーバを学習し直すだけ！
WEBアプリにおけるセキュリティ
爆速学習です。WEBアプリのセキュリティ編です。
難しい内容だったので、深くまで学習できてません。。。
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
WEBアプリにおけるセキュリティ
今の時代にWEBアプリに一切関わらない人はどれくらいいるでしょうか？
日本においては、恐らくほぼ全ての人がWEBアプリに関わっていると思います。
それほどまでに、WEBアプリは人間の生活に必要不可欠な存在になりました。
そしてWEBアプリは大量の個人情報を持つようになりました。
もしその個人情報が流出すると、どうなるでしょうか？
社会的な被害は計り知れません。
そうならないために、エンジニアがセキュリティを守り、不具合に対処する術を知っておく必要があります。
※セキュリティ機能を実際に実装するのがエンジニアのため。設計段階などの話は今回は省いています。
WEBアプリが問題を起こすのではありません。
人間が問題を起こすのです。
人間がしっかりとセキュリティ対策を行いましょう。
よくある不具合
・アカウント乗っ取り
・ウイルス感染
・情報漏洩
・データ改ざん
原因
・ネットワークフィルタリングの設定ミス
・管理インターフェイスへのアクセス制限がされていない
・パスワードの強さが十分でない
対策
・保守体制をしっかりと組む(対応スピードが重要なので社内がお勧め)
・定期的にバックアップを取る
・優れた開発やコーディングができるようにトレーニングする
・セキュリティを重視した設計を行う
・適切なテストを実施する
エンジニアができる対策
・RSpecなどを使用してテストコードを作成、実行する
・単体テストを実行する
・統合テストを実行する
用語
インシデント：
IT業界では、システムが仕様通りに動かないことを指します。
他には、システムの保安上の脅威となる事象のことも指します。
今後に向けて
WEBアプリはすぐに代替えができないので、問題が起きると厄介です。
しっかりとセキュリティ対策をする必要がありそうです。
重要な内容なので、後日しっかりと学習しようと思います。
【Ruby】クラスメソッドとインスタンスメソッド
爆速学習の番外編です。
Rubyのクラスメソッドとインスタンスメソッドについて理解を深めます。
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
メソッドとは？
現実世界の動作をプログラムで表現したもの。
動作は複数の処理から成り立っています。その処理をオブジェクトに置き換え、さらにオブジェクトに置換した処理を１つにまとめ、動作として使えるようにしたものがメソッドです。
例えば、データを生成する場合は、「生成する」部分をメソッドとして定義します。
メソッドもオブジェクトの塊・・・？
クラスメソッドとは？
クラスが使用できるメソッドです。
クラスメソッドはクラス自身が定義したメソッドを使用することができます。
クラスメソッドの定義と呼び出し
class クラス名
def self.メソッド名
# 処理
end
end
インスタンス名 = クラス名.メソッド名(引数)
クラスメソッドを定義する時は、メソッド名の前に「self.」を付けます。
呼び出し時には、引数を使うこともできます。
インスタンスメソッドとは？
インスタンスが使用できるメソッドです。
インスタンスメソッドを定義したクラス内で定義したインスタンスに使用できます。
インスタンスメソッドの定義と呼び出し
class クラス名
def メソッド名
# 処理
end
end
インスタンス名 = クラス名.new #インスタンスの生成
インスタンス名.インスタンスメソッド名(引数)
普通のメソッドと書き方は同じです。
また、クラスメソッドと同様に引数を使うことができます。
今後に向けて
寄り道ばかりしてたら、時間がなくなってきたぞ。。。
