プログラミング言語

Nuxt.jsを始めよう：ページを追加する

by
Nuxt.js使い方

前回の記事ではNuxt.jsのセットアップの仕方を説明しました。 今日はNuxtを使ってページの追加の仕方、ラウティング（URLの設定）の仕方を説明します。Vueで構築したことがある人は、Nuxtのアプローチの仕方に関心されること間違いなしです。ユニークなレイアウトとroutingの設定方法に驚かされました。 pagesディレクトリ Nuxt.jsのルートディレクトリ（src）と同じ階層にpagesというフォルダを作成してみましょう。その中に例としてabout.vueのファイルを作成します。そうするとNuxtがこのフォルダを読み込みURLのrouting（ラウティング）をしてくれるようになります。 テスト用のウェブサーバーを起動してみてください。 まるで魔法の様です。しかし、これを読み込んでくれるおかげで、もともとあったapp.vueに変更が必要になります。 ではapp.vueを削除して、pagesの直下にindex.vueを作成してください。 このファイルがドメインの読み込み時に表示されるランディングページとして表示されるようになります。URLでいうと”/”です。 へえ。おもしろいですね。 では、URLをもっと複雑に設定したい場合は、pagesディレクトリにさらにフォルダーを作成してその中にvueファイルを作成してみます。 URL/products/index.vueはURL/productsのビューになり、URL/products/item.vueはURL/products/itemのビューになりました。 とても直感的です。 routerのパラメーター 以前にVue－RouterでURLパラメーターを設定できることを説明しました。URLにダイナミックなデータが入力されたときにそのURLのパラメーターを取得する方法です。例でいうとproducts/1やproducts/2などこの数字がユニークな商品のIDになることがあげられます。 このvueファイルは[id].vueの用に作成できます。 ファイル名の[]内にダイナミックにしたい名称を入れます。 これをuseRoute().paramsで呼び出してあげればOKです。 これでダイナミックなURLが完成できましたね。 NuxtLink しかし、このままではユーザーがURLに直接名称を入力しないといけないという非現実的な作業が発生してしまいます。ですのでナビゲーションバーを作成していきます。 NuxtLinkは自動的にインポートされるのでわざわざ<script>からインポートする必要がありません。 例としてトップページのpages/inedx.vueに下記の様にNuxtLinkを記載してみましょう。 ここで理解しておきたいのが<a>タグを使わないのでVueと同じようにSPAと同じように他のURLにアクセスができます。つまりページがリフレッシュされないのでユーザーエクスペリエンスが向上するということです。 レイアウト このままだとすべてのページにナビゲーションバーを設置しないといけないことになりますね。 そこでレイアウトを設定していくことにします。レイアウトはVueでおなじみの<slot/>で解決していきます。 ではプロジェクトのルートにlayoutsという名称でフォルダーを作成します。その中にdefault.vueを作成しましょう。 Nuxtが自動でlayouts/default.vueのファイルを監視して、<slot/>内にpageのビューを表示してくれるようになります。 カスタムレイアウト では、ページによってレイアウトが変わる場合はどうすればよいのでしょうか？ その場合はlayoutsディレクトリ直下に別のレイアウトとなるvueファイルを作成して対応することができます。 例として、アイテムの詳細ページのレイアウトをlayouts/products.vueに作成します。名前は何でも良いです。 参考例として内容を下記の様にしてナビゲーションをフッターに移動しました。 では、このレイアウトを指定したビューに使えるようにするにはどうすれば良いでしょうか？ この場合は、レイアウトを変えたいページのvueファイルに行きdefinePagemeta()を使用します。 参考例として、products/index.vueとproducts/[id].vueに下記のmetaを追加しましょう。 products/index.vue products/[id].vue これで、プロダクトページのレイアウトが変わったことが理解できましたね。 今日はNuxt.jsでページの使い方、レイアウトの使い方を学びました。 お疲れ様でした。

Nuxt.jsを始めよう

