KYO

Nuxt.jsをサーバーで動かす時の設定

2018年11月28日

npm run generateでdistフォルダが出来上がるが、それをサーバーに置くとどうなるのか実験しました。 とりあえず何も考えずに超絶シンプルなものを作る [crayon-5c19e22b1451d210771067/] pages/hoge.vue [crayon-5c19e22b14524994109670/] assets/...

Nuxt.jsでaxiosとvuexを使ってみる

2018年11月27日

最近Vue.jsが面白くて勉強して、Nuxt.jsも勉強し始めたのでメモします。   キーワードを入力するとQiitaから関連する記事を取得してきて表示するというシンプルなサイトを作ってみました。 ただ作るのはあれなんで、厨二病っぽいデザインにしました これでスタバにいってドヤ顔しましょう 英語はよくわかんないので強そうなワード...

JavaScriptでトランプを作る

2018年9月17日

javascriptでトランプを作る トランプはハート、ダイヤ、スペード、クローバーで1~13の数字があります。 [crayon-5c19e22b14d56260944312/] markにはハートとか種類を入れておき、それらに対して13回ループをかけます。 このtypeはmarkの中身が順番に入ってきます。 スペードを13回ループした後...

vue-cliで作る時にjQueryを導入するまでとビルド後にエラーが起きた時

2018年9月7日

vue-cliというすごいものがあると知ったんですが、npmとかいまいちよくわかっていませんでしたので、遠ざかっていました。しかし、Laravelとの連携を考える時に必要な知識になってくるのではないかと思い簡単に入門してみたのでそのまとめです。 プロジェクトを作成する [crayon-5c19e22b14f66095168600/] これ...

Vue.jsでコンポーネントの基礎を整理します

2018年9月2日

Vue.jsを勉強していますが、ちょっとコンポーネントの部分で躓いたので、整理もかねてメモを残します。今回はコンポーネントを定義して、そっから定義元であるメソッドを呼び出すという処理を行います。引数の受け渡しも同時に整理していきます   まずはこんなjsを用意しました。 [crayon-5c19e22b1520f11152496...

CSS

cssデザインメモ。自分の勉強用

2018年8月27日

cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン [crayon-5c19e22b154ef107616323/] [crayon-5c19e22b154f5539057312/] リストの右橋にアイコンをつける [cray...

JavaScript自分用メモ配列の扱い

2018年8月27日

配列と子要素の削除と追加などを勉強したのでメモ。配列の中に配列があったり、連想配列があったりするパターンがごちゃごちゃになるのでその辺も。 あとはquerySelectorAllの挙動とかの確認的なメモです [crayon-5c19e22b15792105499011/] [crayon-5c19e22b15797834881493/] ...

CSS

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...

Vue.jsで、スライドメニューを作る

2018年8月17日

最近Vue.jsを勉強し始めました。 対してjQueryも使いこなせないんですが、Vue.jsってjQueryより使いやすいんじゃね?と思ってしまうほどにハマってしまいました。 というわけで、Vue.jsでサイドメニューを表示させます。   jQueryみたいにクリックした時に、この要素にクラスを付与するみたいなロジックを書かず...

Laravel5.6とAjaxで「いいね」機能を作るチュートリアル

2018年8月5日

Laravel5.6で、いいね機能の作り方をチュートリアル形式で解説します。ちなみに中級のチュートリアルを終えたレベルなら作れると思います。 今回はログインしているユーザーが投稿に対して「いいね」を押せる機能を作ります。「いいね」は一度押すともう押せなくして、「いいね」取り消しは不可能にします。ユーザーごとに「いいね」を押しているのかどう...