【プログラミングのフレームーワーク】知っておくと便利な知識

今回の記事ではフレームワークについて紹介していきます。

前回の記事では、プログラミングのバージョン管理とセキュリティーについて紹介をしました。

これからご紹介することは、CSSやJavaScriptやHTMLを勉強された方向けになりますので、まずはこの3つがどういうものかをこの記事を読む前に知っておいてください。

プログラムを書く時に1つ1つ書くと時間がかかります。

しかし、プログラムは大体が似ていることが多いです。

その似ている部分を型にしたものがフレームワークと呼ばれるものになります。

まずは、「React」これをJavaやCSSやHTMLの次に学んでください。

今までよりも簡単にプログラムがかけるはずです。

Reactの他には、AngularJSやVue.jsというものがありますのでこちらも調べてみましょう。

次に、シングルアクションページアプリケーション(以下SPA)についてご紹介します。

SPAとは、JavaScriptをくしして、ページを書き換えて複数のページがあるように機能させるものです。

メリットとしては情報のやり取りに時間がかからないという点です。

どういうことかというと、SPAの場合は1つのページで全て解決されますが、

複数のサイトで構成されているページだとダウンロードに時間がかかるのです。

ページの何かをクリックしたら別のページを開いてしまうという所に時間がかかってしまうのです。

しかし、SPAは初回の読み込みがデータが多いため遅いです。

5Gになればそこは解消されるので今のうちから手掛けておきましょう。

先ほど紹介した、Reactやほかの2つも自動的にSPAを作ってくれます。

続いて、プログラムを開発する上で必要な用語をご紹介します。

まずは、パッケージマネージャーです。

プログラミングは膨大な量になるので1つのファイルで開発すると、とてもやりにくいのです。

そのため、プログラムを分割して開発します。

この分割したプログラムを1つにまとめるのがパッケージマネージャーです。

代表的なツールはNPAとYAMです。

調べてみましょう。

次は、CSSプリプロセッサーと呼ばれるものです。

これは非常に便利でして、何が便利かというと、CSSを書く時は１つのものに対して沢山のプログラムが必要になります。

このプログラムを簡略化するのが、CSSプリプロセッサーです。

間違いが起きづらいのです。

そして、プログラムが見やすいため早い開発ができてしまうのです。

ここで使われるものがSassやSCSSと呼ばれるものです。

次に、ビルドツールについて、ご紹介します。

ビルドツールにも色々種類がありますが、今回は「タスクランナー」「モジュールバンドラー」「コードフォーマッター」「プログラム静的解析ツール」を、ご紹介をします。

ここでは、用語とこんな感じのものです。というのを紹介しますので詳しいことは必ずググって調べましょう。

1つ目のタスクランナーですが、タスクランナーは色んなファイルを束ねることができます。

そして、あるコマンドをタスクとして設定するとそのコマンドを入力するだけで、プログラムが動きます。

「npmscripts」で検索してみましょう。

2つ目はモジュールバンドラーです。

「webpack」が有名ですが、これはたくさんのHTML、CSSなどを1つのファイルにまとめることができるのです。

3つ目はコードフォーマッターです。

これは複数人でプログラムを開発する時に役に立ちます。

複数がプログラムのコードを書くと書き方が絶対バラバラになるのです。

そうすると、自分の所は見やすくても他の人の部分は見づらかったりします。

なので、これを統一された型に自動で変換してくれるものをコードフォーマッターといいます。

「Prettier」で検索してみてください。

最後の4つ目がプログラム静的解析ツールになります。

人間だれしもミスをするものです。

そのため、プログラムにも絶対バグが出る物なのです。

しかし、そのバグを減らすツールがあります。

それがプログラム静的解析ツールになります。

これはよくミスがあるパターンをもとにミスを指摘してくれます。

一度「ESLint」で検索してみると実際に物がわかります。

ググって見ましょう。

ここまでをまとめると、JavaやCSS等ができても仕事が出来ないということです。

今回ご紹介したフレームワークをしっかり把握しておきましょう。

プログラムの経験がなくてもこのフレームワークを知っているか知らないかで全然、学習効率が変わってきますので1つ1つ把握しましょう。