今回はWeb Componentsを使って実際にコードを書いていきたいと思います。 アイコンと文言がセットになったざーーっくりとしたプロフィール用のテンプレートを例に作っていきます。 いきなりですが、↓が全体のコードになります。 一つ一つ解説を交えながら進…
今回はWeb Componentsについて自分の理解も深めるために書いていきます。 Web Componentsについては公式サイトにおいて下記のように説明されています。 Web components are a set of web platform APIs that allow you to create new custom, reusable, enca…
今回はスライダー対応のポップアップテンプレートを作成してみました。簡単なポップアップのテンプレートが欲しい場合はこちらを参考にしてみてください！ top-men.hatenablog.com スライダー対応のポップアップのイメージはこちら になります。 ライブラリ…
NodeとMysqlを使ってブラウザにデータを表示させてみようと思います。 大まかな流れとしましては mysqlに接続 データを取得 viewファイルにデータを渡す viewファイルでデータの整形をして表示させる ディレクトリ構成はこのようになります。 root ├ index.j…
今後業務でmysqlを使用していくことが多くなってくると思うので、備忘録としてよく使うコマンドを書いていこうと思います。 ログイン中のユーザーを確認する select USER(); テーブルの中のカラムを確認する desc テーブル名; ユーザーを追加する create use…
今回はExpressでpugを使ってみようと思います。 まずプロジェクトディレクトリを作成してください。 mkdir express_practice その後、npm init -y package.jsonが作成されます。 その後expressをインストールします。 npm i -D express 今回はpugを使用する…
今回はReactの開発において今後積極的に使っていこうと思ったものを紹介したいと思います！ タイトルにも書いてある通り、Fragmentsです。 言葉で説明するよりも下記のコードを見た方が理解し易いです。 import * as React from "react"; class Columns exte…
今回はJavaScriptで簡単なポップアップのテンプレートを作ってみたのでサンプルコードを載せておきます。 <html lang='ja'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>ポップアップのサンプル</title> </meta></meta></meta></head></html>
今回はReact+TypeScript+webpackの環境構築をしていきたいと思います。公式のドキュメントを参考になぞってみました。是非、一読してみてください。 前提としてnodeとnpmはインストール済みで進めていきます。 作業ディレクトリを作成してください。 以下の…
最近、「環境構築とかしたくないー」などと嘆くデザイナーさんがいらっしゃったので、何か手軽にフロントエンドの環境を構築できる方法はないかなーと思っていました。そこで良いツールを見つけました！！ その名もPingyです。 gulpやGruntなどは学習コスト…
ついに webapck4.0.0がリリースされましたね！ 変更点としてよく言われているのが設定ファイルが不要ということです。 この記事では主要な変更点に絞って実際に手を動かしながらwebpack4の特徴を掴んでいくことを目的とします。 では早速、開発用のディレク…
