【Angular v19 + SpringBoot 01】コンセプト紹介

【スキル】エンジニア

AngularとSpringBootって何?

たけ坊
たけ坊

AngularはいわゆるフロントエンドでGoogleによってつくられたJavaScriptをもとにした言語だよ。SpringBootはいわゆるバックエンドでJavaをもとにした言語だよ。

フロントエンドはみんなが直接操作する部分ですね。バックエンドはデータを管理したり計算したりするところですね!

たけ坊
たけ坊

早速イメージをつけて取り組んでみよう!

目標物

イメージを付けるための目標物です。
アプリの画面は、タイトル、検索、テーブル部分の3つがあります。

右下の「+」ボタンを押すと

新しい内容を追加できます。
鉛筆マークの編集ボタンを押しても同様の画面が表示されます。

こんな感じのメモ帳のようなアプリを作成します!

コンセプト

とにかくグーグル検索をしながらアプリを作成します。

その心は、検索というの能動的な活動により、ほとんど受動的なAI使用と比べて知識が高まるのではないかと考えいるからです。グーグル検索したウェブサイトは適宜貼り付けていきます。

とにかく、グーグル検索をしながらアプリを作成してく略してググラップを通して一人前のエンジニアを目指します!

しかし、どうしようもないときは少しAIチャットを使用させてもらいます...。

環境構築

VSCodeを使う

コードを書いていくうえでVSCodeというコードエディターを使います。
詳しくはこちらを読んでみてください!

VSCodeとは?開発に役立つ使い方、トレンド記事やtips - Qiita
タグの概要・特徴Visual Studio Code (VS Code) は、Microsoftによって開発された無料のオープンソースなコードエディタです。2015年に最初にリリースされ、クロスプラットフォームで動作するため、Windows...

VSCodeのインストールはコチラを参考

Windows 11 への Visual Studio Code の インストール - Qiita
Visual Studio Code(読み方:ビジュアル スタジオ コード、略称:VSCode(読み方:ブイ エス コード) )は無料で使えるエディタです。VS Code は拡張性が高く、軽快に動作…

下記のサイトはLinuxディストリビューションをインストールするところを教えてくれています。

WSL2 + Ubuntu + VSCodeでの開発環境構築 - Qiita
日常的にはMacを利用していますがWSLを利用する機会がありそうなのでメモ。やりたいことWSL2をインストールUbuntu(20.02 LTS)をインストール(Win側の)VSCodeでUb…

LinuxというのはWindowsやMacといったオープンソース(OS)の一つです。これを使うことで仮想環境が使いやすくなるので、ぜひそこまでやってみてください!

VSCodeの前提設定

下記の画面から左下の><マークを押します

下記の赤丸を選択します。

WSLという文字が出ていればOKです。

ターミナルを開き、

mkdir workspaces(新しいフォルダを作るコマンド)
code ./workspaces(フォルダを新しい画面で開くコマンド)
を実行しましょう。

新しく出てきた画面をピン止めしておきましょう。

今後はこの中にフォルダを作って、いろいろなアプリを開発していきましょう!

これで前提作業は終了です!

次のステップ

次はAngularの基礎の作成に移っていきます。

【Angular v19 + SpringBoot 02】Angularの環境構築
たけ坊ここではAngularの環境構築を進めていくよ!実際に操作する画面を扱うのでワクワクします!たけ坊落ち着いて!まずは環境構築だ!前提①VSCodeがインストールされている②WLSがインストールされている上記の前提がまだの方は下のサイト...
タイトルとURLをコピーしました