by
NuxtJSを始めよう

Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン３について解説していきます。 Nuxt.jsの強み Nuxt.jsの弱み また、ソースコードはGitHubのリポを確認してください。 Nuxt.jsを始める Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン３をインストールします。（Node.jsがインストールされていることが前提です。） ではライブラリがインストールされたところでデベロップメント用のサーバーを起動します。 これで初期のNuxtのセットアップが完了しました。 ファイル構成 nuxt.config.ts nuxt.config.tsはNuxtのコンフィグで使用するファイルでTypeScriptで構成されています。JavaScriptファイルの方が良い場合は.jsに変更することも可能です。このファイルでモジュールの登録やカスタムメタデータの登録をすることができます。また、ここにAPIキーなどのEnvironment Variable（環境変数）を登録することもできます。 app.vue デフォルトのルートコンポーネントになります。デフォルトでは、NuxtWelcomeのコンポーネントがマウントされるようになっていますが、これらのファイルはモジュールに埋め込まれています。Vueの場合はHelloWorldが通常のディレクトリに置かれているのでいちいち削除する必要がありましたがNuxtの場合は無視して削除する必要はありません。npm i でまたインストールされてしまうので。 .nuxt 開発の際にNuxt側で使われるディレクトリです。そのまま放っておいてください。 package.json おなじみのパッケージが一覧で記載されたコンフィグファイルです。npm i で記載されているライブラリがインストールされますね。 Welcomeページを削除 ではapp.vueにあるNuxtWelcomeを適当に入れ替えてみます。先ほども記載しましたがWelcomeNuxtのコンポーネントは削除しなくて良いです。 これでデフォルトのページがホットリロードされましたね。 お疲れ様でした。

JSひろば開発7日目：Vueアプリのデプロイとデザイン

by
JS-Hiroba-day7

JSひろばアプリもほぼ完成に近づいていきました。今日は最終的にvue-routerを入れて、URLで指定したコードのIDをコンソールに貼り付けできるようにします。これで、これからJSのチュートリアルを作成する際にリンクを貼り付けて、そこからサンプリコードを実行できるようにすることが目的です。 今後はユーザーがコードを登録できたり、シェアできるようにできたら楽しいなと思います。オープンソースなので皆さんでカスタマイズして試してください。 作業日 2022年12月28日 作業にかけた時間 6時間 合計作業時間 30時間 作業内容 モジュールインポートエラーの対応favアイコンの作成英語版に対応させるDBモデルの改修Google Analyrticsの追加ローディング画面の設定Vue-routerの追加 モジュールインポートエラーの対応 Vueアプリをnpm run buildのコマンドでプロダクション用にコンパイルするとデプロイしようとすると下記のエラーが出ました。 調べてみると、npmでインストールしたハイライトのプラグインのCSSをインポートしていることが原因の様でした。rollupでモジュール内のCSSをエクスターナルのファイルとして特例で設定しないといけないようです。 vite.config.jsで下記の様にbuildの部分を追加して再度npm run buildを実行したところ、問題が解決できました。 favアイコンの作成 Adobeのイラストレーターでブックマークに使われるアイコンを作りました。SVGで作成したのでデスクトップのブックマークでも画像がぼやけないようにしました。 英語版に対応させる 日本語だけだとユーザーが限られるので英語版に対応したアプリにさせます。このようにToggle（トグル）させるボタンをつくりRefでisJapaneseがtrueかfalseかを判定させるようにしました。このデータはPiniaに保管されグローバルにアクセスできるようにしています。 DBモデルの改修 では英語版に対応したデータがないのでDjangoのモデルを追加します。英語用のフィールドと難易度をチョイスで追加しました。 Google Analyticsの追加 Google Analyticsを追加しました。特に説明する必要はないと思いますが、headタグ内に用意されたscriptを配置しただけでOKです。　 難易度のフィルター 次にコマンドの例を初級、中級、上級に分けてソートする機能を付けました。 ボタンが順番に表示されるようになり、それに合わせてデータがフィルターされます。 Vue-Routerの追加 最後に、データベースから引っ張ってきたコードはIDでURLの最後にくっつけます。これでブログとかでコードを指定して表示させたい場合は、URLでそのまま引用できるようになります。 で、検索されたコマンドがペーストされた後に、URLにIDを飛ばしました。 URLを監視する Vue-Routerを使う一番の理由である、URLから目的のコードをコピペされた状態にするということを達成するために、watchEffect()を使いました。 これでアプリのイニシャライゼーション（初期読込）の時とURLが変わったときにフェッチしたデータをコンソールにペーストできるようになりました。 とりあえず完成とします。あとは、Django側でデータを入れて、JSの記事に使えるか試してみます。 お疲れ様です。

