日記 2023/04/01_全然進まない
最後に記事書いてから一週間くらい経ってしまうが、
結局まだnpmでインストールしたChart.jsを画面に出力できずにいる。
情けない。
いきなりプロジェクト管理ツールを使ったから思考がジャムっちまった。
とりあえず昨日は一昨日買った、ReactとNext.jsについての本を読んでプロジェクト、パッケージ管理やDOM操作について少し学んだがいつ目標達成できることやら。
それに、この前webpack見つけて、「よしこれで統一していこう」と思ったばかりなのに、「webpack開発終了、新たにturbopackが開発されるという記事」発見しちゃったし。こりゃ完全に「ドツボにはまってる」ってやつだわ。まあだからと言ってビビるつもりはないけどね。
とりあえず明日はReactとNext.jsを使ってパッケージのインストールからソースファイル（HTML、CSS）の内容を変えるところまでを学習して文字起こしすることを目標としよう。
マジで勉強進んでなくてすんません。
日記 2023/03/26_学んだことを言語化してみる。
今日はwebpackを使用してbootstrapのcssとjs、それからchart.jsをバンドルを組み、Webサイトに反映させることを目標としていた。
結果、光は大体見えてきた。
まず、webpackを使用してbootstrapのcssをバンドルするには、npmでbootstrapとwebpackをインストールすることはもちろん。
webpackは本来、jsモジュールとpackage.jsonを読みに行くようなので、webpack.config.jsでloader（style-loaderとcss-loader）を設定してやる必要がある。
そしてバンドルを組むのだが、npx webpackを実行する際、webpackはsrc/index.jsを読みに行くので（おそらく「基本的には」ということなのだろう。）、そのツリーを作ってやる必要がある。
そしてこのindex.jsでbootstrapのスタイルシートの機能をインポートする。
npx webpackすると、、、main.jsできた。
自作のwebサイトでこいつ（main.js）を読み込んで、bootstrapで使用されるクラスをつけてやると、、、おお、できた。
後はjsとchart.jsなんだが、おそらくこれについてはwebpack.config.jsでentryとoutputを設定してdest内に作ったjsファイルをいじってやれば何とかなるんじゃないかと思う。（適当）
ただ、とりあえずchart.jsはインストールしたが、どこからバンドル組めばよいのやら、、、
あと3時間くらい、粘ってみようか。
ていうかここに書くくらいならqiitaに書けって感じだけど。
プログラマ多いから、向こうに書くのはちょっと怖いかな。
※この記事に書いている理解はあくまでも私自身のものです。まだまだエアプなので参考にはなさらないでください。（万が一ということもあるので、一応書いておきます。）
参考にしたサイト：
https://ics.media/entry/12140/
https://ics.media/entry/17749/
https://webpack.js.org/
https://getbootstrap.jp/docs/5.0/getting-started/introduction/
日記 2023/03/26_いったん休憩。
やりたいこと
npmでbootstrapをインストールし、バンドルする方法を調べていると、webpackなるものを見つけた。
webpackの利点は
- ウェブのフロントエンド開発では、JavaScriptは処理内容に応じて、ファイルをモジュールとして分けて開発することがほとんどのようで、そのモジュールにはESMやCommonJSなど様々な形式があるが、Webpackはどの形式にも対応していること。
- Webコンテンツの読み込み性能の向上。（バンドルすることにより）
- JSだけでなく、CSSや画像もバンドルできる。
- タスクランナーのGulpやnpm scriptsだけでは、ツールの組み合わせが無限化してしまっていたが、webpackであれば必要なもの一式がすべてそろう。
といったことのようで今後の開発に役立ちそうだし、学ぶことが分散せずにすみそうだから、これを使用してbootstrapなどを導入してみようと思った。
ちなみにこれまで、
ポートフォリオサイト作りたい（HTMLはとりあえずできた。）
→Chart.jsでレーダーチャート埋め込みたい（自分のスキルをグラフでわかりやすく表示してみたい。）
→CDNじゃなく、npmを使ってインストールしたものを使用したい
→package.jsonがわからない。そもそもNode.js学ばなきゃならん
→Node.jsについて調べてみる
→あまり参考になる資料が見当たらない。
といった流れで4日くらい前から学習が滞ってしまっている。（CDN使えば早いが、カスタマイズ性が格段に下がると思うのでそれはしたくないと思っている。）
何とかして抜け出したい。
このブログもなれたらもう少し見やすくしていきたいな（優先順位は低いけど）、、、すること多い、、、
3月25日
日付またいでますがとりあえず現状を。
大
Webアプリケーションが作れるエンジニアになる
会社でプロジェクトに参加して収入を得つつ、自身でフリーランスもするような働き方が理想。
中
ポートフォリオとなる簡単なWebサイト、Webアプリケーションを作る。
小
bootstrap、chart.jsなどのパッケージをnpmで使用できるようにする。
デザインはあまりできてないが、Bootstrapを使ったWebサイトの作成はある程度できている状態。（jsについてはどこかからbootstrapのjsファイルをまとめたフォルダをもってきたが、npmやyarnを使ったほうが今後のためにもなると思ったので、その方向で動いていきたい。）
明日はnpmについて調べる。
文章だけ書いても意味ないので、githubも使えるようにする。
とりあえず初投稿
自身の育成のためにブログ始めてみました。
とりあえず、初記事でも書いておくべきかと思ったので少し文章書いておきます、、
エンジニアを目指している社畜です。とりあえず今は無名ということで。
趣味やら好きなものは興味あればプロフでも見ていただいて、、
このブログを始めた意図は、日々のプログラミング学習の過程を書き記して進み具合を自身で確認すること。ですね。
ので、今は誰かが見て参考になるような記事を書くつもりはありません。
が、私の苦悩と解決の過程を見て何かの参考にしていただけたらとも思ってます。
後は、ブログを通して同じようにプログラミングを勉強している方々と繋がれたらとも思っているので、気軽に声かけていただけると嬉しいです。
不愛想な文章で申し訳ないですが。とりあえずこんなところで。
