Lenna Kihn

Lenna Kihn

1666040700

Task Log: Task-based Logging for Rust

task_log

task_log is a task-based logger.

Installing

Just add task_log = 0.1.4 to your Cargo.toml's dependency section.

Example

Let's get right to the chase. What does using this logger look like?

use std::io::Result;
use std::time::Duration;
use std::{fs, thread};

use task_log::task;

fn main() {
    task("Creating and removing file", || -> Result<()> {
        let filename = "hello.txt";
        fs::write(filename, "foo bar")?;
        thread::sleep(Duration::from_secs(2));
        fs::remove_file(filename)?;
        Ok(())
    })
    .expect("Failed to create and delete the file");
}

As you can see we provide a task to run and a description of what that task is doing. When we run this code we get the following output.

demo

To see more examples see the examples folder.

Configuration

You can configure task_log's task function using a struct called ConfigBuilder. Here is an example of using ConfigBuilder:

use std::thread;
use std::time::Duration;

use task_log::{task, ConfigBuilder};

fn main() {
    ConfigBuilder::new()
        .duration(false)
        .apply()
        .expect("Failed to setup configuration");

    let sum = task("Adding 1 and 2", || -> u32 {
        let result = 1 + 2;
        thread::sleep(Duration::from_secs(2));
        result
    });

    println!("Sum is {}", sum)
}

To learn more about ConfigBuilder please reference the docs.rs documentation.

Future Plans

Here are some features I'm hoping to implement in the future:

  • Run time: Output the run time so far in the RUNNING prefix.
  • Spinners: Show a loading symbol for long-running tasks.
  • File output: Allow writing of logs to a file.
  • Double log lines: Option to output log to a second line instead of replacing the first one.

Download Details:

Author: gleich
Source Code: https://github.com/gleich/task_log

License: MPL-2.0 license

#rust 

What is GEEK

Buddha Community

Task Log: Task-based Logging for Rust
Rust Blockchain

Rust Blockchain

1643176207

Serde Rust: Serialization Framework for Rust

Serde

*Serde is a framework for serializing and deserializing Rust data structures efficiently and generically.*

You may be looking for:

Serde in action

Click to show Cargo.toml. Run this code in the playground.

[dependencies]

# The core APIs, including the Serialize and Deserialize traits. Always
# required when using Serde. The "derive" feature is only required when
# using #[derive(Serialize, Deserialize)] to make Serde work with structs
# and enums defined in your crate.
serde = { version = "1.0", features = ["derive"] }

# Each data format lives in its own crate; the sample code below uses JSON
# but you may be using a different one.
serde_json = "1.0"

 

use serde::{Serialize, Deserialize};

#[derive(Serialize, Deserialize, Debug)]
struct Point {
    x: i32,
    y: i32,
}

fn main() {
    let point = Point { x: 1, y: 2 };

    // Convert the Point to a JSON string.
    let serialized = serde_json::to_string(&point).unwrap();

    // Prints serialized = {"x":1,"y":2}
    println!("serialized = {}", serialized);

    // Convert the JSON string back to a Point.
    let deserialized: Point = serde_json::from_str(&serialized).unwrap();

    // Prints deserialized = Point { x: 1, y: 2 }
    println!("deserialized = {:?}", deserialized);
}

Getting help

Serde is one of the most widely used Rust libraries so any place that Rustaceans congregate will be able to help you out. For chat, consider trying the #rust-questions or #rust-beginners channels of the unofficial community Discord (invite: https://discord.gg/rust-lang-community), the #rust-usage or #beginners channels of the official Rust Project Discord (invite: https://discord.gg/rust-lang), or the #general stream in Zulip. For asynchronous, consider the [rust] tag on StackOverflow, the /r/rust subreddit which has a pinned weekly easy questions post, or the Rust Discourse forum. It's acceptable to file a support issue in this repo but they tend not to get as many eyes as any of the above and may get closed without a response after some time.

Download Details:
Author: serde-rs
Source Code: https://github.com/serde-rs/serde
License: View license

#rust  #rustlang 

Katlynn Schaden

