Twitterのようなログイン機能をrailsで作ってみたい

Question

実現したいこと

progateなどをみながら勉強をしているrails初心者です。勉強用にログイン機能を作りたいのですが、目標で現在（2018年10月29日）のTwitterのようなログイン画面を作ってみたいと思っています。
自分なりに考えたのが、javascriptでページ内にタブ移動できるものを作成して、それぞれのタブにinput要素とbutton要素などの切り替えボタンをつけて
・名前入力
・メールアドレス入力
・パスワード入力

をして最後に送信ボタンを押して登録完了という流れにしたいです。（登録完了後はユーザーページに飛べるようにしたいです）

実際にかなり調べながら組んでみたのですが、躓いてしまったのでここで質問させていただきたいです。

複数あるので、箇条書きで書かせていただきます。

１. input要素に名前を入力した際にrailsのバリデーションで設定した項目に引っかかると、リアルタイムでinput要素の下に赤字で任意のエラーメッセージを出す方法
リアルタイムとは入力した際にバリデーションによって制限されている内容に引っかかる入力をしたらすぐにその場でエラーメッセージを表示させるといった意味です。
かなり調べたのですが、バリデーションによるエラーメッセージをinput要素の下に表示する方法が全くわかりませんでした...

２. タブの切り替えボタン(button要素)をinput要素の入力内容が正しくない間は半透明で押せない状態にして、入力内容が正しければ押せるボタンにしたいです。
現状タブ切り替えはjavascriptで作成していて、button要素の部分はp要素にしています。p要素をbutton要素に変えるとタブ切り替えとして機能せずページ移動の判定になりルーティングエラーが起こってしまいます。

３. ページ内でタブ切り替えをしたいため、切り替えのためのボタンをbutton要素にするとルーティングを設定する必要があると思うのですが、ページ内でボタンを押してjavascriptで設定した次のタブに進むにはどのようにするのか

４. input要素の入力文字数のカウンターの付け方
現状のTwitterのアカウント作成画面では名前の入力欄の下に「0/50」と書いてあり、文字を入力するとそのカウントが文字数に合わせて増加するようになっていたので、仕組みを知りたいです。

それから、Twitterのコードをみてみたら、HTMLの部分で一つの要素にすごい数のクラス名が付いていました。
（例：class="rn-1oszu61 rn-1efd50x rn-14skgim rn-rull8r rn-mm0ijv rn-dcshts rn-9c4l86 rn-18tdi8m rn-1cn4eqa rn-deolkf rn-1xk2f4g rn-6koalj rn-1qe8dj5 rn-1mlwlqe rn-eqz5dr rn-poiln3 rn-7cikom rn-o11vmf rn-ebii48 rn-gul640 rn-109y4c4 rn-t9a87b rn-1mnahxq rn-61z16t rn-p1pxzi rn-11wrixw rn-ifefl9 rn-bcqeeo rn-11yh6sk rn-buy8e9 rn-12ckced rn-17qa1i2 rn-od9mb7 rn-hinvm4 rn-u8s1d rn-92ng3h rn-1lgpqti"　<=こんな感じ）

それぞれのクラスには「margin-right: 0;」など簡単な内容しか設定されていなかったのですが、これを一つずつ分ける必要はあるのでしょうか？
それから、一つ一つのクラス名の原型がわからないのですが、どのような定義でそれぞれのクラス名がつけられているのかも気になります...

調べても全くわからなかったので、回答が難しいことは承知しています...一つでも教えていただけると幸いです。

よろしくお願いします。

Answer 1

細かいですがjapascript →JavaScript です(pじゃなくv)。

Twitterだけではないですが非同期通信で組まれている部分も多くブラウザからソースを表示から汲み取れる情報はわずかです。
cssのクラス名も制作者側しか汲み取れないように工夫されているようにも思います。
そのままコードを見ようとするのではなく、レイアウトや挙動を見て再現するしかないかと。
今ではBootstrapなど近いレイアウトを容易に作れるCSSフレームワークも充実しています。

まずは要件を細分化し、自身の技術で足りていないこと足りていることを切り分けて
足りていないところを調べたりして埋めていくようにしてください。
具体的に、細かければ細かいほど良いです。

Comments

[isen]

回答ありがとうございます！
すみません！綴りを間違えて書いていました..修正しておきます。

なるほど、CSSのクラス名を製作者側にしか汲み取れないようにする必要はあるのでしょうか？
製作者側でもやはりあのクラス名のつけ方をすると制作を進める上で面倒臭いように感じます。
また、アドバイスありがとうございます。
もう少し具体的に一つずつ調べてみようと思います！

[m.ts10806]

何かしらのネーミングルールがあれば別に面倒でもなんでもないですよ。
countをcnt、buttonをbtnと略すこともありますけどそれと同じ感覚です。でもその意図や法則が外部にわかれば意味がないですよね。
ある程度どのようにもつけられる以上はどのようにつけても良いので、制作者にしかわからないようにつけられているかどうかも、それは外部の人間にはわかりません。
class名がついてるからと必ずcssが当てられているとは限りませんし、JavaScriptや、もしかしたらサーバー側の言語で制御するためかもしれません。
要はシステム側で都合よくつけられたものである可能性があるだけです。
なので、どのようにつけられたか外部の人間に理解できない以上は、外部の人間がブラウザから確認できる情報だけで真似をしようとするのは無駄で、挙動や何かを既存の機能でどうやって再現するか「考える」しかない、という回答をしました。

なぜなら「Twitterのようなものを作りたい」であって「Twitterを作りたい」ではないですよね？

[m.ts10806]

railsで作りたい
のであれば、サーバー側の処理ですからブラウザから確認できない部分ですよね。
例えTwitterがRubyで作られているとしてサーバー側の処理を知ることは制作者しかできませんから。

[isen]

なるほどTwitterの中身を知る術はないんですね...
そうです、同じものを作ってみたいというつもりはないのですが、Twitterのアカウント作成画面の挙動にとても興味があったので気になってしまいました。
ですが、実質人の手によって作られているものですし、長年プログラミング関係に関わっている人はTwitterなどのサーバー側での処理の仕方をみてすぐ大凡の検討はつくものなのしょうか？やはり「ここだけはどうやって処理されているのかわからない」という部分もあったりするものですか？