記事一覧
Webプログラミングの始め方（１０）
ここでのゴールCSSってなんぞやってのをざっくりと理解する 説明前回作ったCSSについて見ていきます。 #input_container { display: grid; grid-template-areas: …
Webプログラミングの始め方（１３）
ここでのゴールプログラムを追ってみよう、アノテーションを知ろう
説明それではようやくJavaのプログラムを見ていきたいと思います。
まずお約束のmain
javaプログラムはmainメソッドから始まりますね。
これがmainメソッドを実装しているクラスになります。
src/main/java/org/example/Main.java
mainメソッドがいますね
mainメソッドはこの一行です
Webプログラミングの始め方（１２）
ここでのゴールWebプログラムの動きとJavaコードの配置をなんとなく理解する
事前準備githubにソースをアップしているのでまずはダウンロードしてみましょう！
まずは以前ダウンロードしたInteliJを起動します
こいつですね！
起動すると
こんなんでてきますかね？
「Get form VSC」ってやつをポチってください
こんなのが出てきましたら
先程のGithubより
codeを
DockerDesktopを導入
ここでのゴールDockerDesktopを導入してリレーショナルDBを使えるようにする
説明ここではDockerなんぞやとか、どう使うは一旦置いておいて、MySQLを使えるように導入を行っていきます。
上記よりDockerDesktopを入れてみましょう。
ダウンロードを押下します。527MBあるようなので、しばし待つ！
ちなみにMacやLinuxの人は書いてあるとおり違うリンクからダウン
クエリ文を練習してみよう（１）
ここでのゴール結果と同じ物を抽出出来る汎用的なSQL文を作成する
テーブル構成
こんな感じ。データは以下
userテーブル hashId lastName firstName age address mailAddress deleteFlaghaliselnaseilh 山田 太郎 20 港区六本木１－１－１ aaaa@aaaa.com 0lkjlisjegliajseilg 木
Webプログラミングの始め方（１１）
ここでのゴールhtmlとのつながりをざっくり理解
全部つながっているよ
説明htmlに使われているフレームワークとCSSを見てきました。CSSはCSS内部で同じ名前のものをがひも付きされています。
#input_container { display: grid; grid-template-areas: "grid-title-1area grid-title-2are
Webプログラミングの始め方（１０）
ここでのゴールCSSってなんぞやってのをざっくりと理解する
説明前回作ったCSSについて見ていきます。
#input_container { display: grid; grid-template-areas: "grid-title-1area grid-title-2area grid-title-3area" "grid-input-1area grid
Webプログラミングの始め方（９）
ここでのゴールHTMLで使われているthymeleafの調べ方や内容をざっくり理解する
ThymeLeafとはSpringと相性のよいサーバー側Javaのテンプレートエンジンとして利用されている。ざっくりいうと、JavaとHTMLのつなぎを上手いことやってくれる便利なもの位の感覚で良いかと思います。
ソースコード上では「th:」がついている箇所がthymeleaf固有の書き方になっています。H
Webプログラミングの始め方（８）
ここでのゴールhtmlファイルを作成し置き場を理解しよう
説明
src.main.resourcesフォルダの下にedit.html、list.htmlファイルを作成してhtmlファイルを記述していきます
list.htmledit.htmlここにはhtmlは置けない様なので違う場所に配置します。
こちらから参照してくださいGitHub
続けてCSSファイルを作成します。
input_
Webプログラミングの始め方（７）
ここでのゴールWebプログラミングに必要なフレームワークを設定してみよう
説明今回はSpringBootを使ってプログラムを作りたいので、Spring Initilizerを使って追加すべき内容を自動生成していきます。
Spring Initializer
左側のペインはこんな感じで入力します。一部自動入力されるので、上から順番に入れていきましょう。
右側のペインでは依存関係を入れていきま
Webプログラミングの始め方（６）
ここでのゴールIDEを用意して実際に手を動かしてプロジェクトを生成してみよう
説明
InteliJを起動してNewProjectを選択して新しいプロジェクトを作りましょう。自身でプロジェクトを作る際は必要になります。
JavaSDK（javaで開発をする際に必要なJavaのパッケージ群）が赤くなっている人はProjectSDKを押下してOpenJDKをダウンロードしましょう。
左側のペイン
Webプログラミングの始め方（５）
ここでのゴールイメージが大事って理解しよう！作るものをイメージしよう！
作るためには何が必要か理解しよう！
説明今回から実際に手を動かすためにどの様にしていくかを考えて見たいと思います。
以前SpringBootを勉強していた時に使用していた教材を用いて、画面からデータを入力し、そのデータをDBに保存。DBに保存したデータを再度画面に出力する簡易的なWebサービスを作って行きたいと思います。
Spring WebClientについて
目的SpringBootで利用するMVCとWebClientの違いについてざっくり理解する
説明SpringBootで利用するSpring MVCはサーブレットAPIおよび、サーブレットコンテナー専用に構築されています。Spring MVCや従来のサーブレットはブロッキング（同期式）がメインの利用方法として想定されています。
Spring WebFlexはSpring MVCと同じ機能を持つフ
Webプログラミングの始め方（４）
ここでのゴールよく使われる用語の意味、何を指しているかをざっくり覚える。
APIAPI（Application Programmer Interface)の略、他の人が利用する色々なプログラムの使い方を規定している物、クラスだったり、関数だったりします。
ライブラリプログラムの集まり。色々な機能が集まっている、部品がいっぱい集まっているもの。ドライバーセットのイメージ。
フレームワークプログ
Webプログラミングの始め方（３）
前回まではパソコンの構成やプログラムがどの様に動いているかを確認していきました。今回はインターネットでのやり取りについてざっくり説明していきます。
ここでのゴールみなさんが見ているインターネットはどの様な仕組みや構成で動いているかを理解する。用語をなんとなく覚える。
インターネットでWebページを見る時の仕組み
普段SNSやYoutubeなどで動画を見ていると思いますが、基本的には１つのリク
Webプログラミングの始め方（２）
記述したプログラムがどの様に動くか見ていきます。
プログラムの動きプログラムは基本的には上から下に処理が行われます。メインと呼ばれるエントリポイント（スタートする箇所は言語によって決まっています）から始まり（下図の赤丸箇所）赤矢印１つ目を処理、緑矢印を処理、赤矢印２つ目を処理する順番で行います。一見複雑に見えますが、メインの中に「サブルーチンを呼び出す」処理が入っているのでその箇所にサブルーチン
Webプログラミングの始め方（１）
このnoteはWebプログラミングを始めようと思い、言語はprogateやpaiza等で学んだがその後どうして良いか解らない、もう少し基本的な内容を知りたい人向けに１から記述をしていきます。
プログラムの概要についておさらいPCではゲームや動画再生、仕事まで色々な事をこなすことが出来ます。それらは全てプログラムでその様な振る舞いをする様に作られている為、色々なことが出来様になっています。
PC