フロントエンド

フロントエンドはユーザーに見える部分のことになります。

Web開発では、UXデザインやフロントエンジニアが大活躍します。また、会社によってはクライアントとの打ち合わせを直接行うこともあります。

HTMLとCSSを学び、JavaScriptを学ぶのが通例ですが、これに限ることはありません。

Webデザインやウェブアプリケーションに興味がある人は是非フロントエンドの道を進んでいきましょう。

自作のnpmパッケージを公開しよう

2024/01/222023/01/19 by Dan

npmはNode Package Manager（ノードパッケージマネージャー）の略で、コマンドラインからJavaScriptのライブラリを簡単にインストール、管理できるアプリケーションです。 ReactもVueもAxiosもすべて、このnpmのライブラリに登録されているパッケージになります。今日は、自作したnpmパッケージを一般に公開する方法を紹介します。npmを使ったことがない人は先にこちらの動画を見ておいてください。なぜパッケージを自作すべきかプログラマーのツールの大多数は無料で使えます。Reactも、Linuxもソースコードを公開してオープンソースとして社会に貢献しています。もし、アイディアがあれば、オープンソースのプログラムを公開することはサイドプロジェクトとして最適です。また、通常、下記の行からライブラリをインポートしますが、実際にその中身がどうなっていることを知ることはとても重要になります。 GitHubのリポジトリを作成まずはGitHubとGitを準備しましょう。使ったことがない人はこちらの動画でGitのインストールの仕方と、GitHubの使い方を説明しています。GitとGitHubはなくてもできないことはないですが、バージョンコントロールと、リポジトリの管理はプログラマーにとって必須のスキルですので是非覚えておきましょう。この作業は後からでもできますが、リポジトリが決まっている場合は先に作っておきます。では、GitHubに行き、リポジトリを作成します。ここで作成（Create Repository）をクリックするとGitをinit（イニシャライズ）できるコマンドがあるのでそれらをコピペしていきます。ではコマンドラインから上記のラインを一行ずつコピペしていきましょう。 git push でrefsのエラーが出た場合はセキュリティ対策としてSSHキーが登録されていないと使用できないものになります。詳しいSSHキーの登録の仕方はこちらの記事を参照してください。 npmパッケージのイニシャライズでは、git initを行ったディレクトリ内にいることを確認して、npmパッケージのイニシャライズを行います。npmがインストールされていることを確認し下記のコマンドを実行していきましょう。すべてを入力するとおなじみのpackage.jsonが作成されました。途中で聞かれたエントリーポイントがnpmパッケージのメインのJavaScriptのファイルになります。早速、index.jsを作成していきます。もしファイル名を変更したい場合は、package.jsonの中にある”main”の対象先を編集してください。では、index.jsにサンプルとして、下記の行を書いてみます。ストリングが一致するとtrueを返す関数です。 npm link npmのパッケージができたら、コマンドラインからnpm linkのコマンドを使い{prefix}/lib/node_modules/<package>の場所にリンクさせます。シンボリックリンクといいますが、これで、npmパッケージがインストールされたかのようになり毎回ビルドをすることなくテストを行うことができます。 npmパッケージのテストでは、npm linkを行ったら、適当な場所にフォルダを作成して、テストを行います。コマンドラインで、テストディレクトリに移動して、先ほどのasameshiパッケージのリンクをインストールします。コマンドを実行するとnpmのnode_modulesディレクトリが作成され先ほど作成したasameshiパッケージがインポートされました。ではコマンドラインからJavaScriptファイルを実行します。画像のようにtrueが返ってきました。これでパッケージが問題なく作動していることが確認できましたね。 npmアカウントの作成 npmのパッケージを公開するためにはアカウントが必要になります。無料でできるので作っておきましょう。ではnpmの公式サイトからSign Upをクリックします。では、下記の様にアカウント情報を入力していきます。これでnpmのアカウントが作成できました！ npmのアカウントをローカルの環境に接続では下記のコマンドでローカルのnpmにユーザーを追加します。ではEmailでワンタイムパスワードを確認してnpmにユーザーを追加しましょう。ちなみに登録したEmailは一般に公開されるので要注意！ npmパッケージの公開ではnpmにユーザーを追加したところで、下記のコマンドでnpmのパッケージを公開しましょう。これで下記の様にエラーがでなければ成功です。ちなみに、パッケージ名がすでに取られている場合はエラーが出るので、ユニークなものにしてください。公開したnpmを確認では公式サイトからasameshiのパッケージを確認しましょう。 https://www.npmjs.com/package/asameshi … Read more

