エンジニアの卵の成長日記

ふわっちで配信してますhttps://whowatch.tv/profile/w:kurowasi2525

JSのフレームワークを知らない人間がVue.jsを2ヵ月触ってみたって話

(この記事では,フレームワークとライブラリは同じとして扱います)

前書き

最後の更新が2017年9月26日...

10月~1月は卒業研究を主にやっており,バイトにもあまり行かず,自主勉強なども行っていなかったため,更新できませんでした.

しかし,1, 2月は時間が出来たので,Vue.jsを触ってました.


筆者はどんな人間?

僕は,大学1年生からプログラミングを始め,JavaScriptに触れJavaScriptを大好きになりました.

しかし,JavaScriptフレームワークは1つも使ったことがありません.

大学の先生からの
『流行りのフレームワークを使えることは良いこと.でも,フレームワークを作れる人間になりなさい.』
フレームワークを使ってる人は,台風の中にいる人.フレームワークの仕様変更,フレームワークの流行りに振る舞わされる.』
フレームワークを作る人間になり,台風の目にいなさい.そうすれば振り回されない』
という言葉が好きで,素のJavaScriptばかり使っていました.
(無駄な機能が入っているのが好きじゃなかった)

バイト先でjQueryプラグイン関係を使うことがあり,ある程度は読めますが,使いこなしているレベルではありませんでした.

そんな僕がVue.jsを触ったので,思ったことや,勉強の過程?,作ったものなどを書いていこうと思う.


なぜVue.jsを選んだ?

2017年の2月頃,ニコニコで配信している時に,リスナーさんにお勧めされたことがVue.jsを知るきっかけでした.

そこから約半年後の10月頃に,小学校時代の友達に10年ぶりに会うことになりました.

彼は,高校から独学でプログラミングを勉強し,現在はWeb系のフリーランスをやっています.

彼がすごいという噂は何度も聞いており,彼の職場と僕のバイト先が同じ渋谷であったため,仕事終わりに飲もうとなりました.

彼からReactの素晴らしさやVue.jsがこれから来るという話を聞かしていただき,

どうしても,JSのフレームワークを勉強したくなり,卒業研究ツールを現在流行っているフレームワークに対応する必要があるという言い訳を考え,

AngularとReactとVue.jsがどんなものかを軽く勉強しました.

理由は2017年でGithubでスターを多く貰っていたからというだけ笑

3つ触ってみて驚いたのは,トランスパイル,コンポーネント指向,仮想DOMです.

JSもわかるし,型で困ったことないからTypeScriptとかやる必要なくね笑.なんでわざわざコンパイルするんだよ笑と思ってた自分を殴りたくなりました.

HTML, CSS, JSを1つのファイルに書けたり,サイトをパーツごとに分けられるのも衝撃的でした.

その中でもVue.jsの最小構成から始められて,プロジェクトの規模ごとに必要な機能を追加していく.という考えに感動し,

Vue.jsを選びました.


1作品目

一番最初に作成したのは,DoCheckというサイトです.


フロント側はVue.js+Vuetify

バックエンドはNode.js(express)+MySQL

サーバはさくらVPS

です.




Vue.jsのリファレンスとVue.jsの例を数個やり,次にデザインテンプレートのライブラリを探し始めました.

とりあえず,なんでもよかったので一番最初に環境構築できたものを使おうと決め,その希望にかなったのがVuetifyでした.

この選択は間違っていなかったと思いますし,初心者は特に使った方が良いと思います.

Vuetifyのコンポーネントを組み合わせることで,それっぽいサイトができます.

加えて,Vuetifyにはコンポーネントごとにサンプルコードがたくさんあるので,コピペもでき,

サンプルコードごとの比較で,何が変わればどんな動きをするのかってのが,すぐわかります.

Vuetifyで得たデータバインディングの知識はVue.jsに使えます.(というかVue.jsの機能)

これにより,VuetifyをいじってるだけでVue.jsの知識がついてるって感じでした!



次に,ログイン機能を実装する時に,ルーティング機能が必要になり,vue-routerの勉強を始めました.

これもvue-routerの公式リファレンスなどを読み,動きを把握しました.

次に,コンポーネント間のデータの受け渡しを
chibinowa.net
こちら様のサイトを利用して,行っていました.

しかし,ログイン情報や様々なフラグ管理が面倒になり,Vuexの勉強を始めました.

