| | | | | |

2023年振り返り

Bykaori

ちょっと早いけど、2023年の振り返り。色々新しいことに挑戦した一年だったのでまとめながら再確認していきたい。特に開発ツールについてはプログラミングの勉強をする中でただ言われるがままに色々（例えばViteとかNode.jsとか）取り入れたりしていた部分もあり、一気に色々やりすぎて実はそれぞれの役割がよく分からないまま使っているものがあるのでここで改めて確認しておきたい。

HTML

HTMLはHypertext Markup Languageの略で、テキストをタグで囲むとそのタグの持つ意味や属性に沿ってウェブページ上に表示される。勉強初期はindex.htmlに色々書いて、結果を表示させることが中心だったが、JavaScriptやReactを使い始めるとhtmlファイル自体に書くことはどんどん減っていき、表示させたい部分は別のファイルで作ることが多くなった。

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css" >
</head>
<body>
  
</body>
</html>

CSS

CSSはCascading Style Sheetsの略でHTMLの中でこのコードを書いたファイルを読み込ませると、文字や画像等の色や大きさやレイアウトを好きに指定できる。Flexboxの設定など、これかな？あれかな？みたいに適当に色々書いていると偶然思い通りになるか、ならないけどこれも悪くないなみたいに妥協してしまうかのパターンが多く、センスと技術の両方求められる奥深い世界。アニメーションや、onHoverのような動きのあるものをもう少し取り入れられるようになりたいと思っている。

JavaScript

フォーム入力や、ボタンクリックといったアクションに合わせてウェブページに動きを加えたり、そこで受け取った情報を変数に代入して次の処理に進んだり、条件をつけて結果を変えたりできるようにJavaScriptを勉強した。プログラミングらしさが一番光るのはこの言語だね。関数とか、配列とか、オブジェクトとか、1年ほど前のメモを眺めながら、すでに懐かしい気持ちにすらなってしまう。一応一通りは勉強したがまだまだこれから。登山に例えると、ガイドブックを手にして山の麓までようやく電車で到着したところ。

Visual Studio Code