Katlynn Schaden

1650391200

Jupyter Notebook Kernel for Running ansible Tasks and Playbooks

Ansible Jupyter Kernel

Example Jupyter Usage

The Ansible Jupyter Kernel adds a kernel backend for Jupyter to interface directly with Ansible and construct plays and tasks and execute them on the fly.

Demo

Demo

Installation:

ansible-kernel is available to be installed from pypi but you can also install it locally. The setup package itself will register the kernel with Jupyter automatically.

From pypi

pip install ansible-kernel
python -m ansible_kernel.install

From a local checkout

pip install -e .
python -m ansible_kernel.install

For Anaconda/Miniconda

pip install ansible-kernel
python -m ansible_kernel.install --sys-prefix

Usage

Local install

    jupyter notebook
    # In the notebook interface, select Ansible from the 'New' menu

Container

docker run -p 8888:8888 benthomasson/ansible-jupyter-kernel

Then copy the URL from the output into your browser:
http://localhost:8888/?token=ABCD1234

Using the Cells

Normally Ansible brings together various components in different files and locations to launch a playbook and performs automation tasks. For this jupyter interface you need to provide this information in cells by denoting what the cell contains and then finally writing your tasks that will make use of them. There are Examples available to help you, in this section we'll go over the currently supported cell types.

