アラサーOLだっしゅつけいかく

30代でOLを辞めて未経験からエンジニアになろうと一念発起した人の活動記録です

Lesson#2 avascript、jQuery、Ruby入門

Lesson#2 avascript、jQuery、Ruby入門

2回目。JavascriptjQueryRuby入門あたり。

基本的には、授業で何か新しいことを教えてもらう、という感じではなく、先週出た課題のフィードバックとこれまで一週間で学習してきた中で分からなかったことを中心に深堀していく、といった感じでした。

課題のフィードバック

まず、先週の課題。
これから学ぶ言語(HTML、CSSJavascriptRubyRuby on Rails)について大枠をまとめてQiitaに投稿すること
提出した課題がこちら。

qiita.com

個人的な性格もあるのかもしれませんが、調べてると結構わからない言葉も多く、そのたびに検索していたらかなり時間がかかりました。
そのかいあってか、高評価を頂けました°˖✧◝(⁰▿⁰)◜✧˖°

が、以下のツッコミが!

  • リッチインターネットアプリケーションって何?
  • Rubyスマホアプリの開発?APIって??

うん、なんとなくわかった感じでスルーしたけどわかってなかったです!!

というわけでまずここのまとめから

リッチインターネットアプリケーションについて

まず、wiki先生によると、

リッチインターネットアプリケーション(英: rich internet application、RIA)は、パーソナルコンピュータ等のソフトウェアの分類の1つであり、ウェブブラウザなどのクライアントの機能を活かした、柔軟なインタフェースをもつウェブアプリケーションのことである。

ふーむ。課題をやってて思ったけどwiki先生の言葉は毎回少し難しいですよね。
先生からはリッチインターネットアプリケーションという言葉はあまり使わなくて、おそらくこれはSPA(single-page application)のことを指しているのでは、とのことでした。
というわけでwiki先生、SPAとは…

単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。

最近増えてきたJavascriptフレームワークにより実現した、WEBページがまるで1枚のページのようにサクサク動くWEBページとのこと。
今までのサイトは、何かボタンを押したら必ずロードして全て読み込んでから表示させてたのが、SPAでは必要な箇所だけ読み込みして表示するため表示速度が高速になるだとか、あとはアニメーションがもっと滑らかに出来たりなんかして、WEBページが「リッチ」になっているんだそうです。

また、私がProgateやカリキュラムで学んでいるJavascriptはここ2~3年で新しいものが出てきて、現場では「古い」もののようですΣ(・ω・ノ)ノ!
先ほど出てきたJavascriptフレームワーク、Angular.jsなんかがそれにあたるらしいです。 ただ、本当に最近のことなのでどこの会社のカリキュラムも追い付いていないんだとか。2~3年も経ってるんでしょ?って思ったんですが技術レベルで言うとホントの最近という感覚なんですって。
だからどこの企業も廃れる可能性も考えて移行できていないといったお話でした。

とは言え先生の感覚では、これやな!って感じらしいですが。笑
機会があればこちらも少し調べてみようと思います。