JSひろば開発６日目：Vueアプリのデプロイとデザイン

by
JSひろばアプリ作成まで～6日目

前回までの記事では、Djangoをデプロイし実際のドメインからアクセスできるところまで行いました。今日の作業ではバックエンドのDjangoアプリで作成したAPIのエンドポイントとVueのウェブアプリから実際にAPIのリクエストを送りバックエンドからデータをもらえるようにします。あとデザインをキレイにしましょう。 作業日 2022年12月16日 作業にかけた時間 8時間 合計作業時間 24時間 作業内容 Djangoに実際のデータを入力VueアプリにAxiosをインストールAPIコールのリスポンスをPiniaに保管実行ボタンの作成アニメーションの設定highlight.jsを設定 ではDjangoのアドミンページから実際のデータを入力してAPIのエンドポイントから取得できるようにします。 VueアプリにAxiosをインストール 次に、EventService.jsというAPI関連のコールをまとめた別ファイルを作成しました。 次にPiniaのファイルにAPIコールのファンクションを保管しておきPiniaが読み込まれたらデータをフェッチするようにします。どこでこのファンクションと発火させるかは後から変更するかもしれません。 ここで、APIのGETリクエストを送ると予定通りにCORSポリシーでDjangoからブロックされてしまいました。 詳しい対応方法はDjango REST API COR Headersの使い方の記事を参照してください。ではこの記事通りにいったんDjangoのアプリを更新してまた戻ってきましょう。 あと、Vue側のアプリケーションのindex.htmlのheadタグ内に下記のmetaを追加しました。 Vueアプリの検証 ではAPIの問題が解決したところでこのPrimeVueのターミナルで問題発生。。このUIだと改行ができないことが発覚しました。まあターミナルなのでそうでしょうが。なのでPrimeVueのTextAreaのコンポーネントと入れ替えました。 Vueアプリのデプロイ Vueアプリのデプロイはこの記事を参考にして行いました。これもLet’s EncryptとCertbotを使ってHTTPSからアクセスできるようにしました。 とりあえず、Vueアプリがデプロイできるようになりました。後はUIの調整と細かい設定をして完了です！ アニメーションで使ったCSSはこちらの記事に書いています。Animistaというサイトです。 highlight.jsの追加 このままだと、テキストエディタのように色でハイライトされないので見づらいですね。highlight.jsをインストールしてみます。ここで入力したときと同時に1文字ずつでJavaScriptのキーワードかを判定してハイライトするようにしたかったのですが、うまくいきませんでした。テキストエリアをハイライトさせるのが難しそうでしたので諦めました。 しかし、他の方法でコマンドを実行したときにコードがハイライトされるようにできたので良しとします！ もし、単純にダイナミックでないコードをハイライトしたいのであればVueのコンポーネントで使えるHighlight.jsのプラグインもあるので試してください。 とりあえず今日はここまで！

JSひろばアプリ開発5日目：Djangoのデプロイ

by
JSひろばアプリ作成まで～5日目

