よねち/WEBアプリ開発勉強中

CodeVillageというスクールでWebアプリ開発の勉強をしています。このnoteはそのメモとして投稿しています。 簡潔にわかりやすくまとめられるようにしたいと思っています。主にJavaScriptに関することを投稿します。React,Next.js

よねち/WEBアプリ開発勉強中

CodeVillageというスクールでWebアプリ開発の勉強をしています。このnoteはそのメモとして投稿しています。 簡潔にわかりやすくまとめられるようにしたいと思っています。主にJavaScriptに関することを投稿します。React,Next.js

最近の記事

constとletの使い分け

jsのconstとletの理解がちょっと深まった。 constは再代入ができない、letは再代入ができるとだけ理解していたけど、 constは繰り返し処理では宣言されるたびに初期化されて、そのたびに違う値が代入される letは繰り返し処理の場合、初期化されないから値が上書きされて最後の値が出力されるのね… 例文) 書き方変かもですが、メモなのでご容赦を… for (let i = 0; i < 5; i++) { const arr = []; } //都度初期化される

    • 【Next.js】Linkコンポーネント

      aタグなくてもリンク飛ぶようになってる 今まではLinkで囲ってaで囲ってた↓ <Link href="/about"> <a>About</a></Link> でも、今は <Link href="/about">About</Link> でリンクになるらしい。 記述量が減ってよいね!

      • 【Next.js】app Routerについて

        結論、app Routerを使うと新しい仕様のNext.jsになる! npx create-next-app example-app これを入力して、様々なことを「yes / no」で聞いてくる。 その中の「Use App Router (recommended)?」を「yes」にすると 「pages」フォルダがなくなって代わりに「app」フォルダになり、 「index.js」がなくなって「page.js」ができてしまって 今までの情報が全く通用しなくなる。 例えば「a

        • Next.jsを使いたい

          エラー頻発だったけど、なんとか起動できたので共有 *最終的に「app Router」の機能も盛り込んだアプリを作成していたから、エラー頻発だったのかもと思っています! なので、Next.jsでアプリ作るときに、app Routerどうする?みたいな質問されたときは「No」を選ぶとよいです!使うなら「Yes」で! 以下のメモは、間違ってapp Router入れちゃったアプリをyarnを使って起動する流れになります! chatGPTに聞きまくって解決! まず、Ubuntu

          【JavaScript】returnについて

          関数を扱っていると「return」が出てきますが、これを記載する意味が本当に分からなくてJavaScriptの学習が進まなすぎました(笑) でも今さっき「return」を記載する意味がやっと分かったので、忘れないうちにメモします。 「return」とは JavaScriptの関数で出てくる関数の戻り値といろんなところに記載されている言葉です。 いやいや関数の戻り値ってなにww となりますよね、私はなりました。 私がなんとか理解できた例を見ながら関数の戻り値の正体を暴

          【JavaScript】returnについて

          【JavaScript】継承

          おおもとクラスで定義したメソッドの情報をすべて引き継ぐこと class 継承する子クラス名 extends おおもとのクラス名{}

          【JavaScript】メソッドとは

          インスタンスの「動作」を表す (年齢・名前などの「情報」はプロパティ) 例)歩く、計算する など メソッドはクラスの中で定義 「メソッド名() {}」 {}の中に行いたい処理を記述 class Animal { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log("こんにちは"); } info() { cons

          【JavaScript】メソッドとは

          【WEB制作】チェックボックス(HTML)

          <div class="form-group"> <label>知りたい内容</label> <div class="form-check"> <input type="checkbox" name="q1" id="q1_1" value="html" class="form-check-input"> <label for="q1_1" class="form-check-label">HTML</label> </div>

          【WEB制作】チェックボックス(HTML)

          【WEB制作】実体参照(HTML)

          実体参照とは©や®などの「環境依存文字」のこと (©:Copyrightは著作権マーク、®:Registered Trademarkは登録商標) 「環境依存文字」は、使っているPCの環境によって正しく表示されないことがある。 そのため、直接「©」や「®」と記載するのではなく、HTML上には以下で記載する &copy; <!-- © の表示 --!>" <!-- " の表示 --!>& <!-- & の表示 --!>&apos; <!-- ' の表示 --!>< <!

          【WEB制作】実体参照(HTML)

          【HTML/CSS】aタグ アクセシビリティについて

          <a href="リンクURL" target="_self">サンプル</a> aタグについて 「aタグ」とは、アンカーリンクのaをとったタグ リンクを設置でき、クリックすると指定したURLに飛ぶ 「href」はハイパーリンクリファレンスの略 「target」はクリックしたページを同じウィンドウで表示するか新しいウィンドウで表示するか指定できる(省略可:省略時は同じウィンドウで表示) 記述できる種類例 ●_self → 同じウィンドウで開く(通常時) ●_blank

          【HTML/CSS】aタグ アクセシビリティについて