20201024_アウトプット

アプトプット画像

学んだこと 6時間

JavaScriptでスタイルを操作

  • インラインスタイル(HTMLにCSSソースコードを直接記入)に対するJavaScriptの操作には、以下のメソッドを使うよ。
メソッド 意味 記述
setAttribute 指定した要素に新しい属性を追加、または既存の属性の値を変更 要素.setAttribute("属性名","設定したい値")
removeAttribute 指定した要素から、特定の属性を削除 要素.removeAttribute("属性名", "削除したい値")
getAttribute 属性の値を戻り値として返す 要素.getAttribute("属性名")

setAttributeは、新しい値や変更後の値を格納して、指定した要素自体を塗り替える。
getAttributeは、今ある値自体を取ってきて、その値がこういう状態だったらイベント発火するというような条件定義に使えたりする。



  • this関数の中で使うとイベント発火元となった要素を取得できる。

  • debugger;処理を一時停止したり、特定の変数の値を確認したり、不具合の原因を探す手伝いをしてくれるメソッド。

  • innerHTMLHTML要素の取得や書き換えができる。

  • forEach関数を使うには、要素の戻り値をNodeListオブジェクトとして返す値でないと使えないので、変数を定義する時に(要素を取得する時に)、querySelectorAllを使う。

  • HTMLCollectionNodeListの違いは、HTMLCollectionは動的(取得元が更新されると、取得してきた値も更新される)で、NodeListは静的(取得元が更新されても、取得してきた値は更新しない)の違いがある。



ここまでで理解したこと

JavaScriptでホバーしたら色変わったり、メニューリスト表示したい時、どうするの?(ざっくり)

(1)JavaScriptの動きを付けたい要素を取ってきて、変数の箱にいれる。(例:document.getElementByIddocument.querySelectorAll
(2)(1)の変数を使って、どんな時にイベント発火したいか関数を作る。(例:addEventListener+マウスカーソルあてた時・読み込んだ時)
(3)イベントの手法として、innerHTMLや、setAttributeなどを利用する。



JavaScriptの周辺知識

  • jQuery:DOM操作(HTMLの取得や追加削除など)を短く簡単に書くことができる。

  • Node.js:サーバーサイドで動くJavaScript。処理速度が非常に早く、大量のデータ処理が可能。

  • TypeScript:型定義ができるJavaScript。(静的型付け言語)

コンポーネント指向のライブラリ
  • ReactFacebookが開発したライブラリ。仮想DOMの概念により早い高速なアプリケーション。AppleGoogleストアからアプリをダウンロードして使う「ネイティブアプリケーション」の開発に便利なReactNativeのフレームワークがある。

  • Vue.js:仮想DOMの概念があり、冗長な記述を減らしてHTML・CSSを中心にしたWebアプリ開発が可能。

  • AngularGoogle等が開発したライブラリ。Angular内にも標準で多数のライブラリが用意されている。公式の機能のみで十分な開発を行うことができる。ただし、推奨言語は、TypeScriptとされている。



ここで勉強になったこと

  • コンポーネント指向とは。コンポーネント自体は部品という意味で、再利用しやすいようにパーツを作ること。ここでいうReactや、Vue.jsに関しては、構造・見た目・振る舞いをセットにしたもの。つまり、HTML・CSSJavaScriptを3つセットで1つにしたもの。

  • 静的型付け言語とは、プログラマーが予め入ってくるデータはどういうものなのか変数や関数など詳細に宣言・指定してからデータを受け入れる言語のこと。 (あらかじめ詳細に指定することが大変・余分なデータをいれるスペースは作らないので処理速度が早い)

  • 動的型付け言語は、プログラマーが詳細までは宣言・指定せずとも、コンパイラインタプリタ(人間語を機械語に翻訳する技術)が、おおよその値のデータを想定して受け入れる言語のこと。 (想定外のデータが放り込まれた時にバグになることが大変・想定でデータをいれるスペースを用意するため処理速度は遅くなる)

  • DOMとは、JavaScriptからHTMLドキュメントを操作するためのAPI。Nodeと呼ばれるオブジェクト一つ一つを、ツリー状にして管理している。

  • そのツリー状にしたまとまりを「変更前」と「変更後」の2パターンを仮想化したものが仮想DOM。その差分を検知して、差分のみを、元々のDOMに反映する。そうすることで、毎回DOMの中に入っているNodeの変更を順に1から探しに行くのではなく、差分だけ先に出してから反映させるので、一般的に処理が早くなると言われている。



積み残し(復習したいこと)

  • ビードリル38

  • Formオブジェクト(モデルの存在しないデータを更新)

  • Rails勉強会→50%

  • カラムの追加方法、ロールバック

    感想

  • JavaScriptについて、ほんの一部だが、HTMLとCSSにどんな風に絡むのか知ることができた。

  • Railsにやっと目が慣れてきた頃だったので、カッコやコロンの使い方が慣れない。

20201023_アウトプット(JavaScript要素の取得)

アプトプット画像

学んだこと 1時間

DOMツリーからHTMLを取得する方法

引数として渡して要素を取得。

方法 記述 補足
id名から取得する document.getElementById("id名")   
class名から取得する document.getElementsByClassName("class名") 複数形だよ!
戻り値:HTMLCollection
セレクタ名から取得する(全て) document.querySelectorAll("セレクタ名") 戻り値:NodeList
セレクタ名から取得する(一部) document.querySelector("セレクタ名") 一番最初に見つかった要素だけ

セレクタ名:class名は(".class名")、id名は("#id名")、HTMLタグは("タグ名")と表記。



イベントとはなんぞや

  • イベントとは、「ユーザーがクリックした」「テキストフィールドでキー入力した」「要素の上にカーソル当てた」などの処理の要求のこと。



cssをlinkタグで読み込むのと同じように、htmlに「JavaScript読み込みする」のscriptタグを書くよ。
<script src="index.js"></script>



JavaScriptのコードが動き出すことを「イベント発火」というよ。
イベント名 発火時
load ページ全体が全て読み込まれた後🔥
click 指定された要素がクリックされた時🔥
mouseover マウスカーソルが指定された要素上に乗った時🔥
mouseout マウスカーソルが指定された要素上から外れた時🔥



addEventListener()を用いて「イベント発火」の関数を定義するよ。
要素.addEventListener('イベント名',関数)



積み残し(復習したいこと)

  • ビードリル38

  • Formオブジェクト(モデルの存在しないデータを更新)

  • Rails勉強会→50%

  • カラムの追加方法、ロールバック

    感想

  • 今日は瞑想と運動も出来て良かった。

  • 仲間がアドバイスをくれて嬉しかった。本当にその通りだと思った。仕事にもプログラミング学習においても取り入れる。
    ●モチベーションで仕事はしない。
    ●自分のやるべき仕事への義務感と決めたことをやる(今日やること・今週やること・今月やること・半年やること・一年でやること・できれば数年先や最終的なゴールまで)
    ●毎日、ここまでやったし!と割り切る。自分でスケジュールをコントロールする。
    ●自分を否定せずに、ポジティブに考える。ポジティブに考える方法としては、仕事の目的を成し遂げた時に恩恵を受ける人を想像する。自分の成長の糧になることを想像する。

20201021_アウトプット(JavaScript基礎)

アプトプット画像

学んだこと 2時間半

JavaScriptの関数

  • JavaScriptで関数を定義する際は、大きく分けて「関数宣言」と「関数式」の2つある

  • JavaScriptでは、関数から戻り値を取得したい時は「return」を記述する必要がある

  • 関数式で関数を定義する際は、「関数の実行」より先に「関数を定義する」必要がある

  • 関数式の中でもアロー関数を用いることで、より短い記述で関数を定義することができる

関数定義の種類

  • 関数宣言:標準的な関数の定義。

  • 無名関数:関数を多く使用するコードである時に使用。関数名の重複を避けられる。

  • 即時関数:流用する可能性のない関数を定義する時に使用。別途、関数を定義する手間がない。

  • アロー関数:無名または即時関数の時に、より省略して書ける。(functionの代わりに()=>

JavaScriptの要素の取得

  • JavaScriptにおけるオブジェクトはデータや機能を「まとめた」その情報そのもの。

  • オブジェクトは、名前や年齢などの「プロパティ」と、振る舞い・機能である「メソッド」を持つ。

  • JavaScript側で予め用意されているwindowオブジェクトを用いて、ブラウザに対して操作できる

  • windowオブジェクトの一つであるdocumentオブジェクトを使って、ブラウザで表示されたHTML情報を取得できる。

DOMとは (Document Object Model)の略で、HTMLを解析して、データを作成する仕組み。 その仕組みによって作られた階層構造のデータを「DOMツリー」や「ドキュメントツリー」という。

①HTMLを解析して、DOMに変換
CSSJavaScriptを読み込み、見た目を描画
③ユーザーがページを閲覧

②において、JavaScriptのメソッドを使うとDOMツリーを操作することができる。(要素名やid、classといった属性の情報を元に、DOMツリーの一部を取得し、CSSを変更したり。要素を増やしたり、消したりできる)



積み残し(復習したいこと)

  • ビードリル38
  • Formオブジェクト(モデルの存在しないデータを更新)
  • Rails勉強会→50%
  • カラムの追加方法、ロールバック



感想

  • 日頃のストレス度合いが、勉強の質や体調に大きく影響していると感じる。最近は頭痛い。悔しい。(調子悪い)

  • 上手くいっている時は、アウトプット多め・気持ちも前向き・忙しくてもけろっとしている、上手くいっていない時は、自己肯定感が下がる・他の進んでいる方の発信に後ろ向きになる・体のどこかしらが良くない。

  • テックキャンプにいって良かったと感じることは、振り返りを行う機会が多くなったので今調子悪いことが「前にもこういう時あったな」と思えること。

  • 良かったときのことを思い出そう。①自分が落ち込んでいる時こそ、周りのすごい方の刺激を受けにいき発信に積極的(コミットする・主体的になる)②しっかり睡眠と栄養バランスの取れた食事をとる③感情に左右されない。平穏な気持ちを思い出す。④仕事は「全部やらなくては」ではなく今日絶対やる1つを達成したらよしとする(これ忘れてた)⑤楽しむ!

20201020_アウトプット(見やすいコードを書くために)

アプトプット画像

学んだこと 1時間

リファクタリングとは

実装した機能に影響を与えずに、ソースコードを読みやすくすること


分かりやすい変数名・関数名
  • 変数に代入されている値の役割がわかるよう具体的な名前にする
  • 関数名は動詞+名詞を意識


ロジックの単純化
  • 条件分岐の際、if文の中にif文のネストは避ける → 例:論理演算子を活用
  • 条件式はなるべく少ない記述で書く → 例:関数化してそれを呼び出す形にする
  • メソッドに?をつけて、戻り値はtrue/falseであること分かりやすくする
  • 複雑な条件式は分解する → 例:複数のif文に分ける


コメントで正確な情報伝える
  • 実装者の意図を読み手伝えるため
  • コメントは1文で済ませる
    (1文で済ませることができない=複雑なソースコード の修正が必要)



積み残し(復習したいこと)

  • ビードリル38
  • Formオブジェクト(モデルの存在しないデータを更新)
  • Rails勉強会→50%
  • カラムの追加方法、ロールバック



感想

  • 上手くリファクタリングできない=自分の頭の中も整理できていない。

  • リファクタリング上手な人はどうやって身につけていっているのだろうか。今回学んだことのようなエッセンスを意識するのはもちろんのこと、目を肥やすためにお手本となるようなコードを良書などから得たり、たくさんコードを読み書きして、見やすい人・見づらい人の差はどこなのか向上させていっているのだろうか。

  • リファクタリングを意識することはできても実装できている実感がないため、もっと鍛錬しないといけない。

20201019_アウトプット②(開発体制)

アプトプット画像

学んだこと 1時間

開発体制

アジャイル開発ってよく聞くけど何?と思ったため学んだ。

  • アジャイル型開発:一度にまとめてではなく、少しずつ確認を挟みながら開発を進めていく手法。

  • ウォーターフォール型開発:初めに決めた要件を、ある期限までに完了する手法。(要件定義が重要)

どんな時に向いているの?

アジャイル
  • まずは最小限でリリースして、プロダクトの使い勝手をみながら残りの詳細をつめていきたい。

  • この機能だけは絶対にほしい、一方でそれ以外の機能は実際に使ってみながらでないと必要かどうか判断できない。

という時におすすめ。
詳細まで時間をかけて作り込むのではなく、実際に作ってみてから改善点を探していくことで、よりスピーディに本質的な開発を続けることができる。


ウォーターフォール
  • 大型システムのように多くのエンジニアが関わるプロジェクトにおいて、明確に役割分担したい。

  • 開発途中で仕様変更などが発生しないことが前提で、 明確にほしい要件が決まっており、綿密な計画をあらかじめ立てられるとき。

という時におすすめ。 仕様通りに開発を粛々と進めれば良いため、役割が明確に決められることで最短効率で開発を進めることができる。

アジャイル開発におけるスクラムって?

  • アジャイル開発では、進捗が把握しづらいという特徴があるためスクラムを導入することがある。

  • スクラムとは開発を進めるチームの単位。

  • リーダー・マネージャー主体ではなく、チームメンバー全員が主体性を持ってプロダクト完成にむけた責任を持つ。

  • (機能を細かく)リリースするまでの期間を「スプリント」として(約1〜4週間)、隠すプリント毎にレビュー(振り返り)をする。

分担 役割と働き
プロダクトオーナー リリースするプロダクトの責任を背負う。そのために、開発順序やスケジュールを考えて、プロダクトの価値が最大化するように様々な決断をする。
スクラムマスター スクラムが上手くいくようにサポート。そのために、人間関係に起因する妨害を排除し、スクラムを円滑に回すための世話役を務める。
開発チームメンバー 計画に沿って開発を進める。そのために、開発の進め方はメンバー間で話し合う。特に日々の開発計画について責任を持ち、必要であれば計画変更の申し入れを行う。

おすすめの管理自動化ツール

Sider(サイダー)
  • コードレビューを自動で行ってくれるツール。

  • 特に、コードの体裁や、開発者自身が設定したルールに反してないか自動で判断。

  • ギットハブと公式に連携。(なので、ギットハブ上で駆動)

  • プルリクエストの上のコードに対してチェックを行う。

sider.review

blog-ja.sideci.com


CircleCI
  • 追加・変更されたアプリケーションのテスト、テストが完了して問題なかったコードのデプロイを自動で実行するクラウドサービス。

  • この「テストの自動化・デプロイの自動化」は、CD/CIという概念に基づいている。(Continuous Integration/Continuous Delivery)

  • その概念が重視されるようになった背景として、
    ①ソフトウェアが普及していくと品質に関する要求も高くなり、自動化テストの重要性の高まったこと
    ②今ではより多くのチームがアジャイル開発を取り入れており、スピーディーに開発をしたいため、いかに早くテストして、リリース後フィードバックを得られるかが成功の鍵となること
    が考えられる。

circleci.com



積み残し(復習したいこと)

  • Rails勉強会→50%
  • カラムの追加方法、ロールバック
  • Formオブジェクト(モデルの存在しないデータを更新)

    感想

  • プログラマーの方がよく言う「最小限でまずはリリースしてみて、改善していく」という方法自体が、「アジャイル開発」だったのね、と理解した。

  • テストの自動化・デプロイの自動化は便利だな。

  • 便利だけれども、頼るだけでなくって、その自動化はどう行われているのかも学んでいきたい。

20201019_アウトプット①(データベース深堀り)

アプトプット画像

学んだこと 2時間

ORMってなんぞや

  • ORM(Object-Relational-Mapping)とは、RDB(リレーショナルデータベース※つまりDB)の「データ」を、オブジェクト指向プログラミング言語でオブジェクトとして使用するために変換する技術のこと。(Railsでいう、ActiveRecordのこと)

  • SQL(Structuredスタクチャード Queryクエリ Language)とは、データベース操作を行うことができる言語。ActiveRecordなどのORMのメソッドは、SQLに変換されるので、テーブルの操作が可能になる。

  • SQLは、ISO(国際標準化機構)で規格化が行われている。

SQLによる命令文ってどんなものがあるの?

Data ほにゃらら Language

ほにゃららには、
(1)Definition(デフィニション):定義
(2)Manipulation(マニピュレーション):操作
(3)Control:制御
が入る。


DDL(定義)のできること
命令 機能
CREATE DBやテーブル作成
ALTER DBやテーブル更新
DROP DBやテーブル削除


DML(操作)のできること
命令 機能
INSERT データの登録
UPDATE データの更新
DELETE データの削除
SELECT データの検索


DCL(制御)のできること
命令 機能
COMMIT DBの変更の確定
ROLLBACK DBの変更の取消
GRANT ユーザーに操作権限付与
REVOKE ユーザーの操作権限を無効化


Railsの中で、あえて、SQLで書くにはどうしたらいいの?

  • find_by_sqlメソッドを使ってみよう

  • find_by_sqlメソッドとは、RailsSQL文を使って、データを検索・取得したい時に使用するメソッドだよ

  def index
    query = "SELECT * FROM tweets"
    @tweets = Tweet.find_by_sql(query)
  end
  • 上記は試しに、indexアクションを、Tweet.allではなく、SQL文のSELECT * FROM tweetsに変えたものだよ



  • ターミナルからログをみた時にカラーが違う部分がSQLによる命令の部分だよ

  • 覚書  OFFSETは開始位置、LIMITはその分だけ



感想

  • ちょうど「オブジェクト指向でなぜつくるのか(第2版)」を読んでいたところだったので、Active Recordのような便利な機能の裏側で、データベースとやりとりしてくれるSQL文がターミナルで表示されることや、VSコードから書き換えを少しできて、嬉しかった!!

  • その本を読んでいるおかげで、今私が勉強しているRubyも、先人たちの知恵の賜物のおかげで、翻訳すれば分かりやすい言葉で書いてあるんだなあとありがたみを感じている。(ここで悲鳴上げちゃいけないんだと)

  • 歴史を知るって深みが増すので大事だな。

  • 今は、高級言語であるRubyJavaScriptで必死だけれども、ゆくゆくは、高級言語ができる前の、もっとパソコンに直接的に指示しているような部分の学びも深めていきたい。

20201018_アウトプット(モデル深堀り)

アプトプット画像

学んだこと 7時間半

モデル深堀り

モデルは①Active Recordと②Active Modelを上手に組み合わせてデータベースの調整役として成り立っている。

Active Recordとは

MVCで言うところのM、つまりモデルに相当するものであり、ビジネスデータとビジネスロジックを表すシステムの階層です。データベースに恒久的に保存される必要のあるビジネスオブジェクトの作成と利用を円滑に行なえるようにします。(Railsガイドより)

簡単にいうと、createupdatedestroyなど、コードに書いた裏側でMVCの流れを実現するために動いてくれている根幹部分のこと。

(補足)ビジネスロジックとはなんぞや:「システム固有の処理」と読み替えるとわかりやすい。システムにおける実際のお仕事部分のこと。また「ビジネスロジックを分けて書こう」の本質は、システムの中で「使い回しできるところとできないところ」「変更がある時に見る必要があるところとないところ」を明確に分けておこうという意味。 (こちらを参考にしました。クスッと笑えて分かりやすくいつもお世話になってます。)

Active Modelとは

Active Modelは多くのモジュールを含むライブラリ(Railsガイドより)

モデル部分に関して、様々なアプリケーションで使えるように便利な機能をカタマリにしたもの。


よく使うActive Model 3選

  • Callbacksモジュール処理を任意のタイミングで実行できるようになる。

  • Validationsモジュールデータ保存時に設定した条件を満たしているか検証できる。

  • Serialization(シリアライゼーション)モジュールデータベースに保存されているレコードからJSONを使ってビューに描画する際、あらかじめ描画するものを設定できる。
    (例えば、データには作成日時・作成者・画像・テキストが入っているけれど、ビューに反映させる時は画像・テキストだけにしたい等)
    使うにはattributes(属性)というメソッドを定義するよ。

コールバックの補足
  • ActiveModel::Callbacks(モデルのモジュールの方)は、Active Recordスタイルのコールバックを提供されている。

  • Active Recordスタイルのコールバックとは、オブジェクト指向を活かして、「これの次にこれを処理する」「これがこうなったらこうする」等、任意のタイミングで行う処理を設定できること。例えば、外部APIを読み込んだ後にこの処理をする、この関数の次にこの関数をする、この処理に失敗したらこちらの処理をする、など。


Formオブジェクト

  • Formオブジェクトとは、フォームに関する処理を切り出す仕組みのこと。

  • 主に①複数のモデルに関連するデータを一度に更新するフォームを作成する場合。②モデルの存在しないデータを更新する場合。の2つに使う。

  • 複数モデルを一度に更新するとは、例えば商品を購入するアプリケーションがあったとする。お客様が必要な商品を選択し、お客様情報を入力し、「購入」ボタンを押すと、「商品モデル」ではマイナス1となり、「お客様情報モデル」ではプラス1になったとする。その2つのモデルは同じタイミングで行われるので、処理が被っている部分を、フォームオブジェクトに切り出して、切り取られた側はフォームのクラス名を呼び出して使用できる、という仕組み。

  • モデルの存在しないデータを更新する場合とは、アクティブハッシュのことを指すのか、モデルに関連した親モデル・子モデル・孫モデルなどを指すのかわからなくなってしまったので、最終課題のところでカリキュラムを学びながら理解を深めたい。



積み残し(復習したいこと)

  • Rails勉強会→50%
  • カラムの追加方法、ロールバック
  • Formオブジェクト(モデルの存在しないデータを更新)



感想

  • メンターさんが一歩一歩着実にこのまま行ってほしいです!!応援してます!!と励ましてくれて本当に嬉しかった。よし、頑張ろう。