Rails6のアプリでポートフォリオを作った話。【1】
最近転職活動をしています。
半年ぶりに再びRailsを触ろうと思って、herokuを使って再勉強中です。
# 使うもの👩💻
- Rails6, slim, scss, Vue.js, webpacker
- heroku, postgres
# 今回の目次
1. RailsでDBの切り替え時に発生したエラー
2. フロントエンドの技術選定と困りごと
## 1. rails newする
rails new my_portfolio
いつもであればオプションコマンドを付けて新規作成していきますが、バックエンドの構成などは決めていないのでこのまま叩きます。
これではRailsがデフォルトで扱っているsqliteでアプリが作成されてしまうので、herokuで扱うことができません。
## 2. データベースの変更をする
- Gemfile
```
# gem 'sqlite3', '~> 1.4'
gem 'pg'(1.2.3が入ることになります)
```
- ローカルのgemを入れる
- database.yml
```
adapter: postgresql
```
これらの変更を加えているうちに、3つエラーにつき当たったのでメモします。
### 2-1. rails sしようとした瞬間に出たエラー
```
LoadError: dlopen(〜): Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
```
これは該当のバージョンのopensslが見つからないと言われているようです。
📕: OpenSSLとは？
PostgreSQLは標準でSSL接続をサポートし、クライアント/サーバの通信がさらに安全になるよう暗号化します。 そのためにはOpenSSLがクライアントとサーバシステムの両方にインストールされ、構築時にPostgreSQLにおけるそのサポートが有効になっている必要があります
なるほど。postgresに必須なライブラリのようなので、brewでインストールしてみます。
しかし、普通のopensslをダウンロードしてしまうと同じことが起きてしまうので、openssl@1.1をインストールしてあげます。
### 2-2. pg gemインストール中に起こったエラー
```
- Fetching: pg-0.18.4.gem (100%)
Building native extensions. This could take a while...
ERROR: Error installing pg:
ERROR: Failed to build gem native extension.
conftest.c:3:10: fatal error: 'libpq-fe.h' file not found
```
opensslのパスがうまく通っていなかったようなので、brew link openssl --forceでシンボリックリンクを貼ります。
### 2-3. bundle exec rake db:migrateで起こったエラー
マイグレーション中に下記のようなエラーが出ます。
```
- psql: could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/var/pgsql_socket/.s.PGSQL.5432"?
```
これは他にpostgresのプロセスが動いているのではないかと考えられます。
ps aux | grep postgresして出てきたプロセスをpkillしていきます。
（どこで動いているかわからないのでこのやり方ですが、通常は正常終了するようにしましょう。）
完了後は `initdb /usr/local/var/postgres` で初期化し、
`pg_ctl -D /usr/local/var/postgres -l logfile start` でpostgresを立ち上げたらマイグレーションしていきます。
## 3. フロントエンドの技術選定
- slim
htmlのテンプレートエンジンはslimを導入しました。
インデントを解釈して美しくdivやタグを並べられるところが好きです。記述量も短い。
- scss
AtomicDesignを考えた時に、modifierをかなり使用する為、1つの部品に表現のパターンが一目でわかりやすいところが気に入っているところ。
- GSAP
これが冒頭で言っていた、3DCGコンテンツを作ってくれるアニメーションライブラリ。
導入も簡単です。
```
yarn add gsap
```
app/javascript/packs/application.js
````
require("gsap")
```
今回は3.2.6を使います。Vueのようにimportでgsap, TweenMaxが使えるようになります。
こんな動きを実現できます。
### 3-1. slimとvueの併用で起こる問題点
他は忘れかけている親しみ深いvueを構築の練習も兼ねて入れています。
ただし、slimではjavascript:と書いた下側にjsを書いていくことができますが、
export defaultと書かれた以降をテンプレートエンジンが解釈できず、slimにvueのコンポーネントをimportできないという難しさがあります。
エラーは、javascript type="module":とすることでなくすことができます。
📗: export defaultとは
JavaScript プログラムをモジュールに分割して必要な時にインポートできるような仕組みの提供が検討されるようになってきました。
モジュールの利用を可能にする JavaScript ライブラリーやフレームワークも数多くあります 。（MDNより抜粋）
ついでに、これらモジュールが動作する環境はほぼPCののブラウザ上でスマホになるとChrome以外は対応していないらしいです。
この辺をwebpackerさんがよしなにしてくれているのか…
この記事は次回に続きます🙇♂️
