fuzita

へなちょこプログラマー

fuzita

へなちょこプログラマー

Webプログラミングの始め方（１３）

ここでのゴールプログラムを追ってみよう、アノテーションを知ろう 説明それではようやくJavaのプログラムを見ていきたいと思います。 まずお約束のmain javaプログラムはmainメソッドから始まりますね。 これがmainメソッドを実装しているクラスになります。 src/main/java/org/example/Main.java mainメソッドがいますね mainメソッドはこの一行です。 始めたばっかりの人はおまじない（よくわからんけど、とりあえず書く必要がある

fuzita

    • Webプログラミングの始め方（１２）

      ここでのゴールWebプログラムの動きとJavaコードの配置をなんとなく理解する 事前準備githubにソースをアップしているのでまずはダウンロードしてみましょう！ まずは以前ダウンロードしたInteliJを起動します こいつですね！ 起動すると こんなんでてきますかね？ 「Get　form　VSC」ってやつをポチってください こんなのが出てきましたら 先程のGithubより codeをポチってください こんな画面が出てくるのでhttpsのURLをコピーして（UR

      fuzita

      • DockerDesktopを導入

        ここでのゴールDockerDesktopを導入してリレーショナルDBを使えるようにする 説明ここではDockerなんぞやとか、どう使うは一旦置いておいて、MySQLを使えるように導入を行っていきます。 上記よりDockerDesktopを入れてみましょう。 ダウンロードを押下します。527MBあるようなので、しばし待つ！ ちなみにMacやLinuxの人は書いてあるとおり違うリンクからダウンロードしましょう！ インストーラーをダウンロードしたのでインストールしていきま

        fuzita

        • クエリ文を練習してみよう（１）

          ここでのゴール結果と同じ物を抽出出来る汎用的なSQL文を作成する テーブル構成 こんな感じ。データは以下

          fuzita

          Webプログラミングの始め方（１１）

          ここでのゴールhtmlとのつながりをざっくり理解 全部つながっているよ 説明htmlに使われているフレームワークとCSSを見てきました。CSSはCSS内部で同じ名前のものをがひも付きされています。 #input_container { display: grid; grid-template-areas: "grid-title-1area grid-title-2area grid-title-3area" "grid-input-1a

          fuzita

          Webプログラミングの始め方（１１）

          fuzita

          Webプログラミングの始め方（１０）

          ここでのゴールCSSってなんぞやってのをざっくりと理解する 説明前回作ったCSSについて見ていきます。 #input_container { display: grid; grid-template-areas: "grid-title-1area grid-title-2area grid-title-3area" "grid-input-1area grid-input-2area grid-input-3area" "gr

          fuzita

          Webプログラミングの始め方（１０）

          fuzita

          Webプログラミングの始め方（９）

          ここでのゴールHTMLで使われているthymeleafの調べ方や内容をざっくり理解する ThymeLeafとはSpringと相性のよいサーバー側Javaのテンプレートエンジンとして利用されている。ざっくりいうと、JavaとHTMLのつなぎを上手いことやってくれる便利なもの位の感覚で良いかと思います。 ソースコード上では「th:」がついている箇所がthymeleaf固有の書き方になっています。HTMLはある程度勉強している前提で、thymeleaf固有の箇所を見ていきましょ

          fuzita

          Webプログラミングの始め方（９）

          fuzita

          Webプログラミングの始め方（８）

          ここでのゴールhtmlファイルを作成し置き場を理解しよう 説明 src.main.resourcesフォルダの下にedit.html、list.htmlファイルを作成してhtmlファイルを記述していきます list.htmledit.htmlここにはhtmlは置けない様なので違う場所に配置します。 こちらから参照してくださいGitHub 続けてCSSファイルを作成します。 input_container.css#input_container { displa

          fuzita

          Webプログラミングの始め方（８）

          fuzita

          Webプログラミングの始め方（７）

          ここでのゴールWebプログラミングに必要なフレームワークを設定してみよう 説明今回はSpringBootを使ってプログラムを作りたいので、Spring Initilizerを使って追加すべき内容を自動生成していきます。 Spring Initializer 左側のペインはこんな感じで入力します。一部自動入力されるので、上から順番に入れていきましょう。 右側のペインでは依存関係を入れていきますので、ADD DEPENDENCIESを押下して必要なものを追加していきます

          fuzita

          Webプログラミングの始め方（７）

          fuzita

          Webプログラミングの始め方（６）

          ここでのゴールIDEを用意して実際に手を動かしてプロジェクトを生成してみよう 説明 InteliJを起動してNewProjectを選択して新しいプロジェクトを作りましょう。自身でプロジェクトを作る際は必要になります。 JavaSDK（javaで開発をする際に必要なJavaのパッケージ群）が赤くなっている人はProjectSDKを押下してOpenJDKをダウンロードしましょう。 左側のペインでGradleを選択し（今回はGradleを使ってパッケージを管理します）右のペ

          fuzita

          Webプログラミングの始め方（６）

          fuzita

          Webプログラミングの始め方（５）

          ここでのゴールイメージが大事って理解しよう！作るものをイメージしよう！ 作るためには何が必要か理解しよう！ 説明今回から実際に手を動かすためにどの様にしていくかを考えて見たいと思います。 以前SpringBootを勉強していた時に使用していた教材を用いて、画面からデータを入力し、そのデータをDBに保存。DBに保存したデータを再度画面に出力する簡易的なWebサービスを作って行きたいと思います。 こんなイメージ 何をするものかどんな画面があるか、画面の役割などを考えてい

          fuzita

          Webプログラミングの始め方（５）

          fuzita

          Spring　WebClientについて

          目的SpringBootで利用するMVCとWebClientの違いについてざっくり理解する 説明SpringBootで利用するSpring MVCはサーブレットAPIおよび、サーブレットコンテナー専用に構築されています。Spring MVCや従来のサーブレットはブロッキング（同期式）がメインの利用方法として想定されています。 Spring WebFlexはSpring MVCと同じ機能を持つフレームワークで、Webサービスを構築するためのフレームワークとなっています。Sp

          fuzita

          Spring　WebClientについて

          fuzita

          Webプログラミングの始め方（４）

          ここでのゴールよく使われる用語の意味、何を指しているかをざっくり覚える。 APIAPI（Application Programmer Interface)の略、他の人が利用する色々なプログラムの使い方を規定している物、クラスだったり、関数だったりします。 ライブラリプログラムの集まり。色々な機能が集まっている、部品がいっぱい集まっているもの。ドライバーセットのイメージ。 フレームワークプログラムの集まり。一つのアプリケーションを作る際に必ず行う様な動作を集約して独自に実

          fuzita

          Webプログラミングの始め方（４）

          fuzita

          Webプログラミングの始め方（３）

          前回まではパソコンの構成やプログラムがどの様に動いているかを確認していきました。今回はインターネットでのやり取りについてざっくり説明していきます。 ここでのゴールみなさんが見ているインターネットはどの様な仕組みや構成で動いているかを理解する。用語をなんとなく覚える。 インターネットでWebページを見る時の仕組み 普段SNSやYoutubeなどで動画を見ていると思いますが、基本的には１つのリクエスト（「ちょうだい」という要求）に対して１つのレスポンス（「どうぞ」という応答

          fuzita

          Webプログラミングの始め方（３）

          fuzita

          Webプログラミングの始め方（２）

          記述したプログラムがどの様に動くか見ていきます。 プログラムの動きプログラムは基本的には上から下に処理が行われます。メインと呼ばれるエントリポイント（スタートする箇所は言語によって決まっています）から始まり（下図の赤丸箇所）赤矢印１つ目を処理、緑矢印を処理、赤矢印２つ目を処理する順番で行います。一見複雑に見えますが、メインの中に「サブルーチンを呼び出す」処理が入っているのでその箇所にサブルーチンの処理が記述されると考えると解り易いと思います。 機械語変換方法の違い「人がわ

          fuzita

          Webプログラミングの始め方（２）

          fuzita

          Webプログラミングの始め方（１）

          このnoteはWebプログラミングを始めようと思い、言語はprogateやpaiza等で学んだがその後どうして良いか解らない、もう少し基本的な内容を知りたい人向けに１から記述をしていきます。 プログラムの概要についておさらいPCではゲームや動画再生、仕事まで色々な事をこなすことが出来ます。それらは全てプログラムでその様な振る舞いをする様に作られている為、色々なことが出来様になっています。 PCはCPU、メモリ、SSD（HDD）、InputDevice（キーボード、マウス）

          fuzita

          Webプログラミングの始め方（１）

          fuzita