はじめに コンポーネントの構成について 準備 Headerの実装 Itemのスタイル実装 Itemの実装 Footerの実装（チェックボックスに状態を持たせる） Footerのチェック機能 Footerの削除機能 まとめ 参考文献 はじめに こんにちは、ｉｉｍｏｎ新卒エンジニアの「ばんり」です。 本記事はアドベントカレンダー11日目の記事になります！ 最近業務でReactを使うことが多くなり、Reactをお勉強中です！今回は私がReactを勉強する際、最初に作ったToDoリストについて紹介します。 今回はReact 16.8 で追加された機能Hooksを使っています！ 完成イメージ： コンポーネントの構成について まず、最初にコンポーネントの構成について考えてみましょ。 コンポーネントの分け方は人それぞれですが、今回私は下記のイメージのようにコンポーネントを分けて実装しました！ 各コンポー
1: 名無し募集中。。。 2021/10/18(月) 11:21:44.87 0 ずん飯尾似の男から「月20万円の支援」 男性は40代後半のエネルギー系の大企業に勤めるサラリーマン。青山さんから事情を聴くと食事に誘ってくれて、さらにお小遣いまで渡してくれたそうです。お笑いコンビ「ずん」の飯尾和樹さんに似ている“癒やし系おじさん”タイプだったため、青山さんはリラックスして、次回の約束に応じたそうです。 「男性はバツイチで独身。2度目に会った時に、長期的な契約をもちかけられました。条件は月2回で20万円でした。高額のようですが、朝起きたら『おはよう』、帰宅すると『おかえりなさい』、就寝前は『おやすみなさい』と、毎日LINEで連絡することも含まれていました」 正直とても面倒な約束事のように見えますが、背に腹は代えられないため我慢したそうです。当時、青山さんにはなんと婚約者もいたとか。 「彼と結婚
1: 風吹けば名無し 2021/10/19(火) 11:47:19.43 ID:uM+SDtR70 ヤバいでしょ 引用元: ・【画像】飲み会で遠くの男を刈り取るエチエチ女ｗｙｗｙｗｙｗｙｙっｗｙｗｙｗｙｗｙ 続きを読む
Cloudflare Workersはサーバレスエッジコンピューティングサービスです。そしてデータの永続的保存オプションとして以下が用意されています。 KV : key-value型永続ストレージ R2 : AWS S3互換ストレージ Durable Objects : オブジェクトストレージ D1 : エッジで動作するSQL Liteデータベース(2023/02/05 時点でアルファ版です） Queues : ジョブのキューイング この記事ではKVを使ってJavaScriptで簡単なTodoを作ってみます。記事前半分の土台となっているのはこのブログですが、英語であり、また手順として少し初心者にハードルが高く、Cloudflareのバージョンアップにより画面イメージも変更となっているため再構成しています。 後半部分は少し難易度があがりますが、追加シナリオです。ぜひ挑戦してみてください。 な
ducksというデザインパターンを使用して簡単なTodoアプリを作成しようと思います。 機能としては以下になります。 タスクを追加できる タスクが終わったかどうかのラベルをつけることができる 環境構築 今回は自分みたいにブログの更新に時間がない方などが手軽にちょちょいと構築できるツールでcreate-react-appを使用します。 以下のコマンドを実行します。 create-react-app ducks_todo ducksについて ducksの公式サイトには以下のようなルールが記載してあります。 reducerはexport deaultをしなければならない action creatorは関数してexportしなければならない actionは定数で定義する などが挙げられます。 早速実際にアプリを作成していきましょう。 まずプロジェクトフォルダに移動してください。 cd ducks_
toDoListを作成し、達成したタスクに応じてポイントを貯めて、そのポイントに応じて 自分自身のアバター装備や家具を市場・アイテムショップから購入し、楽しめる、PythonでのPGMを作成してみました gitHubURL:https://github.com/NanjoMiyako/toDoListWithImage 実行PGM:toDoListWithImage3.py 実行画面例 使い方 当PGMのアイテムと家具のデータは予め市場用(/アイテム用)ディレクトリを用意しておき、 その場所のURLを指定してからジャンプして、そこからタスクをこなして獲得したポイントから 家具やアイテムを購入し、そこから、またポイントを利用して獲得したアイテムの家具や アイテムを設置していくようになっています 各ファイルの書式 各ファイルはCSVまたは=記号で区切られた文字列で保存しています。 各ファイルの
How to build the most beautiful Todolist with React Native and Socket.io 🎉
Nevo David for novu Posted on Nov 23, 2022 • Originally published at novu.co What is this article about? Todolist is a simple task list where you mark everything you need to do and the status of it "Finished / Not Finished". In this article, you'll learn how to build a to-do list application that allows you to sign in, create and delete a to-do, and add comments to each to-do using React Native an
Protobuf と gRPC を使えば、REST API の GET、PUT やヘッダーなどを気にする必要はありません、そしてgRPCフレームワークによって生成されたStubsにはデータモデル用の記述が全部書いてるので、直接引用するだけで使えます。 開発環境とツール Protoc v3.12.4 -- Protobuf コンパイラー Stubs を生成する為に使ます。 Node.js v14.2.0 -- バックエンドとVueのビルドに使います。 Docker v19.03.12 -- envoyを動かす為に使ます。 envoy v1.14 -- 普通WebからのHTTP/1.1をHTTP/2に変換する為のプロキシ。 Vue.js 3.0.0-rc.5 -- 今回は Vue 3 を使ってフロントエンドを作成します。 Docker Compose v1.26.2 -- 全部をDocker化
シンプルなToDoListのDBをローカル→Azure SQL Databaseに変更してみる - Qiita
はじめに Azure SQL Databaseを作成して、 シンプルなToDoList をCRUD処理させてみた。 Azure SQL Databaseの作成 Azure PortalからSQL databasesを選択。 先にSQL databaseよりもSQL serverの作成を求められます。 名称がややこしいが別物みたいです。 ↓認証方法はSQLServer認証にします。 DB名はDB-ToDoListとしました。 ↓SQL database(ローカルのSQLServerのデータベースに相当)を作成Serverのスペックは選択可能な最小のBasicにしました。 SQL databaseができたら、ローカルのSSMSから接続してみる。 Server name：SQL database serverを作成したときにつけたServer名 Authentication：SQLServer認
前提知識 関数が書ける、if文、switch文、HTMLを理解している。 以上を踏まえた上でのチュートリアルだと思ってください。 尚、この記事でのチュートリアルはフロントのみとなります。 リストをローカルやサーバーに記憶するなどの実用的機能は、 別にNode.jsなどのサーバーサイドやapiの知識が必要になります。 必要なメソッドの知識 document ウェブページそのものを表し、ページ内のDOMにアクセスするための入口を提供します。 getElementById HTMLから特定のIDを持つ要素を取得。該当する要素がない場合は**null**を返す。 createElement 指定されたタグ名のHTML要素を新しく生成。新しい要素はDOMには追加されない。 追加をしたい場合は**appendChild**や**instertBefore**のようなメッソドを使用します。 append
(JP) 8月。といえば旅行！ 今年は青森，台湾に行く計画を立てた！ しかし、9月にさらに一大イベントがある。引越しだ。 私は同じところにずっといるのが嫌な性で、賃貸更新のタイミングで毎回引越ししている。 今年も田町から芝浦あたりに引っ越そうと思う！（近場に限る） そうなると8月月初に飛行機予約，宿予約，賃貸物件選定と、やることが盛りだくさん。 何からやればいいのかわからん、、 そこでtodoリストを作りたいと思ったのだ！ 作ってみたけど、結構手こずった。 コードはかなり煩雑になってしまったが、綺麗にする気力がない、、 今週か来週にはコード載せたいと思うので、誰かに手直しして欲しい、、 ちなみに、調べまくってドラッグで項目を入れ替えることも可能にした。 (CN) 最近很繁忙，要幹的事情好多，，， 8月份計劃去旅遊，9月要搬家等等 想整理一下該做的事情 於是做了一個只屬於自己的完全origi
概要 Node.jsのフレームワークであるLoopBackのTodoListを作成するチュートリアルを実施する。 参考：https://loopback.io/doc/en/lb4/Getting-started.html#create-a-new-project 上記のチュートリアルでは、DBにIn-MemoryDBを利用しているが、ここではMySQLを利用する。 環境構築 以下を利用してDockerで環境を構築する。 https://github.com/Esfahan/docker-loopback-tutorial TODO Tutorial todo-list tutorialを行う。 参考：https://loopback.io/doc/en/lb4/todo-tutorial.html Requirements Node.js at v10 or greater アプリケーシ
Protobuf と gRPC を使えば、REST API の GET、PUT やヘッダーなどを気にする必要はありません、そしてgRPCフレームワークによって生成されたStubsにはデータモデル用の記述が全部書いてるので、直接引用するだけで使えます。 開発環境とツール Protoc v3.12.4 -- Protobuf コンパイラー Stubs を生成する為に使ます。 Node.js v14.2.0 -- バックエンドとVueのビルドに使います。 Docker v19.03.12 -- envoyを動かす為に使ます。 envoy v1.14 -- 普通WebからのHTTP/1.1をHTTP/2に変換する為のプロキシ。 Vue.js 3.0.0-rc.5 -- 今回は Vue 3 を使ってフロントエンドを作成します。 Docker Compose v1.26.2 -- 全部をDocker化
Redux ExampleのTodoListをReact Native（expo）に置き換えて解説-ToggleTodo編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
from flask import Flask, render_template, request, redirect from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db' db = SQLAlchemy(app) class Todo(db.Model): id = db.Column(db.Integer, primary_key=True) task = db.Column(db.String(255)) done = db.Column(db.Boolean, default=False) @app.route('/', methods=['GET', 'POST']) def index():
作ることができたら開いてください。 'urls.py'はブラウザに表示する材料を集めるための指示書です。 中身は何も書かれていないと思うので、指示書として活用できるように、次のように書き込んでいきます。 from django.urls import path from .views import TodoList #views.pyからTodoListを持ってくる urlpatterns = [ path('list/', TodoList.as_view()), #URlの末尾にに'list/'と追記すると'views.py'の'TodoList'が表示される。 ] 'views.py'に存在するTodoList(これから作成していきます)を読み込んで、URLの末尾に'list/'とすることで、'TodoList'が実行されるようにする。 ちなみに'as_view()'というのは、クラ
はじめに JavaScriptでToDoListを作った際に、あまり参考にできる記事が見つからず、難しかったと感じたコードについて記事を書いてみました。良かったら参考にしてみてください！ 解説 作成した既存のリストの編集ボタンを押すと文字がフォームに変わってその場で編集できるようにしてみます！さらには編集時には既存のボタンを削除し、保存ボタンにして編集内容が保存されるようにします。 index.js // 編集ボタンクリック const editTask = (id) => { const currentList = todos.find((todo) => { return todo.id === id; }); const listParentNode = document.getElementById(`div-${id}`); // ここでのdiv-${id}はのちに作成した親要素
初めに はじめまして。 今回、学習のため、SpringBoot2とReactJSを把握次第、簡単なTodoListを作成した。 目的 フレームワークSpringBoot2とReactJSを用いての開発をすることで、下記事項が理解できているかを確認する ・Spring Boot Flow Architecture ・RestAPI service ・Redux store ・ReactJS Functional Components スペック ■言語 Java(17) JavaScript HTML CSS ■DBMS MySQL 8.0.31 ■フレームワーク ReactJS(18.2.0) SpringBoot2(2.7.4) ■IDE FrontEnd: Visual Code BackEnd: IntelliJ プロジェクトの機能概要 CRUDという4つの基本機能でTaskを管理する
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <title>Vue3</title> </head> <body> <div id="app"> <h2>Todoリスト</h2> <form action=""> <input type="text" v-model="newItem"> <button @click.prevent="addItem">登録</button> <
Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial - Part 3/5 - Bulmaを使ってデザインを整える]｜とし
Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial - Part 3/5 - Bulmaを使ってデザインを整える] 概要Nuxt×TypeScriptでTodoListを実装し、Firebase Hostingにデプロイするチュートリアルです。簡単なCRUD(Create, Read, Update, Delete)アプリを作成することで、NuxtとTypeScriptの概要を掴んでもらうことが目的です。 Part2までに、環境構築とTodoListの実装を行いました。このPart3では、BulmaというCSSフレームワークを使ってデザインを整えていきます。 # ブランチを切る $ git checkout -b feature/design # VS Code でディレクトリを開く $ code .c
![Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial - Part 3/5 - Bulmaを使ってデザインを整える]｜とし](https://cdn-ak-scissors.b.st-hatena.com/image/square/05cee3e6ceb518863b582cfd255f9cf7dd5d372d/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F11412145%2Frectangle_large_type_2_4bf8a935fd3c06bcfb0723d9076a4d14.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
はじめに 今回の記事では「TodoList」の詳細ページを表示していこうと思います。 対象者としては、Djangoの学習を始めたばかりの人を考えています。 前回までの記事にも目を通していただけるとスムーズに進められると思います。 前回までの記事 ↓ ↓ ↓ PycharmでDjangoでアプリケーションを作成する手順~準備編~ Django~settings.py編~ Django~ブラウザに表示させてみよう~ Django-TodoList①~一覧を表示してみよう~ urls.pyの編集 まずは'urls.py'にURLの繋ぎ込みを行っていきます。 アプリケーションの'urls.py'を開いてください。 （デフォルトでは用意されていないので作成していない方は、ターミナルに次のように打ち込んでください。）
JavaScript3大フレームワークの中で最も学習コストが低い（主観）、Vue.jsに入門しました。 Vue.jsでTodoListを作る、というチュートリアルはブログ等で既に幾つも記事がありますが、この記事ではTodoListを作る事でVue.jsの何について理解できるか（＝理解できたか）、を主眼として書いていきます。 ほとんど自分の理解の棚卸しになりそうですが、参考になれば！ 完成イメージ 最終的には以下のTodoListを作ります。UIはもう少し改善の余地がありますが、Vue.jsの理解からは少し外れるかと思い、そこまで詰めてないです・・・。 全体のコード 先にコードから見たほうがイメージがつかみやすい気がしました。 App.vue 親コンポーネントとなるvue <template> <div id="app"> <h1>Todo List</h1> <span>作業名：</spa
JavaScript勉強の一環として，「ToDoList」を作ってみました。 classを勉強したばかりなので使ってみました。 完全独学なので，もし問題点や改善点があれば教えていただけると嬉しいです。 仕様 addボタンを押すと，インプットエリアに入力されたテキストがリストになって追加される。 追加すると，インプットエリアの文字は消える。 リスト右の丸を押すと，完了済になる(丸の色と文字色が変わる)。 delateを押すと，リストがまるごと削除される。 コード HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
【要件】 課題1. タスク追加機能 追加ボタン押下時にタスクを登録できる タスクには、「ID、コメント、状態」が含まれる IDは連番にする コメントはフォームで入力された値が表示される 状態には、「作業中」と表示される 削除ボタンが表示されている（ここでは押下時の動作はつけなくてよい 課題2. タスク削除機能 削除ボタン押下時にそのタスクを削除できる タスク削除時はIDが振り直される 削除後、新たにタスクを追加するとIDが連番となっている 課題3. タスク状態変更機能 タスクの状態を変更できる 作業中の状態でボタンをクリックすると完了へ変更される 完了の状態でボタンをクリックすると作業中へ変更される 課題4. タスク表示/非表示切り替え機能 タスクの状態によって表示/非表示を切り替えできる 選択されたラジオボタンに応じて、タスクの表示を切り替える 「作業中」選択時に特定のタスクの状態を作業
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React でToDoListを作ってみた！ - iimon TECH BLOG
【画像】パパ「コロナで辛いから月15万に減らして」、パパ活女子「愛してるのにひどい」 : ToDoList
【画像】飲み会で遠くの男を刈り取るエチエチ女ｗ : ToDoList
Cloudflare Workers と KV でTodoListアプリを作る
ducksというデザインパターンを使ってTodoListを作ってみた - よちよち開発の日々
toDoListをこなしながら部屋の模様替えが楽しめるPGM - Qiita
Vue 3.0とgRPCを使ってTodoListを作ってみた - Qiita
初学者のためのJavaScriptで簡単ToDoListチュートリアル - Qiita
可動式todoリスト作成記 / 拖動可更換次序的todolist - Qiita
LoopBackのTodoListチュートリアルを実施 - Qiita
Vue 3.0とgRPCを使ってTodoListを作ってみた
Flaskを使って簡単なtodolist appを作る - Qiita
Django-TodoList①~一覧を表示してみよう~ - Qiita
【JavaScript】既存のリストを編集する方法(ToDoList) - Qiita
SpringBoot2とReactJSで簡単なTodoListを作成 - Qiita
【Vue.js】TodoList 編集機能を追加 - Qiita
Django-TodoList②~詳細ページを表示してみよう~ - Qiita
Vue.jsの基本を知る為にTodoListを作り、解説もする | 試行錯誤してみた。
JavaScriptでToDoListを作ってみた - Qiita
JavaScriptでアプリを作成しました【2】【TodoList】 - Qiita