プログラミング

特にタイトル以上に説明することもないので、進めていく。 Viteを使用しVueをインストールする 下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。 $ npm create vite@latest Need to install the following packages: create-vite@3.1.0 Ok to proceed? (y) √ Project name: ... VueProjectBase √ Package name: ... vue-project-base √ Select a framework: » Vue √ Select a variant: » TypeScript Scaffolding project in C:\Users\username\Desktop\vite\VueProjectBase... Done. Now run: cd VueProjectBase npm install npm run dev 今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。 で、上記のように指示に従いlocal serverを立ち上げることができればVueのインストールは完了。 nodeのバージョンを指定する nodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。 volta pin node volta pin npm 上記を実行するとpackage.jsonに、 "volta": { "node": "16....

まずはAPIで色々配列を取得しました。 そのuuidを使って取得したいAPIがあるので、foreachで回してデータを加工しようと思ったがうまくいきませんでした。 という事象にひどく悩まされた。 例えば、こんなコードを実行してみた。 const array = [1, 2, 3, 4, 5] array.forEach(el => { window.setTimeout(() => { console.log(el) }, 1000) }); console.log('forEach完了') // forEach完了 // 1 // 2 // 3 // 4 // 5 上記のコードを実行すると、コメントアウトのようになる。 いや、違う違う、4が出た後に「forEach完了」が欲しい。 じゃあ、どうするか？ のように実行することでコメントアウトのように、つまり臨んだ結果になった。 const array_2 = [1, 2, 3, 4, 5] var Promises = [] array_2.forEach(el => { Promises.push( new Promise((resolve) => { window.setTimeout(() => { console.log(el) resolve() }, 1000) }) ) }); console.log('forEach完了！') Promise....

Good Bye 紙の本、そして紙の本しか出さない作家さん 読書は専らKindle Paperwhiteで読む。 「ひと昔前は本は紙でしょう、電子書籍？　いやいや風情も雰囲気もない。」 なんて思っていたが、Kindle Paperwhiteを買ったらもう、紙に戻れなくなった。 リンク 結果的に電子書籍を出していない作家は、私の中で読む術を失った。 なにを思って電子書籍版を出さないのかわからないが、出さないことで少なくとも私のような人種からのリーチを失っていると作家には知ってほしいし、読みたいので電子書籍版を出して欲しい。 とは言え、ただただ、電子書籍版を出せばいいというわけでもない。 Kindle Paperwhiteで読みたいのである。 で、やっとタイトルに繋がるのと同時に少し脱線する。 エンジニアのバイブル リーダーブルコード リーダブルコードという本を知っているだろうか。 リンク エンジニアであれば一度は聞いたことがあるかもしれない。 それはそうで、なにせエンジニアのバイブルと言われているくらいである。 美しいコードを見ると感動する。優れたコードは見た瞬間に何をしているかが伝わってくる。そういうコードは使うのが楽しいし、自分のコードもそうあるべきだと思わせてくれる。本書の目的は、君のコードを良くすることだ」 初版は2012年6月23日でもう10年前の発行である。 であるのだが、今でも根強い人気を誇っている。 私もずっと読もうと思っていたが、なんとなく先延ばしにしてきた。 そこで、このゴールデンウイークに重い腰を上げて読んで見ようと思い立った。 kindle版がない……? がしかし、リーダブルコードは電子書籍版が存在するのが、kindle版が存在しないという稀有な例。 そこでリーダブルコードをKindle Paperwhiteで読む方法を調べてみた。 エンジニア味方 オライリーの本をKindle Paperwhiteで読む 公式オンラインショップで検索 まずはオライリー公式ホームページでリーダブルコードを検索する。 O’Reilly Japan - リーダブルコード 公式オンラインショップで購入 次に、Ebook Storeで電子版を購入:価格2,112円をカートに入れ購入手続きに進む。 その後、購入に際してPayPalのアカウントが必要になるので手順に従いアカウント登録をする必要がある。 こういうのが面倒でkindleストアで一元管理しているのに…… 登録購入ができると、オライリーの本棚に購入した本（今回であればリーダブルコード）が表示される。 O’Reilly Japan Ebook Store - 購入済みの商品 インストール＆kindleにインポート 購入した本が表示されていることを確認できたら、ePubをインストールする。 で、調べた情報によると、ePub版はkindleで対応できないとのこと。 kindleで対応しているのはmobiファイルということで、ePubをmobiに変換する必要がある。 今回はオンラインツールを使用し、mobiファイルに変更をした。 できないようであればPDFファイルでも問題ないので、購入した本のPDF版をインストールする。 やっとKindle Paperwhiteの出番である。 まずはパソコンとKindle Paperwhiteを接続する。 接続が完了するとkindleのフォルダが表示されると思うので、D:\documentsにインストールしたmobiファイル or PDFファイルを置く。 その際、mobiファイルは書籍情報が含まれているので、自動でタイトル補完をしてくれるがPDF版の場合は、ファイル名をタイトルにしたほうがわかりやすい。 これでKindle Paperwhiteで読書する準備が完了した。 実読 さて、実読。...

特定の倍数に数値をまとめたい。 なにをいっているのだろうと思われたかもしれないので、実例をどうぞ。 実例 ユーザーが数値を入れるインプットエリアがあるとする。 ユーザーは任意の数字を入れることができる。 その結果を10の倍数にまとめたい。 つまり、24とユーザーが記入した場合は「20」が期待値になる。 ということがやりたい。 実装方法 じゃ、どうするのか。 まずは実装済みのものをどうぞ↓（うまくコンパイルできない時があるので、下の更新ボタンをクリックしてください） inputエリアに数字を入れていくと、5で10、14で10、15で20になっていることが確認できる。 つまり24と入力すれば「20」が表示される、期待値通り。 特定の倍数に数値をまとめるコード const changeNumber = () => { const unit = 10; const el = Math.round(num.value); result.value = Math.round(el / unit) * unit; }; inputエリアのvalueが更新された時、 まずはvalueを丸める。 つまり、2は0、5は10になる。 その値を最初に定義した値（丸めたい倍数）で計算する。 実際に24が入力された時、 24を丸めて20にする。 その値を10で割って10でかける。 20 / 10 * 10 = 20 結果20になる。 なんかこうやってみるともっと簡単な方法がある？ まあ、期待値は取り出せたので、良しとする。 理系の人、ぜひ教えてください。

コピペは決して悪じゃない エンジニアはとにかくコピペをするべきである、って新卒で入ったウェブ制作会社で言われたのは、もう6年も前。 少しややこしい言い方をしたが、ロジックも含めてコピペをするわけじゃなくて、単語とかをコピペしろ、っていう意味で言われた。 確かに、デバック中にスペルの抜けで動いてないことを知った時、エンジニアは皆、般若のような顔になる。 つまりとても理にかなっている。 理にかなっているので、実践してきた。 例えば、event 時に実行する関数は、 対象の要素.addEventListener(種類, function() { // 処理を記述 }, false); というコードをクリップボードに保存して使う。 これならスペルミスも生まれないし、時短にもなる。 が、がしかし、である。 かっこいいエンジニアになりたい 最近、まあ、6年近くウェブに携わってきたので、後輩に教えることが多くなってきた。 「わかりません」と呼ばれ、後輩の机に移動する。 「あー、これね、こんなの簡単よ」ってどや顔し、いざパソコンと向き合った時、わかる、わかるのだが、スペルがわからない。 「ごめんだけど、アドイベントリスナーってググってくれない？」 「え、あどいべんとりすなー？」って後輩に聞き返される。 なんて、恥ずかしい思いはしたくない。 そう思うならコピペを辞めるのも手じゃなかろうか。 私はコピペを辞めました。 以来、だれのパソコンでもすらすらと日本語を書くように、というと言い過ぎだが、コードを書けるようになった。 前述したが、コピペは全く悪じゃない。 コピペエンジニアと言われている人たちがいるが、あれはロジックを理解せずに使っているエンジニアで、スペルミスを防ぐためにコピペをしているのはコピペエンジニアではない。 ただ後輩の前でかっこつけたいのであれば、なるべく手を動かし書くべきだと思う。 結果、たまに般若のような顔を後輩に見られることになるかもしれないが。