前回まではJSひろばのVueアプリとDjangoのAPIを大まかに作成しました。 今日はフロントエンドのVueのデプロイよりも先にDjangoのアプリをデプロイして実際のAPIを使ってVueからAPIコールができるようにします。実際にデプロイをしたあとに細かなセキュリティの設定やAPIのデータを入力していくようにします。 作業日 2022年12月14日 作業にかけた時間 5時間 合計作業時間 16時間 作業内容 ドメインの取得Ubuntuサーバーの設定サーバーのユーザー設定PostgreSQLのインストールリポジトリのクローンDjangoのデプロイNginxの設定SSLの取得 ドメインの購入 ドメインは〇〇.comとかウェブサイトのアクセスリンクになる部分ですね。今回は個人的なお勧めのNameCheap.comからドメインを購入します。APIの方もIPアドレスからAPIのエンドポイントを作成しようと思いましたがセキュリティの面からもドメインを使った方が良いとのことなのでDjangoとVueのアプリケーションのどちらにもドメインを割り当てます。 では、asameshi-api.cloudとjs-hiroba.comを購入します。合計で年間12ドルなので安いですね。SSL Certificate（HTTPS）は無料でサーバー側で設定できるのでここで購入する必要はありません。 サーバーにドメインを登録 今回もまた、個人的なお勧めのLinodeサーバーを使います。東京にサーバーを作りましたので先ほど購入したドメインをサーバーに登録しましょう。ではNameCheapのドメイン設定からカスタムDNSを設定します。 ところがLinode側で登録すると以前に設定していたサーバーと紐づけされてエラーになってしまいました。 これは私の方では何もできないので一旦、サポートにお願いをして待ちます。 その間にIPアドレスからデプロイしちゃいます。 サーバーの設定 まずはLinodeでサーバーを作ります。Linodeサーバーを月額500円で始めるという記事があるのでそちらを参考にしましょう。 サーバーを作成したらLinode側でドメインを登録します。 同じようにapiで使う方のドメインも登録しておきます。 サーバーにSSHで接続 詳しいSSHの使い方はこちらの記事で説明しています。サーバー構築で必ず役に立つので理解しておきましょう。 ではSSHクライアントを使ってサーバーに接続しましょう。SSHクライアントのMobaXtermを使います。 Djangoのデプロイ 詳しいDjangoのデプロイの仕方はこちらで説明しています。 同じような手順で設定していきましょう。 この後にデータベースを作成しましょう。 詳しくはDjangoのデプロイの仕方でカバーしているので確認しておきましょう。 次に仮想環境の設定です。 次にGunicornのテストをしました。 でNginxのコンフィグはこのようになりました。 ではNignxをテストして、サービスをリロードします。 ドメインをsettings.pyに登録していなかったのでエラーが出ました。しかしこれでDjangoのエラーのページが出たので正しくNginxとGunicornが動いていることが確認できますね。 これでサーバーを再起動してAPIのURLにアクセスすると問題が解決していることが確認できました。 しかしURLを見ても分かるようにまだHTTPのままなのでSSL Certificateを取得して安全なサイトにするようにします。 この作業はLet’s EncryptでSSL取得の記事を見て行いましょう。 ここで、安いプランのシェアサーバーだったせいか、SSLのセットアップに少し苦難し、２時間余計に時間がかかってしまいました。 特に、DNSを使ったSSL証明のチャレンジ、HTTPからHTTPSへのリダイレクトなど初めての作業だったのでとても良い経験になりました。

JSひろばアプリ開発4日目：Djangoプロジェクトの作成

by
JSひろばアプリ作成まで～4日目

