node.jsとかdockerとか

こういうWEB系？の技術って進歩が速すぎて気づけば全然知らない単語がずらり並んでいますよね。

え、タイプスクリプトってなんなの…？とかそもそもdockerとかいうのからしてついていけてないんだけれども状態。横文字見るだけで知恵熱出そうです。

でもこれではいけないなー、という事で今日はいろんなWEB系のキーワードをググりながら眺めていました。ここではめっちゃ間違ってるかもしれませんがそれぞれのキーワードごとに「ああ、なんとなくこういう感じのやつか」というのを書いていきたいと思います。

1. dockerとは
2. node.jsとは
3. npmとは
4. nuxt.jsとは
5. typescriptとは
6. tailwindCSSとは
7. まとめ

dockerとは

docker、なんかクジラのマークのやつですよね。

dockerについて読んでみた感じ「composerとかnpmとか、ああいうパッケージ管理ツールのOSも丸ごと再現しちゃうよー！版」なのかなーと思いました。

composerっていうlaravel使ってると使うことになるパッケージ管理ツールがあるんですが、あれもcomposer.jsonっていうファイルに「このアプリにはこのパッケージが必要だよー」っていうのをズラズラ書いておいて、んで開発環境から本番環境にアプリを移す時には丸ごとレンタルサーバーにそのプログラム群を持っていくんじゃなくて、このcomposer.jsonとそれから自分で書いたプログラムの部分だけを持っていって、それ以外はcomposerさんに任せるんです。

dockerはこれのすごい版なのかなーと思います。OSの違いすらも飲み込んじゃうよーみたいな。

node.jsとは

私のパソコンにもnode.js入ってるんですがなんで入れたのかわかってなかったりしてて、最初からはいってたのかなぁ…？なんて思うんですがたぶん自分で入れたんでしょう。でも、そもそもなんでみんながそんなnode.jsで騒いでるのかよくわかってない…。

そんなnode.jsとは、というと「apacheっていうWEBサーバーのjavascript版のやつ」なのかなーっていう。

また一番疑問だったのがどうやってnode.jsがサーバーサイドで動いてるんだろうって部分だったんですが、普通にサーバーの常駐プロセスとして起動させ続ける必要があるんですね。なのでレンタルサーバーでnode.jsをサーバーサイドに使うのは難しいみたい。

そりゃそうですよね、レンタルサーバーで勝手に24時間常駐するプログラムを起動させるなんて普通は制限されちゃいます。

npmとは

dockerのところでフライングでnpmってのが出てきてましたが、これはnode.jsに付属してるパッケージ管理ツールの事。

例えばnode.js上でjqueryを使いたいなーって思ったらコマンドライン上で「npm jquery」みたいなの打てばすぐにjqueryを入れられたりできるやつです。

パッケージ管理ツールってのがそもそもよくわかんない部分も多いと思いますが、このパッケージ（ソフトの事）使うためにはこっちのソフトも入れないとだめだよ！みたいなソフトごとの依存関係を管理してくれてるツールの事です。

パソコンでゲームしようとしたら「なんちゃらのランタイムが必要です」みたいなの出てくることあると思いますが、あれみたいな感じ。

nuxt.jsとは

サーバーサイドとブラウザサイド、どちらも一つのファイルで書けるフレームワークの事みたいです。

私の認識がとても古いのかなーと思いますが、PHPで書いたサーバー側のプログラムでまずユーザーに見せるHTMLの土台を作って、んでそれだけじゃ足りない部分をブラウザ側のjavascriptで補う、みたいなのが過去のWEBページの基本的な作り方だったのかなーと思います。ワードプレスとかがそうですよね。

んでもnuxt.jsを使うとそれがガラッと変わってサーバーサイドとかブラウザサイドとか気にすることなく一つのファイルで作れちゃうってことだと思います。

そういうの気にしなくて書いたjavascriptプログラムをサーバーに置いておくだけで、後はnuxt.jsがよしなに「この処理はサーバー側でやって、こっちの処理はブラウザ側に投げよっと」としてるくれるみたいな。

また、nuxt.jsにはどこまでサーバーサイドでやってどこまでブラウザサイドでやるかを決められるみたいで、例えば完全な静的サイト（PHPすらない超シンプルなHTMLのみの構成）を出力することもできるみたいです。

なんていうかnuxt.jsで書いたプログラムが一つあれば、それをどういう割合、つまり100%静的サイトにするのか、ブラウザ側でゴリゴリAjaxとか使って動くようにするのか、というのを決められるのかなーと思います。

typescriptとは

タイプスクリプトってのはjavascriptに変数の型の概念を持ち込んだプログラム言語。

javascriptもletとかconstとか変数の再代入についてのルールとかは決められるようになっていますが、typescriptはC言語とかみたいにintとかstringとか、そういう変数の型まで宣言できます。javascriptに比べてヘンな代入のミスとかが減らせるんですねー。

nuxt.jsはjavascriptだけじゃなくてtypescriptでも書けるみたいです。

tailwindCSSとは

tailwindCSSっていうのはWEBサイトのデザイン作るのが簡単になるよーっていうCSSのライブラリのコト。

似たようなのにブートストラップっていうのもあるんですが、tailwindCSSの方はより細かな指定が可能になってるのがメリットみたいです。例えば、ブートストラップの方だと「btn」ってクラスを一つぽんっと付けるだけでボタンっぽい見た目になるんですが、tailwindCSSの方はそうじゃなくて「角っこはこれくらい丸くてー、横幅これくらいでー、色はこんな色でー」っていうのを、この例だと一つのDOMに3つクラスを付与してボタンを作る、みたいな。

CSSでゴリゴリ書いてた部分をそのままHTMLのクラスで書いちゃおう！っていう発想みたいです。もうCSSを自分で書く時代じゃないよ！ってコトかも。全部HTML上で書けばいいじゃん！という。

まとめ

ここではもうついていけていないWEB関係のワードについて最近学んだことを書きました。

まとめると、Docker上にNode.jsを入れ、そしてそのDockerのコンテナ上でnpmを使ってNuxt.jsとtailwindCSSを入れ開発環境構築完了。あとはtypescriptでサーバーサイドクライアントサイド混合のnuxt.jsプログラムをゴリゴリ作成。んでnode.jsをWEBサーバーとして起動してそのプログラムを実行。

みたいな感じなんだろうなーと思います。

で、最後それを公開するときには100%静的サイトとして出力しレンタルサーバーに置く、もしくは、GithubにDocker毎ソースコードをプッシュしてAWSとかクラウドフレアみたいなとこにデプロイして公開、ってコトなのかなーと思います。

なんにしても多くの日本のレンタルサーバーがほぼPHPしか対応してないのでローカル（自分のパソコン上）で遊ぶ分には楽しそうですが、いざ公開するときは100%静的サイトとして出力する必要がありあんまり楽しめないのかも。

…読み直してみると文中の「みたい」オンパレード具合がすごいですね。