Visual Studio Code (VS Code)を使ってHTML、CSS等のコードを書いたり、必要な設定をしたりしているが、VS Codeが無い時代(2015年初リリースらしい）にプログラミングとかしていた時代は想像できないのだけどみんなどうしていたのだろうか。

Terminal

慣れているコマンド以外はあまり入力しないので、苦手意識あり。会社のPCは再起動するたびにssh-addを入力しないといけないのはなぜなのか、今でもよくわからずやってる。個人的によく使うコードは、Code + ファイル名でVS Codeを開く、npm i 、npm run dev、git stashとか。

Git

バージョンコントロールシステム。コードを書きながら、保存していき、保存ごとに変更の記録が残り、複数人で同時にあちこち変えるとバージョンが枝分かれするが、mergeできる。昔のバージョンを復元することも可能。コミットや新しいBranchの作成などVS Code内で十分色々できてしまうので、ターミナルでgit操作することはあまり多くないのでこちらも苦手意識あり。

GitHub

Repositoryを公開/非公開できる場所。無料のオンラインコースでは、指定されたRepositoryからコードをクローンして、手元で動かしてみる練習問題があったり、自分のコードを登録したりしたが、中途半端な感じじなので、見返してしっかり完成させたい。きっと今見たらもう少し違う感じで書けるかも？

Node.js

JavaScriptはもともとフロント側でのみ使われるプログラミング言語だった。それをサーバー側でも使えるようにしたのがNode.js。Node.jsをインストールするときはnvmで、npmとは別物。

npm

npmはJavaScript用のパッケージマネージャー。JavaScriptじゃない言語用のパッケージマネージャーも存在するけど、私はJavaScriptしか知らないのでnpmしか使ったことない。

  • npm init をするとpackage.jsonというファイルが作成される
  • package.jsonには”dependencies”という項目があり、アプリに必要なパッケージがここに列挙される
  • npm i (npm install) をすると、”dependencies”に書かれたパッケージがインストールされる
  • インストールされた大量のパッケージはnode_modulesというフォルダが作成されてそこに保存される
  • node_moduleは大きすぎるのでgitignoreリストに登録してコミットからは除外するがアプリを動かすには必要なので、例えば他の人のコードをGitHubからクローンした場合など、package.jsonにある”dependencies”もインストールするために、npm i をしてからでないと動かない
  • package.jsonの近くにpackage-lock.jsonというファイルもあるが、これはnpm i でパッケージの「どのバージョン」をインストールするか、バージョンを固定するためにある。自分がインストールしたいパッケージを作った人も、他の多数のパッケージを使って作ったものであることが普通なので、package-lock.jsonの”packages”という項目には末端のパッケージのバージョンまで全て記載されているためファイルがとても長い

React

Reactを使うとさらに変化に富んだページ作成ができるようになる。〇〇に変化があったらパーツを作り直すという設定を持ったコンポーネントを作り配置していく。ReactではJSXと呼ばれるJavaScriptとHTMLを同じファイルに混ぜて書く感じのコードを使う。JSXが初めて世に出てきた頃、人々は違和感があったというが、私はすでに頭の中ごちゃごちゃだったので何の違和感もなく・・・

Vite

Reactを使ったアプリを作り始める時、このコマンドで始める。これは「viteというパッケージの最新版を使って”your-app-name”と名付けたreact のtemplateを作ってね」というnpmへのコマンド。

npm create vite@latest your-app-name -- --template react

同様にReact ＋ TypeScriptのアプリを作りたいときは、react-tsのテンプレートを作成する。という具合にテンプレートが色々用意されている。

npm create vite@latest your-app-name -- --template react-ts

でもそれ以外でもviteって使ってる気がするけどこれって何なの？と思っていたが、以下の通り理解した。

  • VS Codeでコードを書いているが、最終的にはWebアプリであればWebブラウザーで表示させたい。ブラウザーで表示させるには、ブラウザーが理解できるコードへ変換する必要がある。
  • ReactやTypeScript、JSXなどのコードは、開発者が読みやすく効率的にコーディングできるようにするためのものであり、これらのコードはブラウザが直接理解できる形ではない。
  • そのためbuildツールを使用して、JavaScriptに変換する必要がある。
  • ところがこのbuildというのが時間が掛かりがちなので、変更しているところを反映させた結果を見ながら開発をしたい場合などに、viteのようなツールを使う。
  • Viteは開発時に便利なツール。プレビューを見ながら開発するとき、見ているところに必要な部分だけをJavaScriptに変換してくれている。アプリ全体のbuildを必要としないので、変更箇所が瞬時にプレビューで確認できる。（リリース時にはbuildする）

TypeScript

TypeScriptは、JavaScriptに”型安全性”を提供するツールである。アプリの規模が大きくなってきたり、複雑になってきたりする頃、JavaScript、Reactの次にTypeScriptを取り入れることで、Typeに一貫性を持たせてエラーを発生しにくくする。最近少しずつ慣れてきたところ。

Tailwind

これを使うとCSSでのスタイリングをもっと簡単に書けるということで導入。確かにコードは簡単なんだけど、Material UIを使っていると、結局どこにスタイル当てたらいいか分からない問題に苦戦してしまう。

npx

先ほどnpmについて取り上げたが、npmの中にnpxというコマンドがある。npmだったりnpxだったり、訳もわからず書いていたが、その違いは何か。npmはパッケージの管理とインストールをするのに対し、npxはインストールせずに一時的に実行だけしたいときに使う。(過去の投稿でも使ってる)

Webpack

記憶はほとんどないけど、OdinでWebpackというのをnpxで実行していた。

npx webpack

Webpackってなんだっけ？

  • ブラウザーはファイルごとにHTTPリクエストをしているので、アプリが大きくなりファイルが増えてくれば増えてくるほど”遅いページ”になる
  • そこでWebpackを使うとたくさんのファイルをまとめてファイルの数を減らし、HTTPリクエストの回数を減らすことができるので、ページの読み込み速度が向上する

それがWebpackか！でも最近使っていない気がするけど？その理由はViteには同様の機能が入っているから。Viteを使っている間はwebpackを実行することもないので一旦忘れよう。

Cloud Firestore

データベース、少しだけ試してみたくらいでまださっぱり分からない。来年はこの辺り再挑戦したい。

（オマケ）

ITパスポート合格

初のIT系の資格GET。難易度少しずつ上げていきたいが、資格よりも経験値重視とすると後回しにしがち。資格自体はあまり就職に役立たなくても、知らないことが多すぎるので体系的/総合的に学べるという点で参考書は面白かったりする。

来年も引き続き頑張るぞ！ということで今日はここまで。

今回はこれを書きながら復習に時間をかけたけど、
「そうだったのか💡」という気づきポイントがたくさんあったのでよかった。
学習当時は意味不明だったのに、ようやく線で繋がり出した。ワクワク♪

類似投稿