【Rails】未経験からプログラミング始めて40日で作成したアプリ公開します

投稿日:

【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #42

オリジナルアプリ(プロトタイプ)公開。スクールに通い、プログラミングを勉強し始めて40日間の成果物です。これまでの学習の流れや、感想をまとめます。Railsで開発し、jQueryのAjax通信で画面遷移のない、動くブラウザ画面を実装しました。

はじめに

この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。

 

目次

 

オリジナルアプリ「運転免許問題集」

今回開発したアプリは「運転免許の問題集」アプリです。オリジナリティのない題材でのオリジナルアプリですが、既存のものを真似しつつ、使いやすさを意識して作成しました。

以下のリンクがHerokuにあげたプロトタイプです。

Herokuの無料のやつなんで初回アクセス立ち上がり遅いです。

 

メールアドレス aaa@aaa.com

パスワード aaaaaa

でログインできます。

 

enigmatic-bayou-57431.herokuapp.com
学科試験対策の決定版!-運転免許問題集
このアプリは運転免許一発合格に特化した問題集アプリです。ランダム一問一答機能では、問題数・分野別を自分で選択し空いた時間に気軽に対策が行えます。ログイン機能を使えば学習進捗を管理し、間違えた問題だけ集中して学習に取り組めます。

 

問題数は10問しか入ってないです。不具合もしばしば起こります。スマホ表示を意識して作ったため、スマホ画面で見ればある程度きれいにレイアウトが映りますが、PCやタブレットへ表示のレスポンシブ化はできておりません。またセキュリティ面もできてないです。

ですが、一旦切りの良い子のタイミングで本番環境にデプロイしました。

今回が自分で1から開発したアプリとしては初めてのものになります。

 

実装した機能詳細

ログイン機能

ログイン画面

 

Gem"devise"で実装しました。メールアドレスとパスワードとニックネームでサインアップ可能です。ログインすることでマイページが作成されます。

マイページでは進捗が確認できます。

マイページ画面

 

コーディングが必要だったのは「プログレスバーと内部のデータの連携」の部分です。DBの問題解答履歴をもとにパーセンテージを表示する必要がありました。

お問い合わせ機能

お問い合わせ画面

「お問い合わせはこちら」ってやつです。

このアプリには要らなかったかもしれません。

 

その他アプリの機能

一問一答機能

 

一問一答機能画面

 

この機能を実装するために大半の時間を割きました。ひたすらこのブログで迷走してる日々を書いてます。とにかく「画面遷移しないで問題が解ける」かつ「問題数や出題範囲をユーザーが選択できる」は最低限機能に盛り込みたかったというのがあります。

JSとjQueryの知識がほとんどなく、開発当初は「.html( )」メソッドや「.show( )」メソッドという本当に基礎の基礎すらコーディングできてませんでしたが、実際に開発を進めていくとちょっとずつ覚えていきます。

jQueryのメソッドで非同期通信を一部してますが、基本的にはrailsコントローラーで描写された1枚のHTMLを最初から最後まで用いて、とにかく表示の仕方をこねくり回したイメージです。

ユーザーがセレクトボックスで入力した値をもとに、どの問題を何問、どういった順番で表示させるかをJSの関数で設定し、その関数通りにhtmlを書き換える関数をまた定義する。そんな流れでした。

序盤は変数を一旦Railsコントローラに戻して、コントローラーで変数の処理を行なった後、またJSに渡す。という流れしか頭になかったのですが、

「JSで変数処理を書けばいいじゃん」

って思い、ひたすらJS入門テキストをみながら奮闘しました。

 

間違えた問題だけ選んで学習できる機能

間違った問題だけ選べる機能画面

 

ログインしたユーザーのみ、この機能が使えます。railsでの流れとしては、userモデルとquestionモデルという2つのモデルを用意し、その2つで多対多のアソシエーションをさせるための中間テーブルを作成しました。ログインしたユーザーが問題を解き終わると、「question_id」と「user_id」と「answer_log」という3つのカラムを持ったレコードを中間テーブルに記録させてます。

Boolean値でanswer_logカラムを設けて、解答が合っていたらtrue、間違っていたらfalseを挿入します。このとき、question_idとuser_idの組み合わせで、すでに中間テーブルに同じものがあるときはupdate、ない場合はcreateの条件分岐を行わないと永遠に中間テーブルに新規レコードが記録されてしまいます。

この中間テーブルの有無および「answer_log」のtrueかfalseでユーザーの間違えた問題のみをDBから抽出し、ブラウザに表示させる。ここまでが一連の流れです。

 

まとめ

ここ最近の勉強の進め方や感想は、

ここにまとめております。

まだ完成ではないのでなんとも言えないですが、リリースできるレベルに持っていけたらなと思ってます。

またそれと並行して、通っているスクールの卒業課題の要件定義を少しずつ進めたいと思います。

 

以上ありがとうございました。

-プログラミング学習
-, , , ,

Copyright© s u p ? , 2019 All Rights Reserved.