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

CodeVillageというスクールでWebアプリ開発の勉強をしています。このnote…

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

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

記事一覧

constとletの使い分け

jsのconstとletの理解がちょっと深まった。 constは再代入ができない、letは再代入ができるとだけ理解していたけど、 constは繰り返し処理では宣言されるたびに初期化さ…

【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 R…

Next.jsを使いたい

エラー頻発だったけど、なんとか起動できたので共有 *最終的に「app Router」の機能も盛り込んだアプリを作成していたから、エラー頻発だったのかもと思っています! なの…

【JavaScript】returnについて

関数を扱っていると「return」が出てきますが、これを記載する意味が本当に分からなくてJavaScriptの学習が進まなすぎました(笑) でも今さっき「return」を記載する意味が…

【JavaScript】継承

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

【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-…

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

実体参照とは©や®などの「環境依存文字」のこと (©:Copyrightは著作権マーク、®:Registered Trademarkは登録商標) 「環境依存文字」は、使っているPCの環境によって…

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

<a href="リンクURL" target="_self">サンプル</a> aタグについて 「aタグ」とは、アンカーリンクのaをとったタグ リンクを設置でき、クリックすると指定したURLに飛ぶ …

constとletの使い分け

jsのconstとletの理解がちょっと深まった。

constは再代入ができない、letは再代入ができるとだけ理解していたけど、

constは繰り返し処理では宣言されるたびに初期化されて、そのたびに違う値が代入される
letは繰り返し処理の場合、初期化されないから値が上書きされて最後の値が出力されるのね…

例文) 書き方変かもですが、メモなのでご容赦を…
for (let i = 0; i

もっとみる

【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」がなくなって「p

もっとみる

Next.jsを使いたい

エラー頻発だったけど、なんとか起動できたので共有

*最終的に「app Router」の機能も盛り込んだアプリを作成していたから、エラー頻発だったのかもと思っています!
なので、Next.jsでアプリ作るときに、app Routerどうする?みたいな質問されたときは「No」を選ぶとよいです!使うなら「Yes」で!

以下のメモは、間違ってapp Router入れちゃったアプリをyarnを使って起動

もっとみる

【JavaScript】returnについて

関数を扱っていると「return」が出てきますが、これを記載する意味が本当に分からなくてJavaScriptの学習が進まなすぎました(笑)

でも今さっき「return」を記載する意味がやっと分かったので、忘れないうちにメモします。

「return」とは

JavaScriptの関数で出てくる関数の戻り値といろんなところに記載されている言葉です。

いやいや関数の戻り値ってなにww
となりますよ

もっとみる

【JavaScript】継承

おおもとクラスで定義したメソッドの情報をすべて引き継ぐこと

class 継承する子クラス名 extends おおもとのクラス名{}

【JavaScript】メソッドとは

インスタンスの「動作」を表す
(年齢・名前などの「情報」はプロパティ)

例)歩く、計算する など

メソッドはクラスの中で定義

「メソッド名() {}」

{}の中に行いたい処理を記述

class Animal { constructor(name, age) { this.name = name; this.age = age; } greet() { cons

もっとみる

【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="

もっとみる

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

実体参照とは©や®などの「環境依存文字」のこと

(©:Copyrightは著作権マーク、®:Registered Trademarkは登録商標)
「環境依存文字」は、使っているPCの環境によって正しく表示されないことがある。

そのため、直接「©」や「®」と記載するのではなく、HTML上には以下で記載する

&copy; <!-- © の表示 --!>" <!-- " の表示 --!>&amp;

もっとみる

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

<a href="リンクURL" target="_self">サンプル</a>

aタグについて

「aタグ」とは、アンカーリンクのaをとったタグ
リンクを設置でき、クリックすると指定したURLに飛ぶ

「href」はハイパーリンクリファレンスの略

「target」はクリックしたページを同じウィンドウで表示するか新しいウィンドウで表示するか指定できる(省略可:省略時は同じウィンドウで表示)

もっとみる