かよ

ソフトウェアが大好きで、田舎から飛び出し、都内のソフトウェアエンジニアになりました。もっとサービスの使いやすさに関わりたくUI/UXデザイナーにジョブチェンジ。2025年、カナダにデザイン留学予定🇨🇦

かよ

ソフトウェアが大好きで、田舎から飛び出し、都内のソフトウェアエンジニアになりました。もっとサービスの使いやすさに関わりたくUI/UXデザイナーにジョブチェンジ。2025年、カナダにデザイン留学予定🇨🇦

マガジン

  • DjangoとVue.jsでTodoアプリを作ろう

    DjangoとVue.jsで作るTodoアプリの作り方を紹介したマガジンです。

  • 未経験からwebエンジニアになった話

    未経験からエンジニアになるまでの話を書いたnoteです

最近の記事

田舎育ちが都会で感じた格差は、乗りこえられるのか

「人は生まれた時から平等ではない。だけど、乗り越えるためにできることはある。」 田舎で育ち、都会に出てきた私が、最近感じていることだ。 自分より、恵まれて育った人が世の中にはたくさんいると気づいたのは、いつ頃だろうか。 おそらく、勉強を頑張り始めて進学校に入った高校時代から少しずつ感じ始め、はっきりと思ったのは、上京した社会人になってからだろうか。 私は新潟県新潟市の一番小さい区で育った。徒歩30分圏内に買い物ができる場所はコンビニ1つ。 そのたった一つのコンビニが

    • DjangoとVue.jsでシンプルなTodoアプリを作る 09.VueでTodo削除機能を実装する

      前回の記事では、データを更新できるようにしました。 いよいよ、最後の機能としてタスクを削除する機能を作っていきたいと思います。 下記の流れで実装を進めていきます。

      ¥250
      • DjangoとVue.jsでシンプルなTodoアプリを作る 08.VueでTodoデータを更新する

        前回の記事で、task の一覧を取得、作成することができました。 https://note.com/kcatyo/n/n2c459d8dca97 しかし、todo リストなら、完了した todo にチェックを入れられるようにしなければいけません。 今回は、完了した task にチェックを入れて完了にしたり、チェックを外して、未完了の状態に戻せるようにできるようにします。 下記のような流れで実装していきます。

        ¥250
        • DjangoとVue.jsでシンプルなTodoアプリを作る 07.VueでTodo作成機能を実装する

          前回の記事ではVueでタスクを取得する方法について書きました。 続いて、タスクを作成する機能を Vue で作っていこうと思います。 一覧を取得するのとほとんど同じ流れで、下記の流れでコードを書いていきます。 html→Vue に task のタイトルを送れるようにする Vue で task を作成する createTask メソッドを定義 html→Vue で送られてきた新しい task の内容を django の views.py に送る 送られてきた内容を元に、

        • 田舎育ちが都会で感じた格差は、乗りこえられるのか

        • DjangoとVue.jsでシンプルなTodoアプリを作る 09.VueでTodo削除機能を実装する

          ¥250
        • DjangoとVue.jsでシンプルなTodoアプリを作る 08.VueでTodoデータを更新する

          ¥250
        • DjangoとVue.jsでシンプルなTodoアプリを作る 07.VueでTodo作成機能を実装する

        マガジン

        • DjangoとVue.jsでTodoアプリを作ろう
          9本
        • 未経験からwebエンジニアになった話
          6本

        記事

          DjangoとVue.jsでシンプルなTodoアプリを作る 06.VueでTodoデータを取得する

          前回の記事では、django と HTML で、task を作成し、作成したものを一覧で表示することができるようになりました。 ですが、まだ 1 クリックで task を完了にさせたり、削除したりする機能はできていません。 ここからは、django と HTML のみで実装するのではなく、Vue.js を使用して、task の一覧を表示、作成、更新、削除を画面の遷移なしでできるようにしたいと思います。 static/main.js を作成し、Vue を使う準備をするため

          DjangoとVue.jsでシンプルなTodoアプリを作る 06.VueでTodoデータを取得する

          DjangoとVue.jsでシンプルなTodoアプリを作る 05.DjangoだけでTodo一覧・作成機能を実装する

          前回の記事では、Djangonの管理画面を使用して、データを登録できるようにしました。 今回の記事では、Vueを使用せず、Djangoのみで登録したデータを取得、作成できるようにしていきたいと思います。 まず、task/templates/task_list.html に、下記を追記してください。 task/templates/task_list.html {% extends 'base.html' %}{% block content %} {# 追記ここか

          DjangoとVue.jsでシンプルなTodoアプリを作る 05.DjangoだけでTodo一覧・作成機能を実装する

          DjangoとVue.jsでシンプルなTodoアプリを作る 04.Djangoでデータを登録しよう

          前回の記事では、html をbootstrapで整え、views.pyとurls.pyにコードを書いて、Djangoを通してhtmlに文字を表示できるようにしました。 今回の記事では、Django でデータを登録できる仕組みを担っている、models.py を作成し、Django の管理画面から、データを登録できるようにします! その前に、前回の記事で、ビューについて説明し忘れていた部分があるため、そちらを説明していきたいと思います。 クラスベースビューと関数ベースビュ

          DjangoとVue.jsでシンプルなTodoアプリを作る 04.Djangoでデータを登録しよう

          DjangoとVue.jsでシンプルなTodoアプリを作る 03.Djangoで文字を表示させよう

          前回の記事では、アプリを作るセットアップをしていきました。 今回は、html をbootstrapで整え、views.pyとurls.pyにコードを書いて、Djangoを通してhtmlに文字を表示できるようにします! bootstrapでhtmlを整えるまず、前回作成した、 templates > base.html にコードを書いていきます。 base.html 内で!を入力し、下記の html の雛形を表示させます。 これは vscode のみの機能かもしれないので

          DjangoとVue.jsでシンプルなTodoアプリを作る 03.Djangoで文字を表示させよう

          未経験webエンジニアが1年で転職した結果。

          私は、業務未経験からwebエンジニアとして企業で働き、約1年で別の企業に転職しました。 このnoteでは、 未経験から転職するのに苦労したか? 年収は上がったか? 言語と、担当分野を保守から開発に変わったけど、どれくらいでなれたか? など、 webエンジニアの方で今後転職される方や、これからwebエンジニアを目指そうと考えている方が気になるであろう事を、自分が体験したことを元に話していきたいと思います。 著者のプロフィール2020年4月にプログラミングスクール卒

          未経験webエンジニアが1年で転職した結果。

          DjangoとVue.jsでシンプルなTodoアプリを作る 02.Djangoセットアップ

          前回の記事はこちら setupはじめにアプリのセットアップをします。 初めてPythonに触れる方は、最初だけ少し大変ですが、頑張ってください! Python3をダウンロードpython3をダウンロードしていない方は、Djangoで開発をするために、事前にダウンロードしてください。 DjangoはPythonが元になって作られたもの。 つまりニワトリとひよこみたいな関係なので、開発するのがDjangoでもPythonも必要になってきます! 詳しくは下記のwebサイトを

          DjangoとVue.jsでシンプルなTodoアプリを作る 02.Djangoセットアップ

          DjangoとVue.jsでシンプルなTodoアプリを作る 01.作れるもの・学べることの紹介

          このチュートリアルで作るものPythonのフレームワークであるDjangoと、JavaScriptのフレームワークであるVue.jsを使ったSPA todoアプリです。 Djangoについてよくわからない方はこちらの動画で説明しています! 一般的には、DjangoとVueを使って開発する場合、Django REST frameworkを使うことが多いですが、 前提知識などが必要でハードルが高いという点で、今回はDjango REST frameworkではなく、Fetc

          DjangoとVue.jsでシンプルなTodoアプリを作る 01.作れるもの・学べることの紹介

          英語力0でもできた。英語でプログラミングを学べる方法

          はじめに海外のプログラミング情報を知れるようになりたいと思い、はや一年。 試行錯誤して、なんとか学べる方法を見つけたので、3つご紹介します。 1.クローム拡張機能を使って、海外のプログラミング動画をみる海外のプログラミング動画はたいてい日本語訳がないのですが、この拡張機能を使えば一瞬で日本語に変換され、どの動画でも日本語でみることができます。 ■Language Learning with Netflix and YouTube 海外のおすすめYoutuber fre

          英語力0でもできた。英語でプログラミングを学べる方法

          【ポートフォリオは設計が8割】webエンジニアになるためのポートフォリオ設計方法 後編

          webエンジニアを未経験から目指す際、ポートフォリオが必要になると思います。 プログラミングを勉強できる教材はたくさんあっても、 どんな設計方法でオリジナルサービスを作ればいいか体系的に学べる記事は少なく、ポートフォリオ作成に困ることが多いと思います。 このシリーズでは未経験からwebエンジニアになった私が、 初心者目線でポートフォリオの作り方を解説します。 今回の記事ではポートフォリオを作る際にはじめに行う設計方法について 図や写真を用いて実際に私が作ったものを載せな

          ¥500

          【ポートフォリオは設計が8割】webエンジニアになるためのポートフォリオ設計方法 後編

          ¥500

          webエンジニアのポートフォリオの作り方【設計編】〜設計作業とは?サービスのコンセプトの整理〜

          webエンジニアを未経験から目指す際、ポートフォリオが必要になると思います。 でも、どんな手順でポートフォリオを作るか体系的に学べる記事って意外と少ないですよね。 このシリーズでは未経験からwebエンジニアになった私が、 初心者目線でポートフォリオの作り方を解説します。 今回の記事ではポートフォリオを作る流れと、 ポートフォリオを作る際にはじめに行う設計方法について説明します! 動画でサラッと見たい方はこちらから ツイッターでありがたい感想をいただきました! ポー

          webエンジニアのポートフォリオの作り方【設計編】〜設計作業とは?サービスのコンセプトの整理〜

          未経験からwebエンジニアになるためにやったこと【面接編】

          はじめに2020年4月からwebエンジニアとして働きはじめ、今はスタートアップのバックエンドエンジニア(2021年10月現在)として働いている、かよちんといいます。 このnoteでは、未経験からエンジニアになった私が、技術力がない中、面接を突破してRuby on Railsを使った自社開発企業のwebエンジニアになれた方法を、面接に集中してお話したいと思います。 また、私自身、エンジニアをとして働き始めて約2年になります。 最初と比べ技術力も上がり、エンジニアとしてどのよ

          ¥500

          未経験からwebエンジニアになるためにやったこと【面接編】

          ¥500

          HSPの私が、一歩踏み出す時に、勇気をもらった言葉たち。

          HSPとは、Highly Sensitive Person(ハイリー・センシティブ・パーソン)といい、「ひといちばい繊細な人」という意味です。 今回は、そんなHSPの私を励まして、新しいことに挑戦するきっかけになった言葉を紹介します。 1.人と違うことにチャンスがある思春期から、人と違うところや、周りに合わせられない自分が嫌でした。 ですが、今の時代は周りに合わせられる協調性が高い人だけではなく、むしろ自分の想いを突き詰められる人の方が活躍している気がします。 そんな

          HSPの私が、一歩踏み出す時に、勇気をもらった言葉たち。