皆さんこんにちは。OGISHIです。
Webのフロントエンド開発、どのようにされていますか？
テキストエディタでHTMLを書いて、そのファイルをブラウザで開いて結果を確かめながら開発するのはすごく手間ですね。 特にバグがあるときは、見つけ出すこと自体が大変です。
そこで、Web上でHTML,CSS,JavaScriptを書いてすぐに試すことができる codepen.io というサイトをご紹介します。
今回は、サインアップ無しですぐ使えるエディター機能を試してみます。
※でも、書いたコードを保存するにはサインアップが必要です。
気にいった方はぜひ、サインアップして使ってみてください。
メールアドレスとパスワードでの登録の他、Twitter、GitHub、Facebookのアカウントでもサインアップできます。
codepen.ioにアクセスすると以下の画面が表示されます。
画面左上の ”Start Coding” を押してください。
下のようなエディター画面が表示されます。
それぞれ、HTML, CSS, JavaScript を記述するエリアに分かれています。
今回は、Web開発でいつもお世話になっている jQuery と Bootstrap を試したいと思います。
早速書いていきましょう。
と、その前に準備です。まず、jQuery と Bootstrap をロードするように設定します。
画面上の ”Settings” を押してください。以下のような設定画面が表示されます。
”Staff for <head>” の枠に以下の文字列をコピーして貼り付け、Closeボタンを押します。
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
※jQuery CDN のスクリプトは https://code.jquery.com から入手しました。
※Bootstrap CDN のスクリプトは https://getbootstrap.com/docs/4.5/getting-started/download/ から入手しました。
これで準備ができました。
エディター画面にコードを書いてみましょう。
１つのテキスト入力とボタンを配置しました。
入力をJavaScriptで取得して処理したいことが良くありますね。jQueryだと簡単に記述することができます。codepen はそれをすぐに実行してみることができます。
ボタンを押すと入力した文字列がアラート表示されるのが分かると思います。
codepen の利点は、書くそばから実行され、すぐに結果が見られるところです。
JavaScriptを書き損じても、簡単なシンタックスエラーならすぐに教えてくれます。
また、実行しないと分からないバグもエラーを表示してくれるので、ブラウザで確認しているときのような、なぜか動かない、ということがありません。
大きなプログラムも小さなロジックの集まりです。小さく、そして正しく動くコードを積み重ねていくと品質の良いプログラムが出来上がります。
このような便利なツールを利用して、開発を楽しく、らくちんにしていきましょう。
お問い合わせ - お気軽にお問い合わせください -
株式会社 パブリックリレーションズ 〒064-0807 北海道札幌市中央区南７条西１丁目１３番地 弘安ビル５階 011-520-1800 011-520-1802