Firebaseのお手軽さに感動した

先週、もくdevさん主催の「Vue.jsとFirebaseで初心者向けハンズオン」に行ってきました。

参加した動機はVue.js目的で、Firebaseについては何の知識も無かったんですが、このイベントに参加している中であれ・・・?このFirebaseってやつ凄くね・・・?

となったのでこの記事を書いています。

正直よくわかってないことをよくわかってないまま書いているので間違ってたらコメントとかで教えてください。

 

Firebaseって?

天下のグーグルが提供しているサービスで、モバイルアプリやWEBアプリのバックエンドの機能を素早く簡単に実装してくれるもので、なんならデプロイまでやっちゃうよーってもの。

 

いやいや実際どういうこと?と思う方もいらっしゃるので今回のイベントで作成したものを紹介します。

https://vuetest-ed8b7.firebaseapp.com

このサイト上部のメモアプリってリンクの先にあります。

(直リンク貼ると404になるのなんでだろ)

アプリ自体は単純でメモを投稿して、一覧で見るってだけのものなんですが

これを作ってめちゃくちゃ驚いたんですよ。

Railsで書こうとするとmodelとcontrollerを書かないといけないんですが

実際書いたのはVue.jsとtypescriptのフロント部分だけでデータベースへの保存とかのサーバーエンド側のコードを全く書いてない。

firebaseのHPでちょこちょこっと設定しただけ。

しかもデプロイまでしてくれてる・・・

何を言ってるかわからねーと思うが俺も何をされたのか全くわからなかった。

超能力だとか超スピードとかでは断じてねぇ!グーグルの技術力の恐ろしさを感じたぜ・・・(ポルナレフ感)

 

じゃあもうバックエンド書かなくていいならRailsいらなくね?って思うかもですがDBの検索機能が弱かったりするので一長一短ではあるのですが、とはいえとにかくアイデアを素早く形にしたい!って人には凄く向いているサービスだと思います。

 

今度の日曜に淀屋橋でFirebase Meetup in OsakaっていうFirebaseに関するナレッジ共有+交流イベントがあるのでそこに行ってこようと思います。

https://fjug-osaka.connpass.com/event/130970/

主催者の方に聞いたところ、Firebaseに興味がある人なら本当に誰でも!とのことなので興味がある人は参加してみませんか?

 

 

 

code warsでプログラミング問題を解いてみた

お久しぶりです。

TECHEXPERTのカリキュラムも応用編が終わり、最終課題に入りました。

初めてのチーム作業なので沢山失敗して学べたらと思います。

 

最終課題以外の時間は好きな事に充てられるので、そろそろ転職先にPR出来るポートフォリオなりブログ記事なりのアウトプットを作成しないとな~って考えてるんです。

 

で、ポートフォリオ以外にPR出来るアウトプットって何よ?って考えたんですけど、

プログラミングスクールの体験談や本の丸写しではPRにはならないよな~と悩んでたところ、チェリー本の著者、伊藤淳一さんがブログでこんな事書かれていました。

https://blog.jnito.com/entry/2019/05/03/121235

提案:シンプルなプログラミング問題を自力で解いて、そのコードをアウトプットしてみよう

僕がオススメするのは、シンプルなプログラミング問題を自力で解いて、そのコードをアウトプットする、というアプローチです。

 プログラミング問題!

f:id:novalis222:20190517155158j:plain

というわけで早速やってみようとおもいます。

プログラミング問題はatcoderやpaizaなどにもあるのですが、

前者はガチ競技プログラミング

後者は自分のコードを採用担当に見てもらってPRする事もできる就活用というイメージで自分にとっては少し敷居が高いかな・・・と感じたので

code warsというイケてるサイトで問題を解いていこうと思います。

 https://www.codewars.com

 詳しい登録方法、問題の探し方なんかは以下の記事を参考にしました。

https://qiita.com/javacommons/items/7c473cda7825ab99e08c

code warsは自分のkyu (級 ランクのこと)が8 kyuから始まりまして、最高が1 kyuです。

kyu を上げるにはkata(問題のこと)をこなすことでkyuが上がっていきます。

とてもわかりやすくイケてますね。

 

早速問題を解いていってみましょう。

https://www.codewars.com/kata/even-or-odd/train/ruby

問題文

 Create a function (or write a script in Shell) that takes an integer as an argument and returns "Even" for even numbers or "Odd" for odd numbers.

引数に渡された数字が偶数だったらEven 奇数だったらOddって出力しろって事?

number % 2 ==0だったらEvenってことでいいじゃん!楽勝~!

回答1 

def even_or_odd(number)

  if number % 2 == 0 

    return "Even"

    else "Odd"

  end

end

 

 

・・・これ三項演算子使えばもう少し短く出来るな!

 

回答2

def even_or_odd(number)

 (number % 2 == 0) ? "Even" : "Odd"

end

 

 

・・・そういえばそもそも偶数かどうかbool値で返すメソッドがあったような気が。

回答3

def even_or_odd(number)

 number.even? ? "Even" : "Odd"

