【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #40
僕のここ最近の勉強時間の大半が、JavaScriptやjQueryやらのフロント部のコーディングでした。なので初心者がフロントを1ヶ月やってみての感想を書いていきます。
はじめに
この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。
目次
[toc]
フロントを学ぶために最近やったこと一覧
１、モーダルウィンドウの作成
以下の記事参照。
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-29/”]
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-30/”]
このときは Railsをやっと少しずつ使えるようになってきたものの、JavaScriptとjQueryについてはほぼほぼ実装したことがなく、DICカリキュラムで勉強したJavaScript入門とかDOMとかの知識もほとんど頭に残ってない状態でした。
今思えばJSとjQueryの違いすらあんま理解してなかった気がします。
とにかくフロントを動かせるようになりたくて、オリジナルアプリ製作をフロントが動かせるものに寄せ、
「画面遷移のない動く一問一答機能」を免許学習アプリに実装する、
というJSを覚えるための目標を設定しました。
いざフロント動かそうと意気込んだは良いものの、何も分からなすぎてどうしよーって感じでした。先が見えなさすぎて、途方にくれてました。そんな中、まず最初にやったのが「モーダルウィンドウ」の作成だった訳です。
「とりあえずポップアップみたいな形で画面を出して、そこに問題を書き込むことにしよう。」
そう思った僕は「rails ポップアップ 作成」みたいな感じでググります。
なるほど、ポップアップは「モーダルウィンドウ」っていう名前があるんだな。
このコードをでモーダルが作られるわけか。
いやでもjQueryのプラグインの方が簡単にアニメーション付きのモーダル実装できそうだ。
今思うとモーダルはjQueryの「show」「fadeIn」「hide」「fadeOut」の表示に関するメソッド使うだけで、ある程度のものは作れるのになって感じです。jQueryのプラグインは便利ですけど、初心者がいきなり何も理解してない状態で実装してもあまり勉強になりません。逆に不具合出たときの原因が、「jQueryのプラグインのコードっぽいな」ってなったとき、訳わかんなくなってきます。僕はこれでプラグイン外しました。
２、RailsとJavaScript間での変数（データ）の取り扱い
以下の記事参照。
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-31/”]
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-32/”]
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-34/”]
ここら辺が一番しんどかったです。railsだとコントローラーでインスタンス変数一回作ってしまえば、「find_by」とか「where」とかモデルのアソシエーションとかで、割と自由自在にかつ簡単にデータを取り出せるんですが、JavaScriptが絡んでくると話が変わってきます。
わかった風に書いてますが、正直ここら辺は今もまだ全然わかってません。特にajaxの使い方は、いろんな記事読んでもしっくりきてない部分あります。一回ちゃんと誰かに教えてもらいたいです。
「gon」は便利だか、たまに裏切られる。
「ajax」はかっこいいから使いたい。
もはやJSで書いたらできんじゃね？
DICのカリキュラムでやったことを思い出し始めたのか、試行錯誤してるうちにJS（jQuery）のコードが結構書けるようになったので、最終的にはJSを書いてゴリ押しが多かったです。多分僕のコードは汚いです。コーディングをプロに添削してもらいたいです。
まあ初心者はこんなもんです。非同期通信に憧れたは良いものの、理解が追っつかないです。
とにかく基本的なJS（jQuery）のメソッドの使い方をアウトプットするところから始めるべきだと改めて思いました。
３、プログレスバーの作成
以下の記事参照。
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-35/”]
プログレスバーもモーダルと同様、「こんな名前ついてんだ」シリーズです。
これは正直簡単でした。その前のajaxとか変数の受け渡しの方が難しかったのもありますが。
Bootstrapのプログレスバーを使用したのですが、Bootstrap自体は今まで使ってきてますし、railsでインストールさえしてしまえば見本のコードのクラスをタグにつけるだけで綺麗に実装される訳ですから、簡単で非常に使いやすいです。初心者におすすめです。
４、セレクトボックス の利用
以下の記事参照。
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-36/”]
これもプログレスバーやモーダルと同様のシリーズです。くどいので言いませんが。
セレクトボックスはHTMLのタグだけで作れてびっくりしたのを覚えてます。
特筆すべきことがないです。初心者もすぐ理解できる簡単な内容です。
５、eachを動的に使う
以下の記事参照。
[blogcard url=”https://whatsupguys.net/programming-school-dive-into-code-learning-37/”]
ここではeach文の繰り返し処理に１つずつ動的にインデックス番号を付けて、それぞれのインスタンス（オブジェクト）に対し違うcssやjQueryのアクションを付けられるという内容を行いました。
皆さんはどうかわかりませんが、僕はこれ前から悩んでて、
「each文の繰り返し処理って使い勝手悪いよな。便利だけど。」
ってずっと思ってました。個別に何か装飾をつけれないから。
その悩みが解消された回です。これでフロントの処理に応用が効きます。
まとめ
初心者がフロントいじれるようになるためにすべきことは、
「JavaScriptとjQueryの基本メソッドのアウトプット」
だと思います。
そのためにある程度の時間をとって、自分自身にアウトプットの機会を与えます。
- 自分で何か課題を設ける。
- その課題を解決するためにどうすれば良いか、試行錯誤する。
- 実際に課題を解決する。
のプロセスを踏んで始めて有効なアウトプットになると思います。
自分で求めたときに得た知識じゃないと、身につかないです。
プラグインとかはあんま使わず、自力で調べて実装することをお勧めします。
以上ありがとうございました。