前回まではVueのフレームワークを使い、フロントエンドのアプリを作成しました。まだモックのデータでしか操作できないので、実際にREST APIを作成したVue側で使えるようにしていきます。 今日は、PythonのウェブフレームワークのDjangoを使ってAPIを作っていきます。Flaskよりもアドミンページがあったりセキュリティの設定が最初から入っているなど開発の面でもスピードアップができる素晴らしいフレームワークです。 YouTubeでもDjangoとDjango REST APIを説明したプレイリストがあるので是非見てください。 作業日 2022年12月13日 作業にかけた時間 2時間 合計作業時間 11時間 作業内容 Djangoのプロジェクト作成virtualenvの設定requirements.txtに書き出しDRFのインストールDBのテーブルの構成モデル、URL、ビューの設定PostgreSQLに接続 Djangoのプロジェクト では早速Djangoのプロジェクトを作成します。Python3がインストールされていることを確認してください。 その前に仮想環境のvirtualenvが入っているか確認します。入っていない場合は下記のコマンドでインストールしましょう。 仮想環境の説明はこちらの動画を見てください。必ず役に立ちますよ。 では正しいファイルパスにいることを確認して下記のコマンドで仮想環境をアクティベートします。 これでプロンプトの最初に（env）と表示されればOKです。 Djangoのインストール ではDjangoとDjango REST Frameworkをインストールします。 他にも必要なパッケージがあればその都度インストールすると思いますが、今のところはなさそうです。 Djangoはバージョン4.1がリリースされているので最新のものを入れておきましょう。 必要であればgit initでリポを作成しましょう。詳しいGitとGitHubの使い方はこちらの動画を見てください。 では、下記のコマンドでDjangoのプロジェクトをスタートします。 次にmanage.pyのファイルを使ってDjangoのアプリを作成します。 次にを開発用の仮のデータベースをSQLiteで作成します。 その後にテストランしてみましょう。 これでセッションのテーブルができました。 では実際にブラウザにアクセスしてDjangoのデフォルトのページが表示されるか見てみます。 OKですね。では実際にコードに入ります。 アプリの登録 先ほど登録したcommandアプリをDjangoのプロジェクトに教えてあげます。 Settings.pyでcommandアプリとRESTフレームワークのアプリを登録しました。 次にプロジェクトフォルダのurls.pyにAPIのエンドポイントとなるURLを登録します。 このrouterファイルは後から作成します。まずはAPIの前にデータが登録できるところまで確認しましょう。 モデルの作成 ではデータベースの枠となるmodels.pyを作成していきます。 とりあえずはこんな感じで作成しました。 Views.pyの作成 Views.pyはモデルともとに何をするのか指示する場所になります。 ここではモデルをシリアル化してAPIを作成するように指示しています。 CommandSerializerのファイルがまだできていないのでそれを作成します。 CommandSerializer では同じファイルパスにserializers.pyを作成しましょう。 まずはこれだけ設定していきます。 admin.pyの登録 Djangoのアドミンパネルでテーブルが見れるようにモデルを登録します。 スーパーユーザーの登録 Djangoのスーパーユーザーを作成してアドミンパネルからテーブルが作成できるか見てみましょう。 再度テーブルのマイグレーションを行います。 … Read more

JSひろばアプリ開発3日目：Vueアプリの全体像

by
JSひろばアプリ作成まで～3日目

