しんどい

しんどい

アプリを作ろう（番外）：キーバインド

・キーバインド：どのキーを押せば何が起こるか ・矢印キーは使わない ・Emacsキーバインドにすれば全て解決 はじめにこの記事はプロを目指す人向けの記事です。初心者は読まなくてもいいですし、読んでも「そんなに必要なことの？」という思いしか抱かないと思います。 キーバインドとはキーバインドとは、キーを押した時に何が起きるか、その機能とキーを結びつけることになります。例えばCtrlを押しながらCを押せばコピーになり、Ctrlを押しながらVを押せばペーストになります。この組み合

しんどい

    • アプリを作ろう(8)：VueでのJavaScript連携

      ・templateの中でscriptの変数値をどうやって使うのか ・属性値として変数値をどうやって使うのか ・なぜcolor='{{ background }}'のようには書けないのか 改めてv-date-pickerのソースを見てみましょう。 <template><v-app> <v-container> <v-card> <h1>Hello Nuxt</h1> <v-date-picker v-model="date"></v-date-p

      しんどい

      • アプリを作ろう(7)：export defaultの記述を理解する

        前回に引き続き、Vue/Nuxtで記述するJavaScriptについて解説します。前回お見せしたVueのJavaScript部分をもう一度確認しましょう。 <script>export default { data: () => ({ date: "", }),};</script> このexport defaultとはなんなのでしょうか。それにはまず、Vue/Nuxtがどのように動いているかを知る必要があります。 Vue/Nuxtの動作すごく簡単にVue/Nuxt

        しんどい

        • アプリを作ろう(6)：JavaScriptの基本

          前回のVuetifyの説明の最後にv-date-pickerを紹介しましたが、そのサンプルをもう一度見てみましょう。 青い部分に本来なら選択した日付が表示されるはずですが、表示されていません。これは前回省略したv-modelが指定されていないためです。 v-modelは簡単にいうと日付情報を格納しておくための変数の指定場所になります。では変数はどのように指定すればよいのか、ということをこの記事で説明します。 Webページの構造そもそもWebページはどのように作られている

          しんどい

        アプリを作ろう（番外）：キーバインド

        しんどい

        マガジン

        • アプリをつくろう
          9本

        記事

          アプリを作ろう(5)：Vuetifyの導入

          Vuetifyとは一番最初に紹介したアプリをもう一度見てみましょう。 https://shindoi2021.netlify.app/ これをHTMLで一から作るとなると結構骨が折れます。全体を覆っている角丸の四角形ですらCSSで角丸の半径を指定したり、影をつけたりしないといけません。 Vuetifyでは外観が精錬されたパーツを簡単に実装できるように提供してくれています。この角丸の四角はv-cardと呼ばれるパーツで、<v-card></v-card>と書けば自動的に作

          しんどい

          アプリを作ろう(5)：Vuetifyの導入

          しんどい

          アプリを作ろう(4)：Vue/Nuxtのインストール

          package.jsonの作成いよいよアプリを作っていきます。まずはVue/Nuxtのインストールです。 Vue/NuxtはNode.jsを使って動作します。そのためにはまずNode.jsの設定ファイルを作る必要があります。 VS Codeでworkspaceのフォルダを開き、更に新しいフォルダを作りましょう。名前はなんでも構いませんが、ここではfirst_appにします。 first_appのフォルダを開いたらその中にpackage.jsonという名前の新しいファイルを

          しんどい

          アプリを作ろう(4)：Vue/Nuxtのインストール

          しんどい

          アプリを作ろう(3)：Node.jsのインストール

          ・Windowsはインストーラを使ってインストール ・Macはbrewを使ってインストール ・Linuxはaptとnpmとnを使ってインストール Node.jsとはこの記事ではNode.jsの詳しい説明は省略します。 簡単に言うと「サーバーで動いているプログラム」になります。サーバーでNode.jsを起動し、そのうえでアプリを動かし、WebページやWebアプリを提供することができます。 アプリを公開したり動作させたりするときに必要となるのですが、Vue/Nuxtや最近のプラ

          しんどい

          アプリを作ろう(3)：Node.jsのインストール

          しんどい

          アプリを作ろう(2)：環境準備

          ・VSCodeの導入 ・VSCodeの設定 ・ワークスペースの準備 全ては環境を整えてからまず大前提としてプログラミングは環境整備に多大な時間と労力を必要とします。 「早くアプリの作り方を教えて欲しい」 「細かいことなんで飛ばしてもいい？」 こういう声をよく聞きますが、環境を疎かにすると今後の開発の効率が下がるだけでなく、想定外のバグを引き込みデバッグに多大な時間を浪費します。 パソコンの性能と環境整備はケチらずにしっかりやりましょう。 Visual Studio Cod

          しんどい

          アプリを作ろう(2)：環境準備

          しんどい

          アプリを作ろう(1)：Vue/Nuxtのすすめ

          ・簡単にアプリを作りたいならVue/Nuxtがオススメ ・Sampleアプリの例とソースコード これからこのnoteではVue/Nuxtを使ったアプリケーションの作り方を掲載していきます。アプリを作りたい、プログラミングを勉強したいという人に向けて、初心者でも分かるように簡単かつ分かりやすさを心がけて説明していきます。 どんなアプリがどれくらいで作れるのかまずは下記のサイトを見てください。 https://shindoi2021.netlify.app/ カレンダーを

          しんどい

          アプリを作ろう(1)：Vue/Nuxtのすすめ

          しんどい