自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

初心者向け

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

  • 【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 ...
    続きを読む

  • Reactに必要なJavaScript構文【ES2015(ES6)のテンプレート文字列、アロー関数、スプレッド構文、letとconstなど、脱jQueryにも有効】
    Reactに必要なJavaScript構文をまとめる Reactを使わない場合でも、JavaScriptをシンプル書くヒントがあるので、コードを小さくしたい場合にも有効。 脱jQueryを推進したい人は下記も参考に。 jQueryのコードをJavascriptに書き換える【セレクタ、属性値の参照、イベントなど】 letとconst letとconstはいずれも再宣言が不可能。 let test = "aaa"; //これはエラー //let test = "bbb"; ...
    続きを読む

  • 【Pandas】DataFrameをループして取り出す【列ごと、行ごとに取り出すにはdf.items()とdf.itertuples()でOK】
    よくあるpandasの行ごと、列ごとにデータを取り出す方法。 環境 Python 3.8.10 numpy==1.23.4 pandas==1.5.1 python-dateutil==2.8.2 pytz==2022.5 six==1.16.0 列ごとにループして取り出す .iteritems()は後のバージョンで廃止される可能性があるので、列ごとのループには.items()を使う import pandas as pd data = {} data["month"] = [ str(i)+"月" for i in range(1,13) ] data["page_view"] = [ i*1000 for i in range(12) ] data["earnings"] = [ i*100 for i in range(12) ] index = [ str(i) for i in range(12) ] df = pd.DataFrame( data, index=index ) ## 列ごとにループする for column_name, item in df.items(): print(column_name) print(item) print(item["0"]) print(item["1"]) print(item["2"]) index ...
    続きを読む

  • 【Python】正規表現モジュールreでパターンに一致した文字列を全て取り出す・全て置換する
    正規表現は普段から使っていないと、いざという時にどうなってたっけってなる。 だから備忘録としてまとめておく。 とりわけ、Pythonの正規表現モジュールreのメソッドはいろいろあるので、実用的な物に絞っておく。 全て取り出す 返り値はリスト型で出る。 import re target = "n1o2a3u4t5o-6n7o8li9f0e9.com" #数値を取り出す result = re.findall(r'\d', target) if result: print(result) #取り出した数値を連結する。 print("".join(result)) else: print("マッチなし") 全て置換する import re target = "n1o2a3u4t5o-6n7o8li9f0e9.com" print(target) #数値を置換す ...
    続きを読む

  • 【Django】パスコンバータ(URLに含まれた引数)を使って個別ページを表示させる
    40分Djangoを終えた方向け。 投稿したTopicの編集や削除、Topicに対してコメントの投稿をする時、予め個別ページを作っておく必要がある。 本記事ではパスコンバータを使って個別ページの作り方を解説する パスコンバータの仕組み Djangoにおいて、urls.pyにて定めた<型:引数名>は実行するビューにて呼び出しができるようになっている。 bbs/urls.py まず、bbsアプリ内のurls.pyにて、こ ...
    続きを読む