フロントエンド

1/486ページ

web制作が捗りそうな便利なwebツール【随時更新】

概要 制作時にブクマしとけばいいのについ毎回検索しちゃうものや ブックマークに埋もれて「あのサイト便利だったのになんて言うやつだっけ?」みたいなやつを防ぐ為に 自分及び社内用に作ったリンク集です。 ルール 会員登録やインストール無しで使える無料のwebツール等 ※例外としてGoogleはログイン可能とします。 オンラインプロトタイピング UIデザイン STUDIO オンラインでUIのイメージをある […]

フロントエンドABC

はじめに フロントエンド開発は、非常に多くの技術・ツールが出てきます。 (最近 落ち着いてきたとはいえホント多いです) 大体1年半ほどフロントエンドやっているうちに、「あれ?これA-Zまでいけるんじゃね?」と思ったので書き出してみました。 フロントエンドABC A 名称 概要 URL 使ったことある Angular Google製のフロントエンドMVWフレームワーク https://angular […]

【Vue.js】いつから「フロントエンド開発でTDDができない」と錯覚していた?

Vue.jsのコンポーネント開発をTDDでやってみる ※ TDD (test-driven development): テスト駆動開発 ※ テスト駆動開発は文化です。チームの「状況」「納期」「スキルレベル」、その他いろんな要因が絡んできた結果、そのチームが導入するかどうか決めたらいいと思います。 ※ 例えがいいかはわかりませんが、私は「早起き」と「テスト」は同じようなものだと思っています。「早起き […]

ライブラリ無しのTypeScriptでテーブル or リストのドラッグ&ドロップ並び替えをしてみる

普段はPHPやMySQLを細々と書いている筆者ですが、この前TypeScriptに触れる機会があり、ちょうどテーブル要素の順番を入れ替えて並び順を変えるシステムを作る必要が出てきたので、折角だからとTypeScriptで並び替え機能を実装してみました。 機能要件 リストを格納しているHTML要素(<tbody>とか<ul>とか)と、その中にあるリスト要素(<tr> […]

Visual Studio Code でフロントエンドの開発環境を構築してデバッグする

Webフロントエンドの開発を行ったことがない人向けに、Visual Studio Code でフロントエンドの開発環境構築からデバッグまでを説明します。 また、Google Chrome の デベロッパー ツール(Chrome DevTools) の使い方についても一部のパネルの説明をします。 開発環境の準備 フロントエンド開発で必要な開発環境の準備を行います。 使用するOSは Windows で […]

第2回「Webフロントエンド開発勉強会」

前回に続き、今回は iTunes Search API を利用した 楽曲検索アプリ作成 を実装することを目的として、そのために必要な JavaScript の知識と、JavaScript を学ぶうえで覚えておきたい知識の説明をしていきます。 第1回「Webフロントエンド開発勉強会」を実施していない方は事前に実施しておいてください 変数の巻き上げ JavaScript には、関数内で宣言されたローカ […]

# はじめてのgulpでの環境づくり

はじめに 本当ははじめてじゃないんですが、久しぶりにいじったら忘れていたので勉強しなおしました。 gulpとは gulp.js(公式サイト) node.jsベースのビルドシステムヘルパー。 様々な作業を自動化してくれる(例えばファイルの圧縮とか、Sassのコンパイルとかとか)。 gulpfile.jsというファイルを作って操作して行きます。 この記事の目標 必要な機能をつけた環境を、gulpでスム […]

2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな?

可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用 […]

Vue.jsでv-forをネストする

v-forをnestするために おつかれさまです。先日のVue.js meetup#6はお疲れ様でした。ピンクの髪色のイケメンさんすごく楽しかったです。 記事に間違いがあればPRでもください〜〜〜!!! Vue.js アドベントカレンダー2 15日目の記事です。 https://qiita.com/advent-calendar/2017/vue2 やりたいこと <div v-for> […]

Vue.js 入門 (htmlベースで基本機能を知ろう編)

概要 昨今のフロントエンド界隈ではReact.jsの勢いが凄まじく有名なサービスでの導入事例が目立っています。そんな中、Vue.jsもReactに負けず劣らずの勢いで伸びています。自分自身もReact + Reduxを勉強していましたが半泣き状態だったこともあり、浮気がてらVue.jsを触ってみたら俺でもイケんじゃん!となり一人でも多くの人に自分でもできる!これイイじゃん!となってもらえたらイイな […]

1 486