Posts

先日、とあるSNSを見ていたら、JavaScriptの問題が出されていた。 さて、ここで問題 let a = 10 if(true) { let a = 20 console.log(a, 'inside') } console.log(a, 'outside') // Q. What is the output of thie below code? // 1. 20, 'inside' and 20, 'output // 2. 20, 'inside' and 10, 'output // 3. 10, 'inside' and 10, 'output // 4. 10, 'inside' and 20, 'output このコードを実行した結果、どのような結果が求められるでしょう。 予想 面白そうなので実行する前に推測してみる。 まず、If文がtrueなので当然のようにIfの中身が実行される。 ここでLetの仕様の話になるのだが、Letは関数内でスコープされるので、先頭で定義されたLetとIf文の中のLetは違うものだということになる。 結果、If文の中のaは20となり、outsideのaはどこからも影響を受けずに10のままになる。 つまり2が正解になると予想される。 結果 [LOG]: 20, "inside" [LOG]: 10, "outside" 正しいと証明された。...

他人のコードを盗み見ていた時+'0'なるコードを発見しなんだろうと調べてみた。 職人の技は目で盗め ってよく昔気質な職業で聞かれる言葉だけど、有名で最先端の技術がオープンソースで誰でも見れる状態であるプログラミングにも言えるんじゃないかと思っている。 暇さえあれば、Githubで他人のコードを読んでますってかっこいいので言ってみたいけど、噓になるので言えない。 ただ仕事中はできる限り、時間が空いた時にコードをを読むようにしている。 特に自分に関係のないプルリクなんかも追いかけるようにしている。 そこで+'0'なるコードを発見した。 ぱっと見、計算をしているようだと思ったけど、どうやら違いそうなので調べてみた。 単項プラス (+) / Unary plus (+) 簡単に言うとNumberに変換してくれるもの。 つまり+'0'はNumber(0)と同様の扱い。 ただNumber()関数の方がぱっと見でわかりやすいので、あえて 単項演算子を使うメリットはないかもしれない。

なんかよくやるのに、良く忘れるのでメモしておく 2つの配列を比較し一致したものを取り出したい。 特に難しいことはないのでまるっとコードを記載する。 const a:string[] =['a', 'b', 'c', 'd'] const b:string[] =['d', 'e', 'f', 'g'] // 期待値 // const c = string[] = ['d'] const c = a.filter(a =>b.includes(a)) console.log(c) これでcは期待値になる。 どっちをFilterするのか さて、いつもよくわからなくなるのは、どっちを回すべきなのかということ。 例えば今回は両者ともにLengthが4つだからいいけれど、例えば5と10だとどうなるのか。 実際にやってみる const a: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'] const b: string[] = ['b', 'd', 'f', 'h', 'i', 'xx'] const c = a.filter(a => b.includes(a)) console.log(c) と const a: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'] const b: string[] = ['b', 'd', 'f', 'h', 'i', 'xx'] const c = b....

Vite（読み方はヴィート）とは？ 次世代フロントエンドツール 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 瞬時にスタートするサーバ 超高速な HMR 豊富な機能 最適化されたビルド ユニバーサルなプラグイン 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 $ npm create vite@latest MyApp -- --template react-ts というコマンドを叩くだけで、 Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y √ Package name: ... MyApp Scaffolding project in C:\Project\MyApp... Done. Now run: cd MyApp npm install npm run dev 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 上記コマンドでTailwindのインストールと設定ファイルを作成する。...

配列から重複したものを削除する const numberArray = [0, 1, 1, 2, 3, 4, 4, 5]; const set = new Set(numberArray); const newNumberArray = [...set]; console.log(newNumberArray) // [0, 1, 2, 3, 4, 5] ただこれだけ。 これだけだと物足りないので説明をすると、 上記のコードは、配列numberArrayから重複を除いた値を取得し、新しい配列newNumberArrayに格納しています。具体的には、配列numberArrayをSetオブジェクトに変換し、Setオブジェクトのユニークな値を持つ新しい配列を作成しています。 スプレッド演算子(…)を使用して、Setオブジェクトを配列に変換していることに注目してください。これにより、新しい配列newNumberArrayが作成され、それにはnumberArrayのユニークな値が含まれます。 最後に、console.logを使用してnewNumberArrayをコンソールに出力しています。 ってChat GPTが説明してくれました。