In order to denote what the cell contains you should prefix it with a pound/hash symbol (#) and the type as listed here as the first line as shown in the examples below.

#inventory

The inventory that your tasks will use

#inventory
[all]
ahost ansible_connection=local
anotherhost examplevar=val

#play

This represents the opening block of a typical Ansible play

#play
name: Hello World
hosts: all
gather_facts: false

#task

This is the default cell type if no type is given for the first line

#task
debug:

#task
shell: cat /tmp/afile
register: output

#host_vars

This takes an argument that represents the hostname. Variables defined in this file will be available in the tasks for that host.

#host_vars Host1
hostname: host1

#group_vars

This takes an argument that represents the group name. Variables defined in this file will be available in the tasks for hosts in that group.

#group_vars BranchOfficeX
gateway: 192.168.1.254

#vars

This takes an argument that represents the filename for use in later cells

#vars example_vars
message: hello vars

#play
name: hello world
hosts: localhost
gather_facts: false
vars_files:
    - example_vars

#template

This takes an argument in order to create a templated file that can be used in later cells

#template hello.j2
{{ message }}

#task
template:
    src: hello.j2
    dest: /tmp/hello

#ansible.cfg

Provides overrides typically found in ansible.cfg

#ansible.cfg
[defaults]
host_key_checking=False

Examples

You can find various example notebooks in the repository

Using the development environment

It's possible to use whatever python development process you feel comfortable with. The repository itself includes mechanisms for using pipenv

pipenv install
...
pipenv shell

Author: ansible
Source Code:  https://github.com/ansible/ansible-jupyter-kernel
License: Apache-2.0 License

#jupyter #python 

Awesome Rust

Awesome Rust

1654894080

Serde JSON: JSON Support for Serde Framework

Serde JSON

Serde is a framework for serializing and deserializing Rust data structures efficiently and generically.

[dependencies]
serde_json = "1.0"

You may be looking for:

JSON is a ubiquitous open-standard format that uses human-readable text to transmit data objects consisting of key-value pairs.

{
    "name": "John Doe",
    "age": 43,
    "address": {
        "street": "10 Downing Street",
        "city": "London"
    },
    "phones": [
        "+44 1234567",
        "+44 2345678"
    ]
}

There are three common ways that you might find yourself needing to work with JSON data in Rust.

  • As text data. An unprocessed string of JSON data that you receive on an HTTP endpoint, read from a file, or prepare to send to a remote server.
  • As an untyped or loosely typed representation. Maybe you want to check that some JSON data is valid before passing it on, but without knowing the structure of what it contains. Or you want to do very basic manipulations like insert a key in a particular spot.
  • As a strongly typed Rust data structure. When you expect all or most of your data to conform to a particular structure and want to get real work done without JSON's loosey-goosey nature tripping you up.

Serde JSON provides efficient, flexible, safe ways of converting data between each of these representations.

Operating on untyped JSON values

Any valid JSON data can be manipulated in the following recursive enum representation. This data structure is serde_json::Value.

enum Value {
    Null,
    Bool(bool),
    Number(Number),
    String(String),
    Array(Vec<Value>),
    Object(Map<String, Value>),
}

A string of JSON data can be parsed into a serde_json::Value by the serde_json::from_str function. There is also from_slice for parsing from a byte slice &[u8] and from_reader for parsing from any io::Read like a File or a TCP stream.

use serde_json::{Result, Value};

fn untyped_example() -> Result<()> {
    // Some JSON input data as a &str. Maybe this comes from the user.
    let data = r#"
        {
            "name": "John Doe",
            "age": 43,
            "phones": [
                "+44 1234567",
                "+44 2345678"
            ]
        }"#;

    // Parse the string of data into serde_json::Value.
    let v: Value = serde_json::from_str(data)?;

    // Access parts of the data by indexing with square brackets.
    println!("Please call {} at the number {}", v["name"], v["phones"][0]);

    Ok(())
}

The result of square bracket indexing like v["name"] is a borrow of the data at that index, so the type is &Value. A JSON map can be indexed with string keys, while a JSON array can be indexed with integer keys. If the type of the data is not right for the type with which it is being indexed, or if a map does not contain the key being indexed, or if the index into a vector is out of bounds, the returned element is Value::Null.

When a Value is printed, it is printed as a JSON string. So in the code above, the output looks like Please call "John Doe" at the number "+44 1234567". The quotation marks appear because v["name"] is a &Value containing a JSON string and its JSON representation is "John Doe". Printing as a plain string without quotation marks involves converting from a JSON string to a Rust string with as_str() or avoiding the use of Value as described in the following section.

The Value representation is sufficient for very basic tasks but can be tedious to work with for anything more significant. Error handling is verbose to implement correctly, for example imagine trying to detect the presence of unrecognized fields in the input data. The compiler is powerless to help you when you make a mistake, for example imagine typoing v["name"] as v["nmae"] in one of the dozens of places it is used in your code.

Parsing JSON as strongly typed data structures

Serde provides a powerful way of mapping JSON data into Rust data structures largely automatically.

use serde::{Deserialize, Serialize};
use serde_json::Result;

#[derive(Serialize, Deserialize)]
struct Person {
    name: String,
    age: u8,
    phones: Vec<String>,
}

fn typed_example() -> Result<()> {
    // Some JSON input data as a &str. Maybe this comes from the user.
    let data = r#"
        {
            "name": "John Doe",
            "age": 43,
            "phones": [
                "+44 1234567",
                "+44 2345678"
            ]
        }"#;

    // Parse the string of data into a Person object. This is exactly the
    // same function as the one that produced serde_json::Value above, but
    // now we are asking it for a Person as output.
    let p: Person = serde_json::from_str(data)?;

    // Do things just like with any other Rust data structure.
    println!("Please call {} at the number {}", p.name, p.phones[0]);

    Ok(())
}

This is the same serde_json::from_str function as before, but this time we assign the return value to a variable of type Person so Serde will automatically interpret the input data as a Person and produce informative error messages if the layout does not conform to what a Person is expected to look like.

Any type that implements Serde's Deserialize trait can be deserialized this way. This includes built-in Rust standard library types like Vec<T> and HashMap<K, V>, as well as any structs or enums annotated with #[derive(Deserialize)].

Once we have p of type Person, our IDE and the Rust compiler can help us use it correctly like they do for any other Rust code. The IDE can autocomplete field names to prevent typos, which was impossible in the serde_json::Value representation. And the Rust compiler can check that when we write p.phones[0], then p.phones is guaranteed to be a Vec<String> so indexing into it makes sense and produces a String.

The necessary setup for using Serde's derive macros is explained on the Using derive page of the Serde site.

Constructing JSON values

Serde JSON provides a json! macro to build serde_json::Value objects with very natural JSON syntax.

use serde_json::json;

fn main() {
    // The type of `john` is `serde_json::Value`
    let john = json!({
        "name": "John Doe",
        "age": 43,
        "phones": [
            "+44 1234567",
            "+44 2345678"
        ]
    });

    println!("first phone number: {}", john["phones"][0]);

    // Convert to a string of JSON and print it out
    println!("{}", john.to_string());
}

The Value::to_string() function converts a serde_json::Value into a String of JSON text.

One neat thing about the json! macro is that variables and expressions can be interpolated directly into the JSON value as you are building it. Serde will check at compile time that the value you are interpolating is able to be represented as JSON.

let full_name = "John Doe";
let age_last_year = 42;

// The type of `john` is `serde_json::Value`
let john = json!({
    "name": full_name,
    "age": age_last_year + 1,
    "phones": [
        format!("+44 {}", random_phone())
    ]
});

This is amazingly convenient, but we have the problem we had before with Value: the IDE and Rust compiler cannot help us if we get it wrong. Serde JSON provides a better way of serializing strongly-typed data structures into JSON text.

Creating JSON by serializing data structures

A data structure can be converted to a JSON string by serde_json::to_string. There is also serde_json::to_vec which serializes to a Vec<u8> and serde_json::to_writer which serializes to any io::Write such as a File or a TCP stream.

use serde::{Deserialize, Serialize};
use serde_json::Result;

#[derive(Serialize, Deserialize)]
struct Address {
    street: String,
    city: String,
}

fn print_an_address() -> Result<()> {
    // Some data structure.
    let address = Address {
        street: "10 Downing Street".to_owned(),
        city: "London".to_owned(),
    };

    // Serialize it to a JSON string.
    let j = serde_json::to_string(&address)?;

    // Print, write to a file, or send to an HTTP server.
    println!("{}", j);

    Ok(())
}

Any type that implements Serde's Serialize trait can be serialized this way. This includes built-in Rust standard library types like Vec<T> and HashMap<K, V>, as well as any structs or enums annotated with #[derive(Serialize)].

Performance

It is fast. You should expect in the ballpark of 500 to 1000 megabytes per second deserialization and 600 to 900 megabytes per second serialization, depending on the characteristics of your data. This is competitive with the fastest C and C++ JSON libraries or even 30% faster for many use cases. Benchmarks live in the serde-rs/json-benchmark repo.

Getting help

Serde is one of the most widely used Rust libraries, so any place that Rustaceans congregate will be able to help you out. For chat, consider trying the #rust-questions or #rust-beginners channels of the unofficial community Discord (invite: https://discord.gg/rust-lang-community), the #rust-usage or #beginners channels of the official Rust Project Discord (invite: https://discord.gg/rust-lang), or the #general stream in Zulip. For asynchronous, consider the [rust] tag on StackOverflow, the /r/rust subreddit which has a pinned weekly easy questions post, or the Rust Discourse forum. It's acceptable to file a support issue in this repo, but they tend not to get as many eyes as any of the above and may get closed without a response after some time.

No-std support

As long as there is a memory allocator, it is possible to use serde_json without the rest of the Rust standard library. This is supported on Rust 1.36+. Disable the default "std" feature and enable the "alloc" feature:

[dependencies]
serde_json = { version = "1.0", default-features = false, features = ["alloc"] }

For JSON support in Serde without a memory allocator, please see the serde-json-core crate.

Link: https://crates.io/crates/serde_json

#rust  #rustlang  #encode   #json 

Lenna Kihn

Lenna Kihn

1666040700

Task Log: Task-based Logging for Rust

task_log

task_log is a task-based logger.

Installing

Just add task_log = 0.1.4 to your Cargo.toml's dependency section.

Example

Let's get right to the chase. What does using this logger look like?

use std::io::Result;
use std::time::Duration;
use std::{fs, thread};

use task_log::task;

fn main() {
    task("Creating and removing file", || -> Result<()> {
        let filename = "hello.txt";
        fs::write(filename, "foo bar")?;
        thread::sleep(Duration::from_secs(2));
        fs::remove_file(filename)?;
        Ok(())
    })
    .expect("Failed to create and delete the file");
}

As you can see we provide a task to run and a description of what that task is doing. When we run this code we get the following output.

demo

To see more examples see the examples folder.

Configuration

You can configure task_log's task function using a struct called ConfigBuilder. Here is an example of using ConfigBuilder:

use std::thread;
use std::time::Duration;

use task_log::{task, ConfigBuilder};

fn main() {
    ConfigBuilder::new()
        .duration(false)
        .apply()
        .expect("Failed to setup configuration");

    let sum = task("Adding 1 and 2", || -> u32 {
        let result = 1 + 2;
        thread::sleep(Duration::from_secs(2));
        result
    });

    println!("Sum is {}", sum)
}

To learn more about ConfigBuilder please reference the docs.rs documentation.

Future Plans

Here are some features I'm hoping to implement in the future:

  • Run time: Output the run time so far in the RUNNING prefix.
  • Spinners: Show a loading symbol for long-running tasks.
  • File output: Allow writing of logs to a file.
  • Double log lines: Option to output log to a second line instead of replacing the first one.

Download Details:

Author: gleich
Source Code: https://github.com/gleich/task_log

License: MPL-2.0 license

#rust 

伊藤 直子

伊藤 直子

1650021960

TODO APPを構築して、JavaScriptでのCRUD操作を学ぶ

今日は、Todoアプリを作成してJavaScriptでCRUD操作を行う方法を学びます。始めましょう🔥

これは私たちが今日作っているアプリです：

今日作っているアプリ

CRUDとは何ですか？

画像の説明

CRUDは-の略です

  • C：作成
  • R：読む
  • U：更新
  • D：削除

CRUDフルフォーム

CRUDは、データの作成、データの読み取り、編集、およびそれらのデータの削除を可能にするメカニズムの一種です。この例では、Todoアプリを作成するので、タスクの作成、タスクの読み取り、タスクの更新、またはタスクの削除を行うための4つのオプションがあります。

CRUDの原則を理解する

チュートリアルを開始する前に、まず、CRUDの原則を理解しましょう。そのために、非常に単純なソーシャルメディアアプリケーションを作成しましょう。

ソーシャルメディアアプリプロジェクト

設定

プロジェクトの設定

このプロジェクトでは、以下の手順に従います。

  • index.html、style.css、main.jsという名前の3つのファイルを作成します
  • JavaScriptおよびCSSファイルをindex.htmlにリンクします
  • ライブサーバーを起動します

HTML

bodyタグ内に、クラス名を使用してdivを作成します.container。そこには2つのセクションがあり.left、.right👇

<body>
  <h1>Social Media App</h1>
  <div class="container">

    <div class="left"></div>
    <div class="right"></div>

  </div>
</body>

左側に投稿を作成します。右側では、投稿を表示、更新、削除できます。次に、.leftdivタグ内にフォームを作成します👇

<div class="left">
  <form id="form">
    <label for="post"> Write your post here</label>
    <br><br>
    <textarea name="post" id="input" cols="30" rows="10"></textarea>
    <br> <br>
    <div id="msg"></div>
    <button type="submit">Post</button>
  </form>
</div>

このコードをHTML内に記述して、投稿を右側に表示できるようにします👇

<div class="right">
  <h3>Your posts here</h3>
  <div id="posts"></div>
</div>

次に、プロジェクトでそのフォントを使用するために、headタグ内にfont-awesomeCDNを挿入します👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

次に、削除アイコンと編集アイコンを使用してサンプル投稿を作成します。このコードをdiv内にID#postsで記述します：👇

<div id="posts">
  <div>
    <p>Hello world post 1</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>

  <div >
    <p>Hello world post 2</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>
</div>

これまでの結果は次のようになります。

HTMLマークアップの結果

CSS

プロジェクト1のCSSの追加

シンプルにしましょう。スタイルシート内にこれらのスタイルを記述します：👇

body {
  font-family: sans-serif;
  margin: 0 50px;
}

.container {
  display: flex;
  gap: 50px;
}

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

次に、投稿divとオプションアイコンに次のスタイルを記述します。👇

#posts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  display: flex;
  gap: 25px;
}

#msg {
  color: red;
}

これまでの結果は次のようになります：👇

cssパーツプロジェクト1を追加した後の結果

JavaScriptパート

javascript部分を開始します

このフローチャートに従って、プロジェクトを進めていきます。心配しないでください、私は途中ですべてを説明します。👇

フローチャート

フォームの検証

まず、JavaScriptのHTMLからすべてのIDセレクターをターゲットにしましょう。このように：👇

let form = document.getElementById("form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");

次に、フォームの送信イベントリスナーを作成して、アプリのデフォルトの動作を防ぐことができるようにします。同時に、という名前の関数を作成しますformValidation。👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("button clicked");

  formValidation();
});

let formValidation = () => {};

次に、関数内でifelseステートメントを作成しformValidationます。これにより、ユーザーが空白の入力フィールドを送信するのを防ぐことができます。👇

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "Post cannot be blank";
    console.log("failure");
  } else {
    console.log("successs");
    msg.innerHTML = "";
  }
};

これまでの結果は次のとおりです：👇

7sb8faq21j5dzy9vlswj

ご覧のとおり、ユーザーがフォームを空白で送信しようとすると、メッセージも表示されます。

入力フィールドからデータを受け入れる方法

入力フィールドから取得するデータが何であれ、それらをオブジェクトに格納します。。という名前のオブジェクトを作成しましょうdata。そして、次の名前の関数を作成しますacceptData：👇

let data = {};

let acceptData = () => {};

主なアイデアは、関数を使用して、入力からデータを収集し、という名前のオブジェクトに格納することdataです。acceptDataそれでは、関数の作成を完了しましょう。

let acceptData = () => {
  data["text"] = input.value;
  console.log(data);
};

また、acceptDataユーザーが送信ボタンをクリックしたときに機能する機能が必要です。そのために、関数のelseステートメントでこの関数を起動しformValidationます。👇

let formValidation = () => {
  if (input.value === "") {
    // Other codes are here
  } else {
    // Other codes are here
    acceptData();
  }
};

データを入力してフォームを送信すると、コンソールにユーザーの入力値を保持しているオブジェクトが表示されます。このように：👇

これまでのコンソールでの結果

JavaScriptテンプレートリテラルを使用して投稿を作成する方法

入力データを右側に投稿するには、div要素を作成し、それを投稿divに追加する必要があります。まず、関数を作成して次の行を記述しましょう：👇

let createPost = () => {
  posts.innerHTML += ``;
};

バックティックはテンプレートリテラルです。それは私たちのテンプレートとして機能します。ここでは、親div、入力自体、および編集アイコンと削除アイコンを保持するオプションdivの3つが必要です。機能を終了しましょう👇

let createPost = () => {
  posts.innerHTML += `
  <div>
    <p>${data.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class="fas fa-edit"></i>
      <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
    </span>
  </div>
  `;
  input.value = "";
};

acceptdata関数では、関数を起動しますcreatePost。このように：👇

let acceptData = () => {
  // Other codes are here

  createPost();
};

これまでの結果：👇

これまでの結果

これまでのところ、プロジェクト1はほぼ完了しています。

ここまでは順調ですね

投稿を削除する方法

投稿を削除するために、まず、javascriptファイル内に関数を作成しましょう。

let deletePost = (e) => {};

deletePost次に、onClick属性を使用して、すべての削除アイコン内でこの関数を起動します。これらの行は、HTMLとテンプレートリテラルで記述します。👇

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

thisキーワードは、イベントを発生させた要素を参照します。この場合、thisは削除ボタンを指します。

注意深く見てください。削除ボタンの親は、クラス名オプションのあるスパンです。スパンの親はdivです。parentElementしたがって、削除アイコンからdivにジャンプし、直接ターゲットにして削除できるように、2回書き込みます。

関数を終了しましょう。👇

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
};

これまでの結果：👇

投稿結果の削除

投稿を編集する方法

投稿を編集するために、まず、JavaScriptファイル内に関数を作成しましょう。

let editPost = (e) => {};

editPost次に、onClick属性を使用して、すべての編集アイコン内でこの関数を起動します。これらの行は、HTMLとテンプレートリテラルで記述します。👇

<i onClick="editPost(this)" class="fas fa-edit"></i>

thisキーワードは、イベントを発生させた要素を参照します。この場合、thisは編集ボタンを指します。

注意深く見てください。編集ボタンの親は、クラス名オプションのあるスパンです。スパンの親はdivです。parentElementしたがって、編集アイコンからdivにジャンプし、直接ターゲットにして削除できるように、2回書き込みます。

次に、投稿内のデータが何であれ、入力フィールドに戻して編集します。

関数を終了しましょう。👇

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
};

これまでの結果：👇

投稿結果の編集

休憩する！

休憩する

プロジェクト1を完了してくださった皆さん、おめでとうございます。さあ、ちょっと休憩してください。

CRUD操作を使用してToDoアプリを作成する方法

ToDoアプリを作ろう

To-Doアプリであるプロジェクト2の作成を始めましょう。

プロジェクトの設定

プロジェクトの設定

このプロジェクトでは、以下の手順に従います。

  • index.html、style.css、main.jsという名前の3つのファイルを作成します
  • JavaScriptファイルとCSSファイルをindex.htmlにリンクします
  • ライブサーバーを起動します

HTML

このスターターコードをHTMLファイル内に記述します：👇

<div class="app">
  <h4 class="mb-3">TODO App</h4>

  <div id="addNew" data-bs-toggle="modal" data-bs-target="#form">
    <span>Add New Task</span>
    <i class="fas fa-plus"></i>
  </div>
</div>

IDを持つdivaddNewは、モーダルを開くボタンです。ボタンにスパンが表示されます。これiはfont-awesomeのアイコンです。

ブートストラップを使用してモーダルを作成します。モーダルを使用して新しいタスクを追加します。そのために、headタグ内にブートストラップCDNリンクを追加します。👇

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

作成されたタスクを確認するには、クラス名アプリを使用したdiv内で、idタスクを使用したdivを使用します。👇

<h5 class="text-center my-3">Tasks</h5>

<div id="tasks"></div>

プロジェクトでフォントを使用するには、headタグ内にfont-awesomeCDNを挿入します👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

ブートストラップモーダルからの以下のコードをコピーして貼り付けます。3つの入力フィールドと送信ボタンを備えたフォームがあります。必要に応じて、検索バーに「モーダル」と入力して、BootstrapのWebサイトを検索できます。

<!-- Modal -->
<form
  class="modal fade"
  id="form"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Task Title</p>
        <input type="text" class="form-control" name="" id="textInput" />
        <div id="msg"></div>
        <br />
        <p>Due Date</p>
        <input type="date" class="form-control" name="" id="dateInput" />
        <br />
        <p>Description</p>
        <textarea
          name=""
          class="form-control"
          id="textarea"
          cols="30"
          rows="5"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" id="add" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</form>

これまでの結果：👇

HTMLファイルの設定

HTMLファイルの設定は完了です。CSSを始めましょう。

CSS

css部分を追加する

これらのスタイルを本文に追加して、アプリを画面の正確な中央に配置できるようにします。

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

classnameアプリでdivのスタイルを設定しましょう。👇

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
}

これまでの結果：👇

アプリのスタイル

それでは、idを使用してボタンのスタイルを設定しましょうaddNew。👇

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

これまでの結果：👇

新しいタスクボタンを追加

ボタンをクリックすると、モーダルが次のようにポップアップ表示されます：👇

モーダルポップ

JSを追加する

JavaScriptを追加する

JavaScriptファイルで、まず、使用する必要のあるHTMLからすべてのセレクターを選択します。👇

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

フォームの検証

ユーザーに空白の入力フィールドを送信させることはできません。したがって、入力フィールドを検証する必要があります。👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (textInput.value === "") {
    console.log("failure");
    msg.innerHTML = "Task cannot be blank";
  } else {
    console.log("success");
    msg.innerHTML = "";
  }
};

また、CSS内に次の行を追加します。

#msg {
  color: red;
}

これまでの結果：👇

画像の説明

ご覧のとおり、検証は機能しています。JavaScriptコードでは、ユーザーが空白の入力フィールドを送信することはできません。そうしないと、エラーメッセージが表示されます。

データを収集してローカルストレージを使用する方法

ユーザーが書き込んだ入力が何であれ、それらを収集してローカルストレージに保存する必要があります。

まず、という名前の関数とという名前acceptDataの配列を使用して、入力フィールドからデータを収集しますdata。次に、次のようにローカルストレージ内にプッシュします：👇

let data = [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

acceptDataまた、フォーム検証のelseステートメント内で関数を呼び出さない限り、これは機能しないことに注意してください。ここに従ってください：👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

モーダルが自動的に閉じないことに気付いたかもしれません。これを解決するには、フォーム検証のelseステートメント内にこの小さな関数を記述します。👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
    add.setAttribute("data-bs-dismiss", "modal");
    add.click();

    (() => {
      add.setAttribute("data-bs-dismiss", "");
    })();
  }
};

Chrome開発ツールを開く場合は、アプリケーションに移動してローカルストレージを開きます。あなたはこの結果を見ることができます：👇

ローカルストレージの結果

新しいタスクを作成する方法

新しいタスクを作成するには、関数を作成し、テンプレートリテラルを使用してHTML要素を作成し、マップを使用してユーザーから収集したデータをテンプレート内にプッシュする必要があります。ここに従ってください：👇

let createTasks = () => {
  tasks.innerHTML = "";
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>
  
          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

また、次のacceptDataように、関数内で呼び出さない限り、関数は実行されないことに注意してください。👇

let acceptData = () => {
  // Other codes are here

  createTasks();
};

ユーザーからのデータの収集と受け入れが完了したら、入力フィールドをクリアする必要があります。そのために、と呼ばれる関数を作成しますresetForm。フォローする：👇

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

これまでの結果：👇

タスクカードの追加

ご覧のとおり、このカードにはスタイルはありません。いくつかのスタイルを追加しましょう：👇

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

次のコードで編集ボタンと削除ボタンのスタイルを設定します：👇

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

これまでの結果：👇

スタイルカードテンプレート

タスクを削除する機能

ここを注意深く見てください。関数内に3行のコードを追加しました。

  • 最初の行は、画面からHTML要素を削除します。
  • 2行目は、ターゲットのタスクをデータ配列から削除します。
  • 3行目は、ローカルストレージを新しいデータで更新します。
let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

  data.splice(e.parentElement.parentElement.id, 1);

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

次に、ダミータスクを作成し、それを削除してみます。これまでの結果は次のようになります：👇

画像の説明

タスクを編集する機能

ここを注意深く見てください。関数内に5行のコードを追加しました。

  • 1行目は、編集するために選択したタスクを対象としています
  • 2行目、3行目、および4行目は、編集するために選択したタスクの値[タスク、日付、説明]を対象としています。
  • 5行目では、削除機能を実行して、選択したデータをローカルストレージ、HTML要素、およびデータ配列の両方から削除しています。
let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

次に、ダミータスクを作成して編集してみます。これまでの結果：👇

タスクの編集

ローカルストレージからデータを取得する方法

ページを更新すると、すべてのデータが失われていることに気付くでしょう。この問題を解決するために、IIFE（即時呼び出し関数式）を実行して、ローカルストレージからデータを取得します。フォローする：👇

(() => {
  data = JSON.parse(localStorage.getItem("data")) || [];
  console.log(data);
  createTasks();
})();

これで、ページを更新してもデータが表示されます。

結論

おめでとう

このチュートリアルを正常に完了しました。おめでとうございます。CRUD操作を使用してToDoリストアプリケーションを作成する方法を学習しました。これで、このチュートリアルを使用して独自のCRUDアプリケーションを作成できます。

これが最後まで読むためのあなたのメダルです。❤️

ソース：https ：//www.freecodecamp.org/news/learn-crud-operations-in-javascript-by-building-todo-app/

#javascript #crud #operator #todoapp