NuxtにPiniaをインストールする方法

2024/01/222023/01/12 by Dan

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。その場合は、package.json:に下記の行を追加して、再度試してみて下さい。次に、NuxtのコンフィグファイルにPiniaを登録します。 setup()の外でPiniaを使う場合 Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。 Piniaファイルを作成ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。イメージとしてはこのような感じになります。お疲れ様です。

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

2024/01/222023/01/05 by Dan

前回の記事では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を始めよう

2024/01/222023/01/05 by Dan

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アプリのデプロイとデザイン

2024/01/222022/12/29 by Dan

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アプリのデプロイとデザイン

2024/01/222022/12/22 by Dan

前回までの記事では、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ひろばアプリ開発3日目：Vueアプリの全体像

2024/01/222022/12/14 by Dan

前回の記事では、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日目：スタイルの設定

2024/01/222022/12/12 by Dan

前回の記事ではアプリの概要とデザインを全体像として決めました。今日は、もう少し具体的なフロントエンドのデザインを設計していきます。ファイル構成（どの段階でコンポーネントにするか）と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日目：プロジェクトのセットアップ

2024/01/222022/12/09 by Dan

私がプログラミングを独学で始めたのた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で説明しているのでよかったらどうぞ。完成したアプリはこちらからどうぞ。

今すぐ使えるCSSデザインツール19選！

2024/01/222022/12/08 by Dan

デザインにこだわりたいけどあまり時間をかけたくない方、この記事で紹介する19のCSSデザインツールを使って、一味違うサイトを作りましょう。今回は、アメリカに住む私が個人的におすすめのCSSデザインツールを集めました。全部英語のサイトになりますがコピペだけで使えるものがほとんどです。 CSSプロパティの作成 Neumorphism Neumorphismはシャドウの設定を簡単に調整できるサイトです。ボタンの出っ張り方や高さを微調整したいときにとても便利ですね。 Shaddows Brumm Shaddows Brummはシャドウの方向やシャドウのレイヤーを細かく設定できるCSSデザインツールです。とてもきれいなシャドウが作れますね。 Fancy Border Radius Fancy Border Radiusでは、ユニークなborder-radiouを作成することができます。水のしずくの形や不思議な形が作れてしまいます。 Glow Generator Glow Generatorでは、Glowエフェクト（光のエフェクト）を簡単に作ることができます。ネオンライトや夕日などのイメージに使えそうです。 Clothoid Corners Clothoid Cornersでは通常のborderradiusとは違うらせんのような柔らかいカーブを作ることができます。 Glassmorphism Glassmorphismでは、ガラスをイメージしたスタイルを作成することができます。透明感や色を調整できます。 Clipy Clipyでは、clip-pathを使って写真をマスキングできるスタイルを作成することができます。タイトルとかに使えそうです。 CSS Filters CSS Filtersでは写真にキレイなフィルターを付けることができます。モノクロのポートフォリオを作りたいときとかもよさそうです。アニメーション Animista Animistaでは数多くのプリセットから好きなアニメーションを選んでコピペで使うことができます。べーシックなものからポップアップの表示に使えそうなものまでいろいろありますね。 Wait Animate Wait Animateはアニメーションのあとに待たせて再度ループさせるように設定できるツールです。バックグラウンド Hero Patterns Hero Patternsでは、CSSで作成されたパターンをコピペで使えるようにしたサイトです。パターンの種類も多く、パズル、木目、壁紙のようなものまであります。 Haikei Haikeiではモダンなカーブのある背景を簡単に作成できます。ファイルはSVGで出力できます。 CSS Pattern CSS Patternでは、CSSだけでつくられたパターンをコピペで使うことができます。 Animated BG Animated BGでは、アニメーションのあるバックグランドをCSSで作ることができます。蛍のような光をかもし出したり、ブロックがくるくる移動したりととても落ち着くアニメーションです。カラー CSS Gradient … Read more