前回の記事では、Piniaを入れて大まかなレイアウトを作成しました。 今回はPiniaやemit()、テンプレートrefを使うのでVueの要素が盛りだくさんです。 今日で大まかなフロントエンドの部分を完了させます！ 作業日 2022年12月12日 作業にかけた時間 3時間 合計作業時間 9時間 作業内容 ボタンのコンポーネントの作成モックのデータを作成グローバルで使うデータをPiniaに保管させるEmitを使いデータを親コンポーネントに送るライブラリコンポーネントのRefにアクセスする 3つのファインダーコンポーネント では、このJSひろばのアプリのメイン機能としてこの４つのファインダーがありましたがおすすめ検索機能はキーワード検索とほぼ同じなのでいったん取り除くことにしました。 これは、ユーザーがJavaScriptのサンプルコードを見つけるための機能になります。 ボタンのコンポーネント 各ボタンを押すとそれぞれのボタンに付属した内容が同じダイアログ（ポップアップ）のコンポーネント内で表示されるようにします。 まずは、各4種類の検索機能のコンポーネントをcomponents/finderフォルダに作成します。最初の中身はただのテキストでOKです。次にApp.vueに戻りPrimeVueにあるDialogコンポーネントをコピペします。 それから、各ボタンを押したときにそれぞれのコンポーネントの内容が表示されるようにロジックを作成すればOKです。 途中経過ですが、こんな感じになりました。 実際の画面はこんな感じです。 キーワード検索 まだ、データベースの細かい構成とデータの量を吟味していないので詳しくはすすめられません。ここで検討すべき課題はこちらになります。 このファインダー機能のコンポーネントは複雑になるので作成はいったん後回しにします。 Piniaの作成 Piniaを使ってグローバルにアクセスできるストレージを作成します。とりあえず、モックのJSONファイルを作成してテーブルとして表示できるところまでやってみます。 これを各テーブルで表示させるとこんな感じになりました。 履歴のデータを保管する 各コマンドを実行した後に、その履歴をオブジェクトの配列に保管します。常に最新の履歴が先に来るようにしたいため、pop()ではなく、unshift()を使っています。 コンソール関係のコードはこのような感じです。 これで入力したコマンドがオブジェクトとして配列に保管されました。テーブルにも問題なく表示されていることが分かります。 コードをコンソールにコピーする機能 では、検索機能で探したコマンドをコンソールにコピーするボタンのファンクションを作成していきます。ドキュメンテーションにはないですがこのターミナルがどうやって入力されたテキストをバインドしているか見てみましょう。 VueのGoogleエクステンションツールを使います。 VueのタブからTerminalのコンポーネントを開きます。すると、DataのところにcommandTextがあるのがわかります。ここがnullになっていますがターミナルにテキストが入力されると同時に更新されました。 では、このデータにコピーしたいコピーをバインドさせるようにします。 まず、ここのcommandTextにアクセスするには＜Terminal ref=”terminal”/>のようにrefを使ってこのコンポーネント内にあるデータ、関数にアクセスすることができますね。（Compostion APIの場合は対象のコンポーネント側でexpose()されて公開されている必要がありますが。） あとは、テーブル側のボタンにemit()を設定して親コンポーネントにコマンドのデータを送ってあげます。 親コンポーネント側では、Emitを受け取ったときに発火するイベントを下記の様に設定してあげました。 細かいスタイルの変更 ここまでできたら、大体のレイアウトは決まったのでスタイルをキレイにしていきます。 特に、モバイルとデスクトップで共通のアプリを使えるようにしたいのでその設定も必要です。 とりあえずこんな感じになりました。ポップアップで表示されるダイアログは実際のデータが入ってからスタイリングをしたいと思います。 では、フロントエンドはこれくらいにして次回からにバックエンドにかかりましょう。 お疲れ様です。

JSひろばアプリ開発2日目：スタイルの設定

by
JSひろばアプリ作成まで～2日目

前回の記事ではアプリの概要とデザインを全体像として決めました。 今日は、もう少し具体的なフロントエンドのデザインを設計していきます。ファイル構成（どの段階でコンポーネントにするか）とPrimeVueのライブラリを見ながらサクサク進めていきたいです。 ちなみにバックエンドも同時に進めても良かったのですが、割と簡単な作業になりそうなので、モックのJSONファイルで先にフロントエンドでテストをしてからでも良いと判断しました。ですので先にVueのアプリケーションから固めていきます。 作業日 2022年12月10日 作業にかけた時間 3時間 合計作業時間 6時間 作業内容 Figmaのデザインを形にしていくファイル構成を考えるVueコンポーネントの作成Piniaのインストール PrimeFlexのインストール 前回入れていなかったので、今回使うCSSライブラリのPrimeVueで使うCSSユーティリティをインストールします。 これでクラスを使ってマージンの設定やFlexの設定ができるようになりました。 次にGoogleフォントを追加しました。CDNでfontをリンクさせました、必要に応じてフォントのファイルをダウンロードしてローカルから使うようにすることも考えています。 main.jsに下記のimport ‘@/assets/global.css’をインポートしました。 スタイルはできるだけPrimeVueのものを使い、カスタムしたい場合は.Vueファイルの下に<style></style>を作成してそこにCSSを書きました。 ざっくりと全体像を作成しました。 ユーザーエクスペリエンスの向上のために下記のことを先に達成したいです。 これを実現するにはいくつか方法がありますが、PrimeVueのコンポーネントでダイナミックダイアログというものがあったのでこれで対応していきます。 さらに上記でごちゃごちゃした検索機能とか、ボタンの枠を固定してボタンを押すとこのダイアログが表示されるようにします。なのでこれらはコンポーネントにまとめてあげましょう。 とりあえずポップアップが開くところまではOKですね。 Piniaのインストール 次にPiniaをインストールします。単純にreactive()でオブジェクトとしてデータまとめても良いのですが、propsでごちゃごちゃしていくと後からの修正が大変なので、グロバールでアクセスできるPiniaの方がよいと判断しました。 Piniaの使い方はこちらで説明しています。 ではPiniaのインストールが完了したらmain.jsに追加します。 その後にstore.jsというファイル名でアプリに使うデータをPiniaを使ってここに保管させます。 どのようなデータを保管するか具体的な構成は次回までに考えておきます。 とりあえずこんな感じでPiniaで作成したStoreデータをメインの画面に表示させることができました。 Piniaのファイルはこのように書きました。 App.VueのファイルにはこのようにPiniaをインポートしました。 では、次回にポップアップの中身と検索機能を作成していきたいと思います。 お疲れ様です。

