自動化無しに生活無し

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

初心者向け

  • 【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")); 結論 閉じ ...
    続きを読む

  • 【Django】OneToOneFieldでつながっているデータの取得方法【モデル名を小文字にした属性名で取得できる】
    OneToOneFieldを使う機会は限定されているので、備忘録として。 タイトルから既に(？)な状態かも知れないが、まずは、下記モデルを見てもらいたい。 # 店舗データテーブル class StoreData(models.Model): class Meta: unique_together = ("store","date") store = models.ForeignKey(Store,verbose_name="店舗",on_delete=models.CASCADE) date = models.DateField(verbose_n ...
    続きを読む

  • Javascriptで自由にHTMLを操作する、DOMについて
    DOMとは？ DOMとはDocumentObjectModelの略で、HTMLドキュメントを自由に操作する仕組みのことを言う。 DOMによりWEBページとプログラミング言語をつなぐことができる。 参照元: https://eng-entrance.com/what-is-dom 早い話、JavaScriptはDOMを使うことで、HTMLを自由に操作することができるというわけだ。 特定の要素の内容を書き換えてみよう <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <div id="test&quo ...
    続きを読む

  • 【Docker】公式チュートリアルを起動して使い方を学ぶ【docker run --name tutorial -d -p 80:80 docker/getting-started】
    dockerをインストールしたものの、使う機会に恵まれない、そもそも運用難易度高すぎで未だにVirtualBoxを使っている。 そういう状況なので、docker公式のチュートリアルを動かすことにした。 公式のチュートリアルを起動する 以下コマンドでOK docker run --name tutorial -d -p 80:80 docker/getting-started コマンドの意味は以下の通り docker [作成+実行] [コンテナ名はtutorialとする] [バックエンドで起動] [ポートは80番(PC側で80番へア ...
    続きを読む

  • Ubuntuにreactをインストールして動作確認する
    Ubuntu20.04にインストールしている npmのインストール sudo apt install npm reactのインストール sudo npm -g install create-react-app バージョンの確認 create-react-app --version プロジェクトを作り、開発用サーバーを起動する create-react-app myproject プロジェクトを作る。 cd myproject npm start 開発用サーバーを起動すると自動的にブラウザが立ち上がる。127.0.0.1:3000が表示される。 src/App.jsを下記のように修正するとHelloWorldが表示される。 import React from 'react'; const App = () => { return ...
    続きを読む