今回の記事では、
HTML
CSS
Java Scriptを理解した上でご覧いただければと思います。
その上で、この下記の用語をご紹介していきます。
フレームワーク
シングルページアプリケーション
パッケージマネージャー
CSSプリプロセッサ〜
ビルドツール
フレームワーク
簡単にいえば、雛形です。
例えば、プログラム書く時にHTML/CSS/Java Scriptなどをテキストから書いていてはめちゃくちゃ時間がかかります。
なのですが、世の中のプログラムっていうのはだいたい似ている部分が多いんですね。
こういう部分を抽出して型ですよ。
型にしたものを、フレームワークと言います。
これフロントエンドでは、有名なフレームワークが３つあります。
React
AngularJS
Vue.js
これのどれを使えば良いのかと言いうところですが。
世の中のトレンド時には、REACTを使っている場合が多いですね。
Reactを学ぶとこんなに簡単にプログラムができるのかというのがわかると思います。
シングルページアプリケーション
「１枚のページのアプリ」
これの対義語になるのが、「MULTI PAGE APPLIACTION」っていうのですね。
例えばクックパットのページにアクセスした時に、レシピのページをクリックした時に何か他のページが開きましたと。
このクックパットのページとこのレシピのページっていうのは全然番うものですよね？
「複数のページで構成されるアプリ」というのをMPA(MULTI PAGE APPLIACTION)と言います。
それに対して、SPA(Single Page Appliaction)というのが。
１つのページでできているんですね。
Java Scriptを駆使して、１つのHTMLをJava Scriptが適宣ページを書き換えながら複数ページあるように機能させる。
何が良いかというと、これから５Gの時代が来ますよね？
5Gが来たら、いっぱいのデータをダウンロードしても全然大変じゃないんですよ。
MPAというのは、ページを開くことに色んなHTMLとかCSSとかをダウンロードしないといけませんよね？
ダウンロードには絶対に時間がかかります。なぜかというと、通信しないといけないですよね？
この情報をください、とかのやりとりですね。
しかしSPAっていうのは、最初にどかっとダウンロードしてくるんですね。
この１回のダウンロードは５Gになれば一瞬ですよ。
そのあとは、Java ScriptがHTMLを書き換えていくんですね。
だから、すごくスピードも速くてレスポンスも良い。性能の良いページが作れるっていうのが、SPAになります。
先ほど、説明したREACTを使うと自動的にシングルページアプリケーションが作られるということになります。
なので、REACTを初めて使う方は混乱するかと思います。
なので、説明しました。
REACTを使用する場合は、常にシングルページアプリケーションになるんだという事を理解してください。
ちなみに、REACT以外に
AngularJS
Vue.js
も紹介したかと思いますが、この２つもシングルページアプリケーションになります。
開発時に必要な用語
パッケージマネージャー
１つのファイルで開発するととてもやりにくいですよね？
なので、ファイルを分割したりします。なんですよね、先ほど言ったようにシングルページアプリケーションっていうのは１つのファイルにまとまって世の中に公開されるんです。
このパッケージングしてくれるツールっていうのをパッケージマネージャーと言います。
有名なものが
npm
yam
というものがあります。
CSSプリプロセッサ〜
CSSっていうのは書きづらいんですよ。１つのものに対してたくさんのプログラムを書かないとかけないというのがあるんですよ。
CSSプリプロセッサ〜っていうものを使うと、このめんどくさい書き方っていうのを簡単な書き方に変えて。
CSSプリプロセッサ〜をかませば、CSSになるというようなツールがあるんですね。
そうすると皆さんが誰が読んでもわかりやすく簡潔にCSSというものが書けるですよ。
そすると
毎違いが起きづらく／プログラムが見やすい／早く開発ができるというメリットがあるんですよ。
これで、簡単に書いて／CSSに書き換えて／パッケージングして／世の中に公開するという流れになります。
検索するときは
「Sass」「SCSS」という言葉で検索すると色んな情報が引っかかると思います。
ビルドツール
タスクランナー
モジュールパンドラー
コードフォーマッター
プログラム静的解析ツール
タスクランナー
先プログラムをパッケージマネージジャーでバンドル（束ねる）する。って言いましたよね？
このバンドルする時に、難しいコマンドを叩かないといけないケースがあるんですね。
それを毎回打つのは大変ですよね？
それを簡単なコマンドに置き換えてあげる、っていうのをタスクランナーっていう風に呼びます。
例えば、コマンドA,B,C,Dを１つづつうちこむのは難しいですよ。
この入力タスクを
“RUN”とするこの入力でコマンドA,B,C,Dが働く。
そう行った機能を提供してくれているのが、タスクランナーです。
有名なところですと、
npm-scripts
がります。
モジュールパンドラー
有名なところですと、
Webpack
といものがあります。
いっぱいある、HTML/CSS/Java Scriptを１つのファイルに束ねるのがモジュールパンドラーになります。
コードフォーマッター
例えば、プログラムを書いていく時に。
複数人で開発するときに。人によって子どの書き方スタイルがぐちゃぐちゃだったらどうですか？見づらいですね？
みんなが同じフォマットで書いてくれたらすごくみあ水ですよね？
そういう事を自動でやってくれる機能を、コードフォーマッターっと呼びます。
皆さんが、好きな書き方で書いていいんですよ。
このコードフォーマッターってツールをかけると自動的に決められたスタイルに整形されます。
有名なツールが
Prettierになります。
プログラム静的解析ツール
人はミスをするもの
バグの確率を減らすツールはあります。
その中の１つが、プログラム静的解析ツールです。
プログラムをよくミスするパターンっていうのがあるんですね。
そのパターンにマッチするプログラムはないか？っていうのを調べて。
ここってこういうプログラムになっているけどバグっているんじゃないの？っていうのを教えてくれる。
そう行ったプログラムをプログラム静的解析ツールって呼びます。
有名なツールが、
ESLintになります。
コメント