JSひろばアプリ開発1日目：プロジェクトのセットアップ

by
JSひろばアプリ作成まで～1日目

私がプログラミングを独学で始めたのた2020年の3月、ニューヨークでコロナがちょうど発生した時でした。 それから片手間にPythonを１年くらい学び、その後にJavaScriptを後に学び始めました。 それからチケット管理アプリをデモで作りましたが、もっと実践で使えそうなアプリを作りたいと思い、今回のJSひろばアプリを作ることに決めました。 今回はプログラミングを始めたい人の為にすべての作業をゼロから行い、コードもすべてオープンソースで公開いたします。 作業の内容 作業日 2022年12月8日 作業にかけた時間 ３時間 合計作業時間 ３時間 作業内容 アイディアを絞るUIをFigmaでデザインする使用するテクノロジーを決める課題点をクリアする JSひろば JSひろばという名前でアプリを進めていきます。これは、ユーザーがJSエンジンのコンソールにウェブページからインプットできて、ファンクションやWindowオブジェクトの仕組みを実際に試しながら学ぶアプリです。 下記がアプリのイメージになります。 これは無料デザインツールのFigmaを使って作りました。詳しいFigmaの使い方はこの記事で紹介しています。 当初はユーザー登録をしてユーザーが好きなコードの投稿や、お気に入りのコードを登録する機能までつけてみようかと思いましたが、機能の実装までにかなり時間がかかりそうなのでとりあえずはなしで進めます。 今回のスタック JSひろばアプリは今まで使ってきたPtyhonのウェブフレームワークのDjangoとそれをREST APIにしてくれるライブラリを使います。 フロントエンドはReactを使おうかなと思ったけどVueの方が慣れているのでそちらを使います。 Djangoだとついてくるアドミンパネルからデータのエントリーができるのでこれもプラスですね。 では、今回のスタックDjango＋PostgreSQL＋Vueのイメージ図です。 eval()の脅威 今回、ユーザーがウェブページからeval()のメソッドを使ってコンソールと同じようにリスポンスを返すようにしたいのが一番の目的でした。しかしeval()はセキュリティ上使わない方がよいようですね。 有名なハッキング手法のうちの一つにEVAL インジェクション(eval injection)があることを知りました。 これは、JavaScriptのデーターフォーマットをであるJSON (JavaScript Object Notation)に不正なコードを挿入し想定外の動作を誘導する攻撃手法です。特にPHPをサーバーで使っている場合は危険のようですね。 今回は下記の点からeval()を使っても良いと判断しました。 Vueのプロジェクト作成 Vueのスタックはこんな感じです。 Vue + PrimeVue（UIライブラリ）＋ Vite + Pinia 今回はさくさくに動くViteのビルドツールを使います。 とりあずJavaScriptでコンソールをウェブページに実装できるところまで進めます。 UIで使うCSSライブラリはPrimeVueにします。詳しいライブラリの説明はこちらで見てください。 TailwindCSSでもよかったのですが、PrimeVueに使えそうなターミナルのコンポーネントを発見しました！ まさにこれをアプリのメインのターミナルとして使いたいですね。 ではPrimeVueもインストールしましょう。詳しいPrimeVueの設定の仕方はこちらを参照してください。 とりあえずここまでできました。 ではPrimeVueのコンポーネントを使ってキレイにしましょう。 細かいインプットの制限やコードの整理はまた次回に行います。 GitHubでコードを公開しているので見てください。 GitとGitHubの使い方もYouTubeで説明しているのでよかったらどうぞ。 完成したアプリはこちらからどうぞ。