Rubyスマホアプリの関係(API

まず、スマホアプリ自体をRubyで作っているわけではなく、アプリ自体を作っているのはAndroidならJAVAiOSならSwiftという言語。 ここでの「作っている」というのは見ためのことで、例えばそのアプリでボタンを押して何かしようとした時にはデータベースとやり取りして、必要なデータを引っ張ってきて表示している。
つまりアプリはデータベースと繋がって動いているんですね。

私「Twitterのマイページに移動するで!」

API「hakさんがマイページに移動するって!」

データベース「hakさんの情報ね、はいよ。」

API「サンキュー!ほらよhakさん!」

私「移動できたで!」

こんな感じでスマホアプリのクライアントサイドとデータベースの「つなぎ役・仲介役」をやっているのがRuby、という理解で、今はOKとのことでした。

WEBもスマホも普段何気なく使ってるけど、こんなことやってるんだな~って改めて思いますよね。

学習時の不明点の深堀り

課題のフィードバックはこんな感じで終わり、次はレッスン前に事前に私からしていた不明点に対する質問に詳しく解説を頂きました。
私が事前にしていた質問は下記3つです。

bind関数について

これはカリキュラムのJavascriptところでちらっと出てきて、別に詳しくは説明しませんよと書いてあったのですがなんとなく理解できないのも気持ち悪くて聞いちゃいました。 で、解説聞いて、詳細な説明は割愛しますが、なんとなーく使い方はわかった感じです。
何で割愛かって、新しいJavascriptであまり使わなくなって正直ここはあまりやらなくてもいいかなって言われちゃったからです。

勉強してると「なんだこれ!」っていうのいっぱい出てきますよね。で、調べても書いてあること難しかったりして100%は理解できないことが多い…。
このbind関数もそのうちの1つだったりしたのですが、

そんな時はある程度の理解で先に進んでもOK。なぜなら、絶対またどこかで出会うから次出会った時わからなければまた調べる、その繰り返しで徐々に理解していけばいい

こうやって勉強していけば大丈夫だよ、っておっしゃってました!なるほど!

変数の意味

これは、jQueryのカリキュラムをやっていた時に出会った疑問です。

$(this)だけを変数に入れてるの、何で?

変数に代入するのって、私の中の認識では

  • 長い処理を何回も書くのめんどくさい
  • 何回も出てくるから全部書いちゃうと修正が大変

こんな時に変数使おうね!ってイメージでした。
なので、$(this)ですよ?短いしthisはthisじゃん?って感じで変数に入れるメリットがいまいちわかりませんでした。

ここで聞いたお話、簡単にまとめると

  • まず、thisには4つの意味がある。

qiita.com

詳しくはこちらを読んで頂ければいいかなと思うのですが、つまりは使い方によってthisの中身って変わってしまうんですね。
で、事前にthisを変数に入れておけばthisの状態を保ち続けることができて、予期せぬ値に変わったりすることが防げる。
これがまず1つの理由でした。

ちなみにthisに関しては奥が深いので、先生も実務でthisに出会う度に調べまくって理解を深めていったそうです。

もう一つ。

  • 名前を付けておくことによって中身が何か推測しやすい

関数の名前と同じく、変数に名前を付けることによってその変数の中身が何なのか、がわかりやすくなる。
例えば100という数字があったとして、orange_priceorange_weight、こんな感じで名前がついているとただの数字でもすごくわかりやすくないですか?
これは他人が書いたコードを読むとき、自分が書いたコードを他人が読むときもそうですが、自分が書いたコードを自分で読むときにも言えるそうで。

3か月前の自分は他人

これ、めっちゃわかるわwって納得しちゃいました。
仕事で半年に一回しか使わないExcelとか開いて「???」って思い出すまでに時間かかったりしますもんね。
そういう時に変数に適切な名前がついているとわかりやすい、とのことでした。

だから逆に言えば変数名が適当だと混乱を招くので、変数や関数の名前は適切につけましょう!
ちなみに変数を使う使わないは適宜自分で判断して、なのでもう慣れるしかありませんね(;^ω^)

クラスとインスタンスについて

ProgateでRubyの勉強を進めていたのですが、このクラスとインスタンスの項目が結構複雑で理解が難しかったので一旦自分で紙にまとめつつ、先生の解説も頂きました。
まずそもそもオブジェクトってなんぞや、って話なんですが
オブジェクト=クラスとインスタンスを用いて現実のもの(例えば人間とか)を表す
ひとまずこんな感じで理解をします。(実際調べてみたらいろんな解釈がありましたが)

上記をもとに、私の好きな猫に例えてみてみます。

  • オブジェクト
  • クラス=設計図
    • 猫の持っている情報(名前、年齢、性別、など)=インスタンス変数
    • 猫のできる行動(歩く、食べる、ジャンプする、など)=インスタンスメソッド
  • インスタンス=クラス(設計図)をもとに出来上がった実際のモノ
    • ミケ

この「ミケ」は設計図をもとに生み出された猫で、ミケ・3歳・メスという情報を持っていて歩いたり食べたりジャンプしたりできます。
なのでインスタンス変数を用いればミケの情報が呼び出せるし、ミケに対してインスタンスメソッドを呼び出せば歩かせたり食べさせたりできる。
ざっくりですがこんな感じで理解しました。

本当に「ざっくり」なんですが、前述のとおり一旦先に進んでまたわからなくなったら調べることとしました!

おまけ

さて、この週友達とLINEしてたときに、プログラミングの勉強を始めたことを話していたら「そういえば今のブログ、レンタルだからWordPressとかにしてみたいんだよね。」という話があったので勉強がてら作れるかな?って思ったんです。実績になれば私にとってもメリットあるし、友達も外注する余裕ないから作ってもらえるならありがたい、ってことで。
で、先生に聞いてみました。

友人の依頼で勉強のためにWEBサイト制作引き受けるってどうなの?

答えは、タダで引き受けるのは正直お勧めしないとのこと…!
WordPressで作ったものがあれば実績にはなると思うけど、かといってやるならきちんと(どのくらいかは別として)対価をもらった方がいい、とおっしゃってました。
先生も昔勉強したてのころ同じことをやって、後悔したのだとか。
結局手を出しちゃうと次も、次も、ってなってしまって、とにかく技術の安売りは良くないとのお言葉を頂きました。

先生の言いたいことはよくわかるし、今の私にはRailsを使って作品を作り上げるっていう一番の目標もあるのでいったん保留にするのがいいのかな。
ただ、別に友達も急いでいるわけでもないと言っていたので、そこは適宜状況を見ながらうまい形でやってあげられたらな、とも思っています。
中々難しいですね。

次回の課題

JavascriptRubyについて先生の出した問題を解く(何か気づきがあればQiitaへ投稿する)

以上です。
なんだか長くなってしまいましたが、また次回!