自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

初心者向け

  • Javaのpackage(パッケージ)の実行方法
    Javaのパッケージの実行方法でちょっと詰まったので、覚書としてまとめておく。 【例】ソースコードとディレクトリ構成 ディレクトリ構成は以下の通り、このとき、myprojectのディレクトリ名は任意とする。 myproject ├── vehicle │ └── Car.java └── main └── CarExec.java Car.javaの内容はこちら // vehicle/Car.java package vehicle; public class Car { private String model; public Car(String model) { this.model = model; } public void start() { System.out.println(model + " is starting."); } public void drive() { System.out.println(model + " is driving."); } } CarExec.javaの内容はこちら // main/CarExec.java package main; import vehicle.Car; public ...
    続きを読む

  • Todoリストのウェブアプリの要件定義書の書き方
    要件定義書の書き方 にて、要件定義書に必要な項目をまとめた。 では、実際に要件定義書を書くとなった場合、具体的にどうかけば良いのか。 本記事では、Todoリストのウェブアプリを作る想定で要件定義書をまとめた。 業務要件 背景 1日のうちにやることが不明瞭で無下に時間を過ごしている やることを紙に書いているが、紙資源がもったいない いつまでに何をやるのか、わかりやすく管理したい 目的 紙ではなくウェブアプリでやることを ...
    続きを読む

  • 【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】
    『Djangoビギナーが40分で掲示板アプリを作る方法 』を終え、DjangoとReactを組み合わせ、SPAを作りたいと思った方向け。 40分はあくまでも目安。 内部構造に関しては、『DjangoとReactを組み合わせる方法論と問題の考察 』に解説がある。 2023年5月3日現在、編集機能の実装を考慮中。近日追記予定。 2024年4月30日追記。モーダルダイアログを使用して編集機能を搭載。 流れ React、 ...
    続きを読む

  • DjangoとReactのTodoアプリ(SPA)を解析する
    DjangoとReactを組み合わせる方法論と問題の考察の続き。 コードを書いてみたので、それを元にわかった事をまとめていく。間違いが有るかもしれないので、ご注意をば。 動作原理と全体像は↑の記事で解説しているので、本記事では割愛。コードの意味をまとめていく。 サーバーサイド(Django) config/setttings.py 編集した箇所のみ掲載 INSTALLED_APPS = [ "todo", 'corsheaders', 'rest_framework', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'corsheaders.middleware.CorsMiddleware', ] CORS_ORIGIN_WHITELIST = [ 'http://localhost:3000' ] アプリ、django-cors- ...
    続きを読む

  • 【CSS】変数を使用する【テーマカラーの統一、スキンの作成などに】
    SCSSなどではなく、素のCSSで変数が使えることに今になって気づいた。 ということで、実際に扱っていく。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Welcome to my portfolio site !!</title> <style> :root{ --base-color: #111111; --theme-color: #00ffcc; --font-color: white; } body { background:var(--base-color); color: var(--font-color); margin:0; } h1 { background: var(--theme-color); } </style> </head> <body> <h1>Welcome to my portfolio site !!</h1> <h2>Profile</h2> <h2>Portfolio</h2> </body> </html> :root{}で宣言した変数 --base-color等がプロパティの値として呼び出すことができる。 予めテーマカラーなどをまとめて冒頭に書いておけば、それを書き換えるだけですぐに対応できる。 この変数 ...
    続きを読む

  • 【React】関数コンポーネント(function App)とクラスコンポーネント(class App extends Component)の違い
    Reactのサンプルコードを読み漁っていると、このような書き方をよく見かける。 function App() { return <h1>HelloWorld</h1>; } import { Component } from "react"; class App extends Component { render() { return <h1>HelloWorld</h1>; } } これは機能的にはいずれも同じ。 関数コンポーネントか、クラスコンポーネントかの違いである。 公式のドキュメントにpropsの扱い方も書かれてある https://ja.reactjs.org/docs/components-and-props.html#function-and-class-components 余談 ちなみに関数はこのようにアロー関数で書くこともあるので、モダンなJavaScriptの書き方を知らないとますますややこしい。 const App = ...
    続きを読む

  • DjangoとReactを組み合わせる方法論と問題の考察
    DjangoとReactを組み合わせることで、画面遷移の全く無いSPA(シングルページアプリケーション)を作ることができる。 もちろん。jQueryのAjaxを使うことでも簡単に実現はできるが、 仮想DOMが使えない 手続き型である などの点から、開発規模が大きくなると、SPAを維持することが難しい。 だからDjangoとReactを組み合わせて効率的にSPAを開発する。 しかし、問題点が多々ある。モダンなや ...
    続きを読む

  • Reactビギナーが15分で掲示板アプリを作る方法
    『モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）』みたいな教科書をなぞってみたけど、よくわからない、実践的な物を作りたいという方向け。 対象読者はReactをインストール済み、モダンなJavaScript構文を理解できる方向けとする。 流れ 以下、流れ プロジェクトを作る(1分) srcディレクトリ内のファイルを全て削除、index.jsとApp.jsxの2 ...
    続きを読む

  • 【React】警告文の『Warning: ReactDOM.render is no longer supported in React 18 』の対処法【createRootを使用する】
    【React】Helloworldの仕組みの解説にて、 import ReactDOM from "react-dom"; const App = () => { return <h1>HelloWorld</h1>; }; ReactDOM.render(<App /> , document.getElementById("root")); などと書いたが、これでは以下のような警告が出てくる。 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 『ReactDOM.render()は今後使われなくなるから、createRootを使用しましょう』という意味。 よって、以下のように書き換えると、この警告は対処できる。 import React from "react"; import ReactDOM from "react-dom/client"; const App = () => { ...
    続きを読む

  • 【React】閉じタグがないHTML要素は/(スラッシュ)をタグの末尾に書く【inputタグ、imgタグ等】
    Reactでは、閉じタグがないHTMLを書く時は、以下のようにする。 export const App = () => { return ( <> <input type="button" value="送信" /> </> ); } このように /がないと、エラーになってしまう点に注意。 export const App = () => { return ( <> <input type="button" value="送信"> </> ); } これはAppを呼び出すときも同様である。<App>としてしまうとエラーになる。 // React import ReactDOM from "react-dom"; import { App } from "./App"; ReactDOM.render(<App /> , document.getElementById("root")); 結論 閉じ ...
    続きを読む