自動化無しに生活無し

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

Posts

  • 【Vim】ReactでHTMLをコーディングするときだけ改行でインデントしてほしい
    ReactをVimでコーディングしているとき、不自由だと感じることが多々ある。 その1つが、.jsxファイルのHTML部をコーディングしているとき、改行でインデントしてくれないこと。 例えば、下記のコードのHTMLで改行をしても、HTML形式でインデントをしてくれない。 return ( <> <textarea id="textarea" className="form-control"></textarea> <input onClick={ addTopic } type="button" value="送信" /> {topics.map( (topic,i) => ( <div className="border" key={i}> <div> { topic } </div> <div className="text-right"> <input onClick={ deleteTopic } className="btn btn-danger" type="button" value="削除 ...
    続きを読む

  • GitHubからクローンしたReactを動作させる方法
    Reactのgitignoreには、node_modulesが含まれている。 そのため、クローンしたReactのプロジェクトを動かすには、 npm installを前もって実行しておく必要がある。 git clone https://github.com/seiya0723/startup-react cd startup-react npm install npm start ...

  • DjangoとReactのSPAウェブアプリで、使用することができない(と思われる)Djangoの技術
    Djangoで開発を進めていき、途中でReactのSPAを考える場合。 一部のDjangoの技術が使用できない。 本記事ではDjango+ReactのSPAを作る際、使用できない(もしくは使用できないと思われる)Djangoの技術をまとめる。 Django Template Language 当然だが、Reactがレンダリングを行うため、DjangoTemplateLanguageは使えなくなる。 ifやforはJavaScriptに含まれるため問 ...
    続きを読む

  • UbuntuのBash(gnome-terminal)で新しいタブを開き、新しいタブでコマンドを実行する
    • 作成日時:
    • 最終更新日時:
    • Categories: インフラ
    • Tags: ubuntu bash tips
    最近のlaravelでは、php artisan serveだけでなくnpm run devも実行しておく必要がある。 参考: 【Laravel】GitHubからダウンロードしたプロジェクトを動作させるには？ 故に、ターミナルのタブを開いて双方のコマンドを実行しておく必要がある。 しかし、これを手動でやっていくのはちょっとめんどくさい。 そこで、ワンライナーで新しいタブを開き、開いた新しいタブでコマンドを実行してもらう。 新しいタブ ...
    続きを読む

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

  • 【Django】JavaScriptのfetchAPIでリクエストを送る
    XMLHttpRequest(XHR)はAjaxの初期のAPIでコードが長くて複雑。jQuery.ajaxは昨今のjQuery離れが深刻。 では、何でリクエスト送信機能を実装すれば良いか。 FetchAPIである。 軽量で簡潔に書ける上に、CORSに対応しており、なおかつインストールは不要。 本記事では、DjangoでFetchAPIを使ってPOSTメソッドのリクエストを送信してみた。 テンプレート {% load static %} ...
    続きを読む

  • 【Django】管理サイトで1対多(ForeignKey)、多対多(ManyToManyField)のフォームを扱いやすくする【admin】
    1対多、多対多を管理サイトで扱うには、デフォルトのフォームではとても使いづらい。 そこで、更に管理サイトをカスタムして、フォームを扱いやすくさせる。 モデルは下記記事から引用し、一部編集した。 【Django】ManyToManyFieldで検索をする方法、追加・削除を行う方法【多対多はクエリビルダの検索は通用しない】 【Django】デフォルトの認証機能を網羅し、カスタムユーザーモデルとメール認証も実装 ...
    続きを読む

  • Javascriptでクリックした時、要素内文字列をクリップボードにコピーさせる
    よく見かける、JavaScriptでクリックした時、コピーするアレを再現する。 ソースコード <!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> <style> pre { background:black; padding:0.5rem; overflow:auto; position:relative; } pre code { color:#0fc; } .copy_button{ user-select: none; display:inline-block; position:absolute; top:0; right:0; color:white; background:black; cursor:pointer; margin:0.25rem 0.75rem; padding:0.25rem 0.5rem; border:solid 0.1rem white; border-radius:0.5rem; transition:0.2s; } .copy_button:hover{ background:#0fc; color:black; } .copy_button:active{ background:black; color:white; } </style> </head> <body> <pre><code>console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");</code></pre> <script> const pre_elems = document.querySelectorAll("pre"); // コピー用のボタンを配置する。 for (let pre_elem of pre_elems ){ pre_elem.innerHTML += '<span class="copy_button">Copy</span>'; } const copy_buttons = document.querySelectorAll(".copy_button"); for (let copy_button of copy_buttons){ copy_button.addEventListener("click" , (event) => { const code = event.currentTarget.closest("pre").querySelector("code"); if (navigator.clipboard && code){ navigator.clipboard.writeText( code.textContent ); } }); } </script> </body> </html> 結論 ウェブアプリでコピーして別のウェブアプリのフォームにペーストしたい ...
    続きを読む

  • 【シェルスクリプト】git clone した後、クローンしたディレクトリへ移動する
    git cloneコマンドを実行してクローンした後、cdコマンドでディレクトリ移動するのがめんどくさい。 そこで、git clone とcd コマンドを1つにまとめたシェルスクリプトを用意した。 #! /bin/bash # $1 https://github.com/seiya0723/django-auth/tree/main/accounts echo $1 # ここでtree以降は切り捨てる。 repo=$(echo "$1" | sed s/tree.*//g) # 移動対象のディレクトリを取り出す。 destination=$(echo ./"$1" | sed "s/tree\/[[:alnum:]_-]*\///g" | sed "s/https:\/\/github.com\/[[:alnum:]_-]*\///g") git clone $repo cd $destination 例えば、特定のディレクトリ(tree/main/accounts)を指定している場合、そのディレクトリへ移動 ...
    続きを読む

  • 【Django】逆参照のrelated_nameを使用して1側から多側のデータを取り出す【models.ForeignKey()】
    related_nameを指定せずに逆参照をする 逆参照を使うことで、1側から多側のデータを取り出すことができる。 『Djangoで1対多のリレーションを構築する【カテゴリ指定、コメントの返信などに】【ForeignKey】』から引用した下記モデル。 class Category(models.Model): name = models.CharField(verbose_name="カテゴリ名",max_length=20) def __str__(self): return self.name class Topic(models.Model): category = mod ...
    続きを読む