6月17日 -JavaScriptを深く理解するために必要な知識について調べてみた。主にQiita検索を参考に-
１．今日の目標
まずは前回ウェブカツで書いていた用語について学ぶ。その上で動画視聴を続けてみる。単語は以下。腑に落ちたら→腑に落ちたと記載予定。深堀しすぎるとキリがないと思うのでまずは内容、概要の理解まで。基本的にQiitaの検索機能を使って調べる。情報が古い場合もあるが、とりあえずストック数順で並び替えるなど色々試しながら調べていく。
・cookieとセッション
・getとpost
・テーブル設計と正規化
・ログ設計
・例外処理
・テーブル結合(JOIN)
・影響調査法
・バリデーションとサニタイズ
・npmやyumといったパッケージ管理ツールとgulpなどタスクランナーツール
・ajaxと非同期処理
・Vue.js→腑に落ちた、react.js→腑に落ちた
(これらはJavaScriptのフレームワーク)
・npm→腑に落ちた、yum→腑に落ちた
(これらはパッケージ管理ツール)
・gulp→腑に落ちた、grunt→腑に落ちた
・ホイスティング→腑に落ちた、プロトタイプ→腑に落ちた(自分の理解が間違っている可能性あり)
・thisの4種類→雰囲気は掴んだ
２．結果・感想
語彙を調べると知らない語彙が出てくる。その繰り返し。でも調べていくうちに、「あ！こことここが関連してて、こういう風に使わているのか」みたいにふいに理解できるタイミングが来てくれることを期待。基本的にコピペはせず、同じ文章を書かせていただく場合も全てを手打ちにすること、それを読むことで理解を深めていきたいと思っている。実際手を動かして理解したつもりになっていても、声に出して読んでみたら上手く発音できなかったりする。
何かを理解しようと思う場合に一番効率がいいのはそれを誰かに教えること。教えようとしても自分が理解していない場所は上手く教えられない。その方法をうまく活用して、声に出して自分に教えるというイメージを持つことで理解度を高めていきたいと思う。
さきほど、TECH::EXPERTでエンジニアを目指しているユウマさんのブログを閲覧した。毎日10時間ほどの勉強をほぼ欠かさずしていて、2か月という期間ですごいスピード感で成長しているように思えた。私も頑張りたいと思った。スクールだとしっかりレールが敷いてあって、メンターがいて素敵な環境で勉強できることを知った。同時にプログラミングへの熱意と努力、「継続すること」の大変さを記事から感じた。
負けじと頑張りたい。
やはりプログラミングを頑張っている人、楽しんでいる人、同じような目標に向かって頑張っている人のブログは熱意を分けてもらえるような気持ちになる。そしてエンジニアとして働いている先輩方のブログからは知識や知恵、困難の乗り越え方や体験談などの貴重な情報を得ることができる。色んなブログ、twitterでのtweetを見ながら私も頑張っていきたい。
Qiitaの右側に検索オプションの使い方例が書いてある。これってすごい良心的だと思う。もし将来こういうサイトを作るならこういう機能も実装して利用者がプラスアルファの使い方を自分で考えられるようなサイトにしたい。でも、実装難しいのかな。if文で「もしtitle:やbody:という指定単語が出てきたらそのあとの空白行までの単語を指定単語の要素(titleやbodyやtagなど)の内容と比較演算子で照らし合わせてtrueの記事だけ表示する」とかっていう実装になりそうな予想。作ったことないから分からないけど。でもそういう実装が出来るように勉強していきたい。
scriptって書き過ぎてたまにsprict？あれ、どっちだっけ？ってなる。そして気付いたら8000文字超えているという事態に。先人の知識や知恵は素晴らしいということで。学ぶの楽しいからどんどん吸収していきたい。でも語彙を学んだだけではほぼ意味ないかもしれない。実際にプログラㇺを書いてエラー対応やら環境構築やらテストやら、大変な部分に触れてより楽しんでいけたらと思う。
３．学んだことの書き出し
npmについて
npmとはNode Package Managerの略。Node.jsのモジュールを管理するツール。npmはフロントエンドで使用するパッケージのバージョン管理を行うのに使われる。npmでインストールしたパッケージのバージョン情報をpackage.jsonに格納する。そのpackage.jsonからパッケージを一括でインストールすることができ、package.jsonを一元管理することでフロントエンドで使用するパッケージのバージョン管理を一元化することができる。node.jsをインストールすると同時にnpmもインストールされる。
JavaScriptにはモジュール機能(他のファイルを読み込んで使えるようにする機能)が用意されてなくて、その役割を果たすためにできたのがnode.js。node.jsはnpmというパッケージ管理ツールを使う。npmのリポジトリにnode.jsという言語で書かれた便利ツールがどんどん追加されている。node.jsはブラウザの枠にとらわれない汎用言語で、作られるツールも「コマンドラインで使って開発を楽にするツール」という趣が強い。
http-server：簡易Webサーバー
grunt：タスクランナー
bower：ブラウザで動くJavaScriptのためのパッケージ管理ツール。パッケージ例は(JQuery、AngularJS、パララックスなど)。bowerはnode.jsで実装されている。node.jsとして書かれたJavaScriptはそのままではブラウザでは動かない。browserifyを使えばnode.jsスタイルで書かれたコードをブラウザ上で動くものに変換できる。
実際に使う流れ：node.jsインストール→npmでbrowserifyをインストール→CommonJSスタイルでコーディング→browserifyでブラウザ向けにビルドして表示
これ色々学ぶことありそうだ。
yumとcurlについて
yum(Yellowdog Updater Modified)とはRedHat系ディストリビューション(centOSやFedoraなど)で利用されるパッケージ管理ツールのこと。パッケージとはある機能を持ったプログラムの集合のこと。レポジトリとはパッケージが保存されている場所のこと。サーバシステムにおけるレポジトリとは公開されているネットワーク上のどこかに置かれていることをさす場合が多い。
sudo yum install
sodu(スードゥー)とは一時的にroot権限でプログラムを実行するためのコマンド。rootユーザーとは、強力な権限を持ったユーザーであり、カレントユーザー(現在ログインしているユーザー)の権限を上回る。yumとはソフトウェアの導入と削除、依存関係の整理などを行うパッケージ管理ツール。curlとは、URLを使用してデータ取得するためのコマンドラインツールのこと。ハイフンと併用することで多様なオプションをつけられる。
yumとcurlの違い
yumはrpmのパッケージ管理システムを呼び出すときに使われる。rpmが個々のパッケージでyumが全体のパッケージというイメージ。rpmのみでは依存関係は自動解決されないのでyumを用いる。対してcurlはTP、FTPS、HTTP、HTTPSなどの様々な通信プロトコルに対応している。
rpmについて
rpm(RedHat Package Manager)とはパッケージを管理するコマンドのこと。rpmではインストール時におけるパッケージの依存関係の情報をRPMデータベースに登録し、アンインストール時に確認しに行く。rpmはアプリケーションのバイナリとそれを動かすために必要な各種ファイルが固まっているファイル。
yumコマンドとrpmコマンド、どちらを使う？
RPMパッケージのインストール・アンインストールはyumコマンドが良い。RPMパッケージについて詳しく調べたい時はrpmコマンドが良い。rpmコマンドビギナーはQueryモードを使いこなせるとレベルアップする。
Linuxの用語集(Linuxカーネル・ディストリビューション、パッケージ、シェル、ミドルウェア)
LinuxディストリビューションとはLinuxカーネルを様々な企業やエンジニアがカスタマイズして再配布されたもの
代表的なものとしてDebain系にUbuntu、Linux Mint、Red Hat系にCentOS、Amazon Linuxがある。
パッケージとは、Linuxでアプリケーションをインストールする際の形態のこと。Linuxはソースコードの状態で公開されているため、ユーザーがバイナリの形にコンパイルする手間がある。利便性を高めるためにあらかじめコンパイルされたバイナリといくつかの必要なファイルをひとまとめにしたものをパッケージという。
シェルとは、Linuxを操作するためにコマンドを打つ場所。シェルはユーザーからのコマンドを通訳してカーネルに渡したり、カーネルからのメッセージを通訳して出力したりする。bash、sh、zshなどがある。windowsではコマンドフロンプト、Powershellなどが該当する。
コマンドとは、シェルを通してLinuxを操作する命令のこと。代表的なコマンド例がリンク先にあり。
ミドルウェアとは、アプリケーションとOSの中間的な処理を行うソフトウェアのこと。OSだけでは業務に求められるほどの機能は備えていない。ミドルウェアをインストールすることで特定の処理や複雑な動作が可能になる。Apache(Webサーバ)、MySQL(DBサーバ)などを指す。
今回は中身を詳しく見ないが、将来的にLinux環境を使うことになったときのために貼りつけだけしておく。
Vue.jsについて
vue.jsとはMVVMと呼ばれる設計パターンを採用しているJavaScriptのフレームワークのこと。jsのフレームはたくさんあるがその中でも最もシンプルで学習しやすいフレームワークとして有名。リンク先で表示しているサンプルコードの実行例で、入力した文字列が上にそのまま表示されている。
Vue.jsの用語説明(データバインディングとディレクティブ)
データバインディングとは、データと描画を同期させる仕組みのこと。HTMLで作成するにあたりUIを操作するのはDOM操作。UIのパターンが膨大になるほどDOMの更新作業が面倒になり、ミスにつながる。データバインディングはそれを解決に導く。JavaScriptのデータとそれを使用する場所を紐づけてデータに変化が起きた時でも自動的に反映させる。
ディレクティブとは、Vue.jsのテンプレートに用意された特別な役割を持つ属性のこと。
Vue.jsの基本構造
アプリケーションの作成にあたり、コンストラクタ関数Vueを使ってVueインスタンスを作成する。その中でオプション(どんなデータにどんな処理をするか)を追加していく。オプションには使用するデータやメソッドを定義する。代表的なものとしてel、data、computed、createrd、methodsがある。
React.jsについて
React.jsはシンプルなJavaScriptのオブジェクトとしてDOM構造を表現する仮想DOMを構築する。実際のDOMへの反映の際は現在のDOMと比較して差分だけ適宜反映する。画面描画ごとに仮想DOMを構築しても実用十分な性能が出るという特徴を持つ。Reack.jsでは純粋なJavaScriptのオブジェクトとして仮想DOMを組むため、複雑なテーブルもJavaScript的に組み上げられる。React.jsでは状態を持ったコンポーネントを作れるので上位層から知る必要のないようなstateは子コンポーネントに封じきってしまえる。フォーム要素に値を記憶させるというデフォルトの機能をあえてなくして、「ユーザーからの入力」と「値の表示」を切り離すことで入力値の管理をシンプルにしている。React.jsは慣れれば快適だが始めるコストはある程度ある。理由は３つあり、最先端のJavaScript文法を多用する書き方、JSXという仮想DOMを直接JavaScriptで書けるようにするための文法拡張、それらを処理する環境構築をする必要があるから。
React.jsはFacebook社が公開したUI構築のためのjsライブラリのこと。コンポーネントという単位でUIごとに機能を宣言的に実装する。MVC/MVVMでいうところのView/View-modelのみを担当する。その他の部分はRedux/Fluxを組み合わせて構築する例が多い。HTMLのDOMを直接操作せず、仮想DOMに対して操作を行う。仮想DOMからHTMLDOMへの反映はReactが効率的に行ってくれる。JQueryと併用できる。BootstrapのようなUIのデザインライブラリとしての機能は持たない。
gulpについて
gulpとはnode.jsのStreamingAPIを利用したビルドシステムのこと。Gruntが抱えているいくつかの問題を解決する手段としてできた。Gulpを使えば様々な作業を自動化することができる。gulpは非依存型プラットフォームで、メジャーなIDEには対応しており、様々なプラットフォームで利用できる。大量のnpmモジュールを駆使すれば様々なことができて、使い方もシンプル。
gulpにはプラグインが必要になる。 何かのツールを導入するたびにそれに対応したgulpのプラグインが要求される。そうするとpackage.jsonにgulp-××が並ぶ。gulpはプラグインも駆使すれば大抵のことは自動化できる。gulp自体はただのラッパーでgulpで定義できるタスクは大体npm scriptsにshellで書ける。webpackがgulpのライバルとして登場。
webpackについて
webpackは複数のNodeモジュールをひとまとめにしてくれる。各種ローダーを入れればECMAScriptを変換したりCSSも読み込める。
webpackとは、複数のjsのファイルをひとつにまとめるツールのこと。機能ごとにjsファイルを分けて書くことでプログラムを楽しく、効率的に書くことができる。
scratch3.0について
scratch3.0とは子ども向けプログラミングツールのこと。
gruntについて
gruntとはフロントエンドまわりのファイルの圧縮・結合・最適化などの手順をスクリプト化できるツールのこと。スクリプト化しておくと面倒な作業を一発で実行できたり、自動化の手順を他の人と共有できる。Mac OS XへUNIXコマンドを簡単に追加できるようになる。PHP、Python、Rubyなどのプログラミング言語やMySQLなどの開発ライブラリを簡単な手順で追加することができる。gruntを使用する際に必要なファイルはGruntfile.jsとpackage.jsonのふたつ。
ホイスティングについて
ホイスティングとは変数の巻き上げのこと。変数の巻き上げとは、ローカル変数は関数内のどこで定義しても変数の宣言自体は関数内の先頭で行われたとみなされること。ホイスティングによる思わぬ不具合を防ぐためにローカル変数は関数内の先頭で定義するのが望ましい。
プロトタイプについて
JavaScriptには唯一のオブジェクト、グローバルオブジェクトが存在する。グローバルコンテキストで定数を定義すればグローバルオブジェクトのプロパティになる。function式で生成されるオブジェクトは全てprototypeプロパティを持つ。コンストラクタ(constructor)とは親クラスに向かうプロパティのこと。プロトタイプ(prototype)は子クラスに向かうプロパティのこと。
親クラス(=子クラス.constructor)
子クラス(=親クラス.prototype)
あれ、でもインスタンスを作る時ってselfのメソッドを引き継いでいた気がする。となると一時的にselfのメソッドなどを持ったままconstructorで親クラスに戻って新しいインスタンスを定義していることになるのか？難しい。
4つのthisについて
ECMAScript5の時代の4つのthisは、関数呼び出しパターン、メソッド呼び出しパターン、コンストラクタ呼び出しパターン、apply/bind/callパターンに分類されていた。ECMAScript2015でアロー関数が導入されると新しいセマンティクス(意味論)が持ち込まれることになり、thisを5つに分類することになった。ただ4つのthisとアロー関数のthisには大きな違いがある。
スコープは大きく分けて静的スコープと動的スコープの2種類がある。多くの言語では静的スコープが使われている。静的スコープは現在のスコープで変数が宣言されているなら現在のスコープの変数を調べ、なければソースコード上で１つ外側のスコープを調べるという手順を繰り返す。構文を解析する段階で変数名を解決できるので性的スコープと呼ばれる。動的スコープは現在のスコープで変数が宣言されているなら現在のスコープの変数を調べ、なければ実行のコンテキスト(文脈)において１つ外側のスコープを調べるという手順となる。実行時の状況によってどの変数を示すかが変わってくるため動的スコープと呼ばれる。
関数の外部とfunctionキーワードを用いた関数(非同期関数・ジェネレータ関数を含む)内のthisは動的スコープ。実行のコンテキストによって動的にthisの参照が解決される。このthisの決定パターンが先にあげた4つになる。
関数呼び出しパターン：thisの解決にあたり、thisを決定する要素を探してスコープを遡るとグローバルスコープにたどり着く。thisはグローバルスコープにおけるthis(strictモードの場合はundefined、そうでなければグローバルオブジェクト)として解決される。
メソッド呼び出しパターン：object.method(...)という特殊形式で呼び出すとmethod内のthisの参照はobjectに解決される。
コンストラクタ呼び出しパターン：new Constructor(...)という特殊形式で呼び出した場合、Constructor内のthisの参照はConstructor.prototypeをクローンして作った新しいオブジェクトに設定される。
apply/bind/callパターン：これらはFunctionオブジェクトのメソッドで、リフレクションのような機能を持っている。これらのメソッドは本来のthisの解決の過程に割り込んで引数にとったオブジェクトを優先的にthisに割り当てる。
アロー関数(非同期関数も含む)ではthisは静的スコープを持つ。thisは関数が定義された時点でそのスコープにおけるthisに静的に解決される。thisが他の変数と同様に扱われることになる。
thisとはthisが所属している関数を実行するオブジェクトのこと。thisには2パターンある。ひとつは所属しているオブジェクトそのものを指すthis。もうひとつはグローバルオブジェクトを指すthis。例があって分かりやすい。
４．明日の課題
５．参考URL
６．今後やりたいこと・高めたいスキル・優先順位
ウェブカツ、WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