end

 

といった風にこんな簡単な問題でも様々な解法があるのが面白いですね。

解答したあとは人の解法も見れるのも勉強になっていい感じ。

こんな感じで問題を解いていって自分の考えた事をアウトプットしていこうかなと思います。

 

jQueryは順番が大事ということを学んだ話。

はじめに

昨日完成出来なかったミニアプリ、出来なかったのは自分だけなのでめちゃくちゃ悔しい!

せめてお手本の通りにでも完成させたい!

当初の予定通りform_withとhamlを使って書くぞい!

 

で、詰まったところと解決方法を書きたいと思います。

 

MaterializeCSSのFormが動かない

実装したかった機能 

MaterializeCSSのFormに入力した際にlabelが上にスライドする。

f:id:novalis222:20190331230306g:plain

発表会で他の方が実装してるの見て、オシャレじゃん?真似したろ!と思ったけど実装してみると

レイアウトが崩れて上にスライドしてくれない問題が発生

f:id:novalis222:20190331231201g:plain

jQueryがどうやら働いてないっぽい。

でもなんで?ってtwitterで呟いてたらEXPERT卒業生のしょうみゆさんからこんなアドバイスを頂きました。

 なるほど!!!!!

デベロッパーツールで確認すると

Uncaught ReferenceError: $ is not defined at materialize.min.js:6というエラーを吐いて たことを確認。

エラー文をググると、jQueryの要素を使うjsファイルが先に来てしまっているのでエラーを吐いている 従って、jQueryを最初に読ませるように、つまり一番上にjqueryを読むよう書けばOK

参考サイト http://siganaitohoho.hatenablog.jp/entry/2014/07/02/000330

とのことなのでjQueryCDNを一番上に持ってくると・・・

 

f:id:novalis222:20190331232556g:plain

動いた!

カリキュラムの流れ的にMaterializeのCDNをコピペした次にjQueryCDNをコピペするから、なんも考えないとjQueryの記述が後になっちゃったんですね。

明日書く予定のもう一つの詰まりポイントもそうなんですけど、デベロッパーツールを確認することは本当に大事なんだなぁ、と実感しました。

しょうみゆさん、本当にありがとうございました。

ミニアプリを作る 終

えーっとですね、期日に間に合いませんでしたorz

風邪が長引いてなかなかPCに触れなかったことが原因と思ってたんですが

いやいやこれは自分の甘さが招いた結果だな、と。

他の方の作品をみて2週間あってログイン機能しか実装できなかった自分が恥ずかしいです。

せめて自分のミニアプリは作りきりたいのですが、期日に間に合わせる為にいろんなところから理解しないままコピペを繰り返してもはやなにがなんだか・・・という感じになってるので、もう一度作り直します。

こんどは前の記事で載せていたお手本のサイトを再現することを目指します。

 

 

今回の音楽はもう一回最初から、という意味でRhymesterのONCE AGAIN

https://www.youtube.com/watch?v=0JxL3zWIWtQ

ミニアプリを作る 1 gemfileを弄ろう

下準備

gemfileに

pry-railsを追加

 binding-pryを使えるようにする為。

compass-railsを追加

 CSSのコーディングが楽になる・・・らしい。実際どう使うのかは追々わかっていくのかなぁ

参考

qiita.com

sprocketsを追加

これはJavaScriptCSS、画像などのリソースを効率的に扱うための仕組みであるアセットパイプラインを導入する為。

・・・なるほど、さっぱりわからん

自分メモ

アセットパイプラインについては"現場で使えるRuby on Rails5 速習実践ガイド"のp266を参照する。

gem 'haml-rails'
gem 'erb2haml' を追加

この二つはhamlrailsで使えるようにするものと、erbファイルをhamlに変換するもの。

と思ったけどどうやら 'haml-rails'1つで十分っぽい。

qiita.com

 

ミニアプリを作る 0

ミニなアプリを作ります。その記録です。

作る理由

 TECH::EXPERTの課題

 railsでイチからミニアプリを作ってみて今までの総復習

 

どんなのを作る?

・自分が食べたものを記録するやつ

twitter+食べ物といったイメージ

 

どうやって作る?

ruby + rails

view部分はhamlで作りたい

 

いつまで?

3/30まで(5日間)ほんとは2週間用意されてたんだけど他の勉強を進めてて放置してました。

 

求められてる仕様

・User機能
 Userがログイン / ログアウト / サインインできる
・ブログ機能
 Userがブログを投稿できる。
 Userが自分のブログを編集できる。
 Userが自分のブログを削除できる。
・ログインしていなくても全てのブログを閲覧できる。

 

仕様を全て満たすとこんな感じになる(お手本)

https://tech-master.s3.amazonaws.com/uploads/curriculums//ec83a7b47e772d1eba79f1bfbd8cb186.png

 

チャレンジしてみること

 hamlでviewページを記述する。

 Emetを使いこなせば爆速で記述できるらしいのでそれを頑張る。

 Githubでのバージョン管理