色々なサイトを読みましたが,やはり公式リファレンスが一番良いと思います.


2作品目

二番目に作成したのは,VIROというサイトです.

こちらは,Nuxt.js + Firebaseで作成しました.

Nuxt.jsを利用することで,vue-routerの部分はフォルダの作成ルールに従えば良いだけなのですごい楽です.

Vuexに関しても今まで通りで使えます.


衝撃を受けたのはfirebaseです.

Hostingに関しては,json形式の設定ファイルを作成し,firebaseコマンドを打てば,勝手に送ってくれて公開できます.

独自ドメインも簡単に設定でき,httpsにも対応してくれます.

一番衝撃を受けたのは,firebase Authenicationです.

10行程度のコードを書くだけで,メール&パスワードでのログインが可能になり,

10行程度書けば,Twitterでログインできるようになります.

後は2行ほど追加すれば,GoogleFacebookにも対応できます.

Realtime Databaseに関しても簡単です.

保存するプロパティ名を指定して,後はオブジェクトを代入する形やpushする形でできます.



所感

2ヵ月Vue.jsを触ってみた感想としては,本当に学習コストが低いです.

ランディングページくらいならVue.jsだけで作成し,
複数のページが必要になったらvue-routerを利用し,
ログイン状態や複数のページで同じ情報を利用することになるのであればVuexを利用

など,本当に作成するものの規模間に応じて付け足して対応することができます.

HTML, CSS, JavaScriptが1つのファイルにできるので,ページごとや部品ごとに管理できるのは,本当に良いです.

適当に作っていても,後で読みやすくリファクタリングもしやすいです.

加えて,Firebaseは本当に神でした.

個人で何か軽いものを作るならFirebaseは本当にお勧めです.

Nuxt.js + Firebaseは爆速&無料で作れるので本当にお勧めです.


宣伝

DoCheck
仮想通貨の資産管理サイト

VIRO
実世界では誰かが払い,仮想の世界で割り勘をするサイト
複数回会うことの信頼を使って借金する感じです

ふわっちやニコニコでサイト作成の過程を放送してます
whowatch.tv
com.nicovideo.jp

Laravel+PostgreSQLでの異なる型のINNER JOINの方法

Laravelはデータベースクレリビルダってのがある

データベースクエリビルダはスラスラと書ける(fluent)便利なインターフェイスで、クエリを作成し実行するために使用します。アプリケーションで行われるほとんどのデーターベース操作が可能で、サポートしている全データベースシステムに対し使用できます。

こいつのおかげでSQL文を書かなくて済む

SELECT文とかもこんな感じで書ける

$users = DB::table('users')->select('name', 'email as user_email')->get();

今回問題のINNER JOIN文もこんな感じでかける

$users = DB::table('users')
->join('contacts', 'users.id', '=', 'contacts.user_id')
->join('orders', 'users.id', '=', 'orders.user_id')
->select('users.*', 'contacts.phone', 'orders.price')
->get();

今回ぶち当たった壁は違う型でのINNER JOINする方法

上記の例の場合、usersテーブルのidがint8・contactsテーブルのuser_idがvarcharの場合、

型が違うためjoinできない

CASTすればよいと思い、試してみた

$users = DB::table('users')
            ->join('contacts', 'users.id', '=', 'contacts.user_id::int')
            ->get();

contacts.user_id::intなんて存在しないよって怒られる

原因は多分これみたい

LaravelクエリビルダはアプリケーションをSQLインジェクション攻撃から守るために、PDOパラメーターによるバインディングを使用します。バインドする文字列をクリーンにしてから渡す必要はありません。

解決方法はDB::raw()メソッド

たまにクエリの中でSQLを直接使用したいことがあります。このようなSQLでは文字をそのまま埋め込むだけですので、SQLインジェクションをされないように気をつけてください! エスケープなしのSQLを使用する場合はDB::rawメソッドを使用します。

こんな感じにすれば完了

$users = DB::table('users')
            ->join('contacts', 'users.id', '=', DB::raw('contacts.user_id::int'))
            ->get();


参考サイト
データベース:クエリビルダ 5.3 Laravel

NVMWで最新verがインストールできない(404 Not Found)

概要
NVMWで最新verがインストールできないので,無理やり最新verを使えるようにした.


目次
1. 背景
1.1. nvmwとは2. 目的
3. エラー内容
4. 解決策
5. 感想


1. 背景
卒業研究で使っているプログラムは,Macで開発していた.(Macは開発環境を整えやすいから)

だが,あのペラペラのキーボードと小さい画面では,開発の効率が悪いのでWindowsで開発することにした.

そこで問題が起きた.nodeのバージョンが古くてletをエラー扱いする.

Windowsではnvmwを使っているのだが,昔からv0.10.21以外のバージョンをインストールできない問題があった.


1.1. nvmwとは
nvmのWindows版.nodeのバージョンを管理できる.

続きを読む

Eclipseを使ってSelenium-WebDriverを使ってみた

概要

Selenium3 WebDriverを使ってChromeを自動操作する,環境構築とサンプルコードを作成する.


目次

1. 背景
1.1. Selenium WebDriverとは2. 目的
2.1. JavaでのWebDriverの使用方法2.2. Eclipseとは2.3. Jarファイルとは2.4. Mavenとは2.5. Gradleとは3. 環境構築
3.1. WebDriverを取得3.2. EclipseにJarを読み込ませる3.2.1. プロジェクト作成3.2.2. Jarファイルを参照する3.2.3. Chromeの場合3.3. サンプル作成4. 感想
5. 参考文献


1. 背景

卒業研究でSelenium WebDriverを使うので,WebDriverの知識が必要.


1.1. Selenium WebDriverとは

Selenium WebDriverは,プログラミング言語のコードからブラウザ操作が可能なライブラリ.

JavaRubyJavaScriptなど,各言語のライブラリとして提供されている.

続きを読む

スマホのWebブラウザで画像が荒い原因とは?

1. 背景
2. 目的
3. 調査結果3.1. 解像度の意味は2つある3.2. 解像度3.3. ピクセル/dpi/インチの関係3.4. Retinaディスプレイ登場3.5. Retinaディスプレイでの解決策4. 結論
5. 感想
6. 参考文献


1. 背景

バイト先で,スマホのブラウザでWebサイトを表示すると,画像が荒いという問題があった.

kurowasi2525.hatenablog.com

上の方は,ピクセルサイズを大きくすることなく,解像度を上げることで解決したい.

僕は,ピクセルサイズを大きくしないと画質は上がらないと考えていた.

続きを読む

Windows10でPleiades All in Oneを使わずにEclipseの環境を構築した

概要

Selenium WebDriverを使うため,Eclipseの環境が必要なので構築してみた.


目次

1. 背景
1.1. Seleniumとは1.2. Selenium WebDriver1.3. Eclipse2. 目的
2.1. Pleiadesを利用しない理由3. 環境構築
3.1. Eclipseのインストール3.2. Javaプロジェクトの作成3.3. クラスの作成3.4. HelloWorldコードの記述3.5. 実行4. 感想
5. 参考文献


1. 背景

卒業研究でSeleniumSelenium WebDriverを使うため,Eclipseの環境が必要なので構築してみた.

WebDriverの言語はJavaにした.

本当はNode.jsにしたかったのだが,僕の内定先はJavaのシステムで,

Seleniumを使っているみたいなので,目先の利益を追ってJavaを選んだ笑.

続きを読む

Laradockを使っていて、Postgresに接続できなかった問題

目次
1. 背景
2. 解決策
3. 余談


1. 背景


バイト先でLaradockを使っているのだが,Postgresに接続できない問題があった.

ローカルからLaradockでのPostgresに

 ホスト:localhost
 ユーザ:default
 パスワード:secret
 ポート:5432
 データベース:default

で接続しようとするとできなかった.

ローカル環境には,Laradockで作ったものではなく,brewコマンドでインストールしたPostgresが起動していた.

brewコマンドで入れたPostgresに対しての接続はできた.

同じポート5432に2つ作ることはできないだろうけど,

ここらへんはDockerの知識が足りないため,勉強しようと思います.

brewコマンドで起動したPostgresを落とせばいいのだろうが,

こちらも違う環境で使っていて,デーモン化?で自動起動するようになっているので,

後で面倒になりそうだから,止めたくない.


ワークスペースに入って,Postgresに接続しようとするが,

以下のようなエラーが出る.

$ docker-compose exec workspace bash
# psql -l

psql: could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?psql: could not connect to server: No such file or directory

/var/run/ ディレクトリまでは存在するのだが,postgresqlというディレクトリは見当たらない.

色々調べて,試したのだが解決しない.

続きを読む