プログラミング基礎〜CSS/テスト/型チェック編〜

プログラミング
スポンサーリンク

CSSフレームワーク

フレームワークっていうのは、雛形みたいなものですよね?
CSSっていうのは、見た目を司るプログラムみたいなものです。
それの雛形ってどういうことかというと。

皆さんね、一からCSSを作るとめちゃくちゃ大変なんですよ。
なんですけど、それなりの見た目を作ってくれるCSSのセットというものがあるんですよ。
そういうのがあるとめちゃくちゃ、カッコよくはならないんですが。
例えば、社内で使うページとか。そういうのってあんまり大事ではないですよね?
そう言った時にこういうフレームワークを使うと簡単にそれなりに使いやすい見た目が作れるんですね。

有名なものが

reactstrap
Material UI
Bootstrap

おそらくですね、この3個目のBootstrapっていうのが一番有名かと思います。

注意点なのですが、皆さんが世の中に公開するサービスに関しては。
CSSフレームワークを使うことはお勧めしません。

これなんで買っというと、見た目がそれなりで特徴がない。
なので、皆さんが発信したいこととかを上手く伝えられなくなってしまいます。

例えば仮に最初はフレームワークを使ってあとでデザインを改善していこうってこともあるかと思います。
なんですが、一回フレームワークを使ってしまいますと。
一部だけ変えるってのが難しくなっています。

なので、CSSフレームワークを使う際はそれだけを使う
そうじゃないなら、自分でCSSを書くという風に2択でCSSを使いこなしていければと思います。

テスト

世の中には全てのプログラムにはバグがあると言われております。

そう言った時に大事なものが「テスト」です!
例えば、料理の例です。

皆さんが、料理を作りました。
味見をせずに料理を出したらどうなりますか?めちゃくちゃまずいかもしれませんよね?
じゃあどうするかというと、味見をしますよね?
この味見っていうのが、テストなんですよ。

これってのは、習慣づけてやらないとダメです。

じゃあ、具体的にテストといっても何をすれば良いのか?ってことですが。
これお大きく分けて2つあります。

単体テスト
結合テスト

単体テスト

書いたプログラムの小さい単位でテストをする。
例えば、料理の例でいうと。
まな板で材料を切るってっていう小さいプログラム(モジュール)
このプログラムを書いたら、この部分だけテストをする。

これを単体テストと呼びます。

結合テスト

料理を作る全体、この材料とこの材料を入れたらシチューができるっていう大きなプログラムの塊がちゃんと動くかどうか?確認する。
全体の動きのテスト。

フロントエンドで使われるテストツール

Jest
react-testing-library
Cypress
Enzyme

有名なのは、Jestです。

型チェック

例えば、料理で”カット_食材”ってプログラムがあったとします。
このプログラムは食材をカットしてくれるんですよ。

例えば、そこのなんの型チェックもなくて、まな板を渡されたらどうしますか?
まな板は切れないですよね?だからエラーになっちゃうわけですよ。

なんですけど、このプログラムには食材しか渡せないんだよ。
食材型っていうのを決めて、そもそもまな板を渡せなくするこの仕組みっていうのを型チェックと呼んでいます。

Java Scriptには、この型チェックっていうのが元々ないんですよ。
なので、カット_食材ってプログラムがあった時にプログラマーの人が間違ってまな板を渡しちゃう可能性があるんですよ。
だけど、プログラムを書いた時点では気づけない。
実際にプログラムを動かして普通は、人参とかお肉がくるのに。
ある時にまな板が渡ってきて、エラーになっちゃったという事が、初めてまな板が渡されて気づくんですね。
これだと、バグに気づきづらい。
なので、そもそもまな板を渡せなくするようにする事が必要なんですよ。

じゃあ、Java Scriptでどうすっるのか?って事なんですが。
それが、

TypeScript

と呼ばれる仕掛けなんですね。
これを使うと、まな板が渡せないとか硬いプログラムを書く事ができる。
それを、書いたらそれをJava Scriptに変換するツールがあってそれでJava Scriptに変換されて世の中に公開されるんですね。
なので、TypeScriptでJavaの返還後も安全にバグの生みづらいプログラムができる。

これを知っておくと便利

PWA(Progressive Web Apps)

モバイルアプリってプッシュ通知とかきますよね?そうすれば、ユーザーに色んな事をお伝えできてお知らせできるんですよ。
だけど、WEBページってのはプッシュ通知ができませんよね?
WEBページでもそんな事ができないか?と思って作られたのがPWAという仕組みです。

AMP(Accelerated Moblie Pages)

とても速いWEBページの事です。
ロードに3秒以上かかると半分以上の人が離脱する。なので、スピードってのはめちゃくちゃ重要なんですね。

このAMPという仕組みを使ってページを作るとグーグルがめちゃくちゃ高速にWEBページを表示してくれるんですね。
で、グーグルの検索エンジンはこのAMP対応しているページは優遇して上位表示されるんですね。
なので、スピードを求める方は、AMPは良いと思います。

モバイルアプリケーション

今までは、モバイルアプリケーションを作る際は別でプログラムを作らなければいけなかったんですよ。
なのですが、HTML/CSS/Java Scriptを使ってモバイルアプリを作ろうじゃないかって仕組みがもうあります。

ハイブリットアプリ

と呼ばれます。これを作る際に使わなくてはいけないツールってのがあるんですね。
なので、このツールの代表例3つ紹介します。

React Native
Flutter
Ionic

3つとも実現したい仕組みが若干違うので。
皆さんが作りたい要件によってどれを選べば良いかも変わります。

デスクトップアプリケーション

昔は、C#とかまた別の言語を作ってウィンドーズのアプリを作らなくてはいけなかったが。
HTML/CSS/Java Scriptを使ってデスクトップ用アプリケーションが作れる。
便利なツールがあって

Elevtoron

というツールがあります。このツールを使うと簡単にデスクトップアプリケーションが作れるようになります。
例えば、SlackのWEBページを作ったと。
そのプログラムをそのままElectronを使ってデスクトップ用のページを作れる。

Firebase Hosting

こうやって作ったページをどうやって世の中に公開するんだと言いますと。
Firebase Hostingを使うと、簡単に世の中に公開できる。
HTTPSによりセキュリティが担保された公開ができます。
また、ドメインの紐付けが簡単にできます。

コメント