トップ > アウトプット > 20201031_アウトプット（JavaScript）

20201031_アウトプット（JavaScript）

アウトプット

アプトプット画像

学んだこと 5時間

JavaScriptのフロント実装（メモ投稿）

  • FormDataとは、フォームに入力された値を取得できるオブジェクト。今回は、非同期通信でフォームに入力されたメモ情報をコントローラに引き渡したかったので、const formData = new FormData(document.getElementById("form"));と変数に定義したものを、XHR.send(formData);とJavaScriptからコントローラに送る時に引数にして引き渡すことを理解。

  • insertAdjacentHTMLとは、指定したHTMLなどを、特定の要素に描画できるメソッド。要素.insertAdjacentHTML("afterend", HTML);のように使う。要素に対してどこに描画したいのかを第一引数に定義する。第二引数には描画したい実際の内容（今回で言えばメモ）を書くのだが、メモを全て第二引数に書くと大変なので、メモを予め変数に定義することで保守性もあがることを理解。

  • preventDefault()とは、標準設定されているイベントを阻止するメソッド。Rails上のフォーム入力後サブミットボタンを押すとメモが反映されることと、JavaScriptにおける非同期通信のイベントでメモが反映されることが被ってしまうので、処理の重複を防ぐ時に使うことを理解。（プログラム本来の処理側が止まる）



APIについて

  • APIとはApplication Programming Interfaceの略で、主にアプリケーション同士がデータをやりとりする場合に使用する一定のルール、仕組みのこと。

  • WebAPIとは、HTTP/HTTPS通信を使用して利用するAPIのこと。（例：Googleが提供しているGoogle Maps Platform）

  • オープンAPIとは、外部に公開されているAPIのこと。（外部からリクエスト可能）

  • 内部APIとは、企業内や一個人などの内部で取り扱うAPIのこと。（内部からのみリクエスト可能）

  • rails newコマンドの--apiオプションとは、APIとしての最適な状態でアプリケーションを作成できるオプションのこと。（データを返却する仕様に特化した状態。ビューファイルが自動で作成されない。）

  • サーバーサイドとは、データを渡すところまで行う。なので計算処理やパフォーマンス改善の分野により精通する必要がある。

  • フロントエンドとは、HTMLとはじめとしたマークアップスキルや、JavaScriptなどのイベント駆動を行うスキルを知っておく必要がある。

  • サーバーサイドとフロントエンドにおいて、JSONなどのデータ形式を統一しておけば、部品のように片側だけ交換することも可能となる。

  • クロス（マルチ）プラットフォームとは、iosやandroidのどちらにも互換性のある開発フレームワークのこと。（例：React Native）

  • ネイティブアプリケーションとは、スマートフォンやタブレットを使用しApp StoreでDLするアプリや、Google Play StoreでDLできるアプリのこと。



コマンドの仕組みと管理ツール

  • シェルはコマンドを読み取って、OSに適切なアプリの実行を指示し、結果をターミナルに返す。

  • zshはシェルの一つということ。

  • PATHとは「環境変数」と呼ばれるOS用の変数のこと。シェルはPATHに示されたディレクトリから、実行アプリケーションを検索すること。（PATHに絶対パスを保存するとどこから打ってもコマンド実行できる。＝PATHを通す）

  • macOSのコマンドラインツールである「Command Line Tools」を導入したため、Linuxコマンド以外のコマンドも使用できる。

  • ある処理に別のファイルやパッケージの処理を必要とする関係を依存関係と呼ぶこと。

パッケージ管理

  • パッケージ管理ツールは依存関係を考慮してパッケージをインストールすること。

  • パッケージ管理ツールの一つがHomebrew。macOS上で動作するアプリケーションの多くがHomebrewからインストールできる。

  • 私の環境構築の場合には、サーバーサイドとやりとりをするJavaScriptのバージョン6系以降を使用したかったので、①Homebrewをインストール、②Node.jsをインストール（JavaScriptをサーバーサイドでも動かせるようにするもの）、③Yarnをインストール（Node.jsをパッケージ管理するツール）を行ったことを理解。

Homebrewのコマンド🍺
コマンド 説明
brew -v Homebrewのバージョンを表示
brew install [パッケージ名] パッケージをインストール
brew uninstall [パッケージ名] パッケージをアンインストール
brew list インストールしたパッケージを表示
brew search インストール可能なパッケージを表示
brew update インストールしたパッケージを最新へ更新
バージョン管理

  • バージョン管理ツールはバージョンの保存と切り替えを管理すること。

  • そのうちの一つでもあるrbenvはRubyのバージョンを切り替えるための管理ツール。（Rubyを使用した開発をする際には必須となるツール）

  • macでは初めからRubyが使用可能だが、rbenvを使って新たにRubyをインストールし直すことで、バージョン管理を変更しやすくしたり、パッケージとの依存関係問題を防ぐことができることを理解。

rbenvのコマンド

※rbenvの拡張機能であるruby-buildという管理ツールが提供するコマンドも含めている

コマンド 説明
rbenv -v rbenvのバージョンを表示
rbenv install [バージョン] Rubyバージョンを指定してインストール
rbenv uninstall [バージョン] Rubyバージョンを指定してアンインストール
rbenv versions インストールされているRubyバージョンの一覧を表示
rbenv global [バージョン] すべてのディレクトリで使用するRubyバージョンを切り替える
rbenv local [バージョン] カレントディレクトリで使用するRubyバージョンを切り替える
rbenv rehash RubyやGemに関するコマンドをバージョン変更後も使用できるようにする



積み残し（復習したいこと）

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

  • Rails勉強会→５０％

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

    感想

  • メンターさんの言葉に励まされた。嬉しかった。

  • プログラミング学習を初めて丸三ヶ月が経過した。学習前とでは、見方や考えが違う部分もあるので、自分がどうしたいのか今一度考えようと思った。