JavaScriptを２週間ほど勉強した振り返り(Type Scriptも)
こんにちは、take-2405です！
今回は２週間ほどJavaScript(以降JS)とType Script(以降TS)を勉強したのでその過程について書きたいと思います。
目次
1. 用語の理解
まず最初に思ったことは「js」ってつくもの多すぎだろ、、、、
ということでまずはよく聞く「Node」,「TS」,「Express」などについてそもそもなんなのかについて調べました。
・サーバーサイドJavaScript
JavaScriptといえばクライアントサイドで使われている言語です。しかし、最近ではサーバーサイドでもJavascriptが使われるようになり、サーバーサイドで使用されるJavaScriptをサーバーサイドJavaScriptというらしい
・TS(Type Script)
JavaScriptを拡張して作られたプログラミング言語 こいつは言語だったらしい
TS と JSの違い
- TSは静的な型付け
- JSは動的な型付け
- TSはクラスの作成ができる
- TSとJSは同様の構文が使える
・Node.js
「サーバーサイドJavaScriptを実行するための実行環境で言語ではない」という記載があり最初はいまいち理解ができていなかったですが、コードを書いているうちに理解できた気がします。
・Express.js
サーバーサイドJavaScriptのNodeのWebアプリケーションフレームワーク
・React
Facebookとコミュニティによって作られたJavaScriptのライブラリ
シングルアプリケーション、モバイルアプリケーションの開発ベースとして使用可能
Type Scriptでも使用は可能
・Vue.js
Reactと同様にJavaScriptでの開発が想定されたフレームワーク
・Angular（AngularJS）
Vueと同様にSAP(シングルアプリケーション)の開発が可能
ただし使用できるプログラミング言語がTypeScript
・Webpack
モジュールハンドラーツールであり、nodejsで利用される
モジュールハンドラーはモジュールを束ねるもの。JSファイルを一つにまとめることを表現する。
メリット
依存関係のあるJSモジュールを解決する
読み込みの順番を気にせず、１回のリクエストで済む
ローダやプラグインが豊富
・DOM(Document Object Model)
日本語にするとドキュメントをものとして扱うモデル
プログラムでHTMLなどを操作するための仕組み
特徴
ツリー構造と呼ばれる階層構造をとる
それぞれをノードという言葉で表現をする
WebページとJavaScriptなどのプログラミング言語とをつなぐ
参考にさせていただいたページ
2. TSとExpressで簡単なREST API作成
なんとなくJS TS について理解してきたところで僕は普段GoでWeb APIなどを空いていることが多いのでJSやTSでもまずはWeb APIを作成することにしました。
まずはTypeScriptでWebAPIを書いていく
参考にさせて頂だいた記事
記事を見ながらWeb apiを作成しました
問題なく動作し、Expressでの書き方を学びつつ作成することができました。
3. JSでChrome Extension作成
TSでWeb APIを作成した次にJSで何か作りたいなと思っているときに頭にうかんだものが、Chrome Extensionです。
いざ作成、、、、、
と踏み込んだはいいものの最初は全然うまく動作するものが作れませんでした。適当に転がっているサンプルなどを見てもいまいち理解できず、
調べているとChrome Extensionのbackground、event、content スクリプトについて説明している記事があり、それぞれの特徴を理解することで自分の行いたい処理をできるようになりました。
今回僕が作成したのはChromeで閲覧したページとその時間を記録する機能です。
開発の過程はQiitaのほうで詳しく書かせていただきます。
4. JSとExpressでREST APIを作成
Chrome Extensionで作成した検索ログをDBに格納するAPIを作成しました。
DBのコネクションやリクエストのパースなどで少しと間取りつつも無事に作成することができました。
開発の過程はQiitaのほうで詳しく書かせていただきます。
これからChrome Extensionを作る人が絶対に知っておくべき知識 - Qiita
Chrome Extension クロスドメイン(XMLHttpRequest)で困った話(POST) - Qiita
5.NodeでAWS lambda 関数の作成
この記事を書いている段階(2021/4/30)では簡単なAPI Gatewayから渡された値をログに出す処理しか作成していません。
ここからDynamoDBやセンサと絡めたりしていければなと思っています。
作成しだい別の記事で報告したいとおもいます。