ReactをUbuntuサーバーからデプロイする（Nginx)

by
React　デプロイの仕方

今日はUbuntuサーバーからReactアプリのデプロイをする方法を紹介していきます。 Vueのアプリをデプロイする方法はこちらからどうぞ！ 今日はnpx create-react-appの代わりにViteを使ってReactアプリをビルドしていきます。 なぜReactをViteでセットアップすべきなのかを知りたい方はこちらからどうぞ！ どちらを使うにしてもビルドのコマンド（Viteならnpm run build）でJavaScriptのコード、画像ファイル、スタイル、HTMLファイルをdistディレクトリにまとめられます。 今回はUbuntuとウェブサーバーのNginxを使ってReactアプリをデプロイします。 では早速本題にとりかかりましょう。 準備しておくこと Reactのアプリを準備する ではローカルの環境でサーバーにアップロードするためのReactのファイルを作成しましょう。 すでにReactのアプリが準備できている場合はこの手順を飛ばしてください。 npm run devでテストサーバーからReactのアプリがブラウザで見ることができれば一旦OKです。 UbuntuサーバーにSSHで接続 ではサーバーに遠隔で入るためにSSHを使いましょう。 私のおすすめはフリーソフトのMobaXtermです。 こちらの記事で詳しいMobaXtermの使い方を説明しているので参考にしてください。 ではサーバーのIP、ポート22（通常は）、ユーザーIDとパスワードを使ってサーバーに接続しましょう。 ではrootで接続していた場合はUbutuのユーザーに切り替えます。 Reactのファイルをアップロードする では適当な場所にReactのアプリケーションを上げます。指定がない場合はUbutnuのユーザーのフォルダにアップロードしましょう。 MobaXtermのクライアントだとSSHで接続された状態で、ファイルの転送がドラッグ&ドロップで実現できます。 ここに新しく「React-Tutorials」という名前を付けてReactのファイルをアップロードします。ディレクトリ名は皆さんのアプリに適したものにしましょう。 ここで、GitHubにあるリポジトリからクローンすることもできるのでそちらの方が実用的かもしれません。GitとGitHubの使い方はこの動画を参考にしてください。 Nginxのコンフィグファイルを作成 ではNginxをインストールする記事を読んで先に下準備を済ませておきます。 ではこのNginxのコンフィグファイルに下記の様に書いていきます。 私の場合はこのようになりました。 ではCtl+OもしいくはCtl+Xでデータを上書きしてnanoのテキストエディタを閉じます。 次にsites-availableからsite-enabledにシンボリックリンクを作成します。このsites-enabledにあるファイルをNiginxが読み取りサイトを公開するようになっていますので。 ではsites-enabledの方にもファイルができていたらOKですね。 ポートを開放する 先ほどのNignxのファイルでポート80番を開けていた場合はデフォルトで空いていると思いますがもし、私の例の場合のようにポート83番からデプロイしたい場合はファイヤーオールの設定で許可する必要があります。今後、一つのサーバーから複数のアプリケーションをデプロイする方法も紹介しているのでよかったら試してみてください。 あとNginxのサービスをリスタートすることを忘れずに デプロイしたサイトにアクセス では実際にデプロイしたReactアプリケーションにアクセスしてみましょう。 http://172.104.81.40:83/ おめでとうございます。 もしうまくいかない場合は、コメントに詳しい状況を書いてくださいね。 